Create Your Perfect Color System
Generate beautiful, accessible, and consistent color palettes for your design system. Perfect for developers and designers.
Purple Heart
Color Accessibility
Contrast Checker
Large Text (18pt+)
Normal Text (16pt)
Contrast Ratio:
WCAG AA (Normal Text):
WCAG AA (Large Text):
WCAG AAA:
Accessible Color Recommendations
Safe Background Colors
Safe Text Colors
UI Components
Product Card
New Arrival
Apple
AirPods 4
$299
$399
-25%
Common Elements
This is an alert message
New
Featured
Form Elements
Forgot password?
Color System Guide
Penggunaan Shade
Light Shades (50-200)
- • Background colors
- • Hover states
- • Disabled states
Medium Shades (300-600)
- • Primary UI elements
- • Buttons
- • Active states
Dark Shades (700-950)
- • Text colors
- • Borders
- • Shadows
Tips
Hindari warna ekstrim seperti pure white (#FFFFFF) atau pure black (#000000) untuk hasil shade yang lebih baik.
Gunakan shade 600 sebagai warna utama dan acuan untuk generate shade lainnya.
Tekan spacebar untuk generate warna random, atau masukkan kode HEX manual untuk warna spesifik.