Bánh xe màu
Chọn một màu trên bánh xe, tinh chỉnh trên bảng độ bão hòa và độ sáng, rồi đọc lại giá trị dưới mọi định dạng mà dự án của bạn cần, từ #RRGGBB đến oklch(). Công cụ này làm cả những việc mà nhiều công cụ chọn màu khác bỏ qua: ba kiểu bánh xe, kể cả bánh xe RYB truyền thống của họa sĩ, hòa sắc tự động dựng bảng màu, kênh alpha và xuất toàn bộ bảng màu chỉ với một cú nhấp dưới dạng biến CSS, SCSS hoặc JSON. Mọi phép tính đều chạy ngay trong trình duyệt của bạn.
RYB hay RGB? Ba bánh xe màu thay vì một
Bộ chọn Chế độ bánh xe thay đổi cách sắp xếp sắc độ trên bánh xe:
- HSV và HSL là bánh xe kỹ thuật số. Các sắc độ nằm đúng vị trí mà ánh sáng pha trộn chúng trên màn hình. Chúng khác nhau ở bảng vuông: trong HSV, góc sáng nhất là sắc độ thuần, còn HSL đặt sắc độ thuần ở mức sáng trung bình rồi mới thêm trắng phía trên.
- RYB (họa sĩ) sắp xếp sắc độ theo cách các họa sĩ vẫn học: đỏ, vàng và lam làm màu cơ bản, với cam, lục và tím nằm giữa (xem Mô hình màu RYB trên Wikipedia). Sự khác biệt thể hiện rõ nhất ở hòa sắc. Trên bánh xe RYB, màu bổ túc của đỏ là lục và màu bổ túc của lam là cam, đúng những cặp màu cổ điển trong mỹ thuật. Bánh xe kỹ thuật số lại ghép đỏ với xanh lơ. Nếu một bảng màu “bổ túc” lấy từ công cụ chọn màu thông thường từng khiến bạn thấy không ổn, đây chính là lý do.
Hòa sắc màu: bảng màu tự dựng sẵn cho bạn
Chọn một quy tắc trong ô Hòa sắc. Bánh xe sẽ đánh dấu các màu đi kèm và một bảng màu sẵn sàng dùng hiện ra bên dưới:
- Bổ túc: một màu đối diện. Độ tương phản mạnh nhất, hợp để làm một điểm nhấn duy nhất bên cạnh màu thương hiệu chính.
- Bổ túc phân chia: hai màu lân cận của màu bổ túc. Độ tương phản gần như tương đương, nhưng dễ cân bằng hơn.
- Bộ ba: ba sắc độ cách đều nhau trên bánh xe. Sống động mà vẫn ổn định khi một màu chủ đạo và hai màu còn lại chỉ dùng điểm xuyết.
- Bộ bốn (vuông): bốn sắc độ. Bảng màu phong phú cho minh họa và biểu đồ, khó cân bằng trong giao diện ứng dụng.
- Tương đồng: các màu lân cận gần nhất. Kết hợp êm dịu cho nền và dải chuyển màu.
- Đơn sắc: một sắc độ ở nhiều mức sáng khác nhau. Lựa chọn an toàn nhất cho các trạng thái nút bấm (hover, active, disabled).
Sao chép toàn bộ bảng màu chỉ với một cú nhấp, theo định dạng bạn cần: HEX thuần, RGB, HSL, OKLCH, thuộc tính tùy chỉnh CSS (--color-1: …) sẵn sàng dán, biến SCSS hoặc JSON cho code. Muốn kiểm tra xem bảng màu có còn đủ tương phản với người khó phân biệt sắc độ hay không, chụp ảnh màn hình rồi thử chuyển sang xám.
Chuyển đổi HEX, RGB, HSL, OKLCH và CMYK: dán gì cũng đọc được đủ
Các ô nhập nhận gần như mọi cách viết màu: #f80, #ff8800, hex 8 chữ số kèm alpha, rgb() và rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800 và cả tên màu CSS như rebeccapurple. Dù bạn nhập gì, bạn luôn nhận về bảy đầu ra đồng bộ: HEX, RGB, HSL, HSV, LCH, OKLCH và CMYK, mỗi đầu ra có nút sao chép riêng.
Thanh trượt Độ mờ đục (alpha) dưới bản xem trước chuyển các đầu ra sang dạng trong suốt #RRGGBBAA, rgba() và hsla(). Bản xem trước được vẽ trên nền ca-rô, nên bạn thấy ngay độ trong suốt.
Token Tailwind CSS gần nhất với mọi màu
Hai nhãn dưới bản xem trước gọi tên màu cho bạn: màu CSS gần nhất theo tên (hữu ích cho bản nháp nhanh) và token Tailwind gần nhất, ví dụ orange-500. Nhờ vậy bạn ở lại trong hệ thống thiết kế của mình thay vì tự nghĩ ra giá trị riêng lẻ. Nhấp vào nhãn để sao chép.
Nó trả lời câu hỏi luôn xuất hiện mỗi lần bàn giao thiết kế: nhà thiết kế gửi một mã hex, lớp Tailwind nào gần nhất với nó? Việc so khớp được tính dựa trên bảng màu mặc định của Tailwind CSS 4 (xem tài liệu Tailwind, tiếng Anh), nên bạn có thể dán thẳng token vào tên lớp.
Nên dùng định dạng màu nào?
| Định dạng | Tên đầy đủ | Khi nào nên dùng |
|---|---|---|
| HEX | Hexadecimal | Mặc định cho web. Ngắn gọn, được hỗ trợ khắp nơi, dễ sao chép. Tám chữ số thêm kênh alpha. |
| RGB | Red, Green, Blue | Cách màn hình “nghĩ”. Ba kênh ánh sáng từ 0 đến 255. Định dạng mà hầu hết API và code canvas cần. |
| HSL | Hue, Saturation, Lightness | Để chỉnh bằng mắt. “Sáng hơn một chút” hay “kém bão hòa hơn” chỉ là đổi một con số. |
| HSV | Hue, Saturation, Value | Phần mềm đồ họa. Mô hình đứng sau công cụ chọn màu trong Photoshop và GIMP. |
| LCH | Lightness, Chroma, Hue | Đồng nhất theo cảm nhận. Các bước số bằng nhau trông giống các bước thị giác bằng nhau, điều HSL chỉ giả vờ làm được. |
| OKLCH | OK Lightness, Chroma, Hue | Lựa chọn CSS hiện đại. Khắc phục hiện tượng lệch sắc độ ở màu xanh dương mà LCH gặp phải. Mọi trình duyệt hiện hành đều hỗ trợ, phù hợp cho token thiết kế. |
| CMYK | Cyan, Magenta, Yellow, Key | Định hướng cho in ấn. Phép chuyển đổi tương đối để trao đổi với xưởng in, giá trị cuối cùng do hồ sơ màu của xưởng in quyết định. |
Vì sao OKLCH đồng nhất theo cảm nhận hơn các mô hình cũ, tác giả không gian Oklab là Björn Ottosson giải thích trong bài viết gốc (tiếng Anh). Cú pháp và mức hỗ trợ trình duyệt được tóm tắt trên MDN (tiếng Anh). Cách mô hình in hoạt động được mô tả trong bài Mô hình màu CMYK trên Wikipedia.
Những chi tiết nhỏ giúp tiết kiệm thời gian
- Lịch sử tự lưu. 24 màu gần nhất sống sót qua lần tải lại trang. Chúng chỉ nằm trong bộ nhớ của trình duyệt bạn và không được gửi đi đâu cả.
- Ống hút màu. Trên trình duyệt có EyeDropper API (Chrome và Edge), bạn chọn màu từ bất kỳ đâu trên màn hình, kể cả ngoài cửa sổ trình duyệt. Cần lấy màu từ một tấm ảnh hay file logo? Dùng công cụ hút màu từ ảnh.
- Điều khiển bằng bàn phím. Bánh xe và bảng độ bão hòa, độ sáng phản hồi phím mũi tên, nhờ đó bạn chỉnh màu theo từng bước nhỏ.
- Màu cài đặt sẵn cho các màu cơ bản thông dụng, khi bạn chỉ cần một điểm khởi đầu nhanh.
Các câu hỏi thường gặp
Làm sao chuyển OKLCH sang HEX?
Dán giá trịoklch() vào ô OKLCH và mọi đầu ra khác, kể cả HEX, cập nhật ngay lập tức. Chiều ngược lại cũng hoạt động: nhập mã HEX rồi đọc oklch() tương ứng. Một lưu ý: OKLCH có thể mô tả cả những màu nằm ngoài gamut sRGB, và các màu đó sẽ bị cắt về mức mà sRGB hiển thị được. Vì vậy một oklch() rất bão hòa sẽ không trông giống hệt phiên bản HEX của nó trên màn hình gamut rộng.
Dùng oklch() trong CSS sản phẩm thật có an toàn không?
Có. Mọi phiên bản hiện hành của Chrome, Edge, Firefox và Safari đều hỗ trợoklch(), và nó đã trở thành cách viết được ưa chuộng cho token thiết kế (Tailwind CSS 4 định nghĩa cả bảng màu bằng nó). Với trình duyệt rất cũ, đặt một giá trị HEX dự phòng ở dòng trước đó. Công cụ này cho bạn cả hai giá trị.