Có cách nào để biết màu hex HTML nhạt hay tối

Question

Tôi muốn màu phông chữ trên trang html của tôi thay đổi thành màu đen nếu màu nền của hàng có màu sáng và đen nếu nền màu trắng là

Tôi đang sử dụng jsp trong trang của mình. là có một cách để nói một cái gì đó như thế này

nếu màu < ## 0686FF sau đó fontcolour = # 000000 ví dụ

chỉnh sửa: tìm kiếm một scriptlet hoặc javascript

Answer 1

Giải pháp này sử dụng lớp java.awt.Color để lấy giá trị độ sáng của màu và sử dụng để xác định màu nền nào sẽ được sử dụng.

chỉnh sửa: Giải pháp này khác với một số giải pháp khác vì các giải pháp khác sẽ xem xét một số màu sáng để tối ví dụ. màu đỏ chính (# FF0000). Trong khi giải pháp này, sẽ xem xét màu đỏ chính là một trong những màu sắc tươi sáng nhất bạn có thể có. Tôi cho rằng nó phụ thuộc vào sở thích của bạn. Bạn có muốn đọc màu đỏ trên màu đen hoặc đỏ trên nền trắng?

String fontColor = "#0cf356"; 

// remove hash character from string 
String rawFontColor = fontColor.substring(1,fontColor.length()); 

// convert hex string to int 
int rgb = Integer.parseInt(rawFontColor, 16); 

Color c = new Color(rgb); 

float[] hsb = Color.RGBtoHSB(c.getRed(), c.getGreen(), c.getBlue(), null); 

float brightness = hsb[2]; 

if (brightness < 0.5) { 
    // use a bright background 
} else { 
    // use a dark background 
} 

HSB là viết tắt của Hue, Saturation, Brightness - brightness cũng được gọi là độ sáng. Với các giá trị của lớp Màu nằm trong khoảng từ 1 đến 0. Ergo, độ sáng 0,5 là điểm giữa giữa các màu sáng nhất và các màu tối nhất).

Sự tương tác giữa màu sắc, độ bão hòa và độ sáng phức tạp hơn một chút so với màu đỏ, xanh dương và xanh lá cây. Sử dụng this thí nghiệm công cụ với nhiều màu sắc khác nhau và tìm ra mối quan hệ giữa RGB và HSB

Answer 2

By "màu" chúng ta thường có nghĩa là 24 -bit RGB màu: 1 byte (8 bit) cho màu đỏ, xanh lá cây, xanh dương. Tức là, mỗi kênh có giá trị từ 0-255 hoặc 0x00 đến 0xff trong màn hình thập lục phân.

Màu trắng là tất cả các kênh đầy đủ: #FFFFFF, màu đen là tất cả các kênh bị tắt: # 000000. Rõ ràng, màu sáng hơn có nghĩa là các giá trị cao hơn trong các kênh, màu tối hơn có nghĩa là các giá trị thấp hơn trong các kênh.

Làm thế nào chính xác bạn chọn thuật toán của bạn là tùy thuộc vào bạn, đơn giản sẽ là:

//pseudo-code 
if (red + green + blue <= (0xff * 3)/2) //half-down, half-up 
    fontcolor = white; 
else 
    fontcolor = black; 

Edit: Người hỏi yêu cầu ví dụ hoàn chỉnh hơn, vì vậy anh/cô ấy có thể có sự khởi đầu tốt hơn, vì vậy ở đây nó là:

public static void main(String[] args) throws IOException { 

String value = 
     // new Scanner(System.in).nextLine(); //from input 
     "#112233"; //from constant 
int red = Integer.parseInt(value.substring(1, 1 + 2), 16); 
int green = Integer.parseInt(value.substring(3, 3 + 2), 16); 
int blue = Integer.parseInt(value.substring(5, 5 + 2), 16); 

System.out.println("red = " + Integer.toHexString(red) 
     + ", green = " + Integer.toHexString(green) 
     + ", blue = " + Integer.toHexString(blue)); 

if (red + green + blue <= 0xff * 3/2) 
    System.out.println("using white color #ffffff"); 
else 
    System.out.println("using black color #000000"); 

String colorBackToString = "#" + Integer.toHexString(red) + 
     Integer.toHexString(green) + 
     Integer.toHexString(blue); 
System.out.println("color was " + colorBackToString); 
} 

Nó tạo ra:

red = 11, green = 22, blue = 33 
using white color #ffffff 
color was #112233

Và hiển thị kỹ thuật tách màu theo định dạng #aabbcc thành kênh rgb, tham gia sau (nếu cần), v.v.

Answer 3

Cách tiếp cận tự nhiên hơn có thể đang sử dụng vùng màu HSL. Bạn có thể sử dụng thành phần thứ ba ("nhẹ nhàng") để tìm ra màu sắc của ánh sáng. Điều đó sẽ làm việc cho hầu hết các mục đích.

Rất nhiều mô tả ở đó bằng googling. Về cơ bản, bạn lấy thành phần màu có giá trị cao nhất (giả sử là màu đỏ) và thành phần có giá trị thấp nhất (màu xanh lá cây). Trong trường hợp này:

L = (red + green)/(255*2.0) 

Giả sử bạn trích màu sắc của bạn như các giá trị từ 0 đến 255. Bạn sẽ nhận được một giá trị giữa 0 và 1. Một màu ánh sáng có thể là bất kỳ màu sắc với một nhẹ nhàng trên một giá trị độc đoán nhất định (ví dụ, 0.6).

Answer 4

function isTooLightYIQ(hexcolor) 
{ 
     var r = parseInt(hexcolor.substr(0,2),16); 
     var g = parseInt(hexcolor.substr(2,2),16); 
     var b = parseInt(hexcolor.substr(4,2),16); 
     var yiq = ((r*299)+(g*587)+(b*114))/1000; 
     return yiq >= 128; 
} 

Các bảng chọn màu sắc được sử dụng trong http://www.careerbless.com/services/css/csstooltipcreator.php làm việc tốt