# Bánh xe màu

> Bánh xe HSV, HSL và RYB, hòa sắc dựng bảng màu, chuyển đổi HEX, RGB, HSL, OKLCH, CMYK và token Tailwind gần nhất. Miễn phí, không cần cài đặt.

URL: https://acrafto.com/vi/chon-mau-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

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](https://vi.wikipedia.org/wiki/M%C3%B4_h%C3%ACnh_m%C3%A0u_RYB)). 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](https://acrafto.com/vi/chuyen-doi-anh-sang-xam-truc-tuyen-mien-phi/).

## 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](https://tailwindcss.com/docs/colors), 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](https://bottosson.github.io/posts/oklab/) (tiếng Anh). Cú pháp và mức hỗ trợ trình duyệt được tóm tắt trên [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (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](https://vi.wikipedia.org/wiki/M%C3%B4_h%C3%ACnh_m%C3%A0u_CMYK).

## 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](https://acrafto.com/vi/image-color-picker-online/).
- **Đ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ị.

### Vì sao hòa sắc đổi khi tôi chuyển sang bánh xe RYB?

Vì cái gì là "đối diện" phụ thuộc vào cách sắc độ được xếp quanh vòng tròn. Bánh xe RYB trải đều các màu cơ bản của sắc tố, nên các cặp bổ túc khớp với những gì họa sĩ vẫn học: đỏ và lục, lam và cam, vàng và tím. Bánh xe HSV và HSL xếp sắc độ theo cách ánh sáng pha trộn, nên chúng ghép đỏ với xanh lơ. Không cách nào sai cả: RYB theo đúng giáo trình mỹ thuật, HSV và HSL theo đúng cách màn hình hoạt động.

### Có thể tin giá trị CMYK để đi in không?

Hãy coi đó là mức tham khảo. Phép chuyển đổi thật cho in ấn phụ thuộc vào [hồ sơ màu ICC](https://en.wikipedia.org/wiki/ICC_profile) (tiếng Anh) của máy in, giấy và mực. Cùng một màu RGB sẽ ra khác nhau trên giấy tráng phủ và giấy không tráng phủ. Giá trị ở đây dùng công thức chuẩn để cho kết quả gần đúng, còn bản in thử cuối cùng là việc của xưởng in.

### Nút ống hút màu ở đâu trên Firefox hay Safari?

Nó bị ẩn có chủ đích. [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, tiếng Anh), thứ nút này dựa vào, hiện chỉ có ở các trình duyệt nền Chromium (Chrome, Edge, Opera). Mọi tính năng khác của công cụ vẫn hoạt động bình thường ở mọi nơi, chỉ riêng việc lấy màu từ màn hình là không có. Nếu cần màu từ một tấm ảnh, dùng [công cụ hút màu từ ảnh](https://acrafto.com/vi/image-color-picker-online/), hoạt động trên mọi trình duyệt.

### Lịch sử màu của tôi có riêng tư không?

Có. Lịch sử được lưu trong localStorage của trình duyệt trên thiết bị bạn. Không có gì bạn chọn, dán hay sao chép được gửi đi đâu cả. Toàn bộ công cụ chạy bằng JavaScript trong trình duyệt, điều bạn có thể tự kiểm chứng qua tab Network trong công cụ dành cho lập trình viên.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))