Color Format Converter

Convert any color format to all others instantly.
Enter HEX, RGB, HSL, or named colors and copy any format.

Enter any color format

Supports: HEX (#ff6b6b, #f66), RGB (rgb(255, 107, 107)), RGBA, HSL, HSLA, named colors (coral, red, etc.)

Opacity: 100%

0%50%100%

All Formats

HEX

#ff6b6b

RGB

rgb(255, 107, 107)

RGBA

rgba(255, 107, 107, 1)

HSL

hsl(0, 100%, 71%)

HSLA

hsla(0, 100%, 71%, 1)

Tailwind (closest)

red-400

CSS Variable

--color-primary: #ff6b6b;

Red

255

Green

107

Blue

107

Hue

0°

Saturation

100%

Lightness

71%

Supported Color Formats

Input Formats

#ff6b6b - HEX (6 digit)
#f66 - HEX (3 digit)
ff6b6b - HEX without #
rgb(255, 107, 107) - RGB
rgba(255, 107, 107, 0.5) - RGBA
hsl(0, 100%, 71%) - HSL
hsla(0, 100%, 71%, 0.5) - HSLA
coral - Named colors (147 supported)

Output Formats

HEX - Standard web format
HEX (short) - When possible (#f66)
RGB - rgb() function
RGBA - With alpha channel
HSL - Hue, saturation, lightness
HSLA - With alpha channel
Tailwind - Closest Tailwind class
CSS Variable - Ready to use

Pick colors from any website

Frontend Hero's Color Picker extracts colors in HEX, RGB, HSL, Tailwind, and more. Plus 10 other essential tools for frontend developers.

Get Frontend Hero now →

Explore more CSS tools

CSS Grid Generator

Create grid layouts visually

CSS Flexbox Generator

Create flex layouts visually

CSS Gradient Generator

Create custom gradients

CSS Text Gradient

Gradient text effects

CSS Gradients Collection

275+ ready-to-use gradients

CSS Box Shadow Generator

Design multi-layer shadows

CSS Selection Generator

Style text highlight colors

CSS Scrollbar Generator

Style custom scrollbars

CSS Blend Mode Generator

Mix colors with blend modes

CSS Cursor Generator

Preview all cursor styles

CSS Loader Generator

Create loading animations

BTN

CSS Button Generator

Design buttons with hover effects

✨

CSS Glow Generator

Create neon glow effects

Fluid Typography

Scale text across screen sizes

Browse all free CSS tools →