Chuyển đổi màu

Ba cách viết cùng một màu

Màn hình pha mọi màu từ ánh sáng đỏ, xanh lá và xanh dương, và HEX, RGB, HSL chỉ đơn giản là ba cách ghi cho cùng 16,7 triệu tổ hợp trong không gian màu sRGB. Bạn cần cách nào tùy vào nơi giá trị đó sẽ được dùng.

• HEX, như #2563eb: ba cặp chữ số thập lục phân cho đỏ, xanh lá và xanh dương, mỗi cặp từ 00 đến ff (0 đến 255). Gọn và dễ sao chép, đây là mặc định trong công cụ thiết kế, bộ nhận diện thương hiệu và phần lớn CSS.
• RGB, như rgb(37, 99, 235): cùng ba kênh đó ở hệ thập phân. Hữu ích khi mã làm việc trực tiếp với con số, như vẽ canvas, xử lý ảnh, tài nguyên màu Android hoặc Pillow trong Python.
• HSL, như hsl(221, 83%, 53%): sắc độ (hue), độ bão hòa (saturation) và độ sáng (lightness). Đây là cách duy nhất trong ba cách mà con người có thể chỉnh bằng suy luận, nên được ưa chuộng khi xây dựng bảng màu và giao diện.

Dạng HEX rút gọn #36f là cách viết tắt của #3366ff, trong đó mỗi chữ số được nhân đôi. Nó chỉ dùng được khi hai chữ số của mỗi cặp giống nhau.

Đọc giá trị HSL

HSL mô tả màu theo cách con người nói về màu:

• Hue là vị trí trên vòng tròn màu tính bằng độ: 0 là đỏ, 60 vàng, 120 xanh lá, 180 lục lam, 240 xanh dương, 300 đỏ tía, và 360 quay về đỏ.
• Saturation đi từ 0%, một màu xám trung tính, đến 100%, phiên bản rực rỡ nhất của sắc độ đó.
• Lightness đi từ 0%, luôn là đen, qua 50%, màu thuần, đến 100%, luôn là trắng.

Đây là điều khiến HSL thiết thực cho design system. Giữ nguyên hue và saturation, rồi giảm lightness từng bước từ 95% xuống 15%, bạn có một thang từ nhạt đến đậm cho nút, nền và viền. Xoay hue 180 độ để có màu nhấn tương phản, hoặc 30 độ về mỗi phía để có các màu tương đồng.

Một hạn chế: lightness trong HSL là trung bình toán học, không phải độ sáng mà mắt cảm nhận. Màu vàng ở lightness 50% trông sáng hơn nhiều so với xanh dương ở 50%, nên các màu có cùng L có thể có độ tương phản với chữ trắng rất khác nhau. Hãy luôn kiểm tra độ tương phản trên cặp màu thực tế.

Công cụ chấp nhận những gì

Dán hoặc gõ vào ô, hoặc chọn bằng ô màu, và các dòng HEX, RGB, HSL cập nhật cùng lúc với bản xem trước cỡ lớn. Đầu vào được chấp nhận:

• #rgb, #rgba, #rrggbb và #rrggbbaa, có hoặc không có #.
• 148 tên màu CSS, như tomato hay rebeccapurple.
• rgb(37, 99, 235) và rgba(37, 99, 235, 0.5), hoặc cú pháp hiện đại ngăn cách bằng dấu cách rgb(37 99 235 / 50%). Các kênh có thể là số thập phân hoặc phần trăm.
• hsl(221, 83%, 53%), hsla(…) và hsl(221.5 83% 53%). Hue có thể kèm deg, turn, rad hoặc grad; dấu phần trăm là tùy chọn.
• Ba con số đơn: 37, 99, 235 hoặc 37 99 235.

Giá trị nằm ngoài phạm vi bị kẹp lại: rgb(300, 0, 0) trở thành đỏ 255. Hue từ 360 trở lên hoặc hue âm được quay vòng quanh vòng tròn màu. Các kênh thập phân được làm tròn thành số nguyên.

Alpha, dù ở HEX 4 hoặc 8 chữ số, rgba(), hsla() hay sau dấu /, đều được đọc nhưng bị bỏ qua, nên đầu ra luôn là màu đục hoàn toàn.

Các thanh trượt R, G và B bên dưới đầu ra thay đổi từng kênh một. Chúng hữu ích khi muốn đẩy màu hơi ấm hơn hoặc lạnh hơn trong lúc theo dõi bản xem trước và cả ba cách ghi cùng cập nhật.

Vì sao giá trị lệch một đơn vị khi chuyển ngược lại

Chuyển đổi giữa HSL và RGB có liên quan đến phân số, và mọi đầu ra ở đây đều được làm tròn thành số nguyên, đúng như CSS thường được viết. HSL có ít tổ hợp số nguyên hơn RGB, khoảng 3,6 triệu so với 16,7 triệu, nên nhiều màu RGB dùng chung một giá trị HSL đã làm tròn.

Ví dụ, #2563eb chuyển thành hsl(221, 83%, 53%), nhưng gõ ngược giá trị HSL đó vào lại cho ra #2463eb: kênh đỏ là 36 thay vì 37. Mắt thường không thấy khác biệt, nhưng điều này quan trọng nếu bộ nhận diện thương hiệu quy định một giá trị HEX chính xác. Hãy coi HEX hoặc RGB là nguồn chuẩn, và dùng HSL để khám phá biến thể thay vì lưu màu chính thức.

Sử dụng kết quả

• Trong CSS, cả ba chuỗi đầu ra đều có thể dán nguyên trạng. Custom property như --brand: #2563eb; là cách gọn gàng nhất để tái sử dụng.
• Với biểu tượng trang web, hãy chốt màu thương hiệu ở đây trước, áp dụng cho logo trong công cụ thiết kế, rồi biến logo thành bộ biểu tượng đầy đủ bằng tạo favicon.
• Với mã QR mang màu thương hiệu, hãy giữ độ tương phản cao: tiền cảnh tối ở lightness khoảng 20–30% trên nền trắng quét ổn định, còn màu sáng hoặc ít bão hòa thường thất bại. Tạo mã QR cho phép bạn thử điều đó.
• Màu in là chuyện khác. Màn hình dùng RGB, máy in dùng CMYK, và màu xanh rực trên màn hình có thể không tái tạo được bằng mực. Hãy yêu cầu xưởng in làm bản in thử khi màu chính xác là quan trọng.

Mọi chuyển đổi diễn ra trong trình duyệt của bạn.