Bộ chọn màu HEX
Các nhà thiết kế và lập trình viên thường phải sử dụng cùng một màu trong bốn biểu diễn khác nhau tới hàng trăm lần mỗi ngày. Chỉ cần nhấp vào bất kỳ vị trí nào trong trường độ bão hòa/tính giá trị 2D, kéo thanh điều chỉnh tông màu hoặc dán một giá trị, công cụ chọn này sẽ hiển thị các giá trị HEX, RGB, HSL, HSV và CMYK cạnh nhau – kèm theo các kiểm tra độ tương phản theo tiêu chuẩn WCAG so với đen trắng, giúp bạn biết ngay liệu màu sắc có dễ đọc hay không.
Làm thế nào để chọn một màu sắc
-
1
Chọn tông màu
Trượt thanh điều chỉnh màu sắc theo phương thẳng đứng xuyên suốt dải từ 0 đến 360°.
-
2
Mức bão hòa và giá trị của điểm chọn
Nhấp hoặc kéo vào bên trong ô vuông 2D để thiết lập độ sống động và độ sáng của màu sắc.
-
3
Tối ưu hóa chi tiết với các đầu vào
Nhập các giá trị chính xác dưới dạng HEX, RGB, HSL, HSV hoặc CMYK — cả năm trường sẽ được đồng bộ hóa với nhau.
-
4
Kiểm tra tính dễ truy cập và khả năng sao chép
Các tỷ lệ tương phản so với đen trắng hiển thị trực tiếp trong giao diện; chỉ cần một cú nhấp là bạn có thể sao chép biểu diễn cần thiết.
Các ký hiệu màu trong thực tế
Mỗi mô hình màu sắc đều trả lời một câu hỏi hơi khác nhau.
Tham chiếu ký hiệu
| Ký hiệu | Thành phần | Nơi sử dụng |
|---|---|---|
| HEX | #RRGGBB | CSS, công cụ thiết kế, hướng dẫn xây dựng thương hiệu |
| RGB | đỏ: 0–255, xanh lá: 0–255, xanh dương: 0–255 | CSS rgb(), các trình soạn ảnh |
| HSL | màu sắc từ 0 đến 360°, độ bão hòa (%), độ sáng (%); | CSS hsl(), các hệ thống thiết kế |
| HSV/HSB | màu sắc từ 0 đến 360°, độ bão hòa (%), giá trị/tính sáng (%); công cụ chọn màu trong Photoshop và Figma | |
| CMYK | xanh lục %, đỏ tím %, vàng %, đen chủ đạo % | In, tiền in |
| OKLCH | độ nhạt (%), sắc độ, tông màu | Các bảng màu của Mô-đun Màu CSS Hiện đại phiên bản 4 |
Tập hợp các tính năng hỗ trợ khả năng truy cập
WCAG 2.2 quy định tỷ lệ tương phản tối thiểu giữa văn bản và nền:
- AA cho văn bản thông thường: ≥ 4,5:1
- AA cho văn bản lớn (in đậm 18 pt hoặc 14 pt): tỷ lệ ≥ 3:1
- AAA cho văn bản thông thường: ≥ 7:1
Bộ chọn sẽ tính toán tỷ lệ giữa màu trắng và màu đen theo thời gian thực. Nếu màu nền tùy chỉnh có vai trò quan trọng, hãy sử dụng công cụ kiểm tra độ tương phản chuyên dụng cho từng cặp màu.
Những mẹo nhỏ
- HEX là giá trị mặc định trong hầu hết các công cụ thiết kế; tuy nhiên, dạng số thập phân ba chữ số ngắn (ví dụ:
#F60) tương đương với#FF6600chứ không phải#F06060. HSL thuận tiện hơn khi tạo bảng màu: hãy cố định màu sắc và điều chỉnh độ sáng để tạo ra các sắc thái khác nhau. – CMYK và RGB không thể chuyển đổi hoàn hảo lẫn nhau; việc in định dạng CMYK phụ thuộc vào hồ sơ in ấn của nhà in. Hãy luôn in mẫu để kiểm tra trên giấy thực tế. – Nếu bạn thiết kế cho CSS hiện đại, hãy cân nhắc sử dụng OKLCH để tạo các mức độ sáng đồng đều về mặt thị giác.
Câu hỏi thường gặp
Photoshop áp dụng một hồ sơ màu (thường là sRGB dành cho màn hình, thường khác với hồ sơ màu dùng cho in ấn). Các trình duyệt sẽ chuyển các giá trị HEX không được gắn nhãn thành sRGB. Nếu tài liệu của bạn được thiết lập ở chế độ Adobe RGB hoặc ProPhoto, các giá trị điểm ảnh sẽ giống nhau nhưng màu sắc nhìn thấy sẽ thay đổi.
Đúng vậy – cả hai đều mô tả màu đỏ hoàn toàn, trong đó màu đỏ tương ứng với giá trị 255, còn màu xanh lá và xanh dương tương ứng với giá trị 0. HEX chỉ là cách biểu diễn nhị phân lục thập hai gồm hai chữ số cho mỗi giá trị kênh từ 0 đến 255.
Chọn màu chính của bạn, chuyển sang hệ thống HSL, sau đó điều chỉnh độ sáng theo các bước 10% trong khi giữ nguyên sắc thái và độ bão hòa. Bạn sẽ thu được một dãy các sắc độ và màu sắc liên tục nằm trên cùng một sắc thái.
Các màu sắc vừa được sử dụng sẽ được lưu trong bộ nhớ cục bộ của trình duyệt, nhờ đó vẫn hiển thị rõ ràng khi làm mới trang. Không có dữ liệu nào được gửi đến máy chủ, và bạn có thể xóa lịch sử bảng màu bất cứ lúc nào.
Công cụ liên quan
Trình tạo bảng màu
Tạo bảng màu 4-8 màu hài hòa từ màu cơ bản bằng cách sử dụng các sơ đồ bổ sung, tương tự, bộ ba và bổ sung tách.
Bộ tạo số ngẫu nhiên
Tạo một màu RGB ngẫu nhiên, xem các giá trị hex, HSL và RGB, và sao chép bất kỳ định dạng nào chỉ với một cú nhấp chuột.
Bộ tạo bảng màu ngẫu nhiên
Tạo ra các bảng màu năm sắc được xây dựng dựa trên một tông nền ngẫu nhiên, bao gồm các biến thể bổ trợ, tương tự và tam sắc.
Định dạng JSON
Định dạng và in đẹp cho dữ liệu JSON với độ lõm có thể điều chỉnh được, các khóa được sắp xếp theo thứ tự, cùng chức năng xác thực trực tiếp giúp hiển thị lỗi tại vị trí chính xác.
Bộ tạo số ngẫu nhiên
Tạo các ký tự ngẫu nhiên từ bảng chữ cái tiếng Anh. Chọn kiểu chữ (hoàn toàn hoa, toàn thường), có thể bao gồm ký tự trùng lặp hoặc chỉ sử dụng ký tự duy nhất, và thiết lập số lượng ký tự cần tạo.
Máy tính tuổi
Tính tuổi chính xác theo năm, tháng và ngày từ ngày sinh, kèm tổng số ngày, giờ và đếm ngược đến sinh nhật kế tiếp.