Color Palette Generator
Type or pick one colour and this builds five swatches around it, in any of six harmonies: complementary, analogous, triadic, tetradic, monochromatic or split complementary, each turned from your own seed on the HSL wheel. What most generators leave to you is the accessibility, so every swatch here arrives with its WCAG 2.1 contrast ratio against pure white and pure black already measured and the level it reaches spelled out, and copies in HEX, RGB, HSL or OKLCH with one click. There are three colour-vision views alongside, and the whole thing runs in your browser with nothing uploaded and no account.
Complementary from #0B7A85
Click any swatch to copy it in the chosen notation. Every ratio is measured against pure white and pure black, which are the two backgrounds a swatch is most often dropped onto.
The first three, read against white
Every swatch arrives with its contrast already measured. The harmony turns the hue of your seed on the HSL wheel and steps the lightness for the tints and shades, then each result is put through the WCAG 2.1 relative luminance formula against pure white and pure black. A lightness step that has no room to go the way it was written turns around, and the name under the swatch follows the colour: a seed already close to white gets shades, not tints. AA asks for 4.5:1 on normal text and 3:1 on large text, AAA for 7:1 and 4.5:1, where large means 24px, or 18.66px bold. The level is decided on the exact ratio, not the two decimals shown, so a swatch reading 4.50 that still falls short is one sitting just under the line. Exact colour conversion and exact WCAG 2.1 contrast ratios. It cannot know how your screen is calibrated or how a colour prints, and the colour-vision views are approximations of the standard transforms rather than what any person sees.
Common questions
- What is a complementary palette, and how do the other harmonies differ?
- All six turn the hue of your seed colour on the HSL wheel. A hue-turned swatch keeps the seed's saturation and lightness exactly; the lightness steps hold the hue and move the lightness instead, easing the saturation back on the ones that come out lighter so a pale swatch does not shout. Complementary gives you the seed, the hue directly opposite it half a turn away, and three lightness steps. Analogous gives the seed with its neighbours 30 and 60 degrees either side, which is the quietest of the six. Triadic takes three hues an equal third of the wheel apart and adds two lightness steps of the seed. Tetradic takes four hues a quarter turn apart plus one. Split complementary skips the exact opposite and takes the two hues either side of it, at 150 and 210 degrees, again with two lightness steps. Monochromatic holds the hue and moves only the lightness, five rungs sixteen points apart, darkest first, with your own seed among them. A grey seed has no hue to turn, so every harmony falls back to that lightness ladder and the page says why rather than handing you the same grey five times.
- Why does my near-white seed come back with shades instead of tints?
- Because there is nowhere lighter for those steps to go. A tint of a colour already at 94 lightness would run off the end of the scale, so the step turns around and comes back darker, which is a usable swatch where piling up against the ceiling would just hand you the seed again. The label follows the colour rather than the recipe: a step that ends lighter than your seed is called a tint, a step that ends darker is called a shade, and that is the word read out to a screen reader as well as printed under the swatch. A nearly black seed gets the same treatment in reverse, and its shades come back as tints. The lightness steps are also kept clear of each other, so a palette never gives you two swatches at one lightness differing in nothing but saturation.
- What contrast ratio does a palette need to pass WCAG AA?
- For text, AA asks for 4.5:1 on normal text and 3:1 on large text, where large means 24px, or 18.66px bold. AAA asks for 7:1 and 4.5:1. Each swatch shows its ratio against white and against black and the level that ratio reaches, so you can see at a glance which swatch can carry body copy and which is a background only. Expect some swatches to fall short on one side: a mid-tone rarely clears 4.5:1 against both white and black at once, which is the real constraint a palette has to be designed around rather than a fault in the palette.
- Does this guarantee an accessible palette?
- No, and no generator honestly can, because accessibility is a property of a pair of colours in a particular use, not of a colour on its own. What this does is measure every swatch as it is generated, against the two backgrounds a swatch is most often dropped onto, so a failing combination cannot slip through unnoticed. For a specific pair, your text colour on your card background, send them to the contrast checker on this site, which gives the AA and AAA verdicts for both text sizes and the nearest passing shade when a pair falls short.
- Why does the same hex code look different on two screens?
- A hex code names a position in the sRGB colour space, and a screen renders that position through its own panel, gamut and calibration. A wide-gamut display, a colour profile, night shading and the ambient light in the room all move what you see, and print moves it further because ink is subtractive and cannot reach many screen colours at all. The conversions and the contrast ratios here are exact arithmetic on the sRGB numbers, which is what a browser and a checker both work from, but the appearance on any one screen is not something a page can know.
- Is the colour-vision preview what a person with that condition sees?
- No. The three views apply the standard dichromat matrices to linear sRGB, which is a model of how the palette collapses when one cone type is absent, not a rendering of anyone's sight. Real colour vision deficiency comes in degrees, most of it is anomalous rather than absent cones, and the brain does a great deal of the work. Treat the views as a check that your palette still separates when a hue axis is removed, which is the useful question. The codes and the ratios below each swatch stay the palette's own while a view is on, because those are the colours that will ship.
- Which notation should I copy: HEX, RGB, HSL or OKLCH?
- HEX and RGB name the same sRGB colour and any browser takes either. HSL is worth copying when you want to keep editing, because the hue, saturation and lightness are the three numbers this page moved to build the palette in the first place. OKLCH is the newer CSS notation and its lightness is perceptual, so two colours with the same OKLCH lightness look about equally light, which HSL lightness does not promise. All four are written from the same swatch, so they describe one colour, not four.
- Is anything uploaded?
- No. The seed is parsed, the harmony is turned and the ratios are computed in the page itself, with no upload, no account and no network call of any kind. The seed colour, the harmony and the notation you chose are kept in your own browser's storage so the tool opens where you left it, and clearing your browser data clears them.
Exact colour conversion and exact WCAG 2.1 contrast ratios. It cannot know how your screen is calibrated or how a colour prints, and the colour-vision views are approximations of the standard transforms rather than what any person sees.