Hex RGB HSL Color Converter

Free color converter: HEX to RGB, RGB to HEX, plus HSL, HSV, CMYK and alpha. Live sliders, color picker, EyeDropper, saved swatches, harmonies, WCAG contrast, colour-blindness preview and code export, no signup, runs locally.

Built and maintained by Shehzad Munir ·

Hex RGB HSL Color Converter
Loading Color Converter
Share

Convert colors in every direction, instantly

Convert any color between HEX, RGB, HSL, HSV/HSB and CMYK in either direction, the instant you type. Built for designers and developers, it adds interactive RGB/HSL/alpha sliders with live gradient tracks, a color picker, a screen EyeDropper, saved and recent swatches, ready-made color harmonies, a tint/shade ramp, a two-color mixer, a colour-blindness preview, live WCAG contrast checks and copy-ready code snippets for CSS, Tailwind, SCSS, Swift and Android, all in your browser, with nothing uploaded.

A color converter is only useful if it speaks every notation you do. This tool converts HEX to RGB and back, and also bridges HSL, HSV (also called HSB) and CMYK, all at once and in real time. Type a HEX like #3b82f6 and you immediately get its rgb(59, 130, 246), its hsl(217, 91%, 60%), its hsv(217, 97%, 96%) and its cmyk(76%, 47%, 0%, 4%). Change any single field and the others follow, so you can reason in the model that fits the job: HEX for markup, RGB for canvas and gradients, HSL/HSV for intuitive lightness and saturation tweaks, and CMYK when a design heads to print.

Features

  • Bidirectional HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK, with alpha
  • Interactive RGB, HSL & alpha sliders with live gradient tracks
  • Native color picker + browser EyeDropper
  • Recent history + saved swatches (kept in your browser)
  • CSS named-color support (crimson, teal, gold…)
  • Harmonies, tint/shade ramp + two-color mixer
  • Colour-blindness preview (protanopia, deuteranopia, tritanopia)
  • Live WCAG AA/AAA contrast badges
  • Copy-ready export for CSS, Tailwind, SCSS, Swift & Android

How to use Hex RGB HSL Color Converter

  1. 1

    Pick or type a color

    Use the color picker, the EyeDropper, or type a HEX, rgb(), hsl(), hsv()/hsb(), cmyk() value or a CSS color name like 'teal'. Every other format updates instantly.

  2. 2

    Read the conversions

    The HEX, RGB, HSL, HSV and CMYK fields all stay in sync. Edit any one of them and the rest recalculate live, so you can work in whatever notation you prefer.

  3. 3

    Explore palettes & harmonies

    Click complementary, analogous, triadic or tetradic swatches, walk the tint/shade lightness ramp, or blend two colors with the mixer to land on the exact shade you need.

  4. 4

    Copy & check contrast

    Copy any format with one click and read the WCAG AA/AAA badges to confirm your color stays readable on white or black before you ship it.

Common use cases

  • Convert HEX to RGB (or RGB to HEX) while writing CSS or JSX.
  • Translate a brand HEX into HSL/HSV for theming and alpha tweaks.
  • Turn a color into CMYK for print and prepress workflows.
  • Build accessible palettes with instant WCAG contrast feedback.
  • Generate complementary and analogous schemes for UI and illustrations.
  • Grab a color straight from the screen with the EyeDropper.

Detailed guide

From HEX to RGB, HSL, HSV and CMYK without the math

Under the hood the converter normalizes every input to a single RGB triple, then applies the standard sRGB formulas to derive the other spaces, the same math browsers and design tools use, so the numbers match what you see in Figma, Photoshop or Chrome DevTools. It also understands shorthand HEX (#fff), 8-digit HEX with alpha (#3b82f6aa), rgb()/rgba(), hsl()/hsla(), and common CSS named colors such as crimson, teal and gold, so you never have to memorize a formula or switch tabs. Each format has a copy button, and the large preview swatch shows your color on a real background so you can sanity-check it at a glance.

Design better palettes with harmonies and ramps

Choosing a single color is easy; building a coherent palette is the hard part. The converter generates color harmonies from color-theory rules, complementary (opposite on the wheel), analogous (neighbors), triadic and tetradic (evenly spaced), as clickable swatches you can drop straight into your project. A lightness ramp walks from near-black to near-white at the same hue and saturation, giving you the tints and shades designers reach for when they need hover, border and disabled states. A two-color mixer lets you blend any pair at a chosen ratio to create in-betweens, and a fine-tune row lets you lighten, darken, saturate, desaturate or rotate the hue in one click.

Accessibility and privacy built in

Good color is readable color. The converter shows the WCAG contrast ratio of your color against both white and black and flags AA (4.5:1) and AAA (7:1) compliance, so you can catch low-contrast text before it ships, a natural companion to the dedicated contrast checker. And because everything runs locally in your browser, your colors never leave your device: there is no upload, no account and no tracking, which keeps brand and client work private while the tool stays instant.

Frequently asked questions

How do I convert HEX to RGB?

Type or paste a HEX value (like #3b82f6 or #fff) into the HEX field, or use the color picker. The RGB value appears instantly as rgb(r, g, b), and you can copy it with one click. The conversion works the other way too, type an rgb() value and the HEX updates live.

Can I convert to HSL, HSV and CMYK at the same time?

Yes. Every field: HEX, RGB, HSL, HSV/HSB and CMYK, stays in sync. Edit any one and the others recalculate immediately, so you can read all five notations for the same color without running separate tools.

What is the difference between HSL and HSV?

Both describe a color by hue, but HSL (Lightness) and HSV/HSB (Value/Brightness) model saturation differently. HSL places pure colors at 50% lightness, while HSV puts them at 100% value, so the same percentage can look lighter or darker between the two. This tool shows both so you can pick the one your framework expects.

How do I get a CMYK value for print?

Type your color in any format and read the CMYK field, for example #3b82f6 becomes cmyk(76%, 47%, 0%, 4%). CMYK is the subtractive model used by printers, so this is handy when a web color needs to be matched in a brochure or packaging.

Can I pick a color from my screen?

Yes, on supported browsers (Chrome, Edge and others with the EyeDropper API) the 'Pick' button opens a screen eyedropper so you can sample any pixel, a color from an image, a website or your desktop, and load it straight into the converter.

Can I adjust colors with sliders and add transparency?

Yes. Interactive R, G, B, H, S, L and alpha sliders each show a live gradient track, so you can fine-tune a shade by dragging or typing an exact value. The alpha slider produces 8-digit HEX and rgba()/hsla() output for transparency.

Does it show how a color looks to colour-blind users?

Yes. The colour-blindness preview simulates how your color appears under protanopia, deuteranopia, tritanopia and full achromatopsia, so you can check that a palette still communicates for the roughly 1 in 12 men and 1 in 200 women with a colour-vision deficiency.

Can I export the color as CSS, Tailwind or app code?

Yes. The export panel gives copy-ready snippets for CSS variables, rgb(), SCSS, a Tailwind config entry, Swift UIColor, Android Color.parseColor and JSON, plus recent and saved swatches stored locally in your browser.

Is the color converter free and private?

Yes. It is completely free with no signup, and all conversion happens locally in your browser. Your colors are never uploaded to a server, so brand and client work stays private.

Can I convert RGB or HEX to HSL and OKLCH?

Yes. It converts between HEX, RGB(A), HSL and modern OKLCH so you can copy the exact format your CSS or design tool needs.

Does it handle transparency (RGBA/HEX with alpha)?

Yes. Include an alpha value and it produces RGBA and 8-digit hex, so opacity is preserved when you copy the color into your styles.

From the journal

All articles →
How to Remove EXIF Metadata From Your PhotosTool Guides

How to Remove EXIF Metadata From Your Photos

Photos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.

SM
Shehzad Munir
Aug 19, 2026 · 3 min
What Is CPS? How to Test and Improve Your Click SpeedTool Guides

What Is CPS? How to Test and Improve Your Click Speed

CPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.

SM
Shehzad Munir
Aug 17, 2026 · 3 min
How to Merge PDF Files for Free (Without Uploading Them)Tool Guides

How to Merge PDF Files for Free (Without Uploading Them)

Combine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.

SM
Shehzad Munir
Aug 14, 2026 · 2 min