Free Color Converter Online

What is a color converter?

A color converter is a browser tool that reads one color notation and rewrites the same color in every other notation. Paste #663399 and it returns rgb(102 51 153), hsl(270 50% 40%) and eleven more rows. The notations follow CSS Color Module Level 4.

Section 5.2 of that specification defines the hexadecimal notation and Section 7 defines hsl(). TestMu AI runs every matrix in the page. All processing happens in your browser. No data is uploaded.

If you only need one direction, the dedicated pages are faster: try HEX to RGB or RGB to HSL. Use this page when the input format is unknown or when you need every format at once.

How does a color converter work behind the scenes?

Every input is normalised to one sRGB triple plus an alpha value. Hex, rgb, hsl, hwb and the CSS keywords are direct views of that triple, so those conversions are exact arithmetic with no color science involved.

OKLCH needs a longer path. The tool removes the sRGB transfer function, then applies the OKLab cube-root LMS transform rather than the XYZ route, which is what makes its lightness axis perceptually even.

Pasting a lab() or lch() value runs the reverse trip. The CIE Lab equations use the constants epsilon 216/24389 and kappa 24389/27, then the Bradford matrix adapts XYZ from D50 to D65 before the result lands back in sRGB. Contrast uses the WCAG relative luminance weights of 0.2126 red, 0.7152 green and 0.0722 blue on the linearised channels.

How do you use this color converter?

• Enter or pick a color. Drag inside the picker square to set saturation and brightness, or drag the hue strip below it. You can also type any CSS color into the input box.
• Set the alpha if you need it. Drag the alpha slider to change opacity. The HEX with alpha, RGBA and HSLA rows update with the new value.
• Read the six output rows. The grid lists HEX, RGB, HSL, HSV, CMYK and OKLCH. Click any row to copy it. Set an alpha below 1 and HEX, RGB and HSL switch to their alpha forms.
• Check contrast and pick a harmony. The contrast card grades the color against white and black. The harmony selector produces complementary, analogous, triadic, split, tetradic or square swatches.
• Copy or export. Copy a single row, copy the CSS custom property block, or download color-converter.json with every format and the contrast numbers.

What features does this color code converter include?

The widget parses ten input notations and returns the six formats people actually ship with, and clicking any row copies it. These are the controls you get in this tab:

• Ten input notations: Hex with 3, 4, 6 or 8 digits, rgb, hsl, hwb, cmyk, lab, lch, oklab, oklch and the 148 CSS color keywords.
• Six output formats: HEX, RGB, HSL, HSV, CMYK and OKLCH, each one click to copy. Drop the alpha below 1 and HEX, RGB and HSL switch to their alpha forms.
• Built in color picker: A saturation and brightness square with a hue strip, open by default, draggable by mouse, touch or arrow keys.
• Alpha slider: A 0 to 1 control that drives the HEX with alpha, RGBA and HSLA rows and the live preview.
• WCAG contrast card: Ratios against white and black with an AA verdict for normal and large text, plus the relative luminance value.
• Gamut warning: Lab, LCH, OKLab and OKLCH inputs that fall outside sRGB are flagged and clipped rather than silently wrapped.
• Tint and shade scale: Nine clickable swatches from 95 percent down to 15 percent lightness that reload as the new base color.
• Six harmony sets: Complementary, analogous, triadic, split complementary, tetradic and square, each swatch clickable.
• Export options: Copy any row, copy a ready CSS custom property block, or download color-converter.json.

What is the difference between HSL, HSV and OKLCH?

All three are cylindrical, so each has a hue angle. They differ in what the second and third axes mean and in whether equal numeric steps look equal to the eye.

Pick HSL for quick tweaks in legacy stylesheets, HSV when you mirror a design tool, and OKLCH when you build a scale that must keep even steps. Generate a full ramp with the Colour Shades Generator once you have the base color.

Who uses a color format converter day to day?

Anyone moving a color between two systems that disagree on notation. The common jobs:

• Front-end developers: Turn a design handoff hex into the hsl or oklch token your design system expects.
• Accessibility reviewers: Check a brand color against white and black before it reaches a WCAG audit.
• QA engineers: Normalise a computed rgba() value from the DOM before asserting it in a visual test.
• Designers: Move an HSV picker value into a CSS safe hsl or hex string without rounding by hand.
• Print and brand teams: Read an approximate CMYK breakdown for a screen color before a proof is ordered.
• Data visualisation authors: Build an even lightness ramp in OKLCH so a legend reads correctly.

Visual regression is where color drift usually surfaces. Compare rendered screenshots with TestMu AI SmartUI and run the contrast checks in accessibility testing. For a single pairing, the Color Contrast Checker gives a focused verdict, and the Color Picker helps when you have no starting value.

Frequently Asked Questions (FAQs)

Which color formats does this color converter support?

The input box accepts hex with 3, 4, 6 or 8 digits, rgb, hsl, hwb, cmyk, lab, lch, oklab, oklch and the 148 CSS color keywords. Whatever you paste, the tool returns the six formats people actually ship with: HEX, RGB, HSL, HSV, CMYK and OKLCH.

How do I convert HEX to RGB by hand?

Split the six digits into three pairs and read each pair as a base 16 number. In #663399 the pairs are 66, 33 and 99, which are 102, 51 and 153 in decimal, so the color is rgb(102 51 153). A three digit hex such as #639 doubles each digit first.

What is the difference between HSL and HSV?

Both start from the same hue angle. HSL puts pure colors at 50 percent lightness and reaches white at 100 percent. HSV puts pure colors at 100 percent value and never reaches white through value alone. Design tools usually expose HSV, while CSS ships hsl.

Why does my CMYK value look different when printed?

The CMYK row here is a device independent arithmetic conversion, not a profiled separation. Real presses use an ICC profile that accounts for ink, paper and dot gain, so the printed result shifts. Use this value as a starting point and let your print vendor apply the final profile.

What is OKLCH and why is it better than HSL?

OKLCH is a perceptually uniform polar space defined in CSS Color Module Level 4. Equal lightness steps look equally different to the eye, and changing hue does not change perceived brightness. HSL does neither, which is why HSL palettes drift darker around blue and lighter around yellow.

Why does an OKLCH or Lab color show a gamut warning?

Lab, LCH, OKLab and OKLCH can describe colors that no sRGB monitor can show. When the converted red, green or blue channel falls outside 0 to 255 the tool clips it and flags the color as out of sRGB gamut. Lower the chroma value until the warning clears.

What contrast ratio do I need for accessible text?

WCAG 2.2 success criterion 1.4.3 asks for at least 4.5 to 1 between text and its background, and 3 to 1 for large text of 18 point or 14 point bold. The converter prints the ratio against white and against black so you can pick a safe pairing immediately.

Does the 8 digit hex alpha work in every browser?

Yes in current Chrome, Firefox, Edge and Safari. The last two digits are the alpha channel read as a base 16 number, so ff is fully opaque and 80 is close to 50 percent. Older engines that predate CSS Color Module Level 4 ignore the extra pair.

Is a color converter accurate enough for brand colors?

For screen work yes, because hex, rgb, hsl, hsv and hwb are lossless views of the same sRGB triple. Lab, LCH and OKLCH are computed with the matrices published in CSS Color Module Level 4. CMYK and Pantone matching need a color managed workflow instead.

Can I convert a color without uploading it anywhere?

Yes. All processing happens in your browser. No data is uploaded. The parser, the matrices and the contrast math all run in the page, so the tool keeps working if you go offline after the first load and nothing is stored between sessions.

How do I build a tint and shade scale from one color?

Hold the hue and saturation steady and step the lightness. The tool renders nine swatches from 95 percent down to 15 percent lightness in HSL and each swatch is clickable, so selecting one loads it as the new base color and recalculates every output row.

What is relative luminance used for?

Relative luminance is the linearized brightness of a color on a 0 to 1 scale, weighted 0.2126 red, 0.7152 green and 0.0722 blue. WCAG contrast is computed from two luminance values, so it decides whether white or black text reads better on your swatch.