Color Palette Generator
Create color palettes, convert between HEX, RGB, HSL, and CMYK with contrast check.
READY
color_palette_generator.tool
READY
#6366F1rgb(99, 102, 241)
HEXHexadecimal
#6366F1
RGBRed, Green, Blue
rgb(99, 102, 241)
HSLHue, Saturation, Lightness
hsl(239, 84%, 67%)
CMYKCyan, Magenta, Yellow, Key
cmyk(59%, 58%, 0%, 5%)
WCAG Contrast Check
Check text readability against WCAG 2.1 accessibility standards
Sample Text
Ratio: 4.47:1
AA ✗AA Large ✓AAA ✗
Sample Text
Ratio: 4.70:1
AA ✓AA Large ✓AAA ✗
Color Harmonies
Generate palettes based on color theory
Tints & Shades
Lightness variations (50–900), Tailwind-scale
Export Palette
Copy colors as code for your project
:root {
--palette-50: #E8E8FD;
--palette-100: #D0D1FB;
--palette-200: #A1A3F7;
--palette-300: #7274F3;
--palette-400: #4346EF;
--palette-500: #1418EB;
--palette-600: #1013BC;
--palette-700: #0C0E8D;
--palette-800: #080A5E;
--palette-900: #04052F;
}// HOW IT WORKS
The tool converts a color between HEX, RGB, HSL and CMYK and checks text/background contrast against WCAG levels. Pick a color and read every notation at once.
Example
#0E7FA6 → RGB(14,127,166) → HSL(196°,84%,35%); contrast on white ≈ 4.7:1 (passes AA).
Notes
- HSL is handy for tweaking lightness/saturation; CMYK is for print, RGB/HEX for screens.
- WCAG AA needs ≥ 4.5:1 for normal text, AAA ≥ 7:1.