Chuyển đổi mã màu – HEX sang RGB, HSL, HSV & CMYK

Cách sử dụng Chuyển đổi mã màu

1Nhập hoặc dán một màu ở bất kỳ định dạng nào — ví dụ: #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) hoặc tên CSS như tomato — hoặc sử dụng công cụ chọn màu.

2Xem cùng một màu ở định dạng HEX, RGB, HSL, HSV và CMYK và sao chép định dạng bạn cần.

3Kiểm tra tỷ lệ tương phản với màu trắng và đen để xem văn bản có màu này có dễ đọc hay không.

4Nhấp vào một ô màu trong dải sắc thái sáng tối để khám phá các phiên bản sáng hơn và tối hơn.

Chuyển đổi mã màu giữa mọi định dạng phổ biến

Các nhà thiết kế, lập trình viên và marketer thường xuyên phải chuyển đổi mã màu giữa các công cụ khác nhau: CSS dùng HEX hoặc HSL, bộ nhận diện thương hiệu dùng RGB và CMYK, còn phần mềm thiết kế lại hiển thị HSB. Công cụ chuyển đổi màu sắc này nhận đầu vào là bất kỳ định dạng nào và hiển thị tất cả các định dạng còn lại cùng lúc, hỗ trợ sao chép chỉ với một click cho mỗi định dạng. Nó cũng kiểm tra độ tương phản văn bản để đảm bảo khả năng tiếp cận và tạo ra dải màu sáng tối.

Tính năng

Mọi định dạng đầu vào: HEX (3, 4, 6 hoặc 8 chữ số), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, bộ ba số thông thường và tên màu CSS.
Hiển thị mọi kết quả cùng lúc: HEX, RGB, HSL, HSV và CMYK, mỗi định dạng đều có nút sao chép.
Hỗ trợ độ trong suốt — giá trị alpha được giữ nguyên trong HEX8, RGBA và HSLA.
Bảng chọn màu tích hợp để chọn màu trực quan.
Kiểm tra độ tương phản WCAG trên nền trắng và đen, kèm theo kết quả chuẩn AA cho văn bản thường và văn bản lớn.
Dải màu sáng tối từ 10% đến 90% độ sáng; nhấp vào ô màu bất kỳ để sử dụng.

Giải thích các định dạng màu

HEX — #RRGGBB ở hệ thập lục phân, định dạng phổ biến nhất trong thiết kế web. Cặp ký tự thứ tư (tùy chọn) dùng để thiết lập độ trong suốt.
RGB — đỏ (red), xanh lá (green) và xanh dương (blue) từ 0 đến 255; cách các màn hình thực tế tạo ra màu sắc.
HSL — tông màu (hue - vị trí trên vòng thuần sắc), độ bão hòa (saturation - cường độ) và độ sáng (lightness). Dễ dàng điều chỉnh thủ công: chỉ cần thay đổi độ sáng để có được các phiên bản sáng hơn hoặc tối hơn của cùng một màu.
HSV / HSB — tông màu (hue), độ bão hòa (saturation) và giá trị (value/brightness - độ sáng), được sử dụng bởi hầu hết các bảng chọn màu trong các công cụ thiết kế.
CMYK — tỷ lệ phần trăm mực xanh lơ (cyan), hồng sẫm (magenta), vàng (yellow) và đen (key) được sử dụng trong in ấn.

Ví dụ

Màu xanh da trời #0EA5E9 là rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) và xấp xỉ cmyk(94%, 29%, 0%, 9%). Độ tương phản của nó với màu trắng là khoảng 2.8:1 — phù hợp cho tiêu đề lớn và biểu tượng, nhưng quá thấp cho văn bản thường, vốn cần tỷ lệ 4.5:1. Trên nền đen, tỷ lệ này đạt khoảng 7.6:1, hoàn toàn đạt chuẩn.

Mẹo làm việc với màu sắc

Tạo bảng màu bằng HSL. Giữ nguyên sắc độ và độ bão hòa, chỉ thay đổi độ sáng để tạo sự đồng bộ cho các trạng thái nút, nền và viền.
Kiểm tra độ tương phản sớm. Nhiều màu thương hiệu quá sáng để làm màu chữ trên nền trắng; hãy dùng sắc độ tối hơn của màu đó cho văn bản và giữ màu gốc cho các chi tiết tạo điểm nhấn.
Đừng chỉ phụ thuộc vào màu sắc để truyền đạt ý nghĩa — hãy thêm biểu tượng hoặc nhãn để hỗ trợ những người bị mù màu hoặc khiếm khuyết thị giác.
Màu in ấn sẽ có sự khác biệt. Các màu RGB sáng, đặc biệt là xanh dương và xanh lá rực rỡ, thường trông xỉn màu hơn trong hệ màu CMYK.

Bạn cần xử lý cả hình ảnh? Công cụ Chuyển đổi ảnh giúp đổi định dạng qua lại giữa JPG, PNG và WebP. Để mã hóa một hình ảnh nhỏ hoặc biểu tượng cho CSS, hãy dùng công cụ Base64.

Câu hỏi thường gặp

Cách chuyển đổi HEX sang RGB?

Màu HEX gồm ba cặp chữ số thập lục phân đại diện cho màu đỏ, xanh lá và xanh dương. Chuyển đổi từng cặp từ hệ cơ số 16 sang hệ cơ số 10: trong #FF8800, FF = 255, 88 = 136 và 00 = 0, nên màu đó là rgb(255, 136, 0). Dạng viết tắt 3 chữ số như #F80 sẽ nhân đôi từng chữ số trước tiên.

Sự khác biệt giữa HSL và HSV (HSB) là gì?

Cả hai đều mô tả màu sắc bằng sắc độ (hue, 0–360°) và độ bão hòa (saturation), nhưng sử dụng giá trị thứ ba khác nhau. Trong HSL, độ sáng (lightness) 50% là màu thuần, 0% là màu đen và 100% là màu trắng. Trong HSV/HSB, giá trị (value) hoặc độ sáng (brightness) 100% là màu thuần ở độ bão hòa tối đa, và 0% là màu đen. Các ứng dụng thiết kế như Photoshop và Figma thường dùng HSB trong bảng chọn màu, trong khi CSS dùng HSL.

Chuyển đổi CMYK có chính xác để in ấn không?

Giá trị CMYK là chuyển đổi toán học từ RGB, hữu ích để làm điểm khởi đầu. Việc in ấn thực tế còn phụ thuộc vào máy in, mực và giấy, được xác định bởi cấu hình màu ICC. Đối với các bản in chuyên nghiệp, hãy chuyển đổi ngay trong phần mềm thiết kế bằng cấu hình máy in của bạn.

Tỷ lệ tương phản có ý nghĩa gì?

Hướng dẫn Tiếp cận Nội dung Web (WCAG) đo lường độ tương phản giữa văn bản và nền từ 1:1 đến 21:1. Văn bản thường cần tỷ lệ ít nhất 4.5:1 để đạt chuẩn AA, và văn bản lớn (khoảng 24 px, hoặc 18.7 px in đậm) cần 3:1. Công cụ kiểm tra sẽ cho biết màu sắc có đạt chuẩn trên nền trắng và nền đen hay không.

Hỗ trợ những định dạng đầu vào nào?

Mã HEX 3, 4, 6 hoặc 8 chữ số (có hoặc không có dấu #), rgb() và rgba(), hsl() và hsla(), hsv() hoặc hsb(), cmyk(), ba số thông thường như 255 136 0, và tên màu CSS như rebeccapurple. Hỗ trợ cả cú pháp phân tách bằng dấu phẩy và phân tách bằng khoảng trắng hiện đại, bao gồm cả độ mờ (alpha) như rgb(14 165 233 / 50%).