PDA

View Full Version : Làm sao hiễn thị hệ màu LAB bằng HTML ?



shpy
10-05-2009, 15:18
Mình muốn làm thế này: có 1 ô màu, 3 ô input tương ứng cho L,a,b . Khi người dùng nhập 3 số vào thì ô màu sẽ tự động chuyển màu tương ứng . (Thay vì hệ RGB hay #xxyyzz thì là LAB thôi).

Hướng dẫn cụ thể giúp mình nhé. Vì cái cơ sở dữ liệu này nó dùng toàn bộ hệ màu LAB.

whitepenguin
11-05-2009, 12:45
thì bạn dùng 3 số L,a,b rồi dùng công thức chuyển về hệ RGB hex sau đó
backgound-color="#RGB"

nnanh01
11-05-2009, 13:45
Bạn có thể cho công thức đc không? nếu đc cho luôn công thức chuyển ra CMYK và HSB càng tốt..

Vấn đề bạn nói thì ai cũng biết nhưng công thức kiếm không ra!

Có công thức rồi hãy nói chuyện.

shpy
11-05-2009, 17:41
Mình cũng nghĩ là cần công thức nhưng tìm không ra nên mới nhờ mọi người hướng dẫn giúp. Bạn hướng dẫn chi tiết giúp mình với nhé.
Nhưng nếu hiển thị trực tiếp bằng LAB thì hay quá. Vì mình nghe nói màu LAB hiển thị chính xác lắm.
Thú thật là mình không phải người lập trình hay IT gì hết, chỉ mò mẫm thôi à !

Cảm ơn các bạn nhiều.

snoob
11-05-2009, 17:57
Không được là cái chắc, làm gì có công thức âý. Cách fa màu khác nhau thì sau mà chuyển

shpy
11-05-2009, 19:10
Vậy có cách nào để hiễn thị không bạn? Vì rõ ràng là các phần mềm dưới máy vẫn hiển thị bình thường. Mình có phần mềm nhập 3 số đó vào thì nó hiện cái màu ra. Giờ mình muốn làm lên web thôi ấy mà.

[=========> Bổ sung bài viết <=========]

Ôi cao thủ ơi giúp mình với. Rõ ràng là cái sòt dùng hệ màu LAB để hiển thị lên màn hình. Có cách nào lập trình bằng PHP, HTML hay Java v.v.v Vì nó liên quan tới màu sắc nên giữ được sự chính xác của màu LAB mà không phải convert thì hay quá.



[=========> Bổ sung bài viết <=========]


Mình tìm được cái link này, và các hàm này. Trong hàm, các hàng số được quy ra số hết nên có thiếu chính xác nhưng mình cho là không đáng kể. Nhưng nếu bạn nào làm cho nó chính xác hơn (bằng các hàm phụ hay số thập phân nhiều hơn - hiện giờ là 4) thì cho mình nhé.



http://www.brucelindbloom.com/index.html?Equations.html

public static function rgb2xyz(R:uint,G:uint,B:uint):Object
{
//R from 0 to 255
//G from 0 to 255
//B from 0 to 255
var r:Number = R/255;
var g:Number = G/255;
var b:Number = B/255;

if (r > 0.04045){ r = Math.pow((r + 0.055) / 1.055, 2.4); }
else { r = r / 12.92; }
if ( g > 0.04045){ g = Math.pow((g + 0.055) / 1.055, 2.4); }
else { g = g / 12.92; }
if (b > 0.04045){ b = Math.pow((b + 0.055) / 1.055, 2.4); }
else { b = b / 12.92; }
r = r * 100;
g = g * 100;
b = b * 100;

//Observer. = 2°, Illuminant = D65
var xyz:Object = {x:0, y:0, z:0};
xyz.x = r * 0.4124 + g * 0.3576 + b * 0.1805;
xyz.y = r * 0.2126 + g * 0.7152 + b * 0.0722;
xyz.z = r * 0.0193 + g * 0.1192 + b * 0.9505;

return xyz;
}
public static function xyz2lab(X:Number, Y:Number, Z:Number ):Object
{
const REF_X:Number = 95.047; // Observer= 2°, Illuminant= D65
const REF_Y:Number = 100.000;
const REF_Z:Number = 108.883;
var x:Number = X / REF_X;
var y:Number = Y / REF_Y;
var z:Number = Z / REF_Z;

if ( x > 0.008856 ) { x = Math.pow( x , 1/3 ); }
else { x = ( 7.787 * x ) + ( 16/116 ); }
if ( y > 0.008856 ) { y = Math.pow( y , 1/3 ); }
else { y = ( 7.787 * y ) + ( 16/116 ); }
if ( z > 0.008856 ) { z = Math.pow( z , 1/3 ); }
else { z = ( 7.787 * z ) + ( 16/116 ); }

var lab:Object = {l:0, a:0, b:0};
lab.l = ( 116 * y ) - 16;
lab.a = 500 * ( x - y );
lab.b = 200 * ( y - z );

return lab;
}
public static function lab2xyz( l:Number, a:Number, b:Number ):Object
{
const REF_X:Number = 95.047; // Observer= 2°, Illuminant= D65
const REF_Y:Number = 100.000;
const REF_Z:Number = 108.883;
var y:Number = (l + 16) / 116;
var x:Number = a / 500 + y;
var z:Number = y - b / 200;

if ( Math.pow( y , 3 ) > 0.008856 ) { y = Math.pow( y , 3 ); }
else { y = ( y - 16 / 116 ) / 7.787; }
if ( Math.pow( x , 3 ) > 0.008856 ) { x = Math.pow( x , 3 ); }
else { x = ( x - 16 / 116 ) / 7.787; }
if ( Math.pow( z , 3 ) > 0.008856 ) { z = Math.pow( z , 3 ); }
else { z = ( z - 16 / 116 ) / 7.787; }

var xyz:Object = {x:0, y:0, z:0};
xyz.x = REF_X * x;
xyz.y = REF_Y * y;
xyz.z = REF_Z * z;

return xyz;
}
public static function xyz2rgb(X:Number, Y:Number, Z:Number):Object
{
//X from 0 to 95.047 (Observer = 2°, Illuminant = D65)
//Y from 0 to 100.000
//Z from 0 to 108.883
var x:Number = X / 100;
var y:Number = Y / 100;
var z:Number = Z / 100;

var r:Number = x * 3.2406 + y * -1.5372 + z * -0.4986;
var g:Number = x * -0.9689 + y * 1.8758 + z * 0.0415;
var b:Number = x * 0.0557 + y * -0.2040 + z * 1.0570;

if ( r > 0.0031308 ) { r = 1.055 * Math.pow( r , ( 1 / 2.4 ) ) - 0.055; }
else { r = 12.92 * r; }
if ( g > 0.0031308 ) { g = 1.055 * Math.pow( g , ( 1 / 2.4 ) ) - 0.055; }
else { g = 12.92 * g; }
if ( b > 0.0031308 ) { b = 1.055 * Math.pow( b , ( 1 / 2.4 ) ) - 0.055; }
else { b = 12.92 * b; }
var rgb:Object = {r:0, g:0, b:0}
rgb.r = Math.round( r * 255 );
rgb.g = Math.round( g * 255 );
rgb.b = Math.round( b * 255 );
return rgb;
}


[=========> Bổ sung bài viết <=========]

Thêm cái này. Mình có 1 datbase khác, trong đó

tên mã màu / mã màu
tenmamau1 / 3ae553e9 e3355488 98187c55 392fdc9f
tenmamau2 / 1ef2ded4 da0b5b58 c98684f9 31e2330f
........

Cái mã màu đó là dạng màu gì vậy các bạn ?! Và ..... làm sao chuyển về RGB ?! :D

nnanh01
14-05-2009, 17:42
http://www.brucelindbloom.com/index.html?Equations.html

public static function rgb2xyz(R:uint,G:uint,B:uint):Object
{
//R from 0 to 255
//G from 0 to 255
//B from 0 to 255
var r:Number = R/255;
var g:Number = G/255;
var b:Number = B/255;

if (r > 0.04045){ r = Math.pow((r + 0.055) / 1.055, 2.4); }
else { r = r / 12.92; }
if ( g > 0.04045){ g = Math.pow((g + 0.055) / 1.055, 2.4); }
else { g = g / 12.92; }
if (b > 0.04045){ b = Math.pow((b + 0.055) / 1.055, 2.4); }
else { b = b / 12.92; }
r = r * 100;
g = g * 100;
b = b * 100;

//Observer. = 2°, Illuminant = D65
var xyz:Object = {x:0, y:0, z:0};
xyz.x = r * 0.4124 + g * 0.3576 + b * 0.1805;
xyz.y = r * 0.2126 + g * 0.7152 + b * 0.0722;
xyz.z = r * 0.0193 + g * 0.1192 + b * 0.9505;

return xyz;
}
public static function xyz2lab(X:Number, Y:Number, Z:Number ):Object
{
const REF_X:Number = 95.047; // Observer= 2°, Illuminant= D65
const REF_Y:Number = 100.000;
const REF_Z:Number = 108.883;
var x:Number = X / REF_X;
var y:Number = Y / REF_Y;
var z:Number = Z / REF_Z;

if ( x > 0.008856 ) { x = Math.pow( x , 1/3 ); }
else { x = ( 7.787 * x ) + ( 16/116 ); }
if ( y > 0.008856 ) { y = Math.pow( y , 1/3 ); }
else { y = ( 7.787 * y ) + ( 16/116 ); }
if ( z > 0.008856 ) { z = Math.pow( z , 1/3 ); }
else { z = ( 7.787 * z ) + ( 16/116 ); }

var lab:Object = {l:0, a:0, b:0};
lab.l = ( 116 * y ) - 16;
lab.a = 500 * ( x - y );
lab.b = 200 * ( y - z );

return lab;
}
public static function lab2xyz( l:Number, a:Number, b:Number ):Object
{
const REF_X:Number = 95.047; // Observer= 2°, Illuminant= D65
const REF_Y:Number = 100.000;
const REF_Z:Number = 108.883;
var y:Number = (l + 16) / 116;
var x:Number = a / 500 + y;
var z:Number = y - b / 200;

if ( Math.pow( y , 3 ) > 0.008856 ) { y = Math.pow( y , 3 ); }
else { y = ( y - 16 / 116 ) / 7.787; }
if ( Math.pow( x , 3 ) > 0.008856 ) { x = Math.pow( x , 3 ); }
else { x = ( x - 16 / 116 ) / 7.787; }
if ( Math.pow( z , 3 ) > 0.008856 ) { z = Math.pow( z , 3 ); }
else { z = ( z - 16 / 116 ) / 7.787; }

var xyz:Object = {x:0, y:0, z:0};
xyz.x = REF_X * x;
xyz.y = REF_Y * y;
xyz.z = REF_Z * z;

return xyz;
}
public static function xyz2rgb(X:Number, Y:Number, Z:Number):Object
{
//X from 0 to 95.047 (Observer = 2°, Illuminant = D65)
//Y from 0 to 100.000
//Z from 0 to 108.883
var x:Number = X / 100;
var y:Number = Y / 100;
var z:Number = Z / 100;

var r:Number = x * 3.2406 + y * -1.5372 + z * -0.4986;
var g:Number = x * -0.9689 + y * 1.8758 + z * 0.0415;
var b:Number = x * 0.0557 + y * -0.2040 + z * 1.0570;

if ( r > 0.0031308 ) { r = 1.055 * Math.pow( r , ( 1 / 2.4 ) ) - 0.055; }
else { r = 12.92 * r; }
if ( g > 0.0031308 ) { g = 1.055 * Math.pow( g , ( 1 / 2.4 ) ) - 0.055; }
else { g = 12.92 * g; }
if ( b > 0.0031308 ) { b = 1.055 * Math.pow( b , ( 1 / 2.4 ) ) - 0.055; }
else { b = 12.92 * b; }
var rgb:Object = {r:0, g:0, b:0}
rgb.r = Math.round( r * 255 );
rgb.g = Math.round( g * 255 );
rgb.b = Math.round( b * 255 );
return rgb;
}


Có cái code chuyển rồi thì cứ thế mà dùng. Chuyển thành ngôn ngữ nào bạn thích. Sự sai sót là phần ngàn mà hơi đâu so đo


tên mã màu / mã màu
tenmamau1 / 3ae553e9 e3355488 98187c55 392fdc9f
tenmamau2 / 1ef2ded4 da0b5b58 c98684f9 31e2330f
........

Cái mã màu đó là dạng màu gì vậy các bạn ?! Và ..... làm sao chuyển về RGB ?! :D

Mình nghĩ là CMYK, còn chuyển như thế nào thì....google tiếp đi. :D :D :D

shpy
14-05-2009, 21:35
Có cái code chuyển rồi thì cứ thế mà dùng. Chuyển thành ngôn ngữ nào bạn thích. Sự sai sót là phần ngàn mà hơi đâu so đo

Ôi, đúng là sai sót ít của mình là ~400/35000 dòng mã màu + sản phẩm! Nhưng 400 đó gây lỗi. Và mình phát hiện ra , sửa về giá trị 0 hết (do thực ra nó là 0, nhưng vì sai sót đó xảy ra con số -0,*** ! MÀ RGB đâu có số âm - đã kiểm tra 20% của 400 mã đó lại bằng photoshop : ok hết)




Mình nghĩ là CMYK, còn chuyển như thế nào thì....google tiếp đi. :D :D :D
Mình cũng nghĩ là CMYK nhưng mà làm kiểu gì cũng không ra.
Rõ ràng nó có 4 nhóm. mỗi nhóm lại có 8 ký tự hex bằng 4 cặp !! Chả biết đâu mà lần.
Nếu 4 nhóm đổi về Dec thì ra 4 con số hàng triệu. Nếu mỗi nhóm cắt ra từng 2 ký tự thì cũng không được vì có số >100 . Mà CMYK chỉ từ 0-100 . Và lúc đó thì có tới 16 số !! bó giò !!!

Mình search google cái này từ rất lâu rồi mà không ra. Bạn nào giúp mình với.

Thật ra database này mình trích từ phần mềm phối màu sơn nước của các hãng. Cho nên mình nghĩ do màu sơn yêu cầu chính xác họ đã dùng hệ màu "cao cấp" nào đó chăng ?!
Và chắc chắn soft dùng dãy code màu đó và nó cũng phải convert vì trong soft có file colorconverter.dll và colorpreview.ocx (soft vừa exe vừa flash)

===
Với công thức ở trên từ LAB sang RGB mình đã chuyển thành công cho 1 hệ máy pha màu. Mục đích là làm 7 hệ máy pha màu còn lại trên thị trường. Code đã xong, giờ chỉ còn chỉnh hình thức trang và quan trọng là database màu (cái này option trên trang nhưng khách hàng lại thích xem). 8 Hệ máy thì phân ra 3 nhóm database "dùng" RGB, LAB và cái quỷ kia !

Trang mình làm được đây, các bạn thích thì ghé thăm chơi nha
www. sonnuoc .com/colorworld.php

nnanh01
15-05-2009, 10:06
trnag wweb tui không biết xài :)



http://www.datmaychu.net/videos/GH_vietnam_piakos_03.avi

shpy
15-05-2009, 20:44
trnag wweb tui không biết xài :)



http://www.datmaychu.net/videos/GH_vietnam_piakos_03.avi

À, đó là trang mình dùng cho khách hàng kiểm tra mã màu, xem trước màu (tuơng đối) của màu sơn họ dự định sẽ dùng máy pha hệ đó mà pha. Do đó, phải nhập vào ô kia 1 cái gì đó nó sẽ tìm trong tên hay ký hiệu của màu.

Công việc kế tiếp của trang là tạo 1 color picker để khách hàng chọn màu.


======
Còn cái mớ colorcode kia ai biết nó là gì thì giúp mình với. Chắc chắn nó là hex vì mình kiểm tra toàn bộ (bằng Exel) >18000 mã của nó thì không có cặp 2 ký tự nào nằm ngoài ff cả ! Và kiểm tra toàn bộ datbase (nhỏ xíu)thì chỉ có mỗi cột đó là có ý nghĩa mang nội dung màu hiển thị thôi (tên cột cũng là ColorCode).

nnanh01
18-05-2009, 17:31
Chắc chắn nó là hex vì mình kiểm tra toàn bộ (bằng Exel) >18000 mã của nó thì không có cặp 2 ký tự nào nằm ngoài ff cả ! Và kiểm tra toàn bộ datbase (nhỏ xíu)thì chỉ có mỗi cột đó là có ý nghĩa mang nội dung màu hiển thị thôi (tên cột cũng là ColorCode).


Bạn nói y như...thầy bói. hi hi... Có hệ số nào lớn hơn Hex đâu mà bảo nó phải nằm ngoài ff. ẹc ẹc

Còn vụ kia lâu vậy mà không ai trả lời chắc là khó tìm rồi. Bạn search by English thử xem thế nào!

shpy
18-05-2009, 17:42
Ờ ha. Chắc do quáng !!!
Nhưng mà vì ngay từ đầu mình chỉ "đoán" là nó dùng để lưu mã màu nên cũng muốn chắc chắn dự đoán. Chứ nó mà có chữ x y z gì nữa trong đó thì nó không phải mã hẽ ==> lúc đó nó đã bị mã hoá hay sao đó.

Mình vẫn theo "trường phái" CMYK và mở rộng ra là nó là HEX của số float ở DEC. Nhưng vẫn ko tìm được.
Eng thì tìm mỏi mắt, chóng mặt rồi !! Thua luôn.

nnanh01
20-05-2009, 17:49
Cái script bên topic kia có định cho chạy trên FF không?? hehe, nếu có thì xem comment bên đó! kaka.

Bà con ai muốn yongs cafe free của shpy thì cùng vào.