A color scheme is a set of colors chosen by a rule on the color wheel. A monochromatic scheme uses one hue in different lightness levels, and a complementary scheme pairs a color with the one directly opposite it. Knowing these rules makes it much easier to build a palette that looks planned instead of random. You can generate any of them in our color palette generator.
Monochromatic = one hue, many lightness levels (always matches). Complementary = two hues 180° apart (strong contrast). Analogous = neighbours within about 30° (calm). Triadic = three hues 120° apart (lively).
📑 Table of Contents
The color wheel and HSL
The color wheel arranges hues in a circle from 0° to 360°: red at 0°, green near 120°, blue near 240°. Designers often describe a color in HSL (hue, saturation, lightness). Hue picks the position on the wheel, saturation sets how vivid it is, and lightness sets how light or dark it is. Every scheme below is made by changing only hue or only lightness, which is why HSL is the easiest format for building palettes. For a quick reference on HEX, RGB and HSL see the palette generator.
All examples start from one base blue: #267FD9, which is HSL 210°, 70%, 50%.
Monochromatic colors
A monochromatic scheme keeps the hue and saturation fixed and changes only the lightness. Because every color shares a hue, they always look harmonious.
| Lightness | HEX | Use |
|---|---|---|
| 20% | #0F3357 | Text, dark backgrounds |
| 35% | #1B5998 | Headings, buttons |
| 50% | #267FD9 | Main brand color |
| 65% | #67A6E4 | Highlights, icons |
| 80% | #A8CCF0 | Backgrounds, borders |
This is the safest approach for clean interfaces, reports and presentations. The risk is that everything can look flat, so add contrast by using the lightest and darkest steps together, or add one neutral such as white or grey.
Complementary colors
Complementary colors sit opposite each other on the wheel, so you add 180° to the hue. The opposite of blue #267FD9 (210°) is orange #D98026 (30°). Placed side by side they create the strongest hue contrast, which makes them useful for calls to action.
Blue 210° → 30° (orange)
Red 0° → 180° (cyan, #2DD2D2 at the same saturation and lightness)
Use one color as the dominant and the other as a small accent. Using both at full strength in equal amounts tends to look harsh.
Analogous and triadic
| Scheme | Rule | Example from #267FD9 | Feel |
|---|---|---|---|
| Analogous | Neighbours, about ±30° | #26D9D9, #267FD9, #2626D9 | Calm, natural |
| Triadic | Three hues 120° apart | #267FD9, #D92680, #80D926 | Vibrant, playful |
| Complementary | Opposite, 180° | #267FD9, #D98026 | High contrast |
Analogous palettes work well for backgrounds and illustrations. Triadic palettes need a clear leader: choose one hue as the main color and use the others in small amounts.
The 60-30-10 rule
A simple way to apply any scheme is to split the design by area: about 60% a dominant (often neutral or light) color, 30% a secondary color and 10% an accent. For the blue and orange pair, that could be white and light blue for most of the page, mid blue for panels, and orange only for the main button.
Check contrast for text
Harmonious colors can still be hard to read. The WCAG AA guideline asks for a contrast ratio of at least 4.5:1 for normal text. Using the formula, the examples above compare to white like this (you can test your own pairs in our color contrast checker):
| Color on white | Contrast ratio | Normal text? |
|---|---|---|
| #0F3357 | 12.9 : 1 | Passes |
| #1B5998 | 7.2 : 1 | Passes |
| #267FD9 | 4.1 : 1 | Fails for small text |
| #67A6E4 | 2.6 : 1 | Fails |
A mid-tone brand color such as #267FD9 looks fine as a button background with large white text, but is slightly too light for small body text on white. Use a darker step from the monochromatic scale for text.
How to use the generator
Choose a scheme
Select monochromatic, complementary, analogous or triadic.
Generate
Click generate until you find a set you like.
Copy the codes
Click any color to copy its HEX, RGB or HSL value into your design.
Frequently Asked Questions
Conclusion
Start with one hue and change its lightness for a safe monochromatic palette, then add a complementary accent for emphasis. Test text contrast before you finalize. You can build all four schemes in the color palette generator.
This guide is general design education. Example colors are calculated from the stated HSL values and may look slightly different on different screens.