Tìm tên màu / HEX từ brand sheet | CSS, Figma và Tailwind【2026】

Slack 2 giờ sáng: “CTA dùng coral như brand sheet nhé.” Dev mở MDN, thấy coral → #FF7F50, ship. Sáng hôm sau designer mở staging và nhăn mặt — style Figma Coral / Brand là #FF6F61. Từ khớp. Màu không khớp.

Bài này dành cho freelancer, agency và team outsourcing Việt Nam nhận brand guideline PDF / Figma từ client (thường tiếng Anh hoặc song ngữ), rồi phải đưa vào Tailwind + CSS mà không bị “coral-gate”.

Ai cần đọc

• Frontend nhận handoff Figma nhưng ticket chỉ viết “dùng sky blue / coral”
• Designer đặt tên style trùng keyword CSS mà giá trị khác spec
• Team build design system nhỏ: token semantic + docs cho PM không kỹ thuật
• Sinh viên / junior map palette competitor sang moodboard rồi cần “tên gọi chung”

---

Ba bộ từ vựng trong một cuộc họp

Bộ từ	Ví dụ	Nguồn đúng
CSS named colors	coral, tomato, teal	Spec CSS Color — giá trị sRGB cố định
Brand / design token	color.cta.primary, brand/coral-600	Design system / Figma styles
Nói chuyện thường	“cam hoàng hôn”, “xanh Zalo-ish”	Họp — chưa có số thì chưa ship

CSS names hữu ích khi dạy CSS hoặc prototype ném đi. UI sản phẩm nên neo vào token → HEX (hoặc OKLCH). Từ ngữ đời thường chỉ được phép tồn tại đến khi ai đó gắn nó vào token.

---

Brand sheet → HEX → Tailwind: quy trình 6 bước

1. Lấy HEX từ nguồn có thẩm quyền

Thứ tự ưu tiên:

1. Figma Color styles / Variables (copy HEX)
2. Brand PDF có bảng Pantone/HEX đã chốt
3. Eyedropper trên logo SVG đã export đúng màu
4. Không ưu tiên: đoán từ tên layer, từ MDN, từ “màu gần trên Tailwind UI”

2. Tra tên CSS gần nhất (tuỳ chọn, để giao tiếp)

Khi PM / client nói tiếng Anh (“more like salmon”), bạn cần một điểm tham chiếu chung — không phải nguồn sự thật cho production.

Mở Color Name Search:

1. Dán #FF6F61 (hoặc ff6f61)
2. Tool trả tên CSS gần nhất trong ~147 named colors (khoảng cách Euclidean trên RGB)
3. Ghi chú: brand coral ≈ CSS tomato/coral (gần) — production vẫn #FF6F61

Nhập ngược skyblue → HEX #87CEEB nếu cần đối chiếu keyword.

Công cụ chạy local trên trình duyệt — phù hợp khi palette client chưa public.

3. Đặt token semantic, tránh đụng keyword

:root {
  /* Tốt: semantic + HEX gốc từ brand sheet */
  --color-cta-primary: #ff6f61;
  --color-cta-primary-hover: #e85a50;
  /* nearest CSS (docs only): ~ coral/tomato — không dùng keyword trong UI */
}

// tailwind.config — ví dụ
theme: {
  extend: {
    colors: {
      brand: {
        cta: "#ff6f61",
        "cta-hover": "#e85a50",
      },
    },
  },
},

<!-- Dùng token, không dùng bg-orange-500 “cho gần” nếu chưa đối chiếu HEX -->
<button class="bg-brand-cta hover:bg-brand-cta-hover text-white">Đặt lịch</button>

Tránh: đặt token tên coral hoặc red trừ khi giá trị cố ý bằng keyword CSS. Dev grep coral phải ra file token, không ra tranh luận MDN.

4. Gắn HEX ngay trong ticket / PR

Công thức một dòng trong Linear/Jira/Notion:

CTA = coral brand (#FF6F61) → --color-cta-primary / bg-brand-cta

Không để một mình từ “coral”.

5. Dark mode = cùng tên semantic, HEX khác

danger không phải một HEX mãi mãi. Light và dark cần cặp giá trị dưới cùng key. Named CSS không giải quyết được chuyện này.

6. Đo contrast trước khi merge

Tên màu không chứa thông tin WCAG. Hai đỏ “cùng họ tên” vẫn có thể fail 4.5:1 trên nền trắng. Sau khi chốt HEX, kiểm bằng công cụ độ tương phản.

---

Ví dụ số: từ PDF brand → class Tailwind

Brand sheet (rút gọn):

Semantic	Tên marketing	HEX
Primary CTA	Coral	#FF6F61
Link	Ocean	#0EA5E9
Success	Mint	#10B981
Text on CTA	White	#FFFFFF

Bước tra tên (giao tiếp):

HEX	Tên CSS gần (minh hoạ)	Ghi chú
#FF6F61	gần tomato / coral	Không ship keyword
#0EA5E9	gần deepskyblue	Khác skyblue #87CEEB
#10B981	gần mediumseagreen	Không dùng lime

Kết quả code: token brand.cta = #FF6F61. Trong họp với client: “coral brand gần tomato CSS, nhưng token là FF6F61.”

---

Case study: handoff agency → freelancer Nest/Next

Bối cảnh: Agency TP.HCM gửi Figma; freelancer remote implement landing. Style tên Sky / Primary = #38BDF8. Ticket chỉ viết “sky blue như design”.

Lần 1 (sai): Dev dùng bg-sky-400 (Tailwind) hoặc CSS skyblue → màu lệch nhẹ hoặc lệch rõ; QA client reject.

Lần 2 (đúng):

1. Copy HEX từ Figma Variables
2. Tra tên màu → gần deepskyblue / lightskyblue — chỉ để chat
3. extend.colors.brand.sky = "#38BDF8"
4. PR description ghi bảng semantic → HEX → class
5. Contrast chữ trên nút đã Pass AA

Thời gian thêm ~10 phút; tránh một vòng revise “sai màu brand”.

---

Lỗi thường gặp

Triệu chứng	Nguyên nhân	Cách xử lý
Staging ≠ Figma dù “đúng tên”	Dùng CSS keyword thay HEX style	Copy HEX từ style, không từ MDN
Tailwind “gần đúng” nhưng client chê	Scale TW ≠ brand	Custom token hoặc arbitrary bg-[#FF6F61] tạm, rồi promote vào theme
Docs ghi coral, code ghi tomato	Không có bảng join	README: từ → token → HEX (+ optional nearest CSS)
iOS/Android lệch web	Named CSS không mang sang native	Xuất JSON token (Style Dictionary); chỉ ship số
In ấn / áo thun “lệch”	HEX ≠ Pantone/CMYK	Ghi chú color management riêng; engineering không chịu trách nhiệm press

---

CSS named colors: nhớ gì cho đủ dùng

• Khoảng 147 tên trong CSS Color (kể cả alias gray/grey, cyan/aqua…)
• Giá trị cố định giữa trình duyệt hiện đại — không phải “ước lượng”
• Keyword không thay design token
• rebeccapurple và các tên lịch sử vẫn là giá trị cụ thể, không phải brand của bạn

Demo nhanh trong DevTools:

.demo-keyword { background: coral; }      /* luôn #FF7F50 */
.demo-brand   { background: #ff6f61; }    /* brand sheet */

Hai khối cạnh nhau là cách thuyết phục PM nhanh nhất.

---

Checklist trước khi merge PR màu

• Mỗi semantic có một HEX nguồn từ Figma/brand sheet
• Class Tailwind trỏ token custom hoặc arbitrary đã ghi chú HEX
• Không còn background: coral / tomato trong UI production (trừ demo)
• Ticket có dạng tên người (#HEX)
• Dark theme có HEX riêng nếu cần
• Contrast AA đã đo trên nền thật
• (Tuỳ chọn) nearest CSS name chỉ nằm trong cột “ghi chú giao tiếp”

---

Khi nào dùng Color Name Search — khi nào không

Nên dùng

• Client nói “salmon hơn một chút” mà bạn cần anchor chung
• Học / dạy CSS named colors
• Viết glossary nội bộ: từ marketing → nearest CSS → token

Không dùng làm nguồn sự thật

• Chốt màu logo / CTA production
• Thay eyedropper Figma
• Giả định nearest name = đủ gần để bỏ qua đo mắt client

Pipeline đầy đủ trên Kawa (cùng cụm màu): Color Name Search → Color Converter nếu cần RGB/HSL → Tailwind Color khi dò scale → Contrast trước ship.

---

Liên kết liên quan

• Công cụ tìm tên màu / HEX
• Chuyển HEX RGB HSL
• Kiểm tra độ tương phản WCAG
• Danh sách công cụ