Tìm tên màu CSS — Màu có tên gần nhất từ mã Hex
Nhập mã màu hex hoặc sử dụng bộ chọn màu để tìm tên màu CSS4 gần nhất. Công cụ so sánh màu của bạn với tất cả 148 màu CSS có tên tiêu chuẩn bằng cách sử dụng khoảng cách màu nhận thức và xếp hạng 5 màu gần nhất. Hoàn hảo để tìm tên màu dễ đọc cho mã và tài liệu.
5 màu CSS có tên gần nhất:
Cách hoạt động
Màu CSS có tên: lịch sử ngắn gọn
Màu CSS có tên đã phát triển qua nhiều phiên bản đặc tả. CSS 1 gốc (1996) chỉ định nghĩa 16 màu cơ bản: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white và yellow. CSS 2 thêm orange. CSS 3 mở rộng danh sách lên 147 màu dựa trên danh sách màu X11, bản thân danh sách này có nguồn gốc từ cơ sở dữ liệu màu hệ thống X Window được duy trì tại MIT vào những năm 1980.
CSS Color Level 4 thêm một tên nữa: rebeccapurple (#663399). Màu này được thêm để tôn vinh Rebecca Alissa Meyer, con gái của nhà phát triển web Eric Meyer, người qua đời vì ung thư não năm 2014 ở tuổi 6. Màu yêu thích của cô ấy là màu tím, và nhóm làm việc CSS đã bỏ phiếu để đưa tên cô ấy vào tiêu chuẩn như một tưởng niệm. Với sự bổ sung này, đặc tả CSS4 định nghĩa chính xác 148 màu có tên, tập hợp đầy đủ mà công cụ này tìm kiếm.
Khoảng cách màu được tính như thế nào
Chỉ so sánh giá trị RGB với khoảng cách Euclid không phù hợp với nhận thức của con người: mắt chúng ta nhạy cảm hơn với sự khác biệt trong xanh lá cây so với xanh dương, và độ nhạy thay đổi theo phạm vi độ sáng. Công cụ này sử dụng công thức Euclid có trọng số dựa trên 'Colour metric' của Thiadmer Riemersma, điều chỉnh trọng số của các kênh R, G và B dựa trên giá trị đỏ trung bình. Kết quả gần hơn nhiều với cách con người thực sự nhận thức sự khác biệt màu sắc.
Công thức sử dụng: ΔE = √[(2 + R̄/256)·ΔR² + 4·ΔG² + (2 + (255-R̄)/256)·ΔB²], trong đó R̄ là thành phần đỏ trung bình của hai màu. Đây là thước đo nhận thức đơn giản hóa; khoa học màu chuyên nghiệp sử dụng các phép tính CIELAB ΔE tính đến độ sáng, sắc độ và màu sắc riêng biệt, nhưng cho mục đích đặt tên thực tế, thước đo đơn giản hóa cho kết quả trực quan cho hầu hết các màu.
Khi nào sử dụng màu có tên trong CSS
Màu có tên hữu ích nhất cho tạo mẫu nhanh, khả năng đọc mã và gỡ lỗi. Viết `color: tomato` nhanh hơn để gõ và dễ nhớ hơn `color: #FF6347`. Chúng cũng hữu ích trong ngữ cảnh giáo dục, trực quan hóa dữ liệu (nơi tên ngữ nghĩa giúp truyền đạt ý nghĩa) và trong các hệ thống thiết kế nơi một bộ màu có tên hạn chế tạo thành bảng màu. W3C khuyến nghị sử dụng màu có tên trong các ví dụ và hướng dẫn để cải thiện khả năng đọc.
Đối với các hệ thống thiết kế sản xuất, màu có tên hiếm khi là bảng màu chính: giá trị hex tùy chỉnh, HSL hoặc tên token thiết kế được ưa thích. Tuy nhiên, biết màu có tên gần nhất với giá trị tùy chỉnh rất hữu ích cho tài liệu, chú thích màu trong đánh giá mã và khi bạn muốn tên gần đúng nhanh để giao tiếp bằng lời về màu sắc. Công cụ này thu hẹp khoảng cách bằng cách tìm tên CSS mô tả tốt nhất bất kỳ màu hex tùy ý nào.
Câu hỏi thường gặp
›Có bao nhiêu màu CSS có tên?
CSS Color Level 4 định nghĩa 148 màu có tên. Bao gồm 16 màu cơ bản gốc từ CSS 1, orange từ CSS 2, 130 màu dựa trên X11 từ CSS 3 và rebeccapurple được thêm vào CSS 4 để tôn vinh Rebecca Meyer. Lưu ý rằng aqua và cyan là bí danh (cùng hex #00FFFF), cũng như fuchsia và magenta (#FF00FF).
›Tên màu CSS có phân biệt chữ hoa chữ thường không?
Không. Tên màu CSS không phân biệt chữ hoa chữ thường theo đặc tả. 'Red', 'RED', 'red' và 'rEd' đều tham chiếu đến cùng một màu. Theo quy ước, chữ thường là kiểu phổ biến nhất trong CSS hiện đại.
›rebeccapurple là gì?
rebeccapurple (#663399) được thêm vào CSS Color Level 4 để tưởng nhớ Rebecca Alissa Meyer, con gái của chuyên gia CSS Eric Meyer, người qua đời vì ung thư não năm 2014 ở tuổi 6. Màu yêu thích của cô ấy là màu tím, và nhóm làm việc CSS đã tôn vinh cô ấy bằng cách đặt tên màu theo tên cô ấy. Đây là màu duy nhất được thêm vào CSS 4 và màu có tên mới đầu tiên kể từ CSS 2.
›Tại sao màu CSS có tên không bao gồm tất cả các màu có thể?
148 màu có tên là một tập hợp được tuyển chọn dựa trên danh sách màu X11 lịch sử. Chúng bao gồm các màu phổ biến nhưng để lại nhiều màu không có tên: không có tên CSS cho hầu hết các sắc thái xanh lam-xanh lá cây, hồng-cam, hoặc nâu-đỏ. Đối với công việc thiết kế chính xác, mã hex, rgb() hoặc hsl() được sử dụng thay thế.
›Sự khác biệt giữa gray và grey trong CSS là gì?
Cả hai cách viết đều được chấp nhận trong CSS. 'gray' là cách viết tiếng Anh Mỹ chính thức trong đặc tả, nhưng 'grey' (tiếng Anh Anh) cũng là từ đồng nghĩa hợp lệ cho cùng một màu (#808080). Tương tự, 'lightgray'/'lightgrey', 'darkgray'/'darkgrey', 'dimgray'/'dimgrey', 'slategray'/'slategrey' và 'darkslategray'/'darkslategrey' đều hợp lệ.
›Độ chính xác của kết quả khớp màu gần nhất là bao nhiêu?
Kết quả khớp sử dụng công thức khoảng cách nhận thức cân bằng các kênh RGB theo độ nhạy của mắt người. Đối với hầu hết các màu hàng ngày — đỏ, xanh dương, xanh lá cây bão hòa — màu có tên gần nhất sẽ cảm thấy trực quan chính xác. Đối với các màu rất mờ, tối hoặc nâu, nhận thức của con người biến đổi nhiều hơn và màu có tên 'gần nhất' có thể cảm thấy sai theo chủ quan. Điểm khoảng cách (Δ) được hiển thị giúp bạn đánh giá mức độ gần của kết quả khớp: càng nhỏ càng tốt.
›Tôi có thể sử dụng công cụ này để tìm tên màu có thể truy cập cho văn bản alt không?
Có. Công cụ này hữu ích để viết tên màu trong văn bản alt, tài liệu hoặc chú thích thiết kế. Nếu bạn cần mô tả màu của phần tử UI cho người đọc không thể nhìn thấy nó, màu CSS có tên gần nhất cung cấp tên được nhận biết rộng rãi. Đối với các sắc thái rất cụ thể, kết hợp tên CSS với bổ ngữ (ví dụ: 'xanh mòng két đậm' cho #008080).
›Màu hex nào có kết quả khớp chính xác với tên CSS?
Bất kỳ màu CSS có tên tiêu chuẩn nào trong số 148 màu đều sẽ tạo ra kết quả khớp chính xác. Ví dụ phổ biến: red = #FF0000, blue = #0000FF, white = #FFFFFF, black = #000000, coral = #FF7F50, tomato = #FF6347, skyblue = #87CEEB. Bạn có thể kiểm tra bất kỳ hex nào bằng cách nhập nó và tìm thông báo 'Kết quả khớp chính xác'.
Công cụ liên quan
Cập nhật lần cuối: