HSB (Hue, Saturation, Brightness) is also called HSV (Hue, Saturation, Value). HSL (Hue, Saturation, Lightness) is a different model. Both use 0-360° for hue but differ in how saturation and the third dimension work.

All Tools›UI / CSS›

Color Format Converter

Free · No Server

Convert colors between HEX, RGB, RGBA, HSL, HSB, and Tailwind — with live preview.

Color Input

Accepts: HEX (#fff / #ffffff), RGB, RGBA, HSL, HSLA

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)

HSB

hsb(217°, 76%, 96%)

Tailwind (closest)

blue-500

Quick Swatches

What is Color Format Converter?

The Color Format Converter transforms any color between HEX, RGB, RGBA, HSL, HSLA, and HSB/HSV formats simultaneously. It also matches against CSS named colors and approximates the closest Tailwind CSS color class. Use the color picker or type any format directly — the tool auto-detects the input format.

How to Use

1
Pick or enter a color
Use the color picker, or type any format: #ff0000, rgb(255,0,0), hsl(0,100%,50%).
2
View all formats
All color representations update instantly in the output panel.
3
Copy any format
Click the copy button next to any format to copy it to your clipboard.

Common Use Cases

Converting design tool hex values to CSS HSL
Finding Tailwind equivalent for a custom color
Checking CSS named color equivalents

Key Features

HEX, RGB, RGBA, HSL, HSLA, HSB/HSV output
CSS named color matching
Tailwind color approximation
Color picker + text input
Quick-pick swatches

🔒

100% Private — No Server Required

All processing happens directly in your browser. No data is uploaded, stored, or transmitted to any server.

Frequently Asked Questions

Related Free Tools

Box Shadow Generator Border Radius Generator Gradient Generator Flexbox Playground Grid Builder CSS Units Converter Markdown Previewer Color Palette Generator

AiTechWorlds