Skip to content

Color Converter, HEX RGB HSL

Convert any color between HEX, RGB, and HSL, with a live swatch and a visual picker for when you only have a vague idea.

In your browser—your files never leave your device.

Learn more
Tip: paste any format (#hex, rgb(…), hsl(…)) into any field — auto-detected.

About this tool

CSS supports a growing list of color formats — HEX, RGB, HSL, HWB, LAB, LCH, OKLAB, OKLCH, named colors — but the three you actually deal with day-to-day are HEX, RGB, and HSL. HEX is the most compact (#FF5733 is six characters) and standard in design tokens. RGB is what hardware actually does (red, green, blue intensity from 0-255 each). HSL is the one that matches how humans think about color (hue, then saturation, then lightness) and is best when you want to make a color "a bit darker" or "less saturated" without recalculating math. This converter is bidirectional across all three — change any value and the others recompute. A live swatch shows the result so you can sanity-check that #5F3DC4 really is the indigo you wanted before pasting it into your stylesheet.

How to color converter, hex rgb hsl

  1. Enter a color or use the picker

    Paste a HEX code, type RGB or HSL values in the format shown (255, 87, 51 for RGB; 11, 100%, 60% for HSL), or click the visual picker to choose visually. Whichever field you edit becomes the source of truth.

  2. See all three formats update

    Whatever format you edit becomes the source; the other two recompute on the fly via the standard conversion formulas. So edit HEX and watch RGB and HSL change; edit HSL and watch HEX and RGB change.

  3. Check the swatch

    The live preview shows the color at a useful size so you can confirm it is right before copying. Particularly useful when working in HSL — a small change in hue can shift the perceived color a lot, and the swatch tells you whether you got the indigo or the violet you intended.

  4. Copy the format you need

    Each format has its own copy button. The output is CSS-ready, so paste directly into your stylesheet, design token file, or component prop. The format string includes the surrounding syntax (rgb(...) or hsl(...) or the hash for HEX), so no post-processing needed.

Why use this tool

Design handoff is the everyday case. The designer's Figma file has colors in HEX, the CSS framework I am using wants HSL for theming variables, the Tailwind palette generator wants RGB triples. Converting between them by hand is annoying enough that a fast tab beats a calculator. The second case is dark-mode design — taking a brand color and finding a "20% lighter" version that still reads as the same hue, which is much easier in HSL (just bump the L value) than in RGB. The third case is debugging a color that "looks slightly wrong" in CSS — pasting the HEX in here and watching the swatch tells you whether the value is what you typed or whether some build step has been transforming it (a Sass darken() call, a Tailwind opacity modifier). The fourth: CSS variable definitions in HSL components so opacity is easy (hsl(217 91% 60% / 0.5) is cleaner than computing the equivalent RGBA from scratch). The fifth is reverse-engineering a competitor's color palette from a screenshot — color-pick from the image, paste the HEX, see all three formats.

Features

Bidirectional across all three formats

Edit any of HEX, RGB, or HSL and the other two update in real time. So you can paste an RGB from a screenshot tool, see the HEX equivalent for your CSS, and the HSL equivalent for your theme variables, all without leaving the tool. The math is done with the standard HSL ↔ RGB conversion formulas; rounding errors at the integer level mean a few round-trips between formats may shift a value by one unit, which is below perceptual threshold.

Visual picker

When you do not know the values yet — you have a vague idea of "warm orange but not too bright" — click the picker, drag to find what you want, and copy the values once it looks right. Faster than typing trial-and-error HEX codes and hitting refresh. The picker is the browser's built-in color input, which means it inherits whatever the user's OS picker looks like (a richer experience on macOS, a simpler one on Windows, sometimes nothing on older mobile browsers).

Live swatch

A preview swatch shows the current color in real size. Useful for sanity-checking whether your HSL math gave you the indigo you intended or accidentally rotated the hue to teal. The swatch updates in real time as you edit any value, so you see the consequence of your edit immediately rather than having to reload a stylesheet.

CSS-ready output

Each format outputs in the exact syntax you paste into stylesheets: #FF5733 (HEX, with the hash), rgb(255, 87, 51) (RGB function form), hsl(11, 100%, 60%) (HSL function form). Copy buttons next to each. No need to wrap or reformat — the output is the literal string you would write in CSS.

Privacy & security

Color math is a few lines of arithmetic — HSL ↔ RGB ↔ HEX conversions are documented in CSS Color Level 3 and the implementation here is the standard one, running on your machine. The visual picker uses the browser's native <input type="color">, which itself is local and inherits from your OS color dialog. The live swatch updates by writing to a DOM element's style. No analytics on what colors you picked, no server-side anything.

Frequently asked questions

HEX, RGB, HSL — which one should I write in my CSS?
Use what your team uses. HEX is the most compact and most common in design files; you will see it in every Figma color, every Photoshop swatch, every CSS-in-JS library. HSL is the most readable for color manipulation (lightening, darkening, desaturating) and is what I default to when building a theme system because adjustments are intuitive — "make the primary 10% darker" is "subtract 10 from the L value". RGB is rare in hand-written CSS but standard in code that does color math or interpolation between colors. Modern CSS supports all three interchangeably; pick one convention per codebase and stick to it for consistency.
What about OKLCH and the newer color spaces?
OKLCH is the modern recommendation for perceptually uniform color — lightness changes look like equal steps to the human eye, which is not true of HSL (where 50% lightness in yellow looks much brighter than 50% lightness in blue). All major browsers support OKLCH now (since Chrome 111, Safari 15.4, Firefox 113). The OKLCH row in this converter shows the current colour in CSS Color Level 4 syntax (e.g. oklch(70% 0.15 220)) computed via Björn Ottosson's reference math — sRGB → linear → LMS → cube root → OKLab → polar (L, C, H). It is read-only because the round-trip back from OKLCH to sRGB needs out-of-gamut handling (P3 / Rec.2020 colours map to invalid sRGB and would need a colour-space-aware clamp). For full bidirectional editing across LCH, LAB, P3, and CMYK, polyfills like culori or color.js handle it.
Why does my HEX have 8 characters sometimes?
#RRGGBBAA — the last two digits are alpha (opacity) as a hex byte. So #FF000080 is "red at 50% opacity" (0x80 / 0xFF ≈ 0.5). Modern CSS supports this and it is a clean way to add opacity inline without switching to rgba() syntax. Some tools also accept 4-digit shorthand (#RGBA), where each digit doubles (so #F008 expands to #FF000088). This converter currently focuses on 6-char HEX (no alpha) because separating opacity into a separate CSS property or function (the / syntax in modern HSL) is cleaner for most workflows and works better with CSS variables.
RGB versus HSL for adjustments?
HSL almost always wins for human-driven adjustments. "Make this 20% darker" in HSL is "subtract 20 from the L value." Doing it in RGB requires multiplying each channel by 0.8 (or worse, by a different factor in each channel to preserve hue), which is tedious and easy to get wrong. The catch is HSL is not perceptually uniform — 50% lightness in yellow looks much brighter than 50% lightness in blue, and a "20% darker" yellow can become much darker visually than a "20% darker" blue. That is what OKLCH fixes. For most cases HSL is good enough; for accessibility-critical color systems where contrast ratios matter, OKLCH or even LCH gives more predictable results.
What about CMYK or Pantone?
Not included in this version. CMYK is for print (cyan, magenta, yellow, black ink percentages) and the conversion from RGB depends entirely on the printer's ICC color profile, so a single "RGB to CMYK" formula is misleading — different printers and papers produce different results from the same CMYK numbers. Pantone is a proprietary spot-color system with paid licensing. Both are essential for print work and unnecessary for web. If you need CMYK, do the conversion in your print-prep tool (InDesign, Affinity Publisher, Scribus) with the right ICC profile. If you need Pantone, the official Pantone software or a properly licensed library is the answer.
Why does the same HEX look different on my monitor vs my phone?
Color profiles. Web browsers historically assumed sRGB, but modern displays often support Display P3 (wider gamut, more saturated reds and greens) or DCI-P3 or other gamuts. A HEX with no color-space annotation gets interpreted slightly differently on different displays, and the same #FF0000 looks more saturated on a P3 phone screen than on an sRGB monitor. The CSS color() function lets you specify the gamut explicitly: color(display-p3 1 0.3 0.2). For most web work, sticking with HEX in sRGB is fine and the variation is below the threshold most users notice; for design-critical brand work, color profile awareness matters.
How do I get the contrast ratio between two colors?
WCAG contrast is a separate calculation based on the relative luminance of two colors, not a direct color conversion. The formula gives a ratio from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1. Tools like the WebAIM contrast checker do this calculation. This converter does not currently expose contrast ratio, but you can compute it from the RGB values using the WCAG relative luminance formula.
Privacy?
All conversion happens in your browser as math on the input values — there is no API call, no logging, no analytics. Nothing leaves the page. Open DevTools, change a color, and confirm there are no network requests. The color picker uses the browser's built-in <input type="color"> which is also entirely local.