Bảng chọn màu hex (Color Picker)

Q: Mã màu hex có thể biểu diễn bao nhiêu màu?

256 × 256 × 256 = 16,777,216 màu. Khi thêm một cặp alpha ( #RRGGBBAA ), mỗi màu còn có thể có 256 mức độ trong suốt.

Q: Những tên màu CSS nào được hỗ trợ?

Tất cả 148 màu có tên trong CSS Color Module, từ aliceblue đến yellowgreen , bao gồm cả rebeccapurple . Nhập tên màu vào ô hex hoặc lọc danh sách bên dưới công cụ, rồi nhấp vào một màu để chọn.

Nhấp vào ô màu để chọn màu, hoặc nhập mã hex hay tên màu CSS. Bạn nhận được cùng lúc mọi định dạng màu, các tông sáng, tông tối và phối màu hài hòa tương ứng, cùng kết quả kiểm tra độ tương phản WCAG tức thì cho chữ trắng và chữ đen.

#7C3AEDNhấp để chọn màu

Mã màu hex

HEX
RGB
HSL
HSV
CMYK
Tên màu CSS

Tông sáng và tông tối

Nhấp vào một ô màu để sao chép mã hex của nó.

Phối màu hài hòa

Độ tương phản và khả năng tiếp cận (WCAG)

Chữ trắng trên màu này

Chữ đen trên màu này

Tên màu CSS

Lọc tên màu

Riêng tư: dữ liệu của bạn được xử lý ngay trong trình duyệt và không bao giờ được tải lên.

Cách dùng bảng chọn màu hex

Nhấp vào ô màu lớn để mở bảng chọn màu của hệ thống, hoặc nhập mã hex như #1E90FF hay tên màu như tomato.
Sao chép định dạng bạn cần: HEX, RGB, HSL, HSV hoặc CMYK. Nhấp vào bất kỳ ô tông sáng, tông tối hay phối màu nào để sao chép mã hex của nó.
Xem các ô độ tương phản để biết chữ trắng hoặc chữ đen trên màu của bạn có đạt chuẩn WCAG mức AA hay AAA không.

Mã màu hex hoạt động như thế nào

Một mã màu hex như #FF6347 chứa ba byte: đỏ (FF = 255), xanh lục (63 = 99) và xanh lam (47 = 71). Mỗi kênh có giá trị từ 00 đến FF, cho ra 256 × 256 × 256 = 16,777,216 màu khác nhau. Các giá trị bằng nhau tạo ra màu xám – #000000 là đen, #808080 là xám trung bình và #FFFFFF là trắng – và giá trị càng cao thì màu càng sáng.

Tông sáng, tông tối và phối màu hài hòa

Tông sáng (tint) là màu của bạn pha với trắng, còn tông tối (shade) là màu của bạn pha với đen. Công cụ hiển thị cả hai theo từng bước 10%, rất tiện để tạo trạng thái hover, viền và nền khớp với màu thương hiệu.

Phối màu hài hòa xoay sắc màu (hue) quanh bánh xe màu nhưng giữ nguyên độ bão hòa và độ sáng:

Bổ túc (180°) – màu đối diện, tạo độ tương phản mạnh, hợp với các nút kêu gọi hành động.
Tương đồng (±30°) – các màu kề nhau trên bánh xe màu, cho bảng màu êm dịu và thống nhất.
Bộ ba (±120°) – ba màu cách đều nhau, cho thiết kế rực rỡ nhưng vẫn cân bằng.

Độ tương phản màu và chuẩn WCAG

Hướng dẫn về khả năng tiếp cận nội dung web (WCAG) yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 cho văn bản thường (mức AA) và 7:1 cho mức AAA. Chữ lớn – 18 pt, hoặc 14 pt in đậm – cần 3:1 để đạt mức AA. Tỷ lệ này so sánh độ chói tương đối của màu chữ và màu nền, dao động từ 1:1 (hai màu giống hệt nhau) đến 21:1 (đen trên trắng).

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

Mã màu hex là gì?

Mã màu hex mô tả một màu bằng sáu chữ số thập lục phân: hai chữ số cho đỏ, hai cho xanh lục và hai cho xanh lam, ví dụ #FF6347 (tomato). CSS, HTML, các công cụ thiết kế và phần mềm chỉnh sửa ảnh đều hiểu được mã này.

Mã màu hex có thể biểu diễn bao nhiêu màu?

256 × 256 × 256 = 16,777,216 màu. Khi thêm một cặp alpha (#RRGGBBAA), mỗi màu còn có thể có 256 mức độ trong suốt.

Những tên màu CSS nào được hỗ trợ?

Tất cả 148 màu có tên trong CSS Color Module, từ aliceblue đến yellowgreen, bao gồm cả rebeccapurple. Nhập tên màu vào ô hex hoặc lọc danh sách bên dưới công cụ, rồi nhấp vào một màu để chọn.