Chuyển đổi màu

Công cụ chuyển đổi mã màu là gì?

Công cụ chuyển đổi mã màu nhận một màu ở bất kỳ định dạng phổ biến nào (HEX, RGB, HSL, OKLCH) và hiển thị mọi định dạng khác biểu diễn cùng màu đó. Đây là công cụ hằng ngày của nhà thiết kế và lập trình viên khi khớp màu thương hiệu, gỡ lỗi biến CSS, so sánh bảng màu chế độ tối và sáng, hoặc kiểm tra độ tương phản cho khả năng tiếp cận.

CSS hỗ trợ nhiều mô hình màu, và mỗi mô hình có thế mạnh riêng. HEX và RGB mô tả màu theo ánh sáng đỏ, lục, lam. HSL trực quan hơn (sắc độ, độ bão hòa, độ sáng). OKLCH là mô hình theo cảm nhận, trong đó các thay đổi số bằng nhau trông như thay đổi bằng nhau với mắt người, nên nó đặc biệt hữu ích để tạo sắc độ sáng, tối và bảng màu dễ tiếp cận.

Khả năng tiếp cận đến từ độ tương phản, không chỉ từ màu sắc. WCAG định nghĩa tỷ lệ tương phản giữa chữ và nền: ít nhất 4,5:1 cho chữ nội dung thường, 3:1 cho tiêu đề lớn. Một công cụ màu tốt báo cả hai con số ngay cạnh màu của bạn để bạn không vô tình phát hành giao diện khó đọc.

Bạn học được gì khi chuyển đổi màu

• HEX chỉ là cách viết tắt của RGB: #ff8800 giống hệt rgb(255, 136, 0).
• HSL tách riêng *sắc độ* (màu gì), *độ bão hòa* (rực đến đâu) và *độ sáng* (sáng đến đâu). Chỉnh một giá trị mà không đụng đến các giá trị kia trực quan hơn nhiều so với chỉnh R/G/B.
• OKLCH đồng đều theo cảm nhận: tăng L thêm 10% trong OKLCH trông như cùng một mức thay đổi độ sáng với mọi sắc độ. HSL không hoạt động như vậy.
• Tint là pha thêm trắng, shade là pha thêm đen. Khoảng cách giữa hai tint của cùng một sắc độ là thứ khiến bảng màu giao diện trông hài hòa.

Cách chuyển đổi và kiểm tra màu từng bước

1. 1

   Nhập một màu

   Dán bất kỳ giá trị HEX, RGB, HSL hoặc OKLCH nào, hoặc chọn màu bằng ống hút màu hay bảng chọn màu của trình duyệt.

2. 2

   Xem mọi định dạng cùng lúc

   Công cụ hiển thị cùng một màu ở mọi định dạng được hỗ trợ. Nhấn vào giá trị bất kỳ để sao chép vào clipboard.

3. 3

   Tinh chỉnh bằng thanh trượt HSL hoặc OKLCH

   Kéo thanh trượt độ sáng để có tint (sáng hơn) và shade (tối hơn). Dùng độ sáng OKLCH để có các bước đều nhau về mặt thị giác.

4. 4

   Kiểm tra độ tương phản với màu chữ

   Bảng tương phản hiển thị tỷ lệ WCAG so với cả màu trắng lẫn đen. Nhắm tới ≥ 4,5 cho chữ nội dung và ≥ 3 cho tiêu đề lớn.

5. 5

   Sao chép giá trị vào CSS

   Dùng định dạng khớp với codebase của bạn: HEX cho design token, OKLCH cho bảng màu hiện đại, HSL khi bạn muốn chỉnh bằng calc().

Tra cứu nhanh các định dạng màu CSS

Năm định dạng bạn gặp hằng ngày, kèm ví dụ cho cùng một màu. Tài liệu đầy đủ về cú pháp màu có trên trang <color> của MDN.

Ví dụ chuyển đổi màu để thử

color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);

--brand:        oklch(67% 0.16 268);--brand-light:  oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark:   oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);

background: rgb(108 140 255 / 0.5);background: #6c8cff80;

Lỗi thường gặp khi chuyển đổi màu

• So sánh độ sáng HSL giữa các sắc độ khác nhau. hsl(60 100% 50%) (vàng) và hsl(240 100% 50%) (lam) có cùng L nhưng độ sáng cảm nhận rất khác nhau: hãy dùng OKLCH khi so sánh bằng mắt.
• Quên rằng HEX 3 chữ số (#abc) là dạng viết tắt của dạng 6 chữ số (#aabbcc).
• Dùng rgba(...) thay vì cú pháp hiện đại rgb(... / alpha): cả hai đều chạy, nhưng dạng dấu gạch chéo là đặc tả hiện hành và dễ đọc hơn trong các công cụ.
• Chỉ chọn màu khi đặt trên nền trắng thuần hoặc đen thuần. Hãy thử với màu nền thật của bạn và kiểm tra độ tương phản WCAG.
• Viết cứng màu sâu trong các component thay vì định nghĩa chúng thành CSS custom property ở gốc.

Câu hỏi thường gặp về chuyển đổi mã màu