Yes. Completely free, no signup, no limits. Runs entirely in your browser.

100% browser-based · HEX / RGB / HSL · With alpha

Color Picker

Pick a color with the browser-native picker or the HSL sliders. Output in HEX, RGB, RGBA, HSL, HSLA — copy any format individually or all at once.

Pick

Hue Saturation Lightness Alpha

Output

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

HSLAhsla(217, 91%, 60%, 1)

RGBArgba(59, 130, 246, 1)

HEX → RGB RGB → HEX

Example

One color, every format

Move the sliders or click the swatch. Each format updates live so you can grab the one your code or design tool expects.

Picker value

#3B82F6

All formats

HEX:  #3B82F6
RGB:  rgb(59, 130, 246)
RGBA: rgba(59, 130, 246, 1)
HSL:  hsl(217, 91%, 60%)
HSLA: hsla(217, 91%, 60%, 1)

Use cases

What you'll use this for

A color picker is the fastest way to translate a brand swatch, a screenshot, or a CSS guess into the exact format your tool needs.

Brand design

Lock in a brand color and copy it into Figma, Illustrator, or a style guide in one click.

CSS authoring

Grab hsl() for theme tokens or rgba() when you need a translucent overlay.

Accessibility checks

Tweak lightness to hit a contrast target without leaving the color you started from.

Quick reference

Convert between HEX, RGB, and HSL without firing up DevTools or a design app.

Step by step

How to pick a color

Click the swatch

Opens the browser-native color picker. Type a HEX, use the eyedropper (Chrome / Edge), or pick visually.

Drag the sliders

Hue spins around the wheel, Saturation pulls toward gray, Lightness toward black/white. Alpha is transparency.

Copy a format

Each row has its own copy button. Or use Copy all formats to grab the whole list at once.

Paste into CSS

HEX for static colors, hsl() for theme tokens, rgba() for transparency. All ready to drop in.

FAQ

Frequently asked questions

Does it support alpha / transparency?

Yes. Use the Alpha slider (0–100%). Output is provided as both rgba() and hsla() strings, plus standard non-alpha HEX, RGB, and HSL. The preview swatch reflects the alpha value over the page background.

How do I enter an exact color value?

Click the large swatch — the browser-native picker opens with a HEX input. Or modify the Hue / Saturation / Lightness sliders to dial in a precise HSL value. For batch conversion of existing colors, use HEX to RGB or HSL to HEX.

Is it free?

Yes. Completely free, no signup, no limits, no ads. Runs entirely in your browser.

Which formats are covered?

Five: HEX (#RRGGBB), rgb(r, g, b), rgba(r, g, b, a), hsl(h, s%, l%), and hsla(h, s%, l%, a). All update live as you change the picker.

What's the difference between HSL and HSLA?

HSLA is just HSL with an alpha (transparency) channel. Modern CSS treats them as the same function — hsl(h s% l% / a) and hsla(h, s%, l%, a) are equivalent. This tool emits the legacy comma syntax for maximum browser support.

About

About color models

The web uses three main color models: HEX and RGB describe the same RGB triple (red / green / blue, 0–255), and HSL (hue / saturation / lightness) describes the same color in a way that's easier for humans to reason about. All three are interconvertible — this tool runs the math live in your browser.

When to use which format

HEX — concise, copy-paste-friendly, the default for static brand colors and most design tools.
RGB / RGBA — when you need transparency (rgba) or when an API expects channel integers.
HSL / HSLA — the right choice for theme tokens: tweak lightness for hover states, saturation for muted variants, without changing hue.

Browser support

All five formats have been supported in every major browser for over a decade. Newer formats like oklch() and color() are gaining traction in 2024+ — if you want to convert between those, see the Color Converter.