This color palette generator takes one base color and works out related colors from its position on the color wheel. It gives four sets: ten shades and tints of the same hue, a complementary set with two split complements, five analogous colors and a triadic set spaced 120 degrees apart. Each swatch shows its hex code and RGB value, and clicking a swatch copies the hex code for use in CSS or a design tool.
How to use the color palette generator
- Pick a base color with the color picker or type a six-digit hex code into the box after the # sign.
- Choose a tab: Shades & Tints, Complementary, Analogous or Triadic.
- The palettes update as you change the color. Generate Palette redraws them if you need it.
- Click any swatch to copy its hex code. The RGB value is printed under it if you need that instead.
- There is no export file, so copy the colors you want one at a time into your stylesheet or design tool.
What each palette tab contains
The tool converts your color to HSL (hue, saturation, lightness) and changes one of those values at a time.
| Tab | Swatches | How they are made |
|---|---|---|
| Shades & Tints | 10: Shade 1 to 5, Tint 1 to 5 | Same hue and saturation, lightness 9%, 18%, 27% and so on up to 90% |
| Complementary | 5: Base, Complement, Split 1, Split 2, Comp. Tint | Hue turned 180, 150 and 210 degrees; Comp. Tint is the complement 15 points lighter |
| Analogous | 5: -30°, -15°, Base, +15°, +30° | Hue moved 15 and 30 degrees either side |
| Triadic | 3: Base, +120°, +240° | Hue turned a third and two thirds of the way round |
Because the color palette generator only moves one HSL value at a time, the results are predictable and easy to tweak by hand. Saturation stays the same in every set, so the colors keep the intensity of your base. The five "shades" are the darker half of the lightness scale and the five "tints" the lighter half.
Example: a color palette from hex #1F5C99
The page opens with #1F5C99, a mid blue (hue 210°, saturation 66%, lightness 36%). These are the values it produces:
| Set | Hex codes |
|---|---|
| Shades & Tints | #081726, #0f2e4c, #174573, #1f5c99, #2773bf, #3c8ad7, #62a1df, #88b8e7, #aecfef, #d5e6f6 |
| Complementary | #1F5C99, #995c1f, #991f1f, #99991f, #d58230 |
| Analogous | #1f9999, #1f7a99, #1f5c99, #1f3e99, #1f1f99 |
| Triadic | #1f5c99, #991f5c, #5c991f |
Generated codes are lowercase. The Base swatch in the Complementary tab shows the code exactly as you typed it.
Choosing color combinations for a site
A common approach is one main color, one accent and a few neutrals. With the blue above, the darkest shade (#081726) works for body text on the lightest tint (#d5e6f6), and the complement (#995c1f) can mark buttons that need to stand out from blue links.
Check contrast before you commit. WCAG 2 asks for at least 4.5:1 between normal text and its background. By the WCAG formula, white text on #1F5C99 scores 6.89:1 and passes, while white on Tint 2 (#62a1df) scores 2.73:1 and fails. The color palette generator does not calculate contrast, so run your pairs through a contrast checker before you build a page around them.
Once you have picked, store the values as CSS custom properties such as --brand: #1f5c99; and tidy the stylesheet with the CSS formatter. The same colors can go into a site icon with the favicon generator and into your share images (see Open Graph image sizes).
Limits
- It is a color scheme generator built on color-wheel rules. It cannot pull a palette from a photo or image, and it does not suggest colors from words or names.
- The hex box takes six digits only. Three-digit shorthand such as #fff and color names are ignored until you type six digits.
- Swatches show hex and RGB. HSL values are used in the maths but not displayed.
- Everything runs in your browser, with nothing sent to a server.
Other small utilities for front-end work are in the developer tools collection.
