DevToolPal
VI

Chuyển đổi màu (HEX, RGB, HSL)

Chuyển đổi màu giữa HEX, RGB, HSL, HSV và CMYK, xem trước trực tiếp và kiểm tra độ tương phản với nền trắng và đen.

Chạy cục bộ, không bao giờ tải lên

Tùy chọn

Màu

Kết quả

Kết quả sẽ hiện ở đây

Công cụ này làm gì

Công cụ chuyển đổi màu nhận một màu ở bất kỳ cách viết CSS phổ biến nào và hiển thị nó ở tất cả các dạng còn lại cùng lúc: HEX, RGB, HSL, HSV và CMYK. Nó cũng hiện ô xem trước màu, tên màu CSS khi có tên trùng khớp chính xác, và tỷ lệ tương phản với nền trắng và đen để bạn kiểm tra khả năng đọc.

Cách sử dụng

  1. Gõ hoặc dán một màu vào ô Màu, hoặc dùng bộ chọn màu bên cạnh.
  2. Mọi dạng biểu diễn cập nhật ngay khi bạn gõ. Nhấn Sao chép cạnh dạng bạn cần.
  3. Bật Hex chữ hoa nếu quy ước của bạn viết hex bằng chữ in hoa.
  4. Xem các dòng tương phản trước khi dùng màu cho chữ: huy hiệu màu xanh lá nghĩa là đạt WCAG AA.

Ví dụ

#1e90ff là màu CSS dodgerblue. Nó được chuyển thành:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

Độ tương phản của nó trên nền trắng là 3.24:1, đủ cho tiêu đề lớn nhưng chưa đủ cho chữ nội dung.

Tóm tắt các mô hình màu

  • HEX và RGB mô tả lượng ánh sáng đỏ, xanh lá và xanh dương mà màn hình phát ra. Đây là những gì trình duyệt và công cụ thiết kế dùng bên trong.
  • HSL mô tả sắc độ (góc trên vòng màu), độ bão hòa và độ sáng, giúp dễ dàng tạo các tông sáng hơn hoặc tối hơn của cùng một màu.
  • HSV (còn gọi là HSB) được hầu hết bộ chọn màu trong phần mềm thiết kế sử dụng.
  • CMYK mô tả mực xanh lơ, hồng sẫm, vàng và đen dùng trong in ấn.

Màu có độ trong suốt, như #1e90ff80 hoặc rgb(30 144 255 / 50%), được hiển thị kèm kênh alpha ở HEX, RGB và HSL.

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

› Làm sao để chuyển HEX sang RGB?

Tách sáu chữ số hex thành ba cặp và đọc mỗi cặp thành một số từ 0 đến 255. Với #1e90ff, ta có 1e = 30, 90 = 144 và ff = 255, tức là rgb(30, 144, 255). Công cụ này tự làm việc đó ngay khi bạn gõ.

› Tôi có thể dán những định dạng nào?

Hex có hoặc không có # (3, 4, 6 hoặc 8 chữ số), rgb() và rgba(), hsl() và hsla() theo cả cú pháp dấu phẩy lẫn dấu cách, giá trị phần trăm, đơn vị góc như deg và turn, cùng toàn bộ 148 tên màu CSS.

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

Đó là độ tương phản theo WCAG 2 giữa màu và nền trắng hoặc đen. Chữ nội dung cần tối thiểu 4.5:1 để đạt mức AA; chữ lớn (khoảng 24px, hoặc 19px in đậm) cần 3:1.

› Vì sao CMYK chỉ là gần đúng?

Máy in dùng hồ sơ mực phụ thuộc vào loại giấy và máy in. CMYK hiển thị ở đây là công thức chuẩn không phụ thuộc thiết bị, phù hợp làm điểm khởi đầu nhưng không thay thế được hồ sơ in.