Trình tìm tên màu CSS

Cách sử dụng

1. Nhập một giá trị màu: nhập hoặc dán mã hex (#3b82f6), giá trị RGB hoặc HSL, hoặc nhấp vào bộ chọn để chọn một màu trực quan.
2. Lấy tên màu: tên màu CSS được đặt tên gần nhất, một tham chiếu Pantone và tên có thể đọc được hiển thị ngay lập tức.
3. Khám phá các màu lân cận: xem một bảng các màu được đặt tên tương tự để tìm khớp tốt nhất hoặc một lựa chọn thay thế cho thiết kế của bạn.

Tại sao sử dụng tra cứu tên màu?

Khi bạn làm việc với một hệ thống thiết kế, tài liệu trợ năng hoặc giao tiếp với khách hàng, có một tên có thể đọc được cho một màu hữu ích hơn nhiều so với mã hex. «Cornflower Blue» giao tiếp rõ ràng; «#6495ed» thì không. Công cụ này tạo cầu nối giữa các giá trị máy và tên người, giúp các nhà thiết kế tài liệu hóa các bảng màu, giải thích các lựa chọn màu và tìm tên CSS tiêu chuẩn cho các giá trị hex của họ.

Tính năng

• Tên CSS gần nhất: tìm tên màu CSS được đặt tên gần nhất (trong số 148 màu CSS đầy đủ) cho bất kỳ mã hex hoặc RGB nào.
• Nhiều định dạng đầu vào: chấp nhận hex (#rrggbb), RGB, HSL và HSV.
• Bộ chọn màu: sử dụng bộ chọn gốc để chọn lựa trực quan.
• Các màu lân cận: hiển thị các màu được đặt tên tương tự để tìm các lựa chọn thay thế.
• Metadata màu: hiển thị sắc thái, độ bão hòa, độ sáng và độ sáng cảm nhận.

Câu hỏi thường gặp

Công cụ tìm tên gần nhất như thế nào?

Công cụ tính khoảng cách cảm nhận giữa màu của bạn và tất cả các màu CSS được đặt tên bằng công thức chênh lệch CIEDE2000, tương ứng tốt với cảm nhận của con người về sự khác biệt màu sắc. Khớp gần nhất được trả về dưới dạng tên.

Các màu này có giống với từ khóa CSS không?

Có. Công cụ bao gồm tất cả 148 màu được đặt tên CSS chuẩn (từ đặc tả CSS Color Module Level 4) như «rebeccapurple», «dodgerblue» và «tomato». Bạn có thể sử dụng chúng trực tiếp trong CSS thay cho các giá trị hex.

Nếu màu của tôi không có tên chính xác thì sao?

Hầu hết các màu không có tên CSS chính xác. Công cụ trả về màu được đặt tên cảm nhận gần nhất và hiển thị sự khác biệt (delta E) để cho bạn biết khớp gần đến mức nào.

Từ X11 đến CSS Color Module Level 4: con đường dài tới «rebeccapurple»

Các màu được đặt tên trong CSS mà hầu hết mọi người sử dụng ngày nay được kế thừa từ danh sách màu của X Window System (rgb.txt), được tập hợp tại MIT cho môi trường đồ họa X11 vào năm 1986. Danh sách phát triển hữu cơ trong thập kỷ tiếp theo, đầy những cái tên kỳ quặc và khó hiểu như «papayawhip», «peachpuff», và «papayawhip». Khi Mosaic (1993) và sau đó là Netscape Navigator (1994) chuẩn hóa màu sắc trong HTML, họ đã giữ lại một tập con của các tên X11. CSS1 (tháng 12 năm 1996) chỉ chính thức hóa 16 màu được đặt tên khớp với bảng màu VGA gốc: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. HTML 4 (1997) đã thêm «orange» làm màu thứ 17. CSS2.1 (tháng 6 năm 2011) giữ lại 17. CSS3 Color Module (tháng 6 năm 2014, hoàn thiện 2018) đã thêm phần còn lại của các tên X11, đưa tổng số lên 147. Vào tháng 6 năm 2014, màu «rebeccapurple» (#663399) được thêm vào để tôn vinh con gái Eric Meyer, Rebecca, người đã qua đời vì ung thư não; cô bé đã nói rằng tím là màu yêu thích của mình. Nó được thêm vào CSS Color Module Level 4, đưa tổng số lên 148. Giá trị hex #663399 là màu CSS được đặt tên duy nhất được thêm vào để tưởng nhớ một người cụ thể.

Màu CSS ngoài các màu được đặt tên: oklch, lab, color()

Các màu được đặt tên vẫn chỉ bao phủ một góc của những gì màn hình hiện đại có thể hiển thị. CSS Color Module Level 4 (Candidate Recommendation, bản thảo hiện tại) giới thiệu một tập hợp cú pháp màu rộng hơn nhiều. lab() và lch() cho phép bạn chỉ định màu trong CIE Lab và LCh, là những không gian màu đồng nhất về mặt cảm nhận. oklab() và oklch() (Björn Ottosson, 2020) là các phiên bản cải tiến xử lý màu bão hòa sáng tốt hơn; oklch(70% 0.15 240) là một màu xanh trời sống động. color(display-p3 1 0.5 0) cung cấp truy cập đến gamut màu P3 rộng hơn mà iPhone, iPad và Mac hiện đại có thể hiển thị, khoảng 25% bão hòa hơn sRGB mà các màu được đặt tên bị giới hạn. Cú pháp màu tương đối (oklch(from blue calc(l - 10%) c h)) cho phép bạn dẫn xuất một màu từ một màu khác. Hỗ trợ trình duyệt cho cả bốn hàm màu đạt >90% vào năm 2024. Cho các thiết kế thời 2025, sử dụng các màu được đặt tên cho việc tạo nguyên mẫu, sau đó port sang oklch() cho các bảng màu sản xuất hoạt động trên toàn phổ gamut màu.

«Màu gần nhất» thực sự được tính toán như thế nào

«Khoảng cách» giữa hai màu không phải là một khái niệm duy nhất. Các công thức khác nhau cho các câu trả lời khác nhau và mỗi cái phù hợp với các trường hợp sử dụng khác nhau.

• Khoảng cách Euclidean trong sRGB. sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²). Nhanh, nhưng không phù hợp với nhận thức của con người, hai màu trông giống hệt nhau có thể cách xa trong RGB và hai màu trông rất khác nhau có thể gần nhau. Tránh cho các truy vấn «tên gần nhất».
• Delta E CIE76. Cùng công thức Euclidean nhưng trong không gian CIE Lab, gần như đồng nhất về mặt cảm nhận. Gần như, không chính xác. Xấp xỉ đầu tiên tốt; ΔE ≤ 2,3 được coi là «vừa đáng chú ý» trong điều kiện kiểm soát.
• Delta E CIEDE2000. Tiêu chuẩn ngành hiện tại, được CIE xuất bản vào năm 2001. Thêm các hiệu chỉnh cho độ sáng, độ chroma và xoay tông màu phù hợp tốt hơn với cách con người thực sự cảm nhận sự khác biệt màu sắc. ΔE2000 ≤ 1 không nhận thấy được đối với hầu hết người quan sát; ≤ 5 trông giống một màu tương tự. Công cụ này sử dụng CIEDE2000 cho «kết hợp gần nhất».
• Khoảng cách Euclidean trong OKLab. Không gian màu 2020 của Björn Ottosson được thiết kế để khoảng cách Euclidean đơn giản gần đúng ΔE2000 sát. Nhanh hơn ΔE2000 và chất lượng cảm nhận tương tự. Ngày càng là mặc định trong công cụ thiết kế.

Nơi đặt tên màu thực sự hữu ích

• Tài liệu hệ thống thiết kế. «Hành động chính: Royal Blue (#4169e1)» đọc dễ hơn chỉ giá trị hex trong thông số kỹ thuật thiết kế và hướng dẫn thương hiệu.
• Giao tiếp với khách hàng. «Hãy sử dụng coral và steel blue» hoạt động trong cuộc họp; «#ff7f50 và #4682b4» thì không. Tên neo cuộc trò chuyện trước khi bạn cam kết giá trị chính xác.
• Kiểm toán khả năng truy cập. Khi ghi lại màu nào thất bại độ tương phản WCAG so với nền, có tên con người làm cho báo cáo kiểm toán có thể sử dụng được bởi những người không phải nhà phát triển.
• Dịch mã legacy. Các tệp CSS cũ thường sử dụng màu được đặt tên. Khi di chuyển sang token thiết kế hoặc bảng màu tùy chỉnh, bạn cần biết «lightseagreen» và «mediumaquamarine» ánh xạ sang màu chính xác nào.
• Nguyên mẫu nhanh. Gõ background: tomato nhanh hơn chọn hex từ bánh xe màu. Các màu được đặt tên là mặc định ngạc nhiên tốt cho việc phác thảo bố cục trước khi chọn màu cuối cùng.
• Đặt tên màu thương hiệu. Nếu màu đỏ thương hiệu của bạn gần với crimson (#dc143c), gọi nó là «Brand Crimson» nội bộ dễ nhớ hơn «Red 8».
• Khớp mẫu màu. Các nhà thiết kế dán một màu được lấy mẫu từ ảnh hoặc ảnh chụp màn hình và hỏi «màu này gần với cái gì?» để bắt đầu một bảng màu từ tham chiếu thế giới thực.

Sai lầm và bất ngờ với các màu được đặt tên CSS

• gray vs grey. CSS chấp nhận cả hai cách viết, nhưng danh sách X11 ban đầu chỉ có «gray». «grey» được thêm vào sau. lightgray và lightgrey là bí danh, cùng màu. Bám vào một cách viết trong codebase.
• Các biến thể «dark» không phải lúc nào cũng tối hơn cơ sở. darkgray (#a9a9a9) thực sự sáng hơn gray (#808080), một đặc điểm lịch sử nổi tiếng của danh sách X11 mà CSS đã thừa kế. Cùng cái bẫy với darkgrey.
• aqua và cyan là cùng màu. Cả hai đều là #00ffff. CSS bao gồm cả hai như bí danh legacy. fuchsia và magenta cũng giống hệt (#ff00ff).
• «orange» là một màu được đặt tên CSS nhưng các biến thể «pink» khác nhau. orange = #ffa500. Nhưng không có một «pink» duy nhất, CSS có pink, lightpink, hotpink, deeppink, palevioletred, tất cả đều khác biệt đáng chú ý.
• «Màu gần nhất» phụ thuộc vào những gì não bạn nghĩ màu sắc là. Hai người lấy mẫu cùng một chip sơn có thể chọn các tên khác nhau. CIEDE2000 nắm bắt nhận thức trung bình, không phải của bạn. Luôn kiểm tra các mẫu màu trực quan thay vì chỉ tin vào con số khoảng cách.
• Các màu được đặt tên đều là sRGB. Các màu được đặt tên CSS được định nghĩa là bộ ba sRGB 8 bit. Trên màn hình P3 hoặc BT.2020, các màu sống động như tomato và fuchsia có thể trông xỉn hơn cùng tông màu được chỉ định trong color(display-p3 ...). Đối với nguyên mẫu, được; đối với sản xuất trên phần cứng hiện đại, port sang cú pháp wide-gamut.
• Chỉ các màu được đặt tên không vượt qua kiểm tra khả năng truy cập. yellow trên white không thể đọc được; red trên black là biên giới. Trạng thái được đặt tên của màu không nói gì về độ tương phản. Luôn kết hợp một lựa chọn màu với kiểm tra độ tương phản WCAG.

Các câu hỏi thường gặp khác

Ai thực sự đã chọn các tên như «papayawhip» và «peachpuff»?

Không một người duy nhất; tệp rgb.txt của X11 đã phát triển thông qua nhiều người đóng góp tại MIT và các nhà cung cấp Unix khác vào cuối những năm 1980. Nhiều tên đến từ Sinclair Paints và các danh mục sơn khác của thời đại đó. Việc đặt tên không chính thức và không nhất quán có chủ đích, người đóng góp đặt tên màu sắc theo các vật thể họ có trên bàn hoặc ngoài cửa sổ. Không có ủy ban trung tâm. Khi CSS3 áp dụng danh sách X11 toàn bộ vào năm 2014, tất cả các đặc điểm kỳ quặc đã đi kèm.

Tôi có nên sử dụng rebeccapurple trong sản xuất không?

Hỗ trợ trình duyệt là phổ quát kể từ năm 2014, vì vậy nó hoạt động ở mọi nơi. Nó chính xác tương đương với #663399. Sử dụng bất kỳ tên nào đọc dễ hơn trong mã của bạn; «rebeccapurple» là một sự tri ân nhỏ nhưng có thể nhìn thấy trên mỗi trang sử dụng nó.

Sự khác biệt giữa CIEDE2000 và các công thức ΔE đơn giản hơn là gì?

ΔE76 (khoảng cách Euclidean trong CIE Lab) nhanh và cho các câu trả lời hợp lý nhưng đánh giá thấp sự khác biệt trong màu bão hòa và đánh giá quá cao trong màu tối. CIEDE2000 thêm năm thuật ngữ hiệu chỉnh (cho độ sáng, chroma, xoay tông màu và hai thuật ngữ chéo) phù hợp với dữ liệu thực nghiệm về cách mọi người thực sự cảm nhận sự khác biệt màu sắc. Sửa chữa là đáng kể; cùng một cặp màu có thể cho ΔE76 = 4 và ΔE2000 = 2 (phán quyết cảm nhận rất khác nhau). Đối với «màu này có đủ gần với màu kia không», sử dụng ΔE2000. Đối với xử lý hàng loạt nơi tốc độ quan trọng, khoảng cách Euclidean OKLab là một xấp xỉ nhanh.

Tôi có thể thêm tên màu tùy chỉnh của riêng mình không?

Không như từ khóa CSS, danh sách màu được đặt tên được cố định bởi spec. Nhưng CSS Custom Properties (biến) cho bạn cùng công thái học: :root { --brand-coral: #ff7f50; } rồi color: var(--brand-coral). Token thiết kế về cơ bản là ý tưởng này được chính thức hóa, và các hệ thống thiết kế hiện đại sử dụng chúng phổ biến.

Dữ liệu màu của tôi có được gửi đi đâu không?

Không. Tất cả chuyển đổi màu và tính toán khoảng cách chạy trong trình duyệt của bạn. Mở tab Mạng trong DevTools và chọn một màu, bạn sẽ thấy không có yêu cầu đi ra. An toàn cho các màu thương hiệu chưa phát hành hoặc bất kỳ công việc bảng màu nội bộ nào.