CSS định nghĩa 148 tên màu mà trình duyệt nhận dạng bằng từ khóa thay vì mã số. Thay vì viết #ff6347 trong stylesheet, bạn có thể viết Tomato. Thay vì #6a5acd, bạn có thể viết SlateBlue. Các tên này được chuẩn hóa trong CSS Color Level 3 (2011) và Level 4 (2022), kế thừa từ 17 màu gốc của CSS 2.1 và 140 tên màu X11 từ các hệ thống Unix đời đầu.
Công cụ tra cứu tên màu nhận một giá trị hex hoặc RGB bất kỳ và tìm tên màu CSS gần nhất với nó. Thuật toán so khớp tính khoảng cách giữa hai màu trong không gian RGB, thường là khoảng cách Euclid: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Màu có khoảng cách nhỏ nhất so với giá trị đầu vào sẽ được chọn. Nếu khoảng cách bằng 0, đầu vào của bạn trùng khớp hoàn toàn với tên màu đó.
Điều này hữu ích khi bạn muốn CSS dễ đọc và tự giải thích. Một quy tắc như background-color: Tomato truyền đạt ý định nhanh hơn background-color: #ff6347. Nó cũng giúp khi bạn cần đề cập đến màu bằng lời trong buổi đánh giá thiết kế, kiểm tra khả năng truy cập, hoặc tài liệu. Thay vì nói 'màu đỏ cam đó,' bạn có thể nói 'Tomato.'
Tại sao dùng công cụ tra cứu tên màu này?
Tra cứu tên màu gần nhất bằng tay nghĩa là phải duyệt qua bảng tham chiếu 148 mục và ước lượng giá trị hex bằng mắt. Công cụ này thực hiện phép tính khoảng cách cho bạn và trả về 5 kết quả gần nhất kèm mã hex chính xác và điểm khoảng cách.
🔍
Xác định bất kỳ màu nào theo tên
Dán mã hex từ file thiết kế, bộ chọn màu, hoặc ảnh chụp màn hình và nhận ngay tên màu CSS gần nhất. Công cụ trả về 5 kết quả được xếp hạng theo khoảng cách để bạn chọn kết quả phù hợp nhất.
🔒
Xử lý ưu tiên quyền riêng tư
Toàn bộ quá trình so khớp màu chạy trong trình duyệt của bạn. Không có giá trị màu nào được gửi đến máy chủ. Công cụ hoạt động ngoại tuyến sau khi trang đã tải.
⚡
Kết quả tức thì
Phép tính khoảng cách chạy sau mỗi lần gõ phím. Thay đổi một ký tự trong ô nhập hex và kết quả được xếp hạng cập nhật ngay lập tức, không có độ trễ.
📋
Sao chép tên và mã hex
Nhấp vào bất kỳ kết quả nào để sao chép tên màu hoặc giá trị hex vào clipboard. Dán trực tiếp vào CSS, biến Sass, cấu hình Tailwind, hoặc các trường trong công cụ thiết kế.
Các trường hợp sử dụng công cụ tra cứu tên màu
Viết CSS dễ đọc hơn
Các lập trình viên frontend thay thế mã hex bằng tên màu sẽ có stylesheet dễ duyệt hơn trong quá trình đánh giá code. Tên màu truyền đạt ý định mà không cần cài extension xem trước màu.
Gắn nhãn phản hồi API
Các kỹ sư backend xây dựng API liên quan đến màu có thể trả về nhãn dễ đọc bên cạnh mã hex. Tìm tên màu CSS gần nhất giúp người dùng có điểm tham chiếu quen thuộc mà không cần duy trì từ điển tên màu riêng.
Tài liệu khả năng truy cập
Kỹ sư QA ghi lại các vấn đề độ tương phản màu có thể đề cập đến màu theo tên trong báo cáo lỗi. Viết 'văn bản Crimson trên nền DarkSlateGray không đạt độ tương phản AA' rõ ràng hơn so với trích dẫn cặp mã hex.
Chú thích biểu đồ trực quan hóa dữ liệu
Kỹ sư dữ liệu gắn nhãn chuỗi biểu đồ bằng tên màu tạo ra chú thích dễ đọc mà không cần mẫu màu. Tên 'CornflowerBlue' hữu ích hơn trong ngữ cảnh in hoặc đơn sắc so với '#6495ed.'
Bàn giao thiết kế
Khi một nhà thiết kế chia sẻ màu từ Figma hoặc Sketch dưới dạng giá trị hex, lập trình viên có thể tra cứu tên CSS gần nhất và thảo luận về nó theo tên trên Slack hoặc trong bình luận pull request.
Học màu CSS
Sinh viên khám phá CSS có thể nhập các giá trị hex tùy ý và khám phá tên màu nào tồn tại gần đó. Duyệt qua kết quả khoảng cách giúp làm quen với 148 từ khóa màu tích hợp sẵn.
Tham chiếu tên màu CSS theo nhóm
Đặc tả CSS Color Level 4 định nghĩa 148 từ khóa tên màu. Bảng dưới đây sắp xếp chúng theo nhóm tông màu, với số lượng và một vài tên đầu tiên mỗi nhóm. Mỗi tên trong danh sách là từ khóa màu CSS hợp lệ, hoạt động trên tất cả trình duyệt hiện đại.
Nhóm màu
Số lượng
Tên ví dụ
Red / Pink
14
IndianRed, LightCoral, Salmon, DarkSalmon, Crimson, Red, +8 more
Orange
5
Coral, Tomato, OrangeRed, DarkOrange, Orange
Yellow
10
Gold, Yellow, LightYellow, LemonChiffon, PapayaWhip, Moccasin, +4 more
Green
19
GreenYellow, Chartreuse, LawnGreen, Lime, LimeGreen, SpringGreen, +13 more
Blue / Cyan
24
Aqua, Cyan, LightCyan, PaleTurquoise, Aquamarine, Turquoise, +18 more
Purple
19
Lavender, Thistle, Plum, Violet, Orchid, Fuchsia, +13 more
Brown
17
Cornsilk, BlanchedAlmond, Bisque, NavajoWhite, Wheat, BurlyWood, +11 more
Gray / White
27
White, Snow, HoneyDew, MintCream, Azure, AliceBlue, +21 more
Khoảng cách màu: Euclid RGB so với tri giác
Phương pháp đo khoảng cách màu ảnh hưởng đến tên màu nào được báo cáo là gần nhất. Có hai cách tiếp cận và chúng có thể cho kết quả khác nhau cho cùng một đầu vào.
Khoảng cách Euclid RGB
Coi R, G, B là các trục trong không gian 3D và tính khoảng cách đường thẳng: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Đơn giản, nhanh và được công cụ này sử dụng. Hoạt động tốt cho hầu hết các trường hợp thực tế nhưng có thể khác với tri giác của con người ở một số chuyển tiếp từ xanh lá sang xanh lam, vì mắt người nhạy cảm hơn với màu xanh lá so với xanh lam.
CIEDE2000 (Delta E)
Công thức khoảng cách tri giác được định nghĩa bởi Ủy ban Chiếu sáng Quốc tế (CIE). Nó chuyển đổi màu sang không gian màu CIELAB trước, sau đó áp dụng các hiệu chỉnh về độ sáng, sắc độ và tông màu để phù hợp với tri giác con người. Chính xác hơn cho các trường hợp biên nhưng phức tạp hơn đáng kể để tính toán. Cần thiết cho so khớp màu công nghiệp; quá mức cần thiết khi chỉ tìm từ khóa CSS gần nhất.
Ví dụ code
Tìm tên màu CSS gần nhất theo lập trình bằng khoảng cách Euclid trong không gian RGB. Mỗi ví dụ nhận một chuỗi hex và trả về tên màu gần nhất từ đặc tả CSS.
JavaScript
// Euclidean distance in RGB space
function nearestCssColor(hex) {
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
let bestName = ''
let bestDist = Infinity
for (const [name, value] of Object.entries(cssColors)) {
const r2 = parseInt(value.slice(1, 3), 16)
const g2 = parseInt(value.slice(3, 5), 16)
const b2 = parseInt(value.slice(5, 7), 16)
const dist = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
if (dist < bestDist) { bestDist = dist; bestName = name }
}
return bestName
}
nearestCssColor('#6366f1') // → "SlateBlue"
nearestCssColor('#1e293b') // → "DarkSlateGray"
package main
import (
"fmt"
"math"
"strconv"
)
type CSSColor struct {
Name string
R, G, B int
}
var colors = []CSSColor{
{"Crimson", 220, 20, 60},
{"SlateBlue", 106, 90, 205},
{"Tomato", 255, 99, 71},
// ... full list
}
func hexToRGB(hex string) (int, int, int) {
r, _ := strconv.ParseInt(hex[1:3], 16, 64)
g, _ := strconv.ParseInt(hex[3:5], 16, 64)
b, _ := strconv.ParseInt(hex[5:7], 16, 64)
return int(r), int(g), int(b)
}
func nearest(hex string) string {
r, g, b := hexToRGB(hex)
best := ""
bestDist := math.MaxFloat64
for _, c := range colors {
d := math.Sqrt(float64((r-c.R)*(r-c.R) + (g-c.G)*(g-c.G) + (b-c.B)*(b-c.B)))
if d < bestDist {
bestDist = d
best = c.Name
}
}
return best
}
func main() {
fmt.Println(nearest("#6366f1")) // → SlateBlue
}
Câu hỏi thường gặp
CSS hỗ trợ bao nhiêu tên màu?
CSS Color Level 4 định nghĩa 148 từ khóa tên màu. Bao gồm 17 màu gốc của CSS 2.1 (như black, white, red, blue), 140 tên màu X11 được thêm vào CSS 3, và từ khóa RebeccaPurple được thêm vào CSS 4 để tưởng nhớ con gái của tác giả CSS Eric Meyer. Tất cả 148 tên không phân biệt chữ hoa thường và hoạt động trên mọi trình duyệt hiện đại.
Sự khác biệt giữa công cụ tra cứu tên màu và công cụ chuyển đổi màu là gì?
Công cụ chuyển đổi màu biến đổi màu giữa các định dạng: hex sang RGB, HSL sang hex, RGB sang CMYK. Công cụ tra cứu tên màu làm điều khác. Nó tìm kiếm trong 148 tên màu CSS và trả về màu có khoảng cách nhỏ nhất so với đầu vào. Kết quả là một từ khóa (như Tomato hoặc SlateBlue), không phải biểu diễn số.
Khoảng cách Euclid RGB chính xác đến mức nào cho việc so khớp màu?
Khoảng cách Euclid RGB cho kết quả chính xác với phần lớn các truy vấn màu. Nó có thể tạo ra kết quả khớp không mong đợi trong dải xanh lá - xanh lam vì mắt người cảm nhận màu xanh lá mạnh hơn xanh lam, nhưng mô hình RGB xử lý cả ba kênh như nhau. Đối với các tác vụ phát triển web như tìm từ khóa CSS gần nhất, sự khác biệt này hiếm khi quan trọng trong thực tế.
Tôi có thể dùng tên màu CSS trong JavaScript không?
Có. API CSS.supports(), ngữ cảnh canvas 2D và thuộc tính fill/stroke của SVG đều chấp nhận tên màu. Bạn có thể đặt element.style.backgroundColor = 'Tomato' trực tiếp. Tên màu cũng hoạt động trong thuộc tính tùy chỉnh CSS và với phương thức getComputedStyle(), mặc dù trình duyệt trả về giá trị tính toán theo định dạng rgb() bất kể bạn đặt như thế nào.
Tại sao một số màu có tên kỳ lạ như PapayaWhip hoặc BlanchedAlmond?
Những tên này đến từ cơ sở dữ liệu màu X11, được tạo ra cho X Window System trên các máy trạm Unix vào những năm 1980. Các tên được chọn bởi tác giả gốc mà không có quy ước đặt tên chính thức. Khi CSS áp dụng màu X11 trong Level 3, các tên hiện có được giữ nguyên để đảm bảo tương thích ngược. Kết quả là sự pha trộn giữa tên mô tả (DarkRed), tham chiếu thực phẩm (PapayaWhip, Chocolate, Salmon), và thuật ngữ địa lý (Peru, Sienna).
RebeccaPurple có phải là màu CSS chính thức không?
Có. RebeccaPurple (#663399) được thêm vào đặc tả CSS Color Level 4 năm 2014. Màu được đề xuất bởi CSS Working Group để tưởng nhớ Rebecca Meyer, con gái của tác giả CSS Eric Meyer, qua đời vì ung thư não lúc sáu tuổi. Màu này được hỗ trợ trên tất cả trình duyệt phát hành sau năm 2014.
Điều gì xảy ra khi mã hex đầu vào cách đều hai tên màu?
Khi hai tên màu có khoảng cách Euclid giống hệt nhau so với đầu vào, kết quả phụ thuộc vào thứ tự duyệt. Công cụ này duyệt danh sách màu CSS theo thứ tự bảng chữ cái và giữ kết quả khớp đầu tiên tìm thấy. Trong thực tế, hòa chính xác rất hiếm vì 148 tên màu phân bố không đều trong không gian RGB. Hầu hết các mã hex đầu vào đều có một kết quả gần nhất duy nhất.