How to convert CSS colors and check sRGB gamut
Paste a standalone CSS color or use the opaque color picker. Convert it to HEX, RGB, HSL and OKLCH, inspect the transparency preview and export JSON or CSS custom-property declarations. Conversion runs in a browser Worker.
How do you do it?
- Enter a CSS color such as #ff000080, rgb(255 0 0 / 0.5) or oklch(65% 0.3 30).
- Choose JSON or CSS output and select Run. Check the alpha value and any sRGB clipping notice.
- Copy or download the values, then test them in the target browser or design application.
Convert a translucent red
The last two hex digits encode alpha 128/255, which is about 0.50196, not exactly 0.5. The preview composites this color over a checkerboard.
Input:
#ff000080
Output:
HEX: #ff000080
RGB: rgb(255 0 0 / 0.50196)
HSL: hsl(0 100% 50% / 0.50196)When is this workflow useful?
Use this converter to translate individual color values and inspect alpha. For out-of-gamut colors, choose deliberately between the original OKLCH and clipped sRGB fallback. Use an accessibility contrast checker separately when selecting text and background colors.
What should you check before relying on the result?
Input is limited to 2000 characters. Decimal output is rounded to five places; HEX alpha is quantized to eight bits. HEX/RGB/HSL and the preview use sRGB channel clipping when necessary, while OKLCH retains the source color. The picker creates an opaque sRGB color. No contrast, accessibility, print-profile or display-calibration assessment is performed. CSS exports contain declarations to place inside a CSS rule.
What can go wrong?
| Problem | What to try |
|---|---|
| The color cannot be parsed. | The value is malformed or depends on page context, such as currentColor or var(--brand). Supply an actual standalone CSS color, including the # prefix for hex. This is not a stylesheet evaluator. |
| HEX differs from the original wide-gamut color. | HEX, RGB and HSL target sRGB; some OKLCH or Display-P3 colors lie outside that gamut. Read the clipping notice. The original color is retained in OKLCH; sRGB channel clipping is not perceptual gamut mapping. |
Frequently asked questions
Do I need to upload data or sign in?
No. Processing runs in the current browser. This site serves the page and required static engine assets.
Why does the result disappear after I edit the input?
The tool clears stale output so a previous result cannot be mistaken for the new one. Run again after changing input or settings.
References
First edition: steps checked against the current tool interface, with examples and known limits.