Pick one color. Get a complete light and dark theme with every contrast ratio checked against WCAG standards. Ready-to-use CSS variables in seconds.
Launch the GeneratorThree steps. No design degree required.
Use the color picker or type any hex code. This becomes your brand's primary color -- the foundation of both themes.
The engine converts your color to HSL, then derives 15 design tokens for light and dark modes: backgrounds, surfaces, text hierarchy, borders, and semantic colors.
Every text/background pair is checked against WCAG 2.1. Colors that fail are automatically adjusted along their lightness axis until they pass AA or AAA.
Everything you need to go from a single hex code to a production-ready color system.
Every foreground/background pair is tested against AA (4.5:1), AA Large (3:1), and AAA (7:1). You see the exact ratio and pass/fail status for each.
Get a complete CSS block with custom properties that support both prefers-color-scheme media queries and data-theme attribute toggling.
Background, surface, surface-alt, primary, primary-hover, primary-text, text, text-secondary, text-muted, border, border-light, success, warning, error, and info.
When a derived color fails contrast requirements, the generator incrementally adjusts its lightness until it passes -- preserving the hue and saturation you chose.
The Web Content Accessibility Guidelines define minimum contrast ratios to ensure text is readable by people with low vision.
Minimum for large text (18px bold / 24px regular). Acceptable for UI components and graphical elements.
Minimum for normal-sized body text. The standard most organizations target. This is what the generator enforces by default.
Enhanced contrast for maximum readability. Recommended for long-form content and critical UI text.
Here's what each generated token is designed for.
The audit uses the exact same math defined in the WCAG 2.1 specification. Here's what happens under the hood.
Each color channel (R, G, B) is converted from the sRGB color space to linear light values using the formula from WCAG 2.1 - Relative Luminance:
if sRGB <= 0.03928: linear = sRGB / 12.92
else: linear = ((sRGB + 0.055) / 1.055) ^ 2.4
The linearized channels are weighted by how the human eye perceives brightness, per the IEC 61966-2-1 standard:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
The luminance of the lighter and darker colors are compared using the formula from WCAG 2.1 - Contrast Ratio:
ratio = (L_lighter + 0.05) / (L_darker + 0.05)
This produces a value between 1:1 (identical) and 21:1 (black on white).
If a text/background pair fails its target ratio, the generator walks the foreground color's lightness in 2% increments (darkening for light themes, lightening for dark themes) until the ratio passes. The hue and saturation stay locked -- only lightness changes.
This tool stands on the shoulders of established standards and resources.
The original inspiration for this tool. Color-Hex provides comprehensive color information, hex-to-RGB/HSL/CMYK conversions, color palettes, and a web-safe color directory. This project builds on that foundation by adding automated theme generation and accessibility compliance.
Web Content Accessibility Guidelines from the W3C. The contrast ratio formula, relative luminance definition, and AA/AAA thresholds all come directly from this specification.
Defines the 4.5:1 ratio for normal text and 3:1 for large text. This is the AA level that the generator enforces by default for all text tokens.
Defines the 7:1 ratio (AAA). The generator reports AAA compliance in the audit table and enforces it for primary body text.
The sRGB linearization and luminance weighting coefficients (0.2126, 0.7152, 0.0722) used in the contrast calculation come from this definition, based on IEC 61966-2-1.
The dark theme approach (elevated surfaces via tinted overlays, #121212 base) follows the patterns established by Google's Material Design guidelines.
Pick a color and get accessible light and dark themes in seconds.
Open the Generator