Color Code Converter

Color Code Converter: HEX, RGB, HSL, and OKLCH formats

Color formats splinter the same visible color into incompatible representations.

A HEX code from Figma, an rgb() value from DevTools, an hsl() token from a design system, an HSV triple from Photoshop, and an oklch() coordinate from a Tailwind v4 config all describe the same thing, yet no single tool input accepts them all.¹ Switching between formats by hand means parsing or computing channel values that become error-prone under time pressure, especially when alpha channels or shorthand notation are involved.

When format friction slows you down

Format friction appears at every design-to-code boundary. A designer sends #c8ff00 from Figma and the developer needs rgb() for a canvas call. A style guide token uses hsl() for readability while an email template requires the same value in HEX. A Photoshop HSB entry from a print team has to become an oklch() coordinate before it can land in a CSS Color Level 4 stylesheet. Color code conversion therefore recurs at every tool handoff rather than being a one-time setup step. A converter that handles all five formats in one interface removes the per-transition lookup and arithmetic. Giving every downstream consumer the format it expects keeps lint rules, design reviews, and handoff documents in sync without manual recalculation.

Which format to choose

HEX is the most portable format. It pastes cleanly into CSS, HTML, Figma, and Slack without breaking surrounding syntax. RGB is the native format for canvas APIs, WebGL uniforms, and most JavaScript color pickers. HSL is the best format for manual adjustment because you can hold hue and saturation constant while varying lightness to generate a shade scale. HSV is what Photoshop and macOS Color Picker use internally.² OKLCH is the right format for building perceptually uniform color scales in CSS Color Level 4 or Tailwind v4. Furthermore, named CSS colors cover only 148 values, so use them when the name improves readability, but never as a general interchange format.

Round-trip precision and rounding

Converting between formats is not always perfectly reversible. Each step through a floating-point intermediate accumulates rounding error. A HEX → OKLCH → HEX round-trip may shift one RGB channel by 1. A HEX → HSL → HEX round-trip may also shift by 1. These differences sit below the threshold of human perception because two colors differing by 1 in one channel out of 255 are visually indistinguishable on any consumer display. The only workflows where round-trip precision matters are those that compare colors programmatically, such as automated design token audits that diff every committed value against the source of truth before a release artifact is published.

Real-time multi-format editing workflows

A converter that updates all five formats simultaneously as you type lets you view all five color formats at once, which eliminates the mental overhead of tracking which format you are working in. When you paste a HEX value, the RGB, HSL, HSV, and OKLCH fields update instantly, giving you the coordinates you need for any downstream tool without a second conversion step. This is the workflow that design-to-code handoff tools need: a designer sends HEX, the developer copies the OKLCH value for their Tailwind v4 config, and the email developer copies the same HEX for the email template, all from the same screen.

Using the converter as a design token audit tool

Paste each token from your design system into the converter and compare the OKLCH coordinates across your palette. Tokens at the same shade level (for example, all your 500-level colors) should have similar L values if your palette is perceptually consistent. A blue-500 at L=0.61 and a red-500 at L=0.45 signals a lightness inconsistency that will look uneven in your UI. The converter gives you the diagnostic data to find and fix these mismatches before they reach production.

The audit also works in reverse: paste an existing palette from a competitor or a legacy brand guide and read its OKLCH coordinates to see where its lightness curve drifts. That external comparison is useful when you are harmonizing an acquired product line with your own tokens, because the numbers expose which shades were tuned by eye and which follow a real scale. Keeping the audit loop in the same tool where you convert means you can fix a value and re-check it in seconds rather than switching contexts.

Handling alpha channels across all five formats

Alpha channels are handled differently in each format, and the converter must track them separately. HEX uses an optional 8-digit form (#rrggbbaa), RGB uses rgba() with a fourth 0 to 1 value, HSL uses hsla() or the slash-separated Level 4 syntax, HSV has no standard alpha representation, and OKLCH uses the slash-separated alpha syntax.³ When you input a color with alpha, the converter propagates the alpha value to every format that supports it and drops it from HSV. For workflows that need alpha in every output, use rgba() or the Level 4 slash syntax as your interchange format, since they are the most widely supported alpha-capable formats.

Compositing and blending with alpha in different color spaces

Blending two semi-transparent colors produces different results depending on the color space. Compositing in sRGB (the default for most browsers) produces a darker result than compositing in linear light or OKLCH because the gamma curve distorts the midpoint. CSS Compositing and Blending Level 1 defines the mix-blend-mode property, which operates in sRGB by default. For perceptually accurate blending, convert both colors to OKLCH, perform the blend in that space, and convert back to sRGB for display. This is not yet possible in pure CSS but is straightforward in JavaScript for canvas-based rendering.

Color format conversion in CI and design token pipelines

Automated design token pipelines convert colors between formats at build time using tools like Style Dictionary, Theo, or Amazon Style Dictionary. A token defined as { "color": { "primary": { "value": "#3b82f6" } } } passes through transforms that output the same color in HEX, RGB, HSL, and OKLCH for different consumption targets. The pipeline emits a CSS file with oklch() values, a Swift file with UIColor values, and a JSON file with HEX strings, all derived from the same source. Building this pipeline once eliminates manual conversion errors across every platform your design system targets.

Validating token output with automated contrast checks

Add an automated contrast check to your CI pipeline that reads every foreground-background token pair from your generated CSS and verifies the WCAG ratio. Tools like pa11y, axe-core, or a custom script using the WCAG relative luminance formula can flag token pairs that fall below 4.5:1 before they ship. Running this check on every pull request catches accessibility regressions that manual review misses, especially when a designer updates a brand color and the ripple effect on contrast ratios is not immediately obvious.

When to use this

Use this whenever you need to move a color between tools that use different native formats, such as converting Figma HEX for a canvas API call, mapping a CSS variable onto a Photoshop panel value, or turning an OKLCH design token into an email-safe HTML attribute.

Examples

#c8ff00 (from Figma HEX field)

rgb(200, 255, 0)

hsv(217, 76%, 96%)

oklch(0.612 0.212 261.5)