RGB chưa đủ: ký hiệu màu HSL, CMYK và OKLCH

Trong bài trước, Máy tính tạo ra màu sắc như thế nào: RGB, HEX và số nhị phân, chúng ta đã thấy rằng một màu chỉ là ba con số — đỏ, xanh lá, xanh lam, mỗi kênh từ 0–255. Màn hình hoạt động tốt với những con số đó. Nhưng ngay khi con người bắt đầu làm việc với màu sắc, RGB trở nên bất tiện ngay lập tức.

RGB tiện lợi nhưng không trực quan

“Màu đỏ sáng hơn một chút.” Làm thế nào bằng RGB? Phải tăng đồng thời cả ba kênh một chút. “Chỉ muốn giảm độ bão hòa một chút” — nhìn RGB không biết phải giảm kênh nào. “In màu này ra giấy y chang” — RGB hoàn toàn bất lực.

Các hệ ký hiệu màu khác ra đời để giải quyết những vấn đề này.

HSL — Cách con người nghĩ về màu sắc

HSL chia màu thành ba yếu tố: tông màu · độ bão hòa · độ sáng. hsl(14, 100%, 60%) là cùng màu với #FF5733, nhưng rõ ràng hơn về ý nghĩa từng thành phần.

Nếu RGB là ngôn ngữ của máy tính — thì HSL là ngôn ngữ của designer. Cùng một màu nhưng có thể xử lý theo quan điểm muốn thay đổi điều gì.

Hue — Tông màu là vòng tròn 360°

Tông màu xoay một vòng như đồng hồ. Bắt đầu từ 0° đến 360°. 0° và 360° đều là đỏ.

Saturation — Độ bão hòa là sự đậm nhạt của màu

Cùng tông màu nhưng giảm độ bão hòa thì màu dần tiến về xám.

Lightness — Độ sáng từ đen đến trắng

L = 0% thì luôn là đen, L = 100% thì luôn là trắng. 50% là độ sáng “tự nhiên” của màu đó.

Ứng dụng thực tế của HSL — Tạo bảng màu

Giữ nguyên tông màu (Hue) và chỉ thay đổi L sẽ tạo ra bộ màu ăn khớp tự nhiên. Làm điều tương tự bằng RGB phải tính tay 9 ô riêng lẻ, nhưng với HSL chỉ cần thay đổi L từ 12% → 92% theo từng bước là xong.

Cả hai bảng màu trên đều có thể tạo bằng một đoạn code ngắn.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... Chỉ cần đổi L từng bước 10 là xong */
}

Đây là lúc HSL tỏa sáng nhất khi xây dựng design system.

CMYK — Ngôn ngữ của mực in

Để tô màu lên giấy thay vì màn hình, cần một hệ thống hoàn toàn khác. CMYK là tỷ lệ bốn loại mực mà nhà in sử dụng.

Tại sao màu đen không gọi là “B” mà là “K”? Vì B dễ nhầm với Blue. Và từ “K” xuất phát từ thuật ngữ in ấn “Key plate” — tấm chuẩn để căn chỉnh các loại mực khác.

Ánh sáng cộng thêm sáng hơn, mực cộng thêm tối hơn

Sự khác biệt lớn nhất giữa RGB và CMYK là cách pha trộn.

Mực đỏ trông đỏ vì nó hấp thụ ánh sáng khác và chỉ phản chiếu lại màu đỏ. Mực làm nhiệm vụ bớt đi ánh sáng. Vì vậy càng pha nhiều mực màu càng tối. Lý thuyết là pha CMY lại sẽ thành đen, nhưng thực tế cho ra màu nâu đục. Đó là lý do cần thêm mực đen riêng (K).

CMYK dùng ở đâu?

Nếu chỉ thiết kế cho màn hình thì gần như không bao giờ cần chạm đến CMYK. Nó chỉ xuất hiện khi in ra giấy.

• Khi gửi file cho nhà in — danh thiếp, poster, sách, bao bì. Nhà in nhận file RGB sẽ tự chuyển sang CMYK.
• Khi làm việc in ấn trong Photoshop / Illustrator — đặt chế độ màu là CMYK từ đầu.
• Brand guide — ghi kèm giá trị HEX cho màn hình và CMYK cho in ấn. Vì màu thương hiệu cần trông gần giống nhau trên cả hai phương tiện.

Tại sao màu trên màn hình khác màu in — Gamut

Dải màu màn hình có thể hiển thị (RGB gamut) và dải màu mực có thể tạo ra (CMYK gamut) là khác nhau. Màu hồng huỳnh quang rực rỡ trên màn hình sẽ không ra đúng khi in — vì đó là màu mực không thể tạo được.

Vì vậy designer in ấn chỉ chọn màu nằm trong vùng CMYK trước khi làm việc. Thiết kế làm bằng RGB đem in thẳng thường ra màu nhợt nhạt.

Cách ghi giá trị CMYK

Ghi tỷ lệ phần trăm mỗi loại mực. 0% là không phun, 100% là phun đầy.

Dùng K 100% thôi cho ra màu đen đục gần xám. Vì vậy nhà in phủ thêm CMY để tạo màu đen sâu hơn.

OKLCH — Tọa độ của con người

Đây là mô hình màu xuất hiện mạnh mẽ vào những năm 2020. Từ khóa chỉ có một — “tự nhiên với mắt người.”

Ba tọa độ trông giống tên trong HSL.

• L — Lightness (độ sáng, 0~1)
• C — Chroma (độ bão hòa, 0~khoảng 0.4)
• H — Hue (tông màu, 0~360°)

Nhưng HSL có một vấn đề ẩn. Cùng L = 50% nhưng độ sáng cảm nhận thực tế lại rất khác nhau tùy màu. Hãy so sánh trực tiếp.

Tóm gọn một câu — RGB và HSL là tọa độ của máy. OKLCH là tọa độ của con người.

Vai trò của từng tọa độ L · C · H

Hãy xem điều gì xảy ra khi chỉ thay đổi một tọa độ với cùng một màu.

Dùng ở đâu?

• Bảng màu đồng đều độ sáng — khi muốn 8 màu danh mục đều có cùng độ sáng
• Tự động chuyển dark/light mode — chỉ cần đảo ngược giá trị L là ra dark theme tự nhiên
• Khả năng tiếp cận — có thể dự đoán chính xác độ tương phản sáng tối giữa chữ và nền
• Gradient — luồng chuyển tự nhiên không bị dải xám ở giữa

Đã được chính thức áp dụng từ CSS Color Level 4, dùng được trực tiếp trên các trình duyệt mới nhất.

.btn { background: oklch(67% 0.18 30); }       /* cam */
.btn:hover { background: oklch(60% 0.18 30); } /* Chỉ giảm L 7 → tối đúng bấy nhiêu */

Dùng cái gì và khi nào?

Với hầu hết công việc kỹ thuật số, RGB/HEX là đủ. HSL nên nhớ đến khi tạo bảng màu, còn OKLCH rất hữu ích khi thiết kế dark/light mode.

Cách xử lý màu sắc trong fns

Khi biết màu sắc là con số, bước tiếp theo là đặt những màu hay dùng ngay đầu ngón tay. fns gói gọn toàn bộ quy trình lấy màu · lưu màu · dùng lại màu sau một phím.

Eyedropper lấy màu từ bất kỳ đâu trên màn hình — ⌘+Shift+K

Eyedropper là công cụ bắt chính xác màu của bất kỳ pixel nào trên màn hình. Giống như đưa color picker chỉ dùng được bên trong Figma/Photoshop ra toàn hệ thống.

Nhấn ⌘+Shift+K để mở Eyedropper của fns từ bất kỳ đâu trên màn hình. Một pixel trong bản thiết kế, một vùng trong ảnh, màu nền của ứng dụng khác — di chuột đến và click để bắt chính xác màu đó.

• Mỗi lần click tự động lưu vào clipboard. Không cần thao tác “copy” riêng.
• Trong widget Eyedropper có thể chọn định dạng lưu vào clipboard: RGB / HEX / HSL / CMYK / OKLCH.
• Hiển thị cả xem trước màu và màu hệ thống gần nhất.

Eyedropper → tự động lưu clipboard → lấy lại từ clipboard picker — quy trình không bị gián đoạn. Không cần mở riêng như Digital Color Meter mặc định của Mac, cũng không cần nhấn phím tắt copy mỗi lần.

Clipboard tự động nhận diện màu sắc

Lịch sử clipboard của fns tự động nhận ra văn bản đã sao chép có phải mã màu hay không. Nhận diện bất kể định dạng.

Khi lấy lại màu đã sao chép từ lịch sử, chỉ nhìn text khó nhớ đó là màu gì. fns hiển thị chip màu nhỏ bên cạnh mỗi mục để nhận ra ngay chỉ bằng một cái nhìn.

Xem riêng chỉ màu sắc

Chỉ với một phím có thể lọc chỉ mã màu từ lịch sử clipboard. Khi muốn xem tất cả màu đã dùng gần đây trong lúc thiết kế, không cần lục tìm giữa text·URL·code.

• Trong cùng picker dùng từ khóa lọc như color: → chỉ hiện các mục màu
• Tìm kiếm theo tên màu — tìm “blue”, “red” sẽ lọc ra các màu thuộc dải đó
• Sắp xếp theo nhóm màu tương tự về mặt thị giác

Chuyển một màu sang định dạng khác

Có thể chuyển đổi sang ký hiệu khác rồi lấy ra. Khi copy #FF5733 từ Figma rồi muốn dán vào CSS dạng rgb(...), chỉ cần chọn mục đó trong clipboard picker của fns và nhấn phím tắt một lần là tự động chuyển đổi.

Khi di chuyển giữa Figma (HSB) và CSS (HSL/HEX/OKLCH) không cần mở công cụ chuyển đổi mỗi lần.

Text expansion và nhóm màu

Đăng ký màu thương hiệu hay dùng thành từ viết tắt văn bản.

Cùng một từ viết tắt hoạt động ở mọi nơi: ô nhập màu trong CSS, Figma, tin nhắn Slack, code editor. Không còn mất thời gian tìm kiếm và copy màu từ brand guide mỗi lần nữa.

Hãy thử dùng fns để tiết kiệm thời gian vốn phải mở công cụ chuyển đổi và chuyển mã màu sang định dạng khác mỗi lần.

Tò mò về nguồn gốc của những con số này — nền tảng của ba kênh RGB, nhị phân và ký hiệu HEX? Hãy bắt đầu với Máy tính tạo ra màu sắc như thế nào: RGB, HEX và số nhị phân.