Tra mã màu CSS named | Tìm tên màu chuẩn và HEX tương ứng【2026】

Junior hỏi trên Slack nhóm freelance: “dodgerblue có phải #0000FF không?” — Không. #0000FF là blue; dodgerblue là #1E90FF. Nhầm keyword là chuyện thường khi mới học CSS hoặc khi copy màu từ bài tutorial nước ngoài.

Bài này tập trung tra cứu và dùng đúng CSS named colors. Nếu bạn đang map guideline client / Figma sang token, đọc bài tìm tên màu từ brand sheet — góc khác, cùng họ công cụ.

Ai cần bài này

• Sinh viên / fresher học color, background-color, muốn nhớ tên chuẩn
• Freelancer viết landing demo / CodePen trước khi có design system
• Designer–dev cần “tên gọi chung” khi chưa có brand HEX
• Người đọc docs MDN thấy rebeccapurple và muốn biết mã

Không phải bài chọn palette thương hiệu hay đo contrast WCAG chi tiết (dùng tool contrast riêng).

---

CSS named colors là gì?

Trình duyệt hiểu một tập keyword map 1–1 sang màu sRGB cố định. Ví dụ:

Keyword	HEX chuẩn	Ghi chú nhanh
crimson	#DC143C	đỏ đậm, hay dùng demo alert
dodgerblue	#1E90FF	xanh sáng — không phải blue
gold	#FFD700	vàng kim
rebeccapurple	#663399	tưởng niệm Eric Meyer’s daughter
coral	#FF7F50	cam san hô — hay bị nhầm với brand “Coral”
teal	#008080	xanh lục lam cổ điển

Bạn viết:

.badge {
  color: white;
  background-color: dodgerblue; /* = #1E90FF */
}

tương đương:

.badge {
  color: #fff;
  background-color: #1e90ff;
}

Cả hai hợp lệ. Khác biệt nằm ở khả năng đọc và khả năng khớp brand — không nằm ở “trình duyệt có hiểu không”.

---

Hai chiều tra cứu (và khi nào dùng chiều nào)

Thực hành trên Kawa

Mở Color Name Search:

1. Gõ rebeccapurple → nhận #663399
2. Gõ #1E90FF hoặc 1e90ff → nhận dodgerblue
3. Gõ #4F46E5 (Indigo kiểu UI hiện đại) → khả năng cao không phải named exact; tool gợi ý tên gần — dùng để nói chuyện, đừng thay token production bằng keyword đó

Công cụ xử lý local trên trình duyệt (không cần đăng ký), phù hợp lúc ngồi quán cà phê chỉ có laptop và đề bài CSS.

---

Khi nào nên dùng keyword — checklist

Nên / chấp nhận được

• Bài tập, workshop, slide dạy CSS
• Prototype ném đi trong ngày (wire màu “cho có”)
• Comment trong PR: /* gần tomato #FF6347 — chưa chốt brand */
• Kiểm tra nhanh “trình duyệt có render màu không” trước khi gắn design token

Không nên

• UI sản phẩm đã có brand palette
• Design system / Tailwind theme chính thức
• Email HTML client (một số client cũ quirk với named colors — HEX an toàn hơn)
• Khi designer nói một cái tên tiếng Anh trùng keyword nhưng giá trị Figma khác

Quy tắc một câu: keyword = ngôn ngữ spec CSS; HEX/token = ngôn ngữ sản phẩm.

---

Case study

Case 1 — Đề bài “dùng navy và gold”

Sinh viên viết background: darkblue vì “nghe gần navy”. navy chuẩn là #000080; darkblue là #00008B. Hai màu khác nhau trên màn hình chiếu lớp.

Cách làm: tra navy và gold trên tool → copy HEX nếu đề yêu cầu mã; hoặc giữ đúng keyword nếu đề cho phép named colors.

Case 2 — Freelance landing “làm đẹp trong 2 giờ”

Chưa có Figma. Dev chọn teal, seashell, slategray để có hierarchy tạm. Client thích hướng đó rồi gửi brand sau.

Cách làm: giữ keyword trong nhánh demo/; khi có brand, thay bằng token HEX và không cố map ngược mọi thứ về named colors.

Case 3 — Code review: color: red trong component production

Reviewer hỏi: red CSS hay red brand? red = #FF0000 — thường quá gắt so với danger token hiện đại (#DC2626 kiểu…).

Cách làm: đổi sang --color-danger / class semantic; để red trong tài liệu học thôi.

---

Nhầm lẫn tên thường gặp

Người nói / viết	Hay hiểu nhầm thành	Spec CSS thực tế
“blue”	mọi xanh dương	chỉ #0000FF
“sky blue” (có dấu cách)	skyblue	keyword liền: skyblue → #87CEEB
“gray” vs “grey”	hai màu	cùng giá trị nếu cùng cấp (gray/grey)
“purple”	rebeccapurple	purple = #800080; rebecca khác
Brand “Coral”	coral	chỉ đúng nếu HEX = #FF7F50

Khi nghi ngờ: tra keyword hoặc HEX, đừng đoán từ tiếng Anh đời thường.

---

Snippet thực dụng

<!-- Demo palette bằng named colors — học / workshop -->
<div class="swatch" style="background: coral"></div>
<div class="swatch" style="background: teal"></div>
<div class="swatch" style="background: rebeccapurple"></div>

/* Production: đừng hard-code keyword brand-sensitive */
:root {
  --color-accent: #0d9488; /* từng “gần teal” lúc demo — giờ là token */
}

.button-accent {
  background: var(--color-accent);
}

---

Lỗi thường gặp

• Coi tên layer Figma = CSS keyword
• Dùng khoảng cách (“light blue”) như thể là named color
• Thay HEX production bằng tên gần nhất từ tool (sai mục đích “nearest”)
• Mix grey và gray trong cùng file gây noise review
• Quên rằng alpha (transparent, currentColor) không phải “màu named” kiểu coral

---

Tóm tắt 4 bước

1. Quyết định: đang học/demo hay ship brand
2. Tra name↔HEX trên /vi/tools/color-name-search/
3. Exact match → dùng keyword hoặc HEX chuẩn thoải mái trong phạm vi demo/học
4. Nearest only → giữ HEX gốc; tên chỉ để giao tiếp

Liên kết liên quan

• Color Name Search — HEX ↔ tên màu CSS
• Tìm tên màu / HEX từ brand sheet — góc handoff Figma / Tailwind
• Danh sách công cụ