How to use the color palette generator
- Type a base color as hex (such as #167A4C), or use the color picker. RGB and HSL values work too.
- Choose a Color harmony: complementary, analogous, triadic, square, split complementary or monochromatic.
- Read the swatches for each color's hex, RGB and HSL values, and the table for its contrast ratio with white and with black.
- Press Copy as CSS variables to paste the palette into a stylesheet, or Copy hex list for a plain list.
How the colors are made
The tool converts your base color to HSL, which describes a color by hue (the position on the color wheel, 0 to 360 degrees), saturation and lightness. A harmony keeps saturation and lightness the same and adds fixed offsets to the hue. Complementary uses 0 and 180 degrees, analogous uses minus 30, 0 and plus 30, triadic uses 0, 120 and 240, square uses 0, 90, 180 and 270, and split complementary uses 0, 150 and 210. Monochromatic keeps the hue and saturation and changes the lightness in steps of 15 points, from 30 below to 30 above, kept between 5 and 95.
The base color is always kept exactly as you entered it, so rounding in the conversion never changes it. The other colors are converted back to RGB and rounded to whole numbers. HSL harmonies are a simple way to start. They are not the same as the color wheels used in painting, and two colors with equal HSL lightness can still look different in brightness.
What the contrast ratio tells you
Each color is checked against white and black text. The contrast ratio is (L1 + 0.05) divided by (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker, as defined in WCAG 2.1. Ratios run from 1 : 1 (identical) to 21 : 1 (black on white). WCAG level AA asks for at least 4.5 : 1 for normal text and 3 : 1 for large text.
The ratios are rounded down to two places, so a value that is a hair short of 4.5 is never shown as a pass. A pass here covers only the contrast between two flat colors. It does not cover text over images, color blindness, or other WCAG rules. To test any two colors, use the color contrast checker, and to pick or convert a single color use the color picker.
Using a palette well
A harmony is a starting point. Most designs use one color for most of the page, a second for emphasis and neutrals for text and backgrounds. Try the triadic or split complementary palette, then pick one color to lead and use the others sparingly. For smooth transitions between two colors, try the CSS gradient generator. Everything runs in your browser and no colors are sent anywhere.
Assumptions and limits
- Colors are in the sRGB space used by CSS, and transparency is ignored.
- Harmonies use hue offsets in HSL. Other color models, such as the traditional artists wheel, give different companions.
- Contrast ratios are for flat colors against pure white (#FFFFFF) or pure black (#000000).
- Hex output is in capital letters. RGB and HSL values are rounded to whole numbers.
Frequently asked questions
What is a triadic color palette?
It uses three hues spaced 120 degrees apart on the color wheel. This tool keeps the saturation and lightness of your base color, so the three colors look balanced in strength.
What contrast ratio do I need for readable text?
WCAG level AA asks for at least 4.5 to 1 for normal size text and 3 to 1 for large text. Level AAA asks for 7 to 1 for normal text. The table shows the ratio for each color on white and on black.
Can one palette color pass on both white and black?
At the 4.5 to 1 level only a very narrow band of mid tones, with a relative luminance of about 17.5 to 18.3 percent, passes on both. Most colors pass on one side only, so check the table for the text color you plan to use.
Can I use these colors on my website?
Yes. Copy the CSS variables and use them in your stylesheet. Check the contrast for each text and background pair you actually use.