Chọn màu (HEX, RGB, HSL, OKLCH)
Chọn màu trên ô bão hòa–độ sáng hoặc nhập HEX, RGB, HSL hay OKLCH. Mọi định dạng được đồng bộ, có thang tint/shade, eyedropper (Chromium) và xuất palet CSS/JSON.
Cách chọn và xuất màu
1. Kéo trên ô màu và thanh hue, hoặc dán HEX/RGB/HSL/OKLCH.
2. Đọc HEX, RGB, HSL và OKLCH đồng bộ trên thanh tóm tắt.
3. Bấm một bậc bóng hoặc mẫu hòa sắc để khám phá màu liên quan.
4. Sao chép giá trị, liên kết ?hex= hoặc xuất biến CSS / JSON.
Ví dụ bộ chọn màu
Terracotta thương hiệu #8F665E
Bộ chọn HSV giữ hue khi bạn tối màu cho hover. Xuất --color và --shade-* thành biến CSS.
Palet tương đồng cho dashboard
Chọn Tương đồng để lấy hue ±30° và ±60°. Sao chép dải màu thành custom properties cho thẻ và biểu đồ.
OKLCH cho bước đều
Thang độ đổi độ sáng OKLCH, đều hơn việc trộn HEX với trắng. Dùng oklch() trong CSS hiện đại.
Khi nào nên dùng công cụ này
• Khi chọn màu UI và cần HEX, RGB, HSL và OKLCH cùng lúc.
• Khi tạo bậc hover/muted từ một hue thương hiệu.
• Khi xuất palet nhỏ (hòa sắc + thang) sang biến CSS.
Hòa sắc cho palet UI
Bổ sung cách nhau 180° — tương phản mạnh, dùng tiết kiệm trên CTA. Tương đồng (±30–60°) gắn kết dashboard. Tam giác và tứ giác đa dạng hơn; giảm bão hòa màu phụ để primary dẫn dắt. Kiểm tra chữ bằng công cụ tương phản WCAG.
Câu hỏi thường gặp
HEX vs RGB vs HSL vs OKLCH?
HEX và RGB là cùng màu sRGB. HSL tiện để chỉnh hue/độ sáng. OKLCH mang tính tri giác: bước L tương tự trông đều hơn, và oklch() là CSS hiện đại hợp lệ.
Eyedropper có chạy mọi trình duyệt?
API EyeDropper có trên Chromium (Chrome, Edge). Chỗ khác hãy nhập giá trị hoặc dùng bộ chọn trực quan.
Tôi có thể chia sẻ màu không?
Có. URL cập nhật ?hex=RRGGBB. Sao chép liên kết để mở lại cùng màu.
Màu có gửi lên máy chủ không?
Không. Chuyển đổi, hòa sắc và xuất chạy cục bộ trên trình duyệt.