Tra tên màu trong design | HEX → tên CSS, moodboard và giao tiếp designer

Moodboard trên Pinterest: năm ô xanh gần giống nhau. Standup: “dùng xanh dương ấy”. Ba ngày sau staging có ba HEX khác nhau vì mỗi người nhớ một “sky / dodger / royal”. Bài này tập trung góc tra tên màu trong quy trình design — không phải handoff brand sheet → Tailwind (đã có bài riêng), mà: đặt tên, giao tiếp, và chọn swatch trước khi viết token.

Ai cần đọc

• Designer / UI học việc đặt tên layer Figma cho dễ tìm
• Frontend freelance nhận mô tả màu bằng tiếng Việt/Anh, chưa có style guide
• Sinh viên làm đồ án: cần gọi màu trong báo cáo thay vì chỉ dán screenshot
• PM review UI: muốn nói “crimson CTA” thay vì đọc #DC143C

---

Vì sao design cần “tên” chứ không chỉ HEX

1. Não nhớ tên nhanh hơn mã — navy dễ hình dung hơn #000080 khi brainstorm.
2. Ticket và chat — “đổi sang crimson” ngắn hơn paste hex mỗi lần.
3. Tìm trong Figma — search “Royal” ra đúng swatch nếu đã đặt tên có chủ đích.
4. Học CSS — ~147 named colors là vốn từ chung giữa designer và engineer.

Giới hạn: Brand thật hiếm khi trùng exact keyword CSS. Tên = nhãn giao tiếp; HEX đã chốt = nguồn sự thật khi code.

---

CSS named colors: vốn từ dùng được ngay

Trình duyệt hiểu tên như property value:

.btn-danger { color: crimson; }      /* #DC143C */
.link { color: dodgerblue; }         /* #1E90FF */
.badge { background: gold; }         /* #FFD700 */
.brand-demo { color: rebeccapurple; } /* #663399 */

Bạn không cần thuộc cả 147 màu. Thuộc 10–15 màu trên + biết cách tra là đủ cho họp design hàng ngày.

---

Quy trình: từ ảnh / eyedropper → tên → swatch

1. Lấy HEX đáng tin

Thứ tự:

1. Style Figma / token đã có
2. Eyedropper trên mock (chú ý compression ảnh)
3. Export từ tool design
4. Đoán từ tên — hạng cuối

2. Tra tên gần nhất

Mở tìm tên màu / HEX:

• Nhập #4169E1 → gần royalblue
• Hoặc nhập teal → ra HEX chuẩn để so với swatch đang có

Tool so khoảng cách trong không gian màu với bảng named colors. Kết quả là tên gần nhất, không phải chứng nhận brand.

3. Ghi glossary một dòng

Tên gọi họp	HEX chốt	Ghi chú
Royal / Primary	#4169E1	Khớp CSS royalblue — dùng keyword OK nếu cố ý
Coral brand	#FF6F61	Không dùng CSS coral (#FF7F50)
Xám chữ phụ	#708090	slategray

4. Đặt tên swatch Figma

• Tốt: Primary / Royal Blue (#4169E1)
• Tạm được: Blue/500 nếu đã có scale
• Tránh: Blue 2, Color, Untitled — search chết

Nếu HEX không trùng keyword CSS, đừng đặt layer đúng chữ coral / navy — sau này junior sẽ color: coral và lệch brand.

---

Moodboard: đặt tên trước khi code

Freelancer Việt Nam hay nhận “mood xanh–be” từ client không có brand book. Quy trình gọn:

1. Chọn 5–7 ô từ moodboard, eyedropper ra HEX
2. Tra tên từng ô trên Color Name Search
3. Nhóm: primary / secondary / neutral / danger / success
4. Chỉ một HEX cho mỗi vai trò — bỏ ô “gần giống”
5. Đưa bảng tên+HEX vào proposal trước khi mở Figma chi tiết

---

Case study 1: “Xanh Zalo-ish” trong ticket

PM viết: CTA xanh giống Zalo. Dev lấy dodgerblue. Designer vốn lấy #0068FF từ screenshot. Lệch rõ trên mobile OLED.

Cách xử lý:

1. Eyedropper screenshot → HEX thật
2. Tra tên: có thể gần blue / không khớp named color đẹp
3. Glossary: CTA Zalo-ref (#0068FF) — không đổi thành keyword CSS
4. Token: --color-cta: #0068FF

Tên CSS gần nhất chỉ để nói “xanh bão hòa kiểu blue chuẩn web”, không để thay mã.

Case study 2: Sinh viên báo cáo đồ án

Hội đồng hỏi “vì sao chọn màu này?”. Trả lời #3B82F6 khô. Trả lời: “gần Dodger Blue / blue-500 kiểu Tailwind, tạo cảm giác tin cậy cho form đăng ký” — dễ thuyết phục hơn. Tra tên trước khi viết slide 2 phút.

---

Lỗi thường gặp khi “tra tên màu design”

Lỗi	Hậu quả	Cách tránh
Tin tên layer Figma = CSS keyword	Ship sai HEX	Luôn đọc mã cạnh tên
Dùng named color cho brand gần đúng	Lệch 5–10% saturation	Token = HEX đo được
Đặt 4 swatch “Blue*” không số HEX	Team chọn lung tung	Glossary 1 dòng/màu
Eyedrop từ JPG nén mạnh	Noise màu	Lấy từ vector/Figma
Quên contrast	CTA đẹp nhưng fail WCAG	Đo contrast sau khi chốt HEX

---

Checklist 5 phút trước khi gửi palette cho dev

1. Mỗi vai trò (primary, text, danger…) chỉ còn một HEX
2. Mỗi HEX có tên gọi họp + mã trong description Figma
3. Đã tra Color Name Search nếu cần tên tiếng Anh chuẩn
4. Keyword CSS chỉ dùng khi HEX khớp hoặc khi cố ý prototype
5. Đã xem trên màn hình tối/sáng thật (không chỉ thumbnail moodboard)

Cách dùng tool Kawa

1. Mở Color Name Search
2. Dán HEX → xem tên gần nhất
3. Hoặc gõ tên (crimson, teal) → lấy HEX chuẩn để so
4. Copy cặp tên+HEX vào ticket / Sheet

Không cần đăng ký; xử lý trên trình duyệt — an toàn khi palette client chưa public.

---

Khi nào dừng dùng tên CSS

• Design system đã có token semantic (color.action.primary)
• Brand guide cấm lệch ΔE so với pantone/HEX gốc
• Theme dark/light dùng OKLCH / relative color — named sRGB cổ điển không đủ

Khi đó tên CSS vẫn hữu ích trong onboarding (“primary gần royal blue”) nhưng không xuất hiện trong bundle production.

---

Liên kết liên quan

• Công cụ tìm tên màu / HEX
• Đổi HEX ↔ RGB ↔ HSL nếu cần không gian màu khác
• Danh sách công cụ

Tóm lại: Bookmark khi bạn đang đặt tên swatch và nói chuyện design. Tra tên để họp nhanh; giữ HEX để ship đúng.