MT
My Toolbox

Color Picker — Pick & Convert Colors Between HEX, RGB, HSL

Enter a HEX code, see the color, get RGB and HSL instantly. Or generate random colors for inspiration. One-click copy in any format. Built for developers and designers who need quick color conversions without opening Figma or a full design tool.

Pick and convert colors in different formats

HEX

#3498db

RGB

rgb(52, 152, 219)

HSL

hsl(204, 70%, 53%)

HEX
RGB
HSL

Pick and convert colors in different formats

HEX

#3498db

RGB

rgb(52, 152, 219)

HSL

hsl(204, 70%, 53%)

Color Formats Explained

Three formats, same colors. HEX (#FF5733) is the web standard — compact, easy to paste into CSS. RGB (255, 87, 51) is what screens actually use — three channels, 0-255 each, mixing red, green, and blue light. HSL (14°, 100%, 60%) is how humans think about color — hue is the color wheel position, saturation is intensity, lightness is bright vs dark.

Why HSL matters for developers: if you need a darker version of a color, just reduce lightness. Need a muted version? Reduce saturation. With HEX/RGB you'd have to do math on all three channels. CSS supports all three: color: #FF5733, color: rgb(255, 87, 51), color: hsl(14, 100%, 60%).

The alpha channel (transparency) adds a 4th value: rgba(255, 87, 51, 0.5) or hsla(14, 100%, 60%, 0.5) for 50% opacity. In modern CSS, you can also write rgb(255 87 51 / 50%) — the new space-separated syntax.

Color gamut note: HEX/RGB are limited to sRGB (the standard screen color space). Modern displays support wider gamuts (P3, Rec. 2020). CSS now has color(display-p3 1 0.34 0.2) for wider colors, but that's beyond what this converter handles — we stick to the sRGB formats that 99% of web work uses.

How to Use

  1. Type or paste a HEX code (with or without #) — the color preview updates instantly.
  2. Read off the RGB and HSL equivalents below the preview.
  3. Click the random button to generate a new color for inspiration.
  4. Copy any format with one click — ready to paste into CSS, Figma, or code.

When You'll Use This

Converting a designer's HEX color to RGB for code

Designer hands you #3B82F6 from Figma. You need rgb() for a dynamic opacity variant in your component. Paste the HEX, grab the RGB values, add your alpha channel.

Creating color variations (lighter/darker/muted)

You have a brand color and need hover states, disabled states, or background tints. Convert to HSL, then adjust lightness (+20 for lighter, -20 for darker) or saturation (-30 for muted). Way easier than guessing HEX values.

Debugging CSS color issues

A color looks wrong on screen and you're not sure if it's the right value. Paste the HEX from DevTools here, see the preview, compare with what you expected. Sometimes the issue is a typo in the HEX code (#FF5733 vs #F55733 — easy to miss).

Generating random colors for prototyping

Building a chart, tag system, or avatar placeholder? Hit the random button a few times to get colors that work. Better than staring at a color wheel trying to pick "something nice."

Tips & Gotchas

1.

Use HSL for programmatic color manipulation

Need 5 shades of blue for a design system? Start with your base blue in HSL, then generate variants by stepping lightness: 90%, 70%, 50%, 30%, 10%. In HEX/RGB you'd have to manually pick each shade. Tailwind CSS does exactly this internally.

2.

HEX is case-insensitive

#ff5733, #FF5733, and #Ff5733 are all the same color. Most tools output uppercase, but CSS accepts either. Don't waste time "fixing" case in your codebase unless your linter requires it.

3.

Check contrast ratios for accessibility

WCAG requires 4.5:1 contrast ratio for normal text, 3:1 for large text. A beautiful color means nothing if users can't read the text on it. After picking a color here, check it against your background with a contrast checker before committing.

4.

3-digit HEX is shorthand, not a different format

#F00 expands to #FF0000 (each digit is doubled). It only works when each pair is identical: #AABBCC → #ABC, but #A1B2C3 has no shorthand. Use 6-digit in code for clarity; 3-digit is fine for quick notes.

Examples

Tailwind Blue 500 in all formats

The default blue used in Tailwind CSS — converting between formats.

Input

#3B82F6

Output

RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%)

Pure red with HSL adjustment

Start with red, then darken by reducing lightness from 50% to 30%.

Input

hsl(0, 100%, 50%) → hsl(0, 100%, 30%)

Output

#FF0000 → #990000 (darker red without changing hue)

Features

  • Instant conversion between HEX, RGB, and HSL
  • Large color preview area — see exactly what you're getting
  • Random color generator for quick inspiration
  • One-click copy for each format
  • Supports 3-digit and 6-digit HEX, with or without #
  • Runs 100% in your browser — no data sent anywhere

Frequently Asked Questions

What's the difference between HEX, RGB, and HSL?

HEX (#RRGGBB) is hexadecimal notation — compact, the CSS default. RGB (r, g, b) specifies red/green/blue intensity 0-255 — what monitors actually display. HSL (hue, saturation, lightness) maps to how humans perceive color — hue is the color, saturation is vibrancy, lightness is bright/dark. All three describe the same sRGB color space, just different coordinate systems.

Which format should I use in CSS?

For static colors: HEX is most common and compact. For colors that need opacity: rgb(r g b / alpha) or hsl(h s l / alpha). For design systems where you programmatically generate shades: HSL, because adjusting lightness/saturation is intuitive. Modern CSS also supports color-mix() for blending.

Why does my color look different on different screens?

Screen calibration, color profiles, and gamut differences. A color in sRGB (#FF0000) looks different on a wide-gamut P3 display vs a cheap TN panel. For web work, design in sRGB (what HEX/RGB represent) and accept that exact color reproduction across all devices is impossible without hardware calibration.

How do I make a color lighter or darker programmatically?

Convert to HSL, then adjust the L (lightness) value. Lightness 50% is the "pure" color; increase toward 100% for lighter (approaching white), decrease toward 0% for darker (approaching black). Keep H and S the same to maintain the color's character. This is how Tailwind generates its 50-950 shade scales.

What's the difference between opacity and a lighter color?

Opacity (alpha) makes the element transparent — whatever is behind shows through. A lighter color (higher HSL lightness) is still fully opaque but mixed with white. They look similar on a white background but very different on colored or image backgrounds. Use opacity for overlays, lighter colors for backgrounds.

Tips & Related Workflows