Bộ chuyển đổi mã màu

Công cụ chuyển đổi màu giữa mã HEX, RGB, HSL và OKLCH, kèm tỉ lệ tương phản WCAG của hai màu. Kiểm tra khả năng tiếp cận ngay khi chọn bảng màu, miễn phí trên trình duyệt.

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

OKLCH

oklch(0.623 0.188 259.8)

Điều chỉnh HSL

H217S91%L60%

Tỷ lệ tương phản (WCAG)

Màu so sánh:

샘플 텍스트

Tỷ lệ tương phản: 3.68:1

WCAG: AA Large

Nhúng

<iframe src="https://devtools.patrache.studio/vi/converters/color-converter/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Bộ chuyển đổi mã màu — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/vi/converters/color-converter/">Bộ chuyển đổi mã màu</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Cap nhat lan cuoi: 2026 · Cong cu truc tuyen mien phi

Bộ chuyển đổi mã màu la gi?

Cach su dung

1
Nhập màu— Sử dụng bộ chọn màu hoặc nhập văn bản. Hỗ trợ định dạng HEX, rgb(), hsl().
2
Xem định dạng— Các định dạng HEX, RGB, HSL và OKLCH được hiển thị đồng thời.
3
Sao chép giá trị— Nhấn nút sao chép cho từng định dạng để sao chép giá trị CSS.
4
Kiểm tra tỷ lệ tương phản— Đặt màu so sánh để kiểm tra tỷ lệ tương phản WCAG.

Cong cu lien quan

Tạo CSS GradientTrình tạo gradient CSS trực quan cho gradient tuyến tính, tỏa tròn và hình nón: thêm điểm màu, chỉnh góc rồi sao chép CSS. Rất hợp cho nền và nút bấm, miễn phí trên trình duyệt.

Tạo CSS Box ShadowTrình tạo box-shadow CSS với các điều khiển offset, blur, spread, màu và inset cùng bản xem trước bóng đổ. Sao chép mã CSS sẵn dùng cho mọi phần tử, miễn phí trên trình duyệt.

Tham chiếu đơn vị CSSTài liệu tra cứu đơn vị CSS px, em, rem, %, vw, vh, vmin, vmax và ch, sắp xếp theo nhóm. Giải thích rõ khi nào dùng từng đơn vị tuyệt đối và tương đối, miễn phí trên trình duyệt.

Bộ chuyển đổi PX-REMTrình chuyển PX sang REM quy đổi pixel và rem theo cả hai chiều dựa trên cỡ chữ gốc tùy chỉnh, hỗ trợ số thập phân. Kèm bảng tra cứu và đoạn CSS có thể sao chép, miễn phí.

Cau hoi thuong gap

OKLCH là biểu diễn hình trụ của không gian màu Oklab, không gian màu đồng đều nhất về mặt cảm nhận. Được hỗ trợ trong CSS Color Level 4.

Đo sự khác biệt độ sáng giữa văn bản và màu nền. AA yêu cầu tối thiểu 4,5:1, AAA yêu cầu 7:1.

Hiện tại chỉ hỗ trợ màu không trong suốt (RGB, HEX 6 chữ số). RGBA và HSLA sẽ được thêm trong bản cập nhật tương lai.

Có. Bạn có thể dán kết quả của mỗi định dạng trực tiếp vào CSS.

Không. Tất cả chuyển đổi màu diễn ra trong trình duyệt của bạn.