Monochromatic Color Scheme
Build designs using variations of a single hue for elegant consistency.
Color Formats Supported
- HEX: 6-digit hexadecimal codes (#FF5733)
- RGB: Red, Green, Blue values (255, 87, 51)
- HSL: Hue, Saturation, Lightness (11°, 100%, 60%)
- CMYK: Cyan, Magenta, Yellow, Key for print
Using Colors Effectively
1. Accessibility: Ensure sufficient contrast for text readability 2. Consistency: Use a defined palette throughout your project 3. Hierarchy: Use color to guide attention and establish importance 4. Brand: Maintain consistent colors across all materials
Color Theory Basics
- Primary colors: Red, blue, yellow (can't be mixed from other colors)
- Secondary colors: Orange, green, purple (mixed from primaries)
- Warm vs Cool: Warm colors (red, orange) feel energetic; cool colors (blue, green) feel calm
Monochromatic Schemes
One hue, many lightnesses and saturations. The safest scheme there is, and the one most software interfaces actually use once you discount the semantic colours.
Its strength is that hierarchy comes entirely from lightness, which survives greyscale printing, colourblindness and low-quality displays. Its weakness is that nothing stands out, so you need at least one accent from outside the hue for calls to action.
The practical recipe: a full 9-step ramp of your brand hue, a full 9-step neutral ramp, and four semantic colours. That is a complete design system palette, and it is monochromatic plus exceptions.
Worked Out on a Real Colour
Starting from #2563EB — a typical brand blue:
| Role | HEX | HSL | Contrast on white |
|---|---|---|---|
| Base | #0A296B | hsl(221, 83%, 23%) | 13.6:1 |
| Colour 2 | #1043B1 | hsl(221, 83%, 38%) | 8.5:1 |
| Colour 3 | #2463EB | hsl(221, 83%, 53%) | 5.2:1 |
| Colour 4 | #6A95F1 | hsl(221, 83%, 68%) | 2.9:1 |
| Colour 5 | #B0C6F8 | hsl(222, 84%, 83%) | 1.7:1 |
As CSS
``css
:root {
--scheme-1: #0a296b;
--scheme-2: #1043b1;
--scheme-3: #2463eb;
--scheme-4: #6a95f1;
--scheme-5: #b0c6f8;
}
`
Or derive them at runtime, so changing the base colour updates the whole scheme:
`css
:root {
--brand: #2563eb;
--brand-rotated: hsl(from var(--brand) calc(h + 120) s l);
}
`
Relative colour syntax is supported in all current browsers and removes the need to keep
derived values in sync by hand.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.