🎨

Color Code Converter

Convert colors between HEX, RGB, HSL, and RGBA formats. Visual picker with Tailwind matches.

Pick:

HEX

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

RGBA

Alpha:

rgba(99, 102, 241, 1)

HSLA

hsla(239, 84%, 67%, 1)

CSS Variable

--color: #6366F1;

Closest Tailwind Class

indigo-500(#6366F1)

Usage: bg-indigo-500, text-indigo-500, border-indigo-500

Color Information

CSS Named ColorNo exact match

BrightnessLight(luminance: 0.185)

Contrast vs White

4.47:1Fail

Contrast vs Black

4.70:1AA

About Color Code Converter

Free color code converter that instantly converts colors between HEX, RGB, HSL, RGBA, and HSLA formats. Enter a color in any format and see all other representations update in real-time. Use the visual color picker for intuitive selection, or type exact values in individual R/G/B or H/S/L input fields. See a large color preview, copy any format with one click, get the closest Tailwind CSS color class match, and check contrast ratios against white and black backgrounds. The tool also identifies named CSS colors and whether the color is light or dark. Perfect for web designers, front-end developers, and anyone working with colors across different CSS and design formats.

Frequently Asked Questions

What color formats are supported?▾

The tool supports HEX (#RRGGBB), RGB (0-255 per channel), HSL (hue 0-360, saturation/lightness 0-100%), RGBA (RGB with alpha transparency 0-1), and HSLA (HSL with alpha transparency). All formats update in real-time when you change any value.

How does the Tailwind color matching work?▾

The tool compares your selected color against the full Tailwind CSS color palette and finds the closest match by calculating the color distance. It suggests the nearest Tailwind class name like 'blue-500' or 'red-400' for quick use in your Tailwind projects.

What is the difference between RGB and HSL?▾

RGB defines colors by Red, Green, and Blue channel intensities (0-255). HSL defines colors by Hue (color wheel position, 0-360°), Saturation (color intensity, 0-100%), and Lightness (brightness, 0-100%). HSL is often more intuitive for adjusting colors - for example, making a color lighter or more muted.

What is RGBA and when should I use it?▾

RGBA adds an Alpha (transparency) channel to RGB, with values from 0 (fully transparent) to 1 (fully opaque). Use RGBA when you need semi-transparent colors in CSS - for example, overlay backgrounds, shadow colors, or fading effects. The tool converts between RGBA and HSLA formats as well.

Is this color code converter free?▾

Yes, completely free with no signup. Convert between HEX, RGB, HSL, RGBA, and HSLA instantly. Use the visual picker, find the closest Tailwind class, and check contrast ratios - all in your browser with no data sent to any server.