Color & Accessibility
Start from one HEX color, compare harmony rules, and check which swatches can carry white text.
All calculations stay in this browser tab; colors are not uploaded.
Showing 5 of 5 swatches
You already have a brand blue, but the button, surface and accent colors are still guesses. A color palette generator makes those relationships visible before you commit the values to a stylesheet. Start with the sample blue or enter your own HEX code; the six harmony rules give repeatable candidates, not a verdict on taste.
This color scheme generator also keeps the practical follow-up in one place: a nine-step light-to-dark scale, a two-color mix and a measured white-text contrast check. The color palette generator exports exactly the palette currently shown, plus the scale and mixed color, as CSS custom properties.
A harmony rule proposes colors; a contrast ratio tests a particular text and background pair.
With the same base HEX, switch from neighboring analogous hues to an opposite complement or a three-point triad. The palette updates deterministically, so a color palette generator does not silently replace your chosen brand color with a random suggestion. The shade scale stays tied to that same base.
The screen prints the actual white-on-swatch ratio beside each palette color. Turn on the 4.5:1 filter to hide failing swatches; the CSS export then reflects only the visible candidates. This is a targeted readable-text check, not a claim that the entire design is accessible.
Enter three- or six-digit HEX or use the native picker. The example begins at #3B82F6; changes update automatically after a short pause. Turn automatic generation off when you want to adjust several fields first, then run with Ctrl or Cmd plus Enter.
Analogous is the default because nearby hues make a calm starting set. Complementary, triadic and other rules use fixed color-wheel angles. The separate mix blends your base toward the orange second color at 50% by default; switch RGB to HSL to see why a mixing model matters.
Each palette swatch reports its contrast with white text. Enabling the AA filter can reduce the visible count, sometimes to zero; it does not recolor a failed swatch. Copy a single HEX, or export the current visible palette with all nine shades and the mixed color as CSS variables.
Analogous, complementary, triadic, split complementary, tetradic and monochromatic modes derive repeatable swatches from one HEX base. The mode changes the hue relationship, not the brand color you entered.
Four lighter steps, the exact base color and four darker steps give separate values for surfaces, borders, hover states and text. This color shades generator uses digital RGB blends with white and black.
A second HEX input and 0–100% slider make the mix explicit. RGB interpolates channels; HSL interpolates hue along the shortest arc. It is a digital color mixer, not a prediction for paint or ink.
The contrast ratio is calculated from the final sRGB values. An accessible palette generator can help narrow choices, but only the shown white-text AA test is performed here. Failed hues remain available when the filter is off.
Copy or download a :root block. It contains visible palette colors, every shade step and the blended color; a filtered-out swatch is not quietly included in the CSS.
Enter a base HEX and select Complementary. The generated second hue sits opposite the base on the HSL wheel. Its strong hue contrast does not by itself guarantee enough text-to-background luminance contrast.
This page includes analogous, complementary, triadic, split complementary, tetradic and monochromatic relationships. Some produce two colors, some three to five; the rule determines the swatch count.
Choose a base color and change the Harmony rule. Each choice applies fixed offsets around the HSL hue wheel while the separate nine-step scale lightens and darkens the base.
The checker measures the white-text to swatch contrast ratio. It marks ordinary-text WCAG AA at 4.5:1 and can hide candidates below that threshold; it does not test every design state.
For ordinary text, this tool uses 4.5:1 as the WCAG AA minimum. A higher ratio can help in other contexts, but the page makes no claim of overall site compliance.
Have a color workflow we missed?
Use the color palette generator to compare a rule, verify the white-text ratio and export the exact CSS values you selected.