Chọn màu HEX, RGB, HSL, OKLCH, sắc độ và tông | We.Inc
Công cụ chọn màu HEX miễn phí: chọn hoặc dán màu để lấy giá trị HEX, RGB, HSL, OKLCH, sắc độ, tông màu và điểm tương phản trên nền trắng, đen.
Công cụ chọn màu HEX
Chọn màu hoặc dán giá trị HEX, RGB hay HSL để nhận mọi định dạng cần cho thiết kế và mã nguồn: HEX, RGB, HSL và OKLCH. Xem dải sắc độ và tông màu, đồng thời kiểm tra độ dễ đọc của chữ trên nền màu đó so với trắng và đen.
Dùng công cụ chọn màu hoặc nhập giá trị như #4F98FB, rgb(79, 152, 251) hay hsl(215, 95%, 65%).
Nhấp một lần để sao chép định dạng bất kỳ. OKLCH là định dạng CSS hiện đại giúp độ sáng nhất quán giữa các sắc màu.
Nhấp vào sắc độ hoặc tông màu bất kỳ để đặt thành màu hiện tại.
Xem tỷ lệ tương phản để quyết định nên dùng chữ trắng hay đen trên màu này.
Với nút, hãy nhắm mức tương phản giữa nhãn và màu nút ít nhất 4.5:1.
Tạo bảng màu từ một màu thương hiệu: dùng sắc độ sáng cho nền, màu chính cho nút, tông đậm cho trạng thái rê chuột và chữ.
Màn hình hiển thị khác nhau. Hãy kiểm tra màu thương hiệu trên điện thoại lẫn máy tính xách tay.
Câu hỏi thường gặp
Mã màu HEX là gì?
Đây là mã 6 chữ số cho màu hiển thị trên màn hình, viết bằng dấu # theo sau là 3 cặp chữ số thập lục phân đại diện cho đỏ, lục và lam. #FF0000 là đỏ thuần; #000000 là đen; #FFFFFF là trắng.
HEX, RGB và HSL khác nhau thế nào?
Cả 3 đều mô tả cùng màu theo cách khác nhau. HEX và RGB cho biết lượng đỏ, lục, lam. HSL cho biết sắc độ (góc trên vòng màu), độ bão hòa và độ sáng, thuận tiện hơn khi muốn tự điều chỉnh.
OKLCH là gì và tôi có nên dùng không?
OKLCH là định dạng màu CSS mới hơn, dựa trên cách con người cảm nhận màu. Hai màu có cùng giá trị L trông sáng như nhau, giúp tạo bảng màu nhất quán dễ hơn. Mọi trình duyệt lớn hiện nay đều hỗ trợ định dạng này.
Tỷ lệ tương phản được tính thế nào?
Công cụ dùng công thức WCAG 2: độ chói tương đối của màu sáng hơn cộng 0.05 rồi chia cho độ chói của màu tối hơn cộng 0.05. Muốn kiểm tra đầy đủ 2 màu, hãy dùng công cụ kiểm tra tương phản màu của We.Inc.
Chọn màu thương hiệu phù hợp với website
Màu thương hiệu cần làm được nhiều việc: nổi bật trên nút, dễ đọc khi có chữ trắng và không làm mỏi mắt trên cả trang. Xanh dương, xanh lá và đỏ đậm ở tông trung bình thường đáp ứng cả 3. Màu rất sáng (vàng, hồng pastel) có thể hợp với logo nhưng khó dùng làm nút vì cả chữ trắng lẫn chữ đen đều khó đọc nếu không điều chỉnh.
Bảng tương phản cho thấy điều này ngay. Nếu chữ trắng có điểm dưới 4.5:1, hãy dùng chữ đen hoặc chọn sắc độ tối hơn trong bảng cho nút.
Sắc độ sáng, tông đậm và bảng màu đơn giản
Sắc độ sáng là màu pha thêm trắng; tông đậm là màu pha thêm đen. Bảng màu website thực tế chỉ cần vài lựa chọn: sắc độ rất sáng cho nền các phần, màu chính cho nút và liên kết, cùng một tông đậm hơn cho trạng thái rê chuột. Thêm màu xám trung tính cho chữ và đường viền là bạn có một bộ màu hoàn chỉnh, nhất quán.
Để kiểm tra cặp chữ và nền cụ thể (ví dụ chữ xám trên nền nhạt), hãy dùng công cụ kiểm tra tương phản màu. Công cụ chấm theo cả chuẩn WCAG AA và AAA.