Chuyển đổi mã màu, tạo bảng màu hài hòa, kiểm tra độ tương phản, và tạo các biến thể màu sắc cho thiết kế và lập trình.
1. Chuyển đổi mã màu (F1): Chọn màu hoặc nhập mã HEX/RGB/HSL
2. Bảng màu hài hòa (F2): Chọn màu gốc và loại bảng màu
3. Biến thể màu (F3): Tạo 10 tông màu từ sáng đến tối
4. Độ tương phản (F4): Kiểm tra khả năng đọc theo chuẩn WCAG
5. Màu ngẫu nhiên: Tạo nhiều màu ngẫu nhiên cùng lúc
💡 Phím tắt: Nhấn F1-F4 để chuyển nhanh giữa các chế độ
6. Nhấn "Xử lý" (hoặc tên button tương ứng) hoặc phím tắt Ctrl+Enter.
7. Sao chép kết quả hoặc nhấn Ctrl+K để xóa.
• HEX: Mã màu 6 ký tự (#RRGGBB) hoặc 3 ký tự (#RGB)
• RGB: Red, Green, Blue (0-255)
• HSL: Hue (0-360°), Saturation (0-100%), Lightness (0-100%)
• WCAG AA: Tỷ lệ tương phản ≥ 4.5:1 cho chữ thường, ≥ 3:1 cho chữ lớn
• WCAG AAA: Tỷ lệ tương phản ≥ 7:1 cho chữ thường, ≥ 4.5:1 cho chữ lớn
Công cụ này giúp designers và developers làm việc với màu sắc một cách chuyên nghiệp.
5 chế độ làm việc: Chuyển đổi, bảng màu, biến thể, kiểm tra tương phản, ngẫu nhiên
4 định dạng màu: HEX, RGB, HSL, CMYK
6 loại bảng màu: Complementary, Analogous, Triadic, Tetradic, Split, Monochromatic
WCAG Compliance: Kiểm tra độ tương phản theo chuẩn quốc tế
Copy nhanh: Sao chép mã màu chỉ với 1 click
🎨 Định dạng màu:
• HEX: #3498db (mỗi cặp là R, G, B trong hệ 16)
• RGB: rgb(52, 152, 219) - Red, Green, Blue (0-255)
• HSL: hsl(204, 70%, 53%) - Hue, Saturation, Lightness
• CMYK: Cyan, Magenta, Yellow, Key (dùng cho in ấn)
🎭 Bảng màu hài hòa:
• Complementary: 2 màu đối diện trên vòng tròn màu (180°)
• Analogous: 3 màu liền kề nhau (±30°)
• Triadic: 3 màu cách đều nhau (120°)
• Tetradic: 4 màu tạo hình chữ nhật (90°, 180°, 270°)
• Split Complementary: 1 màu + 2 màu bên cạnh màu đối diện
• Monochromatic: Các biến thể sáng/tối của 1 màu
👁️ Độ tương phản (Contrast Ratio):
Công thức: (L1 + 0.05) / (L2 + 0.05)
Trong đó L1, L2 là độ sáng tương đối (relative luminance)
WCAG 2.0 Standards:
• Level AA: 4.5:1 (chữ thường), 3:1 (chữ lớn ≥18pt)
• Level AAA: 7:1 (chữ thường), 4.5:1 (chữ lớn)
Ví dụ: Trắng (#FFF) trên đen (#000) = 21:1 (tốt nhất)
🌈 Tints & Shades:
• Tints: Thêm trắng vào màu gốc (sáng hơn)
• Shades: Thêm đen vào màu gốc (tối hơn)
• Tones: Thêm xám vào màu gốc (nhạt hơn)
💡 Ứng dụng thực tế:
• UI Design: Tạo theme color, button states, hover effects
• Branding: Xây dựng bộ nhận diện thương hiệu
• Accessibility: Đảm bảo người khuyết tật có thể đọc được
• CSS Variables: Sao chép mã màu cho CSS/SCSS
• Print Design: Chuyển đổi RGB sang CMYK
