Cách dùng Tìm tên màu
- Nhập mã HEX (ví dụ
#55AAEE) hoặc bất kỳ màu CSS nào, hoặc dùng bộ chọn màu. - Xem tên gần nhất và mức độ khớp (ΔE — càng thấp càng gần).
- Sao chép tên biến có sẵn cho CSS, SCSS, JavaScript hoặc Tailwind.
- Để đặt tên cho cả bảng màu, dán nhiều màu vào ô hàng loạt và sao chép khối
:rootđược tạo ra.
Vì sao nên đặt tên cho màu?
Mã HEX như #55AAEE không mang ý nghĩa gì khi review code, nhưng --cerulean thì có. Tên màu mô tả giúp design token dễ đọc, giúp designer và developer nói cùng một ngôn ngữ về một màu, và ngăn các biến như --blue-2-new-final len lỏi vào codebase.
Cách so khớp hoạt động
Công cụ so sánh màu của bạn với khoảng 5.000 tên được chọn tay từ dự án mã nguồn mở color-names (giấy phép MIT). Khoảng cách được đo trong không gian màu OKLab đồng đều về mặt cảm nhận, nên tên “gần nhất” là tên thực sự trông giống nhất, chứ không chỉ là tên có con số gần nhất. Giá trị ΔEOK cho biết mức độ gần: dưới khoảng 2 là gần như không phân biệt được, 2–5 là khá gần, còn trên 5 thì tên chỉ mang tính mô tả tương đối.
Bạn cũng sẽ thấy từ khóa màu gần nhất trong 148 từ khóa màu CSS chính thức (như royalblue hoặc tomato), và có thể dùng trực tiếp trong CSS.
Quy ước đặt tên cho token
| Ngữ cảnh | Quy ước | Ví dụ |
|---|---|---|
| Thuộc tính tùy chỉnh CSS | kebab-case | --ocean-blue |
| Biến SCSS | kebab-case có tiền tố | $color-ocean-blue |
| JavaScript / TypeScript | camelCase | oceanBlue |
| Khóa theme Tailwind | kebab-case | bg-ocean-blue |
Tên mô tả và tên ngữ nghĩa
Tên mô tả (ocean blue) rất phù hợp cho bảng màu gốc. Các component thường nên tham chiếu đến token ngữ nghĩa (--color-primary, --color-danger) trỏ tới các tên mô tả, nhờ đó bạn có thể đổi thương hiệu mà không phải đổi tên hàng loạt. Tạo thang sắc độ đầy đủ cho từng màu gốc với Tailwind Color Generator.
Cũng được tìm dưới tên: tên màu theo mã hex, color name finder, mã hex này là màu gì, tên biến css màu, design tokens.
Các công cụ dùng kèm tốt với Tìm tên màu
- Trích xuất bảng màu từ ảnh — Tìm bảng màu của bất kỳ hình ảnh nào: ảnh chụp, logo, ảnh chụp màn hình hay bản thiết kế.
- Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
- CSS Variables sang Tailwind — Chuyển các biến màu :root thành theme Tailwind chỉ với một lần dán.
- Trộn màu — Chọn hai màu và số bước để có các màu chuyển tiếp pha đều nhau, phù hợp cho gradient, viền, biểu đồ và trạng thái hover.
Câu hỏi thường gặp
#008080 là màu gì?
#008080 là Teal — đây cũng là một trong các từ khóa màu CSS chính thức. Dán bất kỳ mã nào ở trên để nhận diện.Đây có phải tên màu chính thức không?
tomato) là chính thức trong CSS. Các tên còn lại đến từ danh sách cộng đồng được chọn lọc và chỉ là nhãn mô tả, không phải tiêu chuẩn.Kết quả khớp chính xác đến mức nào?
Tôi có thể đặt tên cho nhiều màu cùng lúc không?
:root kết quả. Tên trùng sẽ được thêm hậu tố số.