Color Converter: Convert HEX, RGB, HSL and OKLCH Instantly Online

Every developer has been there. You are building a UI component, you have the color from your design file in HEX, but your CSS framework needs HSL. Or your designer hands you an RGB value and your design tokens are all in OKLCH. Or you are writing a React component and need RGBA with a specific opacity but only have the six-character hex code.

You open a new tab, search for a color converter, land on a site covered in ads, paste your value, get the output, close the tab, and go back to work. Two minutes later you need another format. Repeat the whole process.

The Tooltri Color Converter exists to eliminate that friction. Paste any color value in any format, get all six formats back instantly, copy what you need, and get back to building. No ads, no sign-up, no data sent anywhere.

The Six Color Formats Every Developer Needs to Know

Before diving into how the tool works, it helps to understand what each format actually is, when it gets used, and why the industry has not settled on just one.

HEX: The Universal Web Standard

HEX is the format you see everywhere on the web. A six-character string preceded by a hash symbol, where each pair of characters represents the red, green, and blue channels in hexadecimal.

color: #2563eb;
background-color: #f8fafc;
border-color: #e2e8f0;

Each channel runs from 00 to ff in hexadecimal, which maps to 0 to 255 in decimal. So #2563eb means red is 37, green is 99, blue is 235.

HEX is compact, universally supported, and what most design tools export by default. Figma, Sketch, Adobe XD, and every color picker in every browser outputs HEX. It is the lingua franca of web color.

The limitation is readability. Looking at #2563eb tells you nothing intuitive about the color. You cannot tell just by reading it whether it is light or dark, saturated or muted. You have to render it to know.

RGB: The Visible Spectrum Model

RGB stands for Red, Green, Blue. It is the same model as HEX but expressed as three decimal integers between 0 and 255.

color: rgb(37, 99, 235);
background-color: rgb(248, 250, 252);

RGB maps directly to how screens work. Every pixel on your monitor is a tiny arrangement of red, green, and blue lights at varying intensities. When all three are at 255, you get white. When all three are at 0, you get black.

RGB is more readable than HEX for people who have internalized the 0 to 255 scale, and it is the format used internally by most graphics software. CSS has supported it since the very beginning.

RGBA: RGB with Transparency Control

RGBA extends RGB with a fourth channel: alpha. The alpha value is a decimal between 0 and 1, where 0 is fully transparent and 1 is fully opaque.

background-color: rgba(37, 99, 235, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
overlay: rgba(0, 0, 0, 0.5);

This is indispensable for UI work. Hover states, overlays, glass morphism effects, subtle shadows, focus rings: all of these rely on RGBA transparency. A semi-transparent version of your brand color over a white background produces a tint. Over a dark background it produces a different result. RGBA lets you control exactly how transparent an element is without needing a separate color value.

HSL: The Human-Readable Format

HSL stands for Hue, Saturation, Lightness. It was designed to be more intuitive for humans than RGB or HEX.

color: hsl(221, 83%, 53%);
background-color: hsl(210, 40%, 98%);
border-color: hsl(214, 32%, 91%);

Hue is a degree on the color wheel from 0 to 360. Red is at 0 and 360, green is at 120, blue is at 240. Saturation is how vivid the color is, from 0% (completely gray) to 100% (fully saturated). Lightness is how light or dark the color is, from 0% (black) to 100% (white).

The power of HSL is that you can manipulate colors systematically. Want a lighter version of your brand color? Increase the lightness. Want a muted, desaturated version? Decrease the saturation. Want to rotate the hue to create a complementary color? Add 180 degrees to the hue. None of this is intuitive with HEX or RGB.

HSL is the reason CSS custom properties and design systems became so powerful together.

:root {
  --brand-hue: 221;
  --brand-saturation: 83%;
  --brand-lightness: 53%;
  --brand: hsl(
    var(--brand-hue),
    var(--brand-saturation),
    var(--brand-lightness)
  );
  --brand-light: hsl(var(--brand-hue), var(--brand-saturation), 93%);
  --brand-dark: hsl(var(--brand-hue), var(--brand-saturation), 33%);
}

This pattern lets you generate an entire color scale from a single hue definition.

HSLA: HSL with Alpha

HSLA extends HSL with the same alpha transparency channel as RGBA.

background-color: hsla(221, 83%, 53%, 0.15);
border-color: hsla(221, 83%, 53%, 0.3);

HSLA is often preferred over RGBA for transparent colors in design systems because it maintains the human-readable hue and saturation values. When you want a semi-transparent version of your brand color, HSLA makes it obvious that the transparency is a variation of the same hue rather than an arbitrary RGBA value.

OKLCH: The Future of CSS Color

OKLCH is the newest format in this list and the most technically sophisticated. It stands for Optical Lightness, Chroma, Hue, and it is built on perceptual color science.

color: oklch(0.55 0.2 250);
background-color: oklch(0.98 0.01 220);

The three values are lightness as a decimal between 0 and 1, chroma (similar to saturation but perceptually uniform), and hue as a degree.

What makes OKLCH different from HSL is perceptual uniformity. In HSL, two colors with the same lightness value can look dramatically different in actual brightness to the human eye. A yellow at hsl(60, 100%, 50%) looks much brighter than a blue at hsl(240, 100%, 50%) even though both have 50% lightness. OKLCH fixes this: two colors with the same OKLCH lightness value will appear equally bright to human perception.

This matters enormously for accessibility and design consistency. When you build a color palette in OKLCH, colors at the same lightness step genuinely have the same visual weight. Contrast ratios are predictable. Dark mode conversions are reliable.

OKLCH also has access to the P3 color gamut, which means it can express colors that are more vivid than anything possible in sRGB. Modern displays like iPhone screens, newer MacBooks, and high-end monitors can render these colors natively.

CSS Color Level 4 made OKLCH a first-class citizen, and browser support is now excellent across Chrome, Firefox, Safari, and Edge.

:root {
  --brand: oklch(0.55 0.2 250);
  --brand-light: oklch(0.92 0.05 250);
  --brand-dark: oklch(0.35 0.2 250);
}

Because lightness is perceptually uniform in OKLCH, these three values actually look like a consistent light, mid, and dark variation of the same color.

How the Color Converter Works

Paste Any Format, Get All Six

The input field accepts any valid color value in any of the six supported formats. You do not need to tell the tool which format you are pasting. It detects the format automatically.

Type #2563eb and it recognizes HEX. Type rgb(37, 99, 235) and it recognizes RGB. Type hsl(221, 83%, 53%) and it recognizes HSL. Type oklch(0.55 0.2 250) and it recognizes OKLCH.

All six output fields update simultaneously on every keystroke where the input is a valid color. There is no convert button to click. The results are always current.

The Live Color Preview Swatch

Below the input field, a large color preview swatch shows the current color in real time. This is your visual confirmation that the value you entered is being interpreted correctly.

The swatch updates on every valid keystroke. If your input is invalid or incomplete the swatch holds its last valid color rather than flickering to an error state while you are still typing.

The Visual Color Picker

Next to the input field, a native color picker lets you choose colors visually. Click it to open your browser's built-in color picker interface. Select any color and the input field, the preview swatch, and all six output fields update instantly.

The color picker is a complement to the text input, not a replacement. If you know your color value, type it directly. If you want to explore and pick visually, use the picker.

Copy Any Format Instantly

Every output field has a copy button on its right side. Click it to copy that format's value to your clipboard in one click. The button gives a brief confirmation state so you know the copy succeeded.

This means the workflow is: paste your input, click the copy button next to the format you need, go back to your code. Three actions. Done.

Why Color Conversion Matters in Real Projects

Design to Code Handoff

Figma exports colors in HEX by default. But if your project uses HSL CSS custom properties for its design system, every color from your design file needs to be converted before you can use it. If you are working with OKLCH-based design tokens, that is another conversion step.

The Color Converter makes this handoff frictionless. Copy the HEX from Figma, paste it into the converter, copy the HSL or OKLCH, drop it into your CSS. No mental math, no formula lookup.

Accessibility and WCAG Compliance

WCAG contrast ratio calculations work in relative luminance, which is derived from RGB values. When you are checking whether a text color meets the 4.5:1 contrast ratio requirement against a background, you need to know the RGB values of both colors.

Converting your HEX or HSL values to RGB via the Color Converter gives you the values you need to feed into contrast ratio calculations. Tools like the WebAIM contrast checker accept RGB values directly.

OKLCH is also becoming essential for accessible color palette generation because its perceptually uniform lightness makes it much easier to ensure that colors at the same step in a palette have consistent contrast ratios.

Dark Mode Implementation

One of the most common dark mode strategies is to define your color palette in HSL and then adjust the lightness values for dark mode.

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(222, 47%, 11%);
}

.dark {
  --background: hsl(222, 47%, 4%);
  --foreground: hsl(213, 31%, 91%);
}

If your colors are defined in HEX and you want to convert to this pattern, you need the HSL values. The Color Converter gives you all of them at once. Take the HEX from your design system, convert it, use the HSL values in your CSS custom properties, and your dark mode implementation becomes systematic rather than arbitrary.

OKLCH makes this even more reliable. Because lightness is perceptually uniform, dark mode variants generated by simply reducing the OKLCH lightness value look correct without manual tweaking.

Tailwind CSS and Design Systems

Tailwind CSS v4 and many modern design systems are moving toward OKLCH for their color scales. If you are customizing a Tailwind theme or building a design system from scratch and you need to express a specific brand color in OKLCH, you need to convert it.

The Color Converter handles this. Paste your brand HEX, get the OKLCH value, drop it into your Tailwind configuration.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          500: "oklch(0.55 0.2 250)",
          400: "oklch(0.65 0.18 250)",
          600: "oklch(0.45 0.22 250)",
        },
      },
    },
  },
};

Component Library Development

If you are building a component library in React, Vue, or Svelte, you often need to accept color props and then compute variants of that color programmatically. Understanding how to express your base color in different formats gives you the tools to do this.

CSS custom properties that use HSL or OKLCH let you compute lighter, darker, and more transparent variants directly in CSS without JavaScript.

.button {
  --button-hue: 221;
  --button-saturation: 83%;
  background-color: hsl(var(--button-hue), var(--button-saturation), 53%);
}

.button:hover {
  background-color: hsl(var(--button-hue), var(--button-saturation), 45%);
}

.button:active {
  background-color: hsl(var(--button-hue), var(--button-saturation), 38%);
}

The Math Behind Color Conversion

All conversions in the Tooltri Color Converter happen in your browser using pure JavaScript math. No server receives your color values. Understanding how the conversions work helps you trust the outputs and know when to expect rounding differences.

HEX to RGB

This is the simplest conversion. Each pair of hex characters is parsed as a base-16 integer.

#2563eb
R = parseInt('25', 16) = 37
G = parseInt('63', 16) = 99
B = parseInt('eb', 16) = 235
Result: rgb(37, 99, 235)

RGB to HSL

This conversion involves finding the maximum and minimum channel values, then computing hue, saturation, and lightness from those.

R = 37/255 = 0.145
G = 99/255 = 0.388
B = 235/255 = 0.922

Max = 0.922 (B), Min = 0.145 (R)
Delta = 0.922 - 0.145 = 0.777

Lightness = (0.922 + 0.145) / 2 = 0.534 = 53.4%
Saturation = 0.777 / (1 - |2 * 0.534 - 1|) = 83%
Hue = 60 * (((R - G) / Delta) + 4) = 221 degrees

RGB to OKLCH

OKLCH conversion is the most mathematically involved. It requires three steps: converting sRGB to linear RGB by reversing the gamma correction, then converting linear RGB to the OKLab color space using a matrix transformation, then converting OKLab to OKLCH by computing the chroma as the Euclidean distance of the a and b channels and the hue as the arctangent.

sRGB to linear RGB (gamma expansion):
channel = channel <= 0.04045
? channel / 12.92
: ((channel + 0.055) / 1.055) ^ 2.4

Linear RGB to OKLab (matrix transform):
l = 0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B
m = 0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B
s = 0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B

l_ = cbrt(l), m_ = cbrt(m), s_ = cbrt(s)

L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_
a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_
b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_

OKLab to OKLCH:
C = sqrt(a^2 + b^2)
H = atan2(b, a) * 180 / PI

This is why OKLCH outputs can look surprising compared to HSL. The math is fundamentally different and the result is a perceptually uniform representation that does not map linearly to the sRGB values you started with.

Why Outputs Sometimes Differ Slightly from Other Tools

Different color converters make slightly different rounding decisions. One tool might round OKLCH chroma to two decimal places, another to three. One tool might express HSL saturation as 83% while another shows 83.1%.

The Tooltri Color Converter uses consistent rounding: integers for RGB channels, one decimal place maximum for HSL percentages, and three decimal places for OKLCH lightness and chroma. If you copy an output from one tool and paste it into another, expect minor rounding differences in the last decimal place. The color itself is the same.

Practical Workflows

Workflow 1: Design File to CSS Custom Properties

You receive a design file with brand colors defined as HEX values. Your CSS uses a custom property system built on HSL.

1. Open the Color Converter
2. Paste the first HEX value
3. Copy the HSL output
4. Paste it into your CSS custom property
5. Repeat for each brand color

Five seconds per color instead of manually computing hue, saturation, and lightness from a hex string.

Workflow 2: Converting a Legacy Palette to OKLCH

Your design system was built on HEX values three years ago. You want to migrate to OKLCH for better perceptual consistency and P3 color gamut support.

1. List all your current HEX values
2. Convert each one using the Color Converter
3. Note the OKLCH values
4. Update your design tokens

Because OKLCH is perceptually uniform, you may also notice that some of your legacy colors look inconsistent in brightness at the same nominal lightness. This is a feature: OKLCH is showing you the perceptual reality of your palette.

Workflow 3: Creating Transparent Variants

You have a solid brand color and need semi-transparent versions for hover states, overlays, and backgrounds.

1. Paste your brand HEX into the converter
2. Copy the RGBA output
3. Modify the alpha value in your CSS to the opacity you need

.card:hover {
  background-color: rgba(37, 99, 235, 0.08);
}

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.tag {
  background-color: rgba(37, 99, 235, 0.12);
  color: rgb(37, 99, 235);
}

Workflow 4: Cross-Framework Color Sharing

You are using a color from a Tailwind utility class in a custom component that uses inline styles or a CSS-in-JS library. You know the Tailwind color name but need the actual value.

Look up the Tailwind color in their documentation (they list HEX values), paste it into the Color Converter, and copy the format your CSS-in-JS library expects. If it is styled-components or Emotion accepting RGBA, copy RGBA. If it is a library using HSL tokens, copy HSL.

Privacy and Performance

Everything in the Color Converter runs locally in your browser. Your color values are never sent to a server, never logged, never stored. The conversion math executes in microseconds in JavaScript.

There are no loading states because there are no network requests. There are no API calls. There is no backend. The tool works completely offline once the page has loaded.

This is the same privacy-first architecture behind every tool on Tooltri. The principle is simple: if a tool can run entirely in the browser, it should. Your data stays on your device.

Browser Support and CSS Color Format Compatibility

Understanding which formats work in which environments helps you choose the right output for your use case.

HEX works in every browser since the 1990s. It is safe to use everywhere without any compatibility concerns.

RGB and RGBA have been supported in CSS since CSS2.1. They work in every browser in use today.

HSL and HSLA have been supported since CSS3. They work in every modern browser including IE9 and above.

OKLCH is a CSS Color Level 4 feature. It has been supported in Chrome since version 111, Firefox since 113, and Safari since 15.4. As of 2026 it covers over 90% of global browser usage. For projects that need to support older browsers, use HEX or HSL as a fallback.

/* Progressive enhancement approach */
.element {
  color: hsl(221, 83%, 53%); /* fallback */
  color: oklch(0.55 0.2 250); /* modern browsers */
}

Common Color Conversion Questions

Why does my OKLCH output look different from what other tools show?

OKLCH values can vary slightly between tools due to rounding decisions and which version of the OKLCH specification they implement. The color itself is the same: minor differences in the third or fourth decimal place do not produce a visually distinguishable result. If you paste an OKLCH value from one tool into another converter, you should see all other formats match exactly.

Why does HEX always output six characters instead of eight?

Eight-character HEX includes an alpha channel as the last two characters. The Tooltri Color Converter treats opacity separately: when you need transparency, use RGBA or HSLA which express the alpha channel as a more readable decimal. Eight-character HEX is less widely supported and less readable than RGBA for expressing transparency.

Can I use the converter for colors outside the sRGB gamut?

The color picker is limited to sRGB colors since it uses the browser's native input, which is sRGB-constrained. However if you manually type an OKLCH value with chroma values high enough to exceed the sRGB gamut, the converter will process it and output the closest sRGB approximation for HEX, RGB, and HSL, while preserving the original OKLCH value. Wide gamut OKLCH colors that exceed sRGB will be clipped when converted to sRGB formats.

Why does my blue look brighter than my yellow at the same HSL lightness?

This is the core limitation of HSL that OKLCH fixes. HSL lightness is mathematically derived from the RGB channel values but does not correspond to perceptual brightness. Yellow stimulates the green and red receptors in the human eye much more strongly than blue stimulates the blue receptor, so yellow appears brighter at the same mathematical lightness value. OKLCH corrects for this: two colors at the same OKLCH lightness will appear equally bright.

Is there a limit to how many colors I can convert?

No. Each conversion takes microseconds. You can convert as many colors as you need without any rate limits, usage caps, or account requirements.

Does the tool work offline?

Yes. Once the Tooltri page has loaded, the Color Converter works without an internet connection. All conversion logic runs in your browser. No network requests are made during conversion.

Frequently Asked Questions

What color formats does the Color Converter support?

The tool supports HEX, RGB, RGBA, HSL, HSLA, and OKLCH as both input and output formats. You can paste any of these six formats into the input field and the tool will auto-detect the format and convert to all six simultaneously.

Does it support shorthand HEX like #fff?

Three-character shorthand HEX is automatically expanded to six characters. So #fff is treated as #ffffff and #abc is treated as #aabbcc.

Can I convert named CSS colors like "tomato" or "dodgerblue"?

Named CSS colors are not currently supported as input. You would need to look up the HEX value of the named color first and then paste that into the converter. Most browser developer tools show the computed HEX value when you inspect an element using a named color.

Is my color data private?

Completely. No color value you enter is ever sent to a server. All processing happens in your browser tab using JavaScript. There are no analytics on what colors you convert and no logging of any kind.

Why does the swatch not update while I am still typing?

The swatch holds its last valid color while you are mid-edit. This prevents the swatch from flickering to an error state while you are typing an incomplete value. As soon as the input becomes a valid color value in any supported format the swatch updates.

Can I use this tool to generate color palettes?

The Color Converter focuses on format conversion rather than palette generation. For generating full color palettes, scales, and complementary colors you would want a dedicated palette generator tool. The Color Converter is the right tool for converting a specific color value between formats.