Skip to content
Codesphere
← All tools
</>

Color Converter

Convert HEX, RGB, HSL, and OKLCH with contrast checks.

Converted

HEX

#6d5dfc

RGB

rgb(109 93 252)

HSL

hsl(246 96.4% 67.6%)

OKLCH

oklch(58.63% 0.2269 281.34)

Against white

4.54:1AA

Against black

4.62:1AA

About the Color Converter

Convert design tokens and CSS snippets between HEX, RGB, HSL, and OKLCH, preview the resulting swatch, and check contrast against white and black. It is useful for design systems, theme work, accessibility checks, and translating modern CSS color formats.

How the result is produced

Color values are parsed and converted between HEX, RGB, HSL, and OKLCH representations in the browser. Contrast ratios are calculated from relative luminance for the selected foreground and background colors.

Example: A design token such as `#6750A4` can be translated into HSL or OKLCH and checked against white and black before it is added to a theme.

Limitations and review notes

Color conversion can involve gamut mapping and rounding, especially for OKLCH values outside the display gamut. Contrast checks cover the selected pair only and do not replace full interface accessibility testing.

How to use it

  1. 1. Enter a HEX, RGB, HSL, or OKLCH color value.
  2. 2. Review the live swatch and converted CSS values.
  3. 3. Check contrast ratios against white and black backgrounds.
  4. 4. Copy the format you need for CSS, design tokens, or documentation.

FAQ

Which color formats are supported?

The converter accepts HEX, RGB, HSL, and OKLCH input and outputs all four formats.

What does the contrast score mean?

The contrast ratio follows WCAG-style scoring against white and black backgrounds so you can quickly choose readable foreground or background colors.

Does OKLCH conversion run locally?

Yes. The color conversion formulas run in your browser with no server request after the page loads.

Related tools

View category →
CSS Gradient GeneratorDesign linear, radial, and conic gradients with copyable CSS.</>css · gradient · generatorCSS FormatterBeautify or minify CSS without sending stylesheets anywhere.</>css · formatter · beautifierPassword GeneratorGenerate strong passwords locally with entropy feedback.</>password · generator · security

Was this useful?