Color Converter

Color Converter

Convert colors between HEX, RGB, HSL, and HSB formats. Supports CSS named colors, alpha/opacity, and a live preview swatch.

HEX ↔ RGB ↔ HSL ↔ HSB CSS Named Colors Live Preview Alpha Support Copy Each Format
Get started free Sign in

Free · No credit card · 50 credits/day

All the Color Formats You Need

From CSS hex codes to HSL palettes — convert between every format used in design and web development.

HEX Format
Six hexadecimal digits (e.g., #1a2b3c) or shorthand (#rgb). The most common format in web CSS and design tools.
RGB Format
Red, Green, Blue values from 0–255 (e.g., rgb(26, 43, 60)). Direct hardware representation of color on screens.
HSL Format
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Far more intuitive for adjusting brightness and creating color variations.
HSB / HSV Format
Hue, Saturation, Brightness. Similar to HSL but used by Photoshop and most design tools. At 100% brightness, colors are fully vibrant.
CSS Named Colors
140+ named colors (red, cornflowerblue, rebeccapurple) supported in all browsers. We convert names to all other formats.
Alpha Channel
Add transparency with rgba(r,g,b,a) or hsla(h,s,l,a), or use 8-digit HEX (#rrggbbaa). Alpha 0 = transparent, 1 = opaque.

Frequently Asked Questions

What is the difference between HSL and RGB?
RGB describes color by mixing red, green, and blue light — the same way your screen works. It's precise but unintuitive for humans. HSL describes color in terms humans think about: hue (which color on the wheel), saturation (how vivid), and lightness (how bright). To create a lighter version of a color in HSL, just increase the L value. This makes HSL invaluable for generating color palettes and design systems.
Why do programmers often use HEX color codes?
HEX codes are compact (6 characters), easy to copy-paste, and the default output of most design tools like Figma and Photoshop. They map directly to RGB values (each pair of hex digits is one 0–255 component) and are universally supported in CSS. Their main downside is that they're not human-readable — you can't tell if #1e40af is a light or dark blue without a preview.
What is the sRGB color space?
sRGB (standard Red Green Blue) is the default color space for web browsers, most monitors, and digital images. When working with color on the web, values in HEX, RGB, and HSL all assume sRGB. Newer CSS features like color(display-p3 ...) support the wider P3 gamut used by modern Apple displays.
What is the difference between rgba opacity and the CSS opacity property?
rgba() and hsla() set the transparency of a specific color value — only that element's fill, border, or background becomes translucent. The CSS opacity property makes the entire element (including all its children and text) transparent. If you want a semi-transparent background without affecting the text inside, use background: rgba(0,0,0,0.5) rather than opacity: 0.5.

Related Tools

Color Palette Generator
Create harmonious color palettes from any base color.
Contrast Checker
Verify WCAG color contrast ratios for accessibility.
Gradient Generator
Build CSS gradients visually.

Convert Any Color in One Click

Switch between HEX, RGB, HSL, and HSB instantly. Perfect for designers and developers working across tools.

Get started free

Free · No credit card · 50 credits/day