Bảng chọn màu và tra mã màu
Kéo chọn một màu rồi lấy ngay mã HEX, RGB và HSL để dán vào CSS hay Figma. Có sẵn dải sáng tối của cùng một sắc, và cho biết màu chữ đen hay trắng đọc được trên nền màu đó theo đúng ngưỡng tương phản của WCAG.
Cách dùng
- Kéo bảng màu của hệ điều hành, hoặc gõ thẳng mã màu vào ô bên cạnh.
- Bấm vào một dòng kết quả để chép mã ở hệ đó — HEX, RGB hay HSL.
- Dùng dải sáng tối bên dưới để lấy nhanh bản nhạt hơn hoặc đậm hơn của cùng một sắc.
- Xem dòng cho biết chữ đen hay chữ trắng đọc được trên nền màu này trước khi dùng nó làm màu nút bấm.
Câu hỏi thường gặp
Ba hệ HEX, RGB và HSL khác nhau thế nào?
Cùng một màu, ba cách viết. HEX gọn nhất nên hay dùng trong CSS. RGB nói rõ ba kênh đỏ lục lam. HSL mô tả theo sắc, độ tươi và độ sáng, nên chỉnh cho màu nhạt đi hay đậm lên thì dễ hơn hẳn.
Vì sao cần biết nên dùng chữ đen hay chữ trắng?
Vì chữ trên nền màu phải đủ tương phản mới đọc được. Công cụ so tỷ lệ tương phản thật theo công thức WCAG chứ không đoán theo độ sáng, nên nó đúng cả ở vùng màu trung bình — chỗ mà cách đoán hay sai nhất.
Tôi dán mã màu từ Figma có tám ký tự thì sao?
Công cụ vẫn đọc được, hai ký tự cuối là độ trong suốt và sẽ được bỏ qua. Các công cụ màu ở đây làm việc với màu đặc, vì mọi phép tính tương phản trên màu trong suốt đều phụ thuộc thứ nằm phía sau.
Có lấy được màu từ một tấm ảnh không?
Chưa. Hiện tại công cụ chỉ chọn màu bằng bảng màu và bằng cách gõ mã. Lấy màu từ ảnh đang nằm trong kế hoạch.
Cập nhật lần cuối . Công cụ chạy hoàn toàn trên trình duyệt — dữ liệu bạn nhập không rời khỏi máy.