🎨 Chuyển Đổi Mã Màu Online

Convert qua lại HEX ↔ RGB ↔ HSL tức thì. Click vào bảng màu, chọn màu bất kỳ hoặc nhập trực tiếp.

#6366f1

Chọn màu trực tiếp

HEX

RGB

HSL

CSS Variable

🔴 R99

🟢 G102

🔵 B241

🎯 Màu gần giống (Shades & Tints)

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

Chữ trên nền trắng

Chữ trên nền đen

❓ Câu Hỏi Thường Gặp

HEX, RGB và HSL khác nhau như thế nào?

HEX (#RRGGBB): Cách viết tắt số thập lục phân, phổ biến nhất trong web. RGB: Mô tả màu theo mức Red/Green/Blue (0-255), trực quan với developer. HSL: Hue (màu sắc 0-360°), Saturation (độ bão hòa %), Lightness (độ sáng %) - dễ điều chỉnh khi làm design vì thay đổi Lightness là ra shade/tint khác nhau.

Tỷ lệ tương phản WCAG là gì và tại sao quan trọngũ

WCAG (Web Content Accessibility Guidelines) quy định ratio tối thiểu giữa màu chữ và màu nền để người khiếm thị/mù màu đọc được. AA: cần ≥4.5:1 cho text thường, ≥3:1 cho text lớn. AAA: cần ≥7:1. Google và các công ty lớn đều kiểm tra tiêu chuẩn này trong thiết kế UI.

Khi nào nên dùng HSL thay vì HEX trong CSSẽ

HSL lý tưởng khi bạn cần tạo color scheme động hoặc dark mode – chỉ cần thay đổi Lightness (L%) để ra shade/tint tương ứng. Ví dụ: hsl(239, 84%, 67%) (sáng) và hsl(239, 84%, 20%) (tối) là cùng màu nhưng khác độ sáng. CSS custom properties + HSL là combo mạnh cho Design System.