Color Palette Generator — Pro Schemes from Any Hex
Start from one brand color and get five harmonized palettes — complementary, analogous, triadic, tetradic plus tint and shade ramps — computed with proper hue rotation in linear RGB. Every swatch copies its hex on click, and a ready CSS custom-properties block drops straight into your stylesheet.
🔒 100% Private — runs in your browser, nothing is uploadedHow to Use This Color Palette Generator (Step-by-Step)
- Pick a base color — Use the picker or type a hex like #06b6d4.
- Click Generate — Five harmonized groups appear with hex codes.
- Copy swatches or CSS — Click any swatch, or copy the whole variables block.
Hue Rotation Done Properly — Under the Hood
Rotating a color around the hue wheel is a matrix multiplication in linear RGB space (the classic Graphics Gems rotation matrix). The tool converts sRGB hex to linear values, applies the rotation for 30°, 90°, 120°, 180° and 240°, then converts back — producing harmonies that match what designers build in Figma, not the muddy results of naive HSL math.
Frequently Asked Questions
Are these palettes color-blind safe?
They follow color theory; always verify text contrast with a WCAG checker.
How do I use the CSS variables?
Paste the :root block and reference colors with var(--base).
Why linear RGB rotation?
Naive HSL hue shifts look uneven; matrix rotation in linear space keeps perceived brightness stable.