How to use Color Studio
Color Studio converts an opaque sRGB color into HEX, RGB, HSL and OKLCH, then checks its luminance contrast against a chosen background.
- Enter a 3- or 6-digit HEX color, integer-channel RGB, HSL with percentage saturation/lightness, or OKLCH with lightness from 0 to 1.
- Choose the background used by the contrast calculation. A ratio of 4.5:1 meets WCAG AA for normal text; 3:1 can meet AA for large text.
- Use the five-color HSL lightness palette as a starting point. Check each chosen foreground/background pair separately; a palette alone does not guarantee accessibility.
A practical starting point
Dark teal on white provides a stronger text contrast than a pale accent of the same hue.
color: #0d635c; background: #ffffff;
Common mistakes
- HSL lightness is not perceptual luminance. Two hues at the same HSL lightness can have very different contrast.
- OKLCH can represent colors outside sRGB. This tool clips channels when converting to its opaque sRGB working space.
Frequently asked questions
Does the contrast calculation handle transparency?
No. Inputs are opaque. Composite a translucent color against its actual background first, then check the resulting color.