Color Palette Generator
Make a 5-color palette from one hex color: monochromatic, complementary, analogous, triadic or split-complementary, with WCAG contrast for each swatch. How it works
Use the Color Palette Generator
rgb(0, 123, 255)
hsl(211, 100%, 50%)
White text 3.97:1 large text only
Black text 5.27:1 AA
Click a hex code to copy it. Contrast is WCAG 2.x for white and for black text on each swatch. With the palette area focused, press Space to shuffle the colours that are not locked.
About the Color Palette Generator
From #007bff, a monochromatic palette is #003166, #0056b3, #007bff, #4da3ff and #99caff: one hue and saturation in 15-point lightness steps. The Color Palette Generator builds five colors from one hex color in five schemes and shows, under each swatch, its contrast ratio with white and with black text and the WCAG 2.x level it reaches. Saturation and lightness sliders shift the unlocked swatches, and a color vision view shows the palette roughly as people with color blindness see it.
The five schemes from #007bff
| Scheme | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|
| Monochromatic | #003166 | #0056b3 | #007bff | #4da3ff | #99caff |
| Complementary | #007bff | #a3cbf5 | #ff8400 | #f5cda3 | #663500 |
| Analogous | #00fbff | #00bbff | #007bff | #003bff | #0400ff |
| Triadic | #007bff | #ff007b | #7bff00 | #ff66b0 | #4a9900 |
| Split Complementary | #007bff | #ff0400 | #faff00 | #ff6966 | #969900 |
#007bff is hsl(211, 100%, 50%). The schemes turn the hue and change the lightness in HSL.
White and black text on the monochromatic swatches
| Swatch | White text | Level | Black text | Level |
|---|---|---|---|---|
| #003166 | 12.87:1 | AAA | 1.63:1 | fails |
| #0056b3 | 7.04:1 | AAA | 2.98:1 | fails |
| #007bff | 3.97:1 | large text only | 5.27:1 | AA |
| #4da3ff | 2.62:1 | fails | 7.99:1 | AAA |
| #99caff | 1.71:1 | fails | 12.24:1 | AAA |
WCAG 2.x: normal text needs 4.5:1 for AA and 7:1 for AAA; large text (18 point, or 14 point bold) needs 3:1 for AA. Ratios are truncated to two decimals, not rounded.
Frequently asked questions
- What is a complementary color palette?
- One built on two opposite hues, 180° apart on the color wheel. From #007bff (hue 211°) the generator gives #007bff, #a3cbf5, #ff8400, #f5cda3 and #663500: the base, the orange opposite, a lighter and less saturated version of each, and a darker orange.
- How are analogous, triadic and split-complementary colors chosen?
- By turning the hue. Analogous takes −30°, −15°, 0°, +15° and +30°; triadic adds +120° and +240°; split complementary adds +150° and +210°, the two neighbors of the opposite hue. Triadic and split complementary also add a lighter and a darker version (20 points of lightness). From #007bff the triadic palette is #007bff, #ff007b, #7bff00, #ff66b0 and #4a9900.
- Does white or black text pass WCAG on #007bff?
- White text is 3.97:1, enough only for large text (3:1); black text is 5.27:1, which passes AA for normal text (4.5:1) but not AAA (7:1). Both ratios are shown under every swatch.
- Which swatches take white text and which take black?
- Use the higher of the two ratios shown under each swatch. In the monochromatic palette from #007bff, white text suits the two dark swatches, #003166 at 12.87:1 and #0056b3 at 7.04:1, both AAA. Black text suits the other three, but on #007bff itself it reaches only AA at 5.27:1 and misses AAA (7:1).
- How do I keep one color and change the others?
- Lock that swatch and press Regenerate, or press Space while the palette area has focus. The base color moves 30° to 90° round the hue circle with a small random change in saturation and lightness, and the unlocked swatches follow it. To make the others darker, lighter, duller or brighter without changing their hue, move the Saturation or Lightness slider (−50 to +50 points): Lightness −10 turns #007bff into #0062cc, which takes white text at 5.80:1 (AA), while a locked swatch keeps its color.
- Can I save, export or share a palette?
- The palette, the scheme and the locks are saved in this browser until you press Clear Saved Values. Export copies plain hex, CSS variables, an SCSS map, a Tailwind config or a JSON array, and Shareable URL puts the palette after # in the link; opening it shows the palette without replacing your saved one.
Related Tools
View all toolsRGB to Hex
Convert RGB to a hex color code and back: rgb(255, 136, 0) is #FF8800. Paste #abc, ff8800 or 255,136,0; each channel is a whole number 0 to 255.
Color Picker
Pick a color or type a HEX, RGB or HSL value to get the other two, the CSS and CMYK forms, and its WCAG contrast ratio on white, black or a second color.
Hex to RGBA Converter
Convert hex to rgba(): #007BFF is rgba(0, 123, 255, 1). Reads 3, 4, 6 and 8-digit hex or rgb()/rgba(), sets the opacity, and gives hsla() and 8-digit hex.
Color Contrast Checker
Enter a text and a background color, with opacity, to get the WCAG contrast ratio and AA and AAA pass or fail for normal and large text.
Color Mixer
Mix two to four hex colors by weight in OKLab, sRGB or linear light: red and blue at 50% give #8c53a2 in OKLab. Copy HEX, RGB, HSL, OKLCH or CSS color-mix().
CSS Gradient Generator
Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.