Color Palette Generator
Generate a seeded HEX palette with fixed harmony rules, black-or-white text choices, and WCAG contrast checks for every color pair.--palette-1 and related RGB, HSL, and on-color tokens.{{ cssText }}| Token | HEX | RGB | HSL | On color | Contrast | Copy |
|---|---|---|---|---|---|---|
| {{ row.token }} | {{ row.hex }} | {{ row.rgb_text }} | {{ row.hsl_text }} | {{ row.on_color }} | {{ formatRatio(row.on_contrast) }} {{ row.on_contrast >= 7 ? 'AAA' : 'AA' }} |
| Foreground | Background | Ratio | Normal text | Large/UI | Copy |
|---|---|---|---|---|---|
| {{ row.foreground }} | {{ row.background }} | {{ formatRatio(row.ratio) }} | {{ row.ratio >= 4.5 ? 'AA pass' : 'Review' }} | {{ row.ratio >= 3 ? '3:1 pass' : 'Fail' }} |
Colors that look related do not automatically work together. A set may feel balanced as large swatches yet fail when one color becomes small text, a thin icon, a chart label, or a focus indicator. Palette design has to consider both visual relationship and the light-dark contrast of the combinations that will appear next to each other.
Hue, saturation, and lightness (HSL) provide a practical way to create companion colors. Hue moves around the color wheel, saturation controls color intensity, and lightness moves between dark and light. Harmony patterns choose hue relationships such as close neighbors, opposites, split opposites, thirds, or four-part arrangements. Monochrome and shade families keep the hue fixed and vary tone instead.
Contrast uses a different model. Web Content Accessibility Guidelines (WCAG) compare the relative luminance of a foreground and background after converting sRGB channels to linear values. HSL lightness is not relative luminance, so equal HSL lightness values do not imply equal readability. Yellow and blue make that difference especially visible.
- Seed color
- The fixed HEX color from which companion hues and tones are derived.
- Harmony
- A repeatable arrangement of hue offsets; it suggests visual relationship but does not certify accessibility.
- On-color
- Black or white chosen for the stronger contrast against one swatch.
- Contrast pair
- Two generated swatches tested as foreground and background using their relative luminance ratio.
A passing ratio is still context-specific. Normal text, large text, user-interface graphics, logos, disabled controls, and decorative marks do not all use the same WCAG requirement. Color alone should not carry meaning, and a palette should be checked in the actual component, chart, image, or document where typography, size, weight, and neighboring colors are known.
Generated harmonies are deterministic design suggestions, not measured models of perception or brand fit. Treat the swatches as candidates, keep the contrast evidence with them, and test the final combinations with real content and interaction states.
How to Use This Tool:
Start with the color that must remain fixed, then use harmony and contrast as separate decisions.
- Enter a three- or six-digit Base color in HEX form and choose a Harmony mode. The seed remains unchanged.
- Choose a Color count from 3 through 10. Use close-hue modes for related interface colors, opposing modes for accents, or one-hue modes for tonal ramps.
- Adjust companion saturation or lightness only when the initial family is too vivid, muted, dark, or light. These adjustments do not alter the seed.
- Review each swatch's on-color and the complete contrast-pair table. Sort order changes presentation only; it does not regenerate color identities or token numbers.
Interpreting Results:
| Displayed threshold | Ratio | Meaning |
|---|---|---|
| AA normal text | At least 4.5:1 | Meets the WCAG 2.2 minimum contrast criterion for ordinary text. |
| Large text or UI review | At least 3:1 | Meets the large-text exception and is also the threshold used here for the large/UI column; exact non-text requirements still depend on the component. |
| AAA on-color | At least 7:1 | The selected black-or-white text reaches the enhanced contrast threshold for normal text. |
The best pair is the generated swatch pair with the largest ratio, not necessarily the best visual combination for the design. Reversed foreground and background rows have the same ratio. Inspect the intended direction anyway because large color areas, text weight, and surrounding colors change the visual result.
Check ratios near 3:1, 4.5:1, or 7:1 independently. The generated values are rounded to four decimal places before result labels are assigned, while WCAG treats the threshold without rounding.
Technical Details:
The seed is normalized to six-digit uppercase HEX, converted from sRGB to HSL, and kept as palette item 1. Each companion receives a mode-specific hue offset and lightness pattern, then the optional adjustments are applied within fixed bounds. Conversion back to eight-bit sRGB produces the final HEX values used for contrast testing.
Transformation Core:
| Harmony mode | Leading hue offsets from the seed | Companion treatment |
|---|---|---|
| Analogous | 0°, −24°, +24°, −48°, +48°, then wider 24° steps | Alternating lightness and small saturation shifts |
| Complementary | 0°, 180°, then seed/complement variants and bridges | Opposing anchors with tonal companions |
| Split complementary | 0°, 150°, 210°, then seed and bridge variants | Two colors around the direct complement |
| Triadic | 0°, 120°, 240°, then tonal variants | Three evenly spaced anchors |
| Tetradic | 0°, 60°, 180°, 240°, then additional offsets | Four anchors with tonal companions |
| Monochrome | 0° for every swatch | Fixed lightness stops from 18% to 90%, clamped to 8% through 92% |
| Shades and tints | 0° for every swatch | Fixed lightness stops from 22% to 92%, clamped to 8% through 94%, with reduced saturation |
General companion lightness is clamped to 14% through 88%. General saturation is clamped to 10% through 96%; monochrome uses 8% through 94%, and shades use 8% through 88%. A duplicate HEX is retried up to ten times by moving lightness in alternating four-point steps. The requested color count remains 3 through 10.
Formula Core:
Each eight-bit sRGB channel is divided by 255, then linearized with the WCAG piecewise rule. The same conversion is applied independently to red, green, and blue.
Relative luminance weights the linear channels, and contrast divides the lighter luminance plus 0.05 by the darker luminance plus 0.05.
L1 is the lighter color and L2 the darker. The ratio ranges from 1:1 to 21:1. For each swatch, contrast against black and white is compared and the larger value determines the on-color; ties choose black.
Palette rows retain their original token index even when sorted by hue, descending lightness, or descending on-color contrast. Saturation adjustment accepts −30% through +30%, lightness adjustment accepts −20% through +20%, and the seed ignores both adjustments. Token prefixes are lowercased, unsafe characters become hyphens, repeated separators collapse, and a prefix beginning with a digit receives palette-.
The harmony offsets and tonal stops are fixed design heuristics authored for this generator. They are deterministic for the same inputs, but they are not a perceptually uniform color-space model and do not predict color-vision-deficiency distinctions.
Accuracy Notes:
The color calculations use opaque sRGB HEX values. They do not model transparency, gradients, images behind text, wide-gamut display colors, font anti-aliasing, ambient light, or device calibration. Test the resolved foreground and background from the final rendered interface.
All processing stays in the browser. The generated CSS variables and swatches can be copied or downloaded, but accessibility also requires non-color cues, visible focus treatment, readable typography, and testing in normal, hover, active, disabled, and forced-colors states where applicable.
References:
- Understanding Success Criterion 1.4.3: Contrast (Minimum), W3C Web Accessibility Initiative.
- CSS Color Module Level 4, W3C CSS Working Group.
- Using CSS custom properties, MDN Web Docs.