Colors
Color Scheme From Base Hue
Used by developers, writers, and creators worldwide.
A color scheme generator built on color theory takes a single hue angle and derives a complete, harmonious palette instantly. Enter any value from 0 to 360, pick a harmony rule — complementary, triadic, analogous, or tetradic — and get mathematically balanced hue relationships you can carry into any design tool. Designers use this at the start of a project, before committing to specific hex codes. The four scheme types cover most real-world needs: complementary pairs for maximum contrast, triadic sets for vibrant energy, analogous groupings for calm cohesion, and tetradic spreads when you need four-color variety. Each output gives you the hue angles you need to build a full palette in Figma, CSS, or wherever you work.
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Enter a base hue value between 0 and 360 in the Hue field; 0 is red, 120 is green, 240 is blue.
- Select a scheme type from the dropdown — Complementary, Triadic, Analogous, or Tetradic — based on how much contrast you want.
- Click Generate to produce the full color scheme output with all hue values.
- Copy the individual hue values and paste them into your design tool's HSL color picker to build out full hex codes.
- Adjust saturation and lightness in your design tool to fit your specific medium, brand tone, or accessibility requirements.
Use Cases
- •Prototyping a CSS custom-property color system using triadic hue angles before defining saturation and lightness tokens
- •Building a three-color SaaS dashboard palette and verifying the hues hold contrast across light and dark modes
- •Generating a complementary accent color for a hero CTA button against a cool blue brand primary
- •Teaching color theory in a design class with live analogous and tetradic examples students can adjust in real time
- •Selecting a four-hue tetradic base for a poster layout in Adobe Illustrator before converting to CMYK
Tips
- →Start with a hue around 200–220 (blue-cyan) if you want a corporate feel; warm hues (20–40) read as energetic or approachable.
- →Triadic schemes work best when you assign one color 60% of the visual weight and split the remaining two hues at 25% and 15%.
- →For accessible UI design, generate an analogous scheme, then check each pair with a contrast checker — analogous hues often need lightness adjustment to pass WCAG AA.
- →Combine complementary scheme output with a neutral gray derived from the same base hue by desaturating it to under 10% — this keeps the palette from feeling clinical.
- →If your tetradic palette feels too busy, drop one of the four hues entirely and treat the remaining three as a custom triadic variant.
- →Run the same hue through two different scheme types and compare outputs side by side — this quickly reveals whether your base hue suits a high-contrast or low-contrast direction.
FAQ
how do I turn the hue angles into actual hex codes I can use
Take each hue angle output and open an HSL color picker — Figma, Chrome DevTools, or hslpicker.com all work. Set saturation to 60–75% and lightness to 45–55% for a balanced mid-tone, then adjust from there. The generator gives you the relationships; you dial in the final values to match your medium.
which color scheme type should I use for a minimal UI
Analogous schemes are the safest starting point for minimal interfaces because adjacent hues share undertones and avoid jarring contrast. Use the darkest variant for text or borders, the mid-tone as a surface color, and the lightest for subtle highlights or disabled states.
does the base hue I pick affect which scheme works best
Yes — warm hues in the 0–60 range are already high-energy, so a complementary scheme can feel aggressive; triadic or analogous tends to be easier to control. Cool hues around 180–240 handle complementary and tetradic pairings well because the warm accent they generate adds punch without dominating the composition.