What color formats are supported?

HEX (3 and 6 digit), RGB, HSL, and HSB. You can type in any format and all others update automatically.

Is my color data sent to a server?

No. All conversion happens in your browser using JavaScript. Nothing is sent anywhere.

What is the difference between HSL and HSB?

HSL (Hue, Saturation, Lightness) and HSB (Hue, Saturation, Brightness) are similar but calculate the third value differently. CSS uses HSL, design tools like Figma and Photoshop often use HSB.

Can I use this for Tailwind CSS colors?

Yes — paste any Tailwind HEX value and instantly get the RGB and HSL equivalents for use in custom CSS.

Color Converter

Runs in browser

Convert HEX, RGB, HSL, and HSB color formats with live preview instantly.

Convert colors between HEX, RGB, HSL, and HSB formats instantly. Paste any color value and get all formats with a live preview — all in your browser.

PANTONE®

11-4031

Cloud Dancer

Color of the Year 2026

View on Pantone →

Current color

Picker

HEX

RGB

HSL

HSB

Quick palette

Single colors for buttons, text, or accents.

Palette templates

Ready-made palettes for websites: primary, secondary, accent, muted, and background. Click any swatch to use it.

Ocean

Forest

Sunset

Minimal

Berry

Generate a palette from this color

Open Color Palette Generator with #f1f0ec pre-filled

→ Open in Color Palette

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

Enter any color value
Type a HEX code, RGB, or HSL value into any input field — or use the color picker.
See all formats instantly
All four formats update in real time as you type.
Copy the format you need
Click Copy next to any format to copy it to your clipboard.

Common use cases

Converting Figma color values to CSS — Copy a HEX color from Figma and convert it to RGB or HSL for use in custom CSS variables.
Adjusting Tailwind custom colors — Convert palette colors to HSL for Tailwind configuration where HSL values allow easy lightness tweaks.

Examples

Color of the Year 2026
Pantone Cloud Dancer — default in this tool.
Input
```
#F1F0EC
```
Output
```
rgb(241, 240, 236) / warm off-white
```
Tailwind Blue
Common Tailwind blue in HEX and equivalents.
Input
```
#3B82F6
```
Output
```
rgb(59, 130, 246) / hsl(217, 91%, 60%)
```
Pure Red
Primary red in HEX and equivalents.
Input
```
#FF0000
```
Output
```
rgb(255, 0, 0) / hsl(0, 100%, 50%)
```

Frequently asked questions

What color formats are supported?: HEX (3 and 6 digit), RGB, HSL, and HSB. You can type in any format and all others update automatically.
Is my color data sent to a server?: No. All conversion happens in your browser using JavaScript. Nothing is sent anywhere.
What is the difference between HSL and HSB?: HSL (Hue, Saturation, Lightness) and HSB (Hue, Saturation, Brightness) are similar but calculate the third value differently. CSS uses HSL, design tools like Figma and Photoshop often use HSB.
Can I use this for Tailwind CSS colors?: Yes — paste any Tailwind HEX value and instantly get the RGB and HSL equivalents for use in custom CSS.

Key concepts

HEX color: A 6-digit hexadecimal representation of RGB values — e.g. #3B82F6 for Tailwind blue — the most common format in CSS and design tools.
HSL: Hue, Saturation, Lightness — a color model that makes it easy to adjust brightness and saturation while keeping the same hue.

You might find these useful too.

More css tools

Related Guides

→ Css Animation Example

Color Converter tool

How to use

Enter any color value

See all formats instantly

Copy the format you need