Color Palette / Contrast Generator
Enter exactly 7 ASCII characters: #RRGGBB. Uppercase or lowercase hex is accepted; no spaces, alpha, transparent or arbitrary CSS.
No generated palette or contrast result.
Contrast alone does not certify a page, non-text content or other accessibility criteria. Generated palettes are not guaranteed accessible.
Palette rules, contrast standard and limits
Analogous: seed HSL hue plus (index − (count − 1)/2) × 30°, retaining saturation/lightness. Complementary: alternate seed/opposite hue (180°), with paired lightness offsets 0, +0.12, −0.12, +0.24. Monochromatic: retain hue/saturation; lightness plus (index − (count − 1)/2) × 0.12. Index starts at zero. Hue wraps into [0,360); lightness clamps into [0,1]. Channels round to nearest byte, midpoint away from zero. Duplicate and clipped swatches are disclosed; colors normalize to uppercase.
WCAG 2.x sRGB relative luminance uses the 0.04045 linearization breakpoint, then (lighter + 0.05)/(darker + 0.05). Classifications compare the unrounded ratio; only display rounds to two decimals. Large text means at least 18pt, or 14pt bold; this sample does not certify font eligibility.
WCAG 2.2 contrast minimum and contrast enhanced.
Count: 3–8. Fixed CSS variable names only; export at most 4,096 UTF-16 characters. Native input limits are 9 characters; large pastes may clip but are refused, never accepted as a prefix. Oversized edits clear the affected field and stale results. Each invalid field must be repaired or Clear used; changing options cannot dismiss a refusal. Clear retains mode/count but empties color content and previews.
No randomness, remote assets, provider calls or payload persistence are added. Interactive Auto server events traverse the Blazor connection; WebAssembly executes on-device. Copy explicitly writes the export to the clipboard. Website active; extension/Android inactive discovery metadata, not hard route denial.
Color Palette / Contrast Generator guide
Generate a deterministic palette and check an opaque text color pair.
Input and limitations
Exactly #RRGGBB for seed, foreground and background. No alpha or other CSS.
Check the selected options before using the result. Formatting and conversion do not establish that data is safe or suitable for your application.
How to use Color Palette / Contrast Generator
- Enter three opaque colors, choose a palette mode and count, then Generate.
- Choose Copy to copy the --palette-1 and other CSS declarations. Contrast checks only the separate foreground/background pair, not every swatch.
- Clear empties colors, results and errors; palette mode and count stay selected.
Example
Generate an analogous palette from #FF0000. Black #000000 on white #FFFFFF gives 21.00:1; #777777 on white gives 4.48:1 and fails AA normal text. Copy exports fixed palette CSS variables, not an accessibility certificate.
Privacy on the website
The website uses Blazor Auto: interactive processing can run on the server or in your browser, depending on the current session. Do not assume pasted input stays on your device. Use non-sensitive sample data, and never place passwords, tokens or personal data in page URLs.
Search indexing covers public tool descriptions, not your input or generated output. See the privacy policy for website analytics and other data handling.
Install and offline help
Use your browser's install action, if available. Installation is optional; you can keep using this website normally.
Tools need an internet connection. Offline support provides a connection information page, not all-tools offline use.
Reset keeps favorites and preferences. It does not restore unsaved tool content.