One color, several useful coordinate systems
HEX is a compact notation for sRGB channel bytes and remains convenient in source code. RGB exposes the same red, green and blue channels directly. HSL describes hue, saturation and lightness with familiar controls, while HWB describes hue plus the amount of white and black mixed into it. These cylindrical models are convenient interfaces, but equal numeric steps do not guarantee equal perceived changes.
OKLab was designed so distances are more perceptually uniform than raw sRGB coordinates. OKLCH expresses that space as lightness, chroma and hue, which makes it useful for systematic scales and hue relationships. A vivid OKLCH coordinate can fall outside a display’s sRGB gamut. This generator reduces chroma until the result fits sRGB, then exports HEX so every displayed swatch and copied value refer to the same compatible color.
How WCAG contrast is calculated
WCAG 2.2 defines contrast as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter relative luminance and L2 the darker. sRGB channels are first converted from their nonlinear encoded values into linear-light values, then combined with coefficients 0.2126, 0.7152 and 0.0722. The result ranges from 1:1 for identical luminance to 21:1 for black against white.
Success Criterion 1.4.3 requires 4.5:1 for normal text and 3:1 for large-scale text at Level AA. Large-scale generally means at least 18pt regular or 14pt bold, with equivalent sizes considered for CJK fonts. Level AAA uses 7:1 for normal text and 4.5:1 for large text. Success Criterion 1.4.11 uses 3:1 for visual information required to identify active controls, states and meaningful graphics, subject to the criterion’s exceptions.
The status badges compare the unrounded ratio. A displayed 4.50:1 may still fail if its internal value is 4.499. That is why the exact line shows four decimals. Font weight, anti-aliasing, images, gradients, hover states and focus indicators can affect practical readability or which adjacent colors must be measured; a calculator is one part of an accessibility review, not a conformance certificate.
Transparency needs a final background
An alpha color has no single luminance until it is composited. The checker composites a translucent foreground over the selected background. If that background also has alpha, it is composited over white to produce an opaque sample. This is deterministic for a flat canvas, but it cannot stand in for a translucent label over a photo or moving video. Use the darkest and lightest relevant areas from the real design as separate background checks.
Build a color scale without hiding gamut decisions
- Enter the brand or interface color in any supported format.
- Use the 11-step scale for tokens from 50 through 950. Each step targets an OKLCH lightness while retaining hue and as much chroma as sRGB allows.
- Check text and component boundaries against the actual surface color; token names alone do not imply accessible pairings.
- Use Harmony to explore analogous, complementary and triadic directions, then validate each chosen pair.
- Set a stable variable prefix and copy the HEX-based CSS custom properties.
The generated palette is a deterministic starting point, not a substitute for brand judgment. Perceptual uniformity improves the relationship between steps but does not make every hue equally legible, equally vivid on every display or automatically accessible.
Input, output and browser-support boundary
The parser accepts modern space-separated CSS functions and common comma-separated RGB/HSL syntax. It intentionally does not guess CSS named colors, system colors, var(), currentColor, gradients or relative color syntax because they need a CSS cascade or additional context. OKLab and OKLCH output follows CSS Color 4 notation. Support for pasting that syntax into an older production browser is separate from the mathematical conversion shown here.
Privacy and sharing
Every calculation runs in this page. The workbench does not upload colors or store a palette in local storage. The optional screen eyedropper appears only in supporting browsers and opens only after you press its button; the browser controls permission and cancellation. The current foreground and background are written to the address bar so refresh and the explicit “Copy share link” action can preserve them. Do not place confidential design tokens in a URL if URL history is a concern.
Standards and implementation references
- W3C WAI: Understanding WCAG 2.2 SC 1.4.3 Contrast (Minimum)
- W3C WAI: Understanding SC 1.4.11 Non-text Contrast
- W3C: CSS Color Module Level 4
Editorial and implementation review: 2026-08-02. Parsing, conversion, alpha compositing, WCAG boundaries, gamut fitting and palette export are covered by deterministic tests.
Frequently asked questions
Which color formats can I enter?
Enter 3-, 4-, 6- or 8-digit HEX; legacy or modern RGB and HSL; HWB; OKLab; or OKLCH. Output includes HEX, HEX8, RGB, HSL, HWB, OKLab and OKLCH. CSS named colors are intentionally not accepted.
What contrast ratio passes WCAG 2.2?
Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Non-text graphics and active interface component boundaries generally use a 3:1 requirement under Success Criterion 1.4.11.
Does 4.499:1 pass a 4.5:1 threshold?
No. W3C states that computed contrast values must not be rounded up when they are compared with thresholds. The workbench shows a friendly two-decimal ratio and an additional four-decimal value for boundary decisions.
How are transparent colors tested?
The foreground is alpha-composited over the chosen background. A translucent background is composited over white because a final opaque canvas is required to calculate one ratio. Test the real image or color behind translucent UI in the final product.
Are generated OKLCH palette colors displayable in sRGB?
The palette preserves OKLCH lightness, chroma and hue as far as possible, then reduces chroma for colors outside the sRGB gamut. Exported swatches use broadly compatible HEX values.
Is any color data uploaded?
No. Parsing, conversion, contrast calculation, palette generation and CSS export run locally in this browser. Colors enter the URL only when you use or copy the shareable state.