Colors
Color Scheme From Base Hue
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.
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.
What are the main types of color scheme?
The classics are monochromatic (one hue, varied), analogous (neighbouring hues), complementary (opposites), split-complementary, triadic (three evenly spaced), and tetradic (four). Each balances harmony against contrast differently. The generator takes one base hue and applies complementary, triadic, and analogous rules to it, so you can compare several scheme types from the same starting colour and pick the relationship that suits your design.
What is the color wheel and how do schemes use it?
The colour wheel arranges hues in a circle so their relationships are visible — opposite colours contrast, neighbouring ones harmonise — and every scheme is just a rule for picking positions on it (opposite for complementary, every 120 degrees for triadic). The generator works from a hue's position on that wheel, so the schemes it produces follow these geometric relationships rather than arbitrary guesses.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.