Color Contrast Checker
Check foreground and background colors against WCAG contrast ratios for normal and large text.
Share
The inputted text is too long to include in a share link.
Color Converter
Convert CSS colors between hex, RGB, HSL, OKLCH, and Lab formats.
Preview
Hex
Hex alpha
RGB
HSL
OKLCH
Lab
How to use this color converter
Use this converter when the same color needs to move between CSS, design documentation, QA notes, or design-system tokens.
- Choose a format or leave the selector on auto-detect.
- Enter a CSS color name, hex value, RGB, HSL, OKLCH, or Lab value.
- Use the color picker when you want to start from a visual swatch.
- Copy the format you need for CSS, design tokens, documentation, or QA notes.
Color Converter features
- Convert colors between CSS names, hex, RGB, HSL, OKLCH, and Lab.
- Auto-detect the input format or choose the source color format manually.
- Start from a typed CSS color value or the built-in color picker.
- Preview the selected color in a large swatch.
- Output standard hex and alpha-preserving hex values.
- Output RGB, HSL, OKLCH, and Lab values for design and CSS workflows.
- Copy individual converted color values with one click.
- Select output values automatically when focusing or clicking them.
Color formats supported
Hex, RGB, and HSL are widely supported CSS color formats. OKLCH and Lab are perceptual color spaces, which makes them useful for modern design systems because lightness and chroma changes tend to behave more like people expect.
This is useful when a color comes from one tool but needs to be used somewhere else. A designer may hand off OKLCH values, a brand guide may list hex codes, a browser inspector may show RGB, and a CSS file may need HSL for easier manual adjustments. Seeing the formats together reduces the chance of copying the wrong value.
The preview swatch is included as a quick sanity check. It will not replace accessibility testing or device review, but it helps confirm that the parsed color is the one you intended before you paste it into production code or documentation.
- Hex to RGB, HSL, OKLCH, and Lab
- RGB to hex, HSL, OKLCH, and Lab
- HSL to hex, RGB, OKLCH, and Lab
- OKLCH to hex, RGB, HSL, and Lab
- Lab to hex, RGB, HSL, and OKLCH
- CSS color names to hex, RGB, HSL, OKLCH, and Lab
How this color converter works
The converter parses the input as a CSS color, converts the parsed value into each target color space, and rounds channel values for readable CSS output. Alpha values are preserved when the input includes transparency.
Color conversions are not just string formatting. Different spaces describe color in different ways: RGB describes channels of light, HSL describes hue with saturation and lightness, while Lab and OKLCH model color more closely to human perception. Moving between them can introduce tiny decimal differences, especially after rounding.
When browser compatibility matters, hex, RGB, and HSL remain the safest choices. OKLCH is helpful for modern CSS and design-system work, particularly when you want more predictable adjustments to lightness and chroma.
Color converter FAQ
Why do some converted values look rounded?
The tool rounds decimal channels so the output is easier to read and paste. Tiny rounding differences are normal when converting between color spaces.
Can I use OKLCH values in CSS?
Modern browsers support OKLCH, but older browser support may vary. Hex, RGB, and HSL remain safer when you need broad compatibility.
Does this upload my colors?
No. Color parsing and conversion happen in your browser.
Why does the same color have several different-looking values?
Each color format describes the same visual color with a different coordinate system. The numbers can look unrelated even when the resulting swatch is the same.
Built and maintained by utilkit. Found an issue? Send corrections to contact@utilkit.com