Công cụ chọn màu là gì?
Chọn màu trực quan và chuyển đổi giữa HEX, RGB, HSL và CMYK. Sao chép mọi định dạng chỉ với một cú nhấp và tinh chỉnh giá trị trực tiếp trong trình duyệt.
Cách sử dụng công cụ chọn màu
- Nhập giá trị HEX hoặc dùng trình chọn trực quan để chọn màu.
- Xem lại các giá trị RGB, HSL và CMYK đã chuyển đổi được hiển thị bên dưới.
- Tinh chỉnh các đầu vào cho đến khi màu khớp với mục tiêu thiết kế hoặc mã của bạn.
- Sao chép định dạng bạn cần chỉ với một cú nhấp.
Hướng dẫn nhanh
Tham chiếu định dạng màu so sánh HEX, RGB, HSL và CMYK để bạn có thể chọn định dạng phù hợp cho quy trình CSS, thiết kế và in ấn.
Hiểu về cách chọn màu ▾
Ví dụ
Các trường hợp sử dụng phổ biến
- Chọn màu UI chính xác cho CSS hoặc design token
- Sao chép giá trị HEX, RGB hoặc HSL vào mã front-end
- Kiểm tra và so sánh màu trong quá trình QA thiết kế
- Tạo bảng màu nhỏ từ một màu đã chọn
Câu hỏi thường gặp
HEX, RGB, RGBA, HSL, HSLA và CMYK. Nhấp vào bất kỳ trường định dạng nào để sao chép giá trị.
Có, trên các trình duyệt hỗ trợ EyeDropper API (Chrome 95+). Nhấp vào biểu tượng eyedropper để chọn màu từ bất kỳ đâu trên màn hình.
HSL (Hue, Saturation, Lightness) và HSB/HSV (Hue, Saturation, Brightness/Value) đều là mô hình màu dạng trụ nhưng khác nhau ở cách định nghĩa trục thứ ba. Trong HSL, độ sáng 50% là màu “thuần”. Trong HSB, độ sáng 100% nghĩa là độ sáng tối đa, gần hơn với màu mà các nghệ sĩ coi là rực rỡ. CSS dùng HSL; Photoshop và Figma dùng HSB.
Công cụ này hiển thị giá trị màu và chuyển đổi. Để kiểm tra độ tương phản trợ năng (tỷ lệ WCAG AA/AAA) với màu nền, hãy dùng công cụ Contrast Checker chuyên dụng.