HEX / RGB / HSL

Use this HEX, RGB, and HSL color converter to switch between formats like HSL to HEX, HEX to HSL, and RGB to HEX in one synchronized browser tool.

runC H

#3F3F46

rgb(63, 63, 70)

hsl(240, 5%, 26%)

Live Color

Inspect the current color on a larger surface before copying it into CSS or a design token.

Picker

Choose visually, then copy the exact format you need.

The picker, presets, and typed HEX/RGB/HSL values all stay synchronized.

#3F3F46

Color Values

Edit any one format. The other two stay synchronized immediately.

HEXRGBHSL

CtrlshiftCcopy valuesCtrlDdownload valuesEscreset

Validation

All three color formats are synchronized and valid.

Active input

hex

CSS Output

Copy the current values as raw formats or simple CSS-ready lines.

hex: #3F3F46
rgb: rgb(63, 63, 70)
hsl: hsl(240, 5%, 26%)

color: #3F3F46;
background-color: rgb(63, 63, 70);

How To Use

Edit HEX, RGB, or HSL directly. As soon as one format is valid, the other two formats update automatically for tasks like HSL to HEX, HEX to HSL, and RGB to HEX conversion.

Use this when you need to move quickly between design values, CSS snippets, and plain-language hue, saturation, and lightness color settings.

CtrlshiftCcopy valuesCtrlDdownload valuesEscreset

Related tools

Explore adjacent workflows and keep users moving between relevant tools.

Tailwind Color Reference

Browse Tailwind CSS color families with both v3 legacy hex values and the current v4 palette

Palette Generator

Generate tints, shades, and harmony palettes from one base color with CSS-ready output

Gradient Builder

Build linear or radial gradients with editable stops, live preview, and CSS-ready output

Contrast Checker

Check WCAG contrast ratios for foreground and background colors with live preview