Color Converter — HEX, RGB, HSL & HSV with One-Click Copy

How to use

• Enter a color three ways: type a HEX code or CSS color name, use the color picker, or drag the hue/saturation/lightness/alpha sliders.
• Change any single value and HEX, RGB, HSL, HSV and RGBA all update at once — no convert button needed, it works in every direction.
• Click the copy button next to any format to copy it to your clipboard; a “Copied!” confirmation appears.
• Lower the alpha slider to make a transparent color — the preview shows a checkerboard so you can see the transparency.
• Check the contrast panel to see the WCAG ratio and AA/AAA pass or fail. No install, no sign-up — colors are computed locally and never uploaded.

Supported color formats

HEX (hexadecimal color code)

HEX is the most common way to write colors on the web, like #RRGGBB (and the shorthand #RGB). Converting hex to rgb or hex to hsl is a few keystrokes here. For transparency, HEX8 uses #RRGGBBAA, where the last pair is the alpha channel.

RGB / RGBA (red, green, blue + alpha)

RGB describes a color with red, green and blue from 0 to 255, like rgb(124, 58, 237). RGBA adds a fourth value, the alpha (0–1), for transparency — for example rgba(124, 58, 237, 0.5). Type RGB values directly and the hex and HSL update immediately (rgb to hex, rgb to hsl).

HSL / HSLA (hue, saturation, lightness)

HSL uses hue (0–360°), saturation (0–100%) and lightness (0–100%), which makes it intuitive to tweak how bright or vivid a color is. It is widely used in CSS, and HSLA adds an alpha channel. Converting hex to hsl is handy when you want to nudge only the lightness.

HSV (hue, saturation, value)

HSV (also called HSB) uses hue, saturation and value (brightness). It is common in design and color-picker tools but is not an official CSS notation, so we show it as a reference value. For CSS, use HEX, RGB or HSL.

Features

Simultaneous display & two-way conversion

All formats are shown together on one screen, and editing any of them updates the rest instantly — hex to rgb, rgb to hex, hex to hsl, hsl to hex and every other direction. There is no convert button to press.

One-click copy

Each format has a copy button. Click it to copy the value to your clipboard, with a clear “Copied!” confirmation so you know it worked.

Color picker and sliders

Use the native color picker plus hue, saturation, lightness (or value) and alpha sliders to choose colors visually and watch every format follow along.

Transparency (alpha) support

Build semi-transparent colors and get RGBA, HSLA and HEX8 (#RRGGBBAA). The alpha slider runs from 0 to 100%, and the preview uses a checkerboard so you can see the transparency.

Contrast ratio & WCAG check

The tool calculates the contrast ratio between your color and a background (white, black, or a custom color) and shows whether it passes WCAG AA/AAA (4.5:1 for normal text, 3:1 for large text). Results are shown with both color and text, not color alone.

Use cases

Turn a HEX into CSS RGB / HSL

Got a HEX value from a design? Convert it to rgb() or hsl() and copy it for your CSS. With HSL you can fine-tune just the lightness for hover and active states.

Create transparent colors (RGBA / HSLA)

Make a semi-transparent color like rgba(0, 0, 0, 0.5) with the alpha slider and copy it — perfect for overlays, shadows and subtle backgrounds.

Check an accessible color combination

Verify that your text and background colors meet WCAG AA contrast so your content stays readable for everyone.

Notes & tips

• HEX, RGB, HSL and HSV are just different ways of writing the same color, so they convert back and forth (tiny rounding differences can occur).
• HSV is not an official CSS notation — it is shown for reference. Use HEX, RGB or HSL in your stylesheets.
• We deliberately do not output CMYK: accurate screen-to-print conversion depends on color profiles, paper and the press, so a simple formula would give misleading values. Use proper print color management for CMYK.
• Contrast is a guide: the WCAG formula is exact, but real readability also depends on font, size and surrounding colors.
• Your colors are never sent anywhere — all conversions happen locally in your browser.

Frequently asked questions

Can I convert HEX to RGB (and the other way)?

Yes. Enter one value and it converts in every direction at once — hex to rgb, rgb to hex, hex to hsl, hsl to hex, plus HSV and RGBA. There is no convert button; the other formats update instantly.

Does it support RGBA and HSLA with transparency?

Yes. Use the alpha slider to set transparency and get RGBA, HSLA and HEX8 (#RRGGBBAA). The preview shows a checkerboard so you can see how transparent the color is.

How do I copy a value?

Click the copy button next to any format. The value is copied to your clipboard and a “Copied!” message confirms it.

Can I use color names like red or rebeccapurple?

Yes. Standard CSS color names are accepted in the input and converted to HEX, RGB, HSL and HSV — for example rebeccapurple becomes #663399.

Can it convert to CMYK?

No, on purpose. Accurate CMYK depends on color profiles, paper and the printing press, so a simple formula would produce misleading values. For print, use dedicated color-management tools.

How do I use the contrast ratio?

It compares your text color against a background and shows whether it meets WCAG AA/AAA. Use it to confirm your color combinations are readable and accessible.

Are my colors sent to a server?

No. All conversions run locally in your browser. Your colors are never uploaded or stored.