Bánh xe màu Online & Chuyển đổi màu sắc (HEX, RGB, LCH)
Chọn một màu trên bánh xe, tinh chỉnh nó trên bảng độ bão hòa, 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ụ chọn màu này cũng làm những việc mà công cụ khác thường bỏ qua: ba kiểu hình học bánh xe, bao gồm cả bánh xe RYB truyền thống của họa sĩ, lớp phủ hòa sắc tự động dựng bảng màu cho bạn, 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. Tất cả đều được tính toán cục bộ trong trình duyệt của bạn.
Ba bánh xe, không chỉ một
Bộ chọn Chế độ bánh xe thay đổi hình học của chính bánh xe:
- HSV và HSL là các bánh xe kỹ thuật số — các sắc độ được xếp theo cách màn hình RGB pha trộn ánh sáng. Chúng khác nhau ở cách bảng vuông hoạt động: góc sáng nhất của HSV là sắc độ thuần, còn HSL đặt các sắc độ thuần ở mức 50% độ sáng với màu trắng phía trên.
- RYB (họa sĩ) sắp xếp các sắc độ theo cách các họa sĩ được 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. Giá trị thực tiễn của nó thể hiện rõ trong 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 sắc tố cổ điển, trong khi bánh xe kỹ thuật số ghép đỏ với xanh lơ (cyan). Nếu một bảng màu “bổ túc” từ một công cụ chọn màu thông thường từng trông sai với bạn, đây chính là lý do.
Hòa sắc dựng bảng màu thay bạn
Chọn một quy tắc trong Hòa sắc và bánh xe sẽ đánh dấu các màu đi kèm, xuất hiện thành một bảng màu sẵn sàng dùng:
- Bổ túc — một màu đối diện. Độ tương phản mạnh nhất; dùng cho một điểm nhấn duy nhất trên nền màu thương hiệu chủ đạo.
- 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 bằng, nhưng dễ cân bằng hơn nhiều.
- Bộ ba — ba sắc độ cách đều nhau. Sống động nhưng ổn định; để một màu chủ đạo và dùng hai màu còn lại tiết chế.
- Bộ bốn (vuông) — bốn sắc độ. Bảng màu phong phú cho minh họa và trực quan hóa dữ liệu; khó cân bằng trong công việc giao diện.
- Tương đồng — các màu lân cận trực tiếp. Độ căng thấp, phù hợp cho nền và dải màu chuyển sắc.
- Đơn sắc — một sắc độ với các mức sáng khác nhau. Lựa chọn an toàn nhất cho các trạng thái giao diện (hover, active, disabled).
Bảng điều khiển bảng màu sao chép toàn bộ tập hợp chỉ với một cú nhấp, theo định dạng bạn chọn: HEX thuần, RGB, HSL, OKLCH, thuộc tính tùy chỉnh CSS sẵn sàng dán (--color-1: …), biến SCSS hoặc JSON để đưa vào code.
Dán bất kỳ giá trị nào, đọc được mọi thứ
Các trường nhập liệu chấp nhận gần như mọi ký hiệu màu bạn đưa vào: #f80, #ff8800, hex 8 chữ số kèm alpha, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, hay tên màu CSS như rebeccapurple. Dù nhập gì vào, bảy đầu ra đồng bộ sẽ trả về: HEX, RGB, HSL, HSV, LCH, OKLCH và CMYK, mỗi đầu ra có nút sao chép riêng.
Hai nhãn nhỏ dưới bản xem trước gọi tên màu giúp bạn: màu CSS gần nhất theo tên (hữu ích để phác thảo nhanh và để gọi tên màu) và token Tailwind gần nhất (ví dụ orange-500), để bạn có thể ở lại trong hệ thống thiết kế của mình thay vì tự nghĩ ra giá trị riêng lẻ.
Kéo thanh trượt alpha bên dưới bản xem trước và các đầu ra sẽ chuyển sang dạng có độ trong suốt — #RRGGBBAA, rgba(), hsla() — với bản xem trước hiển thị trên nền ca-rô để bạn đánh giá độ trong suốt.
Nên dùng định dạng nào?
| Định dạng | Tên đầy đủ | Khi nào nên dùng? |
|---|---|---|
| HEX | Hexadecimal | Mặc định của web. Gọn nhẹ, được hỗ trợ phổ biến, dễ sao chép. 8 chữ số thêm kênh alpha. |
| RGB | Red, Green, Blue | Cách màn hình “nghĩ”. Ba kênh ánh sáng, 0–255. Định dạng mà hầu hết API và mã canvas mong đợi. |
| HSL | Hue, Saturation, Lightness | Dành cho con người chỉnh tay. “Sáng hơn một chút” hay “kém bão hòa hơn” chỉ là thay đổi một con số. |
| HSV | Hue, Saturation, Value | Phần mềm đồ họa. Mô hình đứng sau các công cụ chọn màu trong Photoshop và GIMP. |
| LCH | Lightness, Chroma, Hue | Đồng nhất về nhận thức. Các bước số học bằng nhau trông giống các bước thị giác bằng nhau — điều mà 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 của LCH; được hỗ trợ trên mọi trình duyệt hiện hành và lý tưởng cho hệ thống token thiết kế. |
| CMYK | Cyan, Magenta, Yellow, Key | Định hướng in ấn. Một phép chuyển đổi tương đối để trao đổi với nhà thiết kế in ấn — giá trị cuối cùng luôn đến từ hồ sơ màu của máy in. |
Những chi tiết nhỏ giúp tiết kiệm thời gian
- Lịch sử tự lưu giữ. 24 màu bạn làm việc gần nhất vẫn còn sau khi làm mới trang — chỉ lưu trong bộ nhớ cục bộ của trình duyệt, không bao giờ tải lên đâu cả.
- Ống hút màu. Trên các trình duyệt hỗ trợ EyeDropper API (Chrome và Edge), bạn có thể chọn màu từ bất cứ đâu trên màn hình, kể cả ngoài cửa sổ trình duyệt.
- Điều khiển bằng bàn phím. Bánh xe và bảng độ bão hòa phản hồi phím mũi tên để chỉnh chính xác từng pixel.
- Màu cài đặt sẵn bao gồm 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 (FAQ)
Dùng oklch() trong CSS sản phẩm thực 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 ký hiệu ưa chuộng cho token thiết kế (Tailwind CSS 4 định nghĩa toàn bộ bảng màu của mình bằng nó). Với trình duyệt rất cũ, hãy dùng giá trị HEX dự phòng ở dòng trước đó — công cụ này cung cấp cả hai giá trị cho bạn.