🎨 Color Converter

Convert between HEX, RGB, HSL and HSV. Edit any field and the rest update live. Runs in your browser.

Tints
Shades

About the Color Converter

The same color can be written many ways. #0EA5E9, rgb(14, 165, 233) and hsl(199, 89%, 48%) all describe the identical shade of blue — they just use different coordinate systems. This tool converts freely between the four formats developers and designers use most: HEX, RGB(A), HSL(A) and HSV. Edit any field and every other representation updates instantly, alongside a live swatch.

HEX and RGB describe a color by its red, green and blue channels. HSL (hue, saturation, lightness) and HSV (hue, saturation, value) are cylindrical models that make it far easier to reason about relationships — lightening, darkening, or shifting hue — which is why the tool also generates tint and shade ramps you can click to adopt.

How to use it

  1. Type into any field — HEX, RGB, HSL or HSV. The others convert live as you type.
  2. Use the picker for a visual choice, and the Alpha slider for transparency (reflected in HEX8 and the rgba/hsla output).
  3. Copy any format with its copy button.
  4. Click a tint or shade to make that variation your working color.

Features

🔄 Live conversion

Edit any one format and HEX, RGB, HSL and HSV all update simultaneously.

🎚 Alpha support

Adjust transparency; it flows through to HEX8, rgba() and hsla() output.

🖌 Color picker

Pick visually with the native color input, then read off every format.

🌗 Tints & shades

Auto-generated lighter and darker variations — click any to adopt it.

📋 Per-format copy

Copy exactly the HEX, RGB, HSL or HSV string you need.

🔒 100% client-side

All conversion happens in your browser — nothing is sent anywhere.

Frequently Asked Questions

What's the difference between HSL and HSV?

Both use hue and saturation, but their third axis differs. HSL's lightness runs from black (0%) through the pure color (50%) to white (100%). HSV's value runs from black (0%) to the pure, fully-bright color (100%) with no built-in path to white. HSL is common in CSS; HSV (also called HSB) appears in many design tools' color pickers.

How do I add transparency?

Use the Alpha slider. An alpha below 1 is reflected in the outputs as an 8-digit HEX (#RRGGBBAA), rgba(), and hsla(). HSV has no standard alpha notation, so that field shows the opaque color.

Which HEX formats are accepted?

You can type 3-digit (#0af), 4-digit with alpha (#0af8), 6-digit (#00aaff) or 8-digit (#00aaff80) HEX, with or without the leading #. Shorthand is automatically expanded.

Why do some conversions round slightly?

RGB channels are integers 0–255 while HSL/HSV use degrees and percentages, so converting back and forth can shift a value by one unit due to rounding. The color is visually identical; the tiny difference is just display rounding.

Is my data sent anywhere?

No. All color math runs locally in your browser. Nothing you enter is transmitted to or stored on any server.

Developer guide

Converting between HEX, RGB, HSL and HSV without losing the plot

A colour on screen is three numbers plus an optional opacity, but there are several ways to write those numbers and they are not equally useful. HEX and RGB name a colour by how much red, green and blue light it emits, which is exactly what the display hardware wants and exactly the wrong basis for a human deciding whether one colour is a lighter version of another. HSL and HSV re-project the same cube onto a cylinder of hue, saturation and a brightness axis, which is what makes systematic palettes possible.

This tool converts between those four notations live. Everything is stored internally as a single canonical red, green, blue and alpha value, so editing any one field immediately re-derives the other three from that shared source rather than from each other. There is no primary format and no conversion chain to accumulate error along, though there is still per-field display rounding, which is worth understanding before you paste a value into a design token file.

Alongside the four fields it generates two five-step ramps: tints, which blend the current colour towards white at 15, 30, 45, 60 and 75 percent, and shades, which blend towards black at the same steps. Any chip can be clicked to become the working colour, so a ramp can be walked rather than recomputed. Both operate on sRGB channel values directly, which is fast and predictable but not perceptually uniform, and that distinction matters for accessibility.

How it works

Each input field has its own parser, and all four return the same canonical shape. The HEX parser accepts 3, 4, 6 or 8 hex digits with or without a leading hash, expanding shorthand by doubling each digit, so #0af8 becomes #00AAFF88. The RGB, HSL and HSV parsers are deliberately loose: they extract every number in the string with a regular expression and ignore everything else, which is why hsl(199 89% 48%), hsl(199deg, 89%, 48%) and a bare 199 89 48 are all accepted.

HSL and HSV share a hue circle but differ on the third axis, and the conversions reflect that. HSL lightness runs black at 0 percent, the fully saturated hue at 50 percent, white at 100 percent, so its midpoint is the pure colour. HSV value runs black at 0 percent to the fully bright hue at 100 percent and never reaches white on its own. CSS speaks HSL; most design-tool eyedroppers report HSV, also labelled HSB, which is the usual source of confusion when two tools disagree about the same swatch.

Alpha is carried on the canonical colour and surfaces differently per format. Below full opacity, HEX gains a fifth and sixth pair of digits, RGB switches to rgba() and HSL to hsla(). HSV has no standardised alpha notation, so that field always shows the opaque colour. The alpha slider steps in hundredths while an 8-digit HEX alpha is one of 256 byte values, so 0.5 is written as 80 and reads back as 0.502.

Common uses

  • Translate a HEX value from a brand guideline into the hsl() form a CSS custom property wants, so a theme can be varied by rotating hue or shifting lightness rather than by hardcoding another HEX.
  • Read the HSV that a design tool's picker reports and get the HSL that CSS actually accepts, instead of eyeballing the two and hoping.
  • Build a hover, active and disabled variant from a single base colour by taking the 15 percent shade and the 30 percent tint off the ramps.
  • Convert an rgba() overlay used in JavaScript into the 8-digit HEX form a Tailwind config or design token file expects.
  • Expand a shorthand HEX pulled from old CSS into its full six-digit form before committing it to a shared token file, since some tooling does not accept three-digit values.
  • Sanity-check a colour copied from a screenshot or an inspector by pasting it in and looking at the live swatch before it goes anywhere near a stylesheet.

Before you rely on the result

  • This tool does not compute WCAG contrast ratios, and HSL lightness is not a substitute for one. hsl(60, 100%, 50%) and hsl(240, 100%, 50%) have the same nominal lightness but relative luminances of 0.93 and 0.07; the yellow scores 1.07:1 against white and the blue 8.59:1. Check body text against the 4.5:1 minimum and large text against 3:1 with a dedicated contrast checker.
  • Round-tripping through a displayed value is lossy. The default #0EA5E9 shows as hsl(199, 89%, 48%), and pasting that HSL back in yields #0DA2E7. The displayed HSL is rounded to whole degrees and whole percent; keep HEX or RGB as your source of truth and treat HSL as a lens.
  • The tints and shades are linear blends of the gamma-encoded sRGB channels, not perceptual steps. A 45 percent tint does not look 45 percent lighter, and the effect differs sharply between hues. They are a starting point for a ramp, not a finished accessible scale.
  • Clicking a ramp chip replaces the working colour, so the ramp regenerates from the new base. Applying the 15 percent tint twice lands on #51BEEF, not the #56C0F0 you get from the single 30 percent tint, because each blend is relative to the current colour.
  • Modern CSS slash-alpha syntax is misread. In rgb(0 0 0 / 50%) the parser sees the numbers 0, 0, 0 and 50, clamps that fourth value into the 0-to-1 alpha range, and gives you a fully opaque black. Write the alpha as a decimal, or set it with the slider.
  • Named CSS colours are not recognised. Typing red, rebeccapurple or transparent leaves the field marked invalid and the swatch on its last valid value, since there is no keyword table behind the parsers.
  • The native colour picker is 6-digit only. Picking with it changes the RGB channels while leaving your current alpha untouched, so a colour picked while alpha is 0.4 stays at 0.4.
  • CMYK, LAB, LCH and OKLCH are not supported. If you are preparing artwork for print, do that conversion in a tool with an ICC profile, because CMYK output is device- and paper-dependent and no formula converts a screen colour to an exact printed one.