Color Converter

Convert colors between HEX, RGB, and HSL formats

Pick a Color

Or enter values below

HEX

RGB

HSL

Understanding Color Formats

Digital colors can be represented in multiple formats, each with different advantages. This tool converts seamlessly between the three most common web color formats: HEX, RGB, and HSL. All processing happens in your browser—your color choices are never tracked or stored.

#️⃣ HEX (Hexadecimal)

Format: #RRGGBB (6 characters) or #RGB (3-character shorthand)
Example: #2563EB or #F00 (red)
Best for: CSS, HTML attributes, design tools. Most compact format for web development.

🔴🟢🔵 RGB (Red, Green, Blue)

Format: rgb(R, G, B) where each value is 0-255
Example: rgb(37, 99, 235)
Best for: CSS functions, JavaScript color manipulation, programmatic color generation. Easy to understand as light mixing.

🌈 HSL (Hue, Saturation, Lightness)

Format: hsl(H, S%, L%) where H is 0-360°, S and L are 0-100%
Example: hsl(221, 83%, 53%)
Best for: Creating color schemes, adjusting brightness/saturation. Most intuitive for human perception.

Common Use Cases

CSS Styling: Convert between formats for different CSS properties and browser compatibility
Design Handoff: Translate colors from design tools (often HEX) to code-friendly formats
Color Schemes: Use HSL to create variations (adjust lightness for hover states)
Accessibility: Calculate contrast ratios using RGB values
Brand Guidelines: Document colors in multiple formats for different use cases

Color Theory Quick Tips

Creating Hover States

Use HSL: decrease Lightness by 10-15% for darker hover effects, or increase for lighter ones. Much easier than calculating RGB changes.

Ensuring Contrast

For WCAG AA compliance, text needs 4.5:1 contrast ratio. HSL Lightness differences of 40%+ usually meet this requirement.

Frequently Asked Questions

Which format should I use in CSS?

All three work in modern browsers. HEX is most common and compact. Use RGB/HSL when you need transparency (rgba() or hsla()) or dynamic color manipulation.

What does the # in HEX mean?

The # symbol indicates a hexadecimal color value. It's required in CSS but often optional in design tools. The following 6 characters represent Red, Green, and Blue in base-16 (00-FF = 0-255).

How does HSL Hue work?

Hue is a degree on the color wheel: 0° = Red, 60° = Yellow, 120° = Green, 180° = Cyan, 240° = Blue, 300° = Magenta, 360° = back to Red. It makes selecting complementary colors (180° apart) intuitive.

Can I add transparency?

Yes! Use rgba(R, G, B, A) or hsla(H, S%, L%, A) where A is 0-1. Modern CSS also supports 8-character HEX: #RRGGBBAA.

CSS Color Reference

                        
                            /* HEX */

                            color: #2563EB;

                            /* RGB */

                            color: rgb(37, 99, 235);

                            /* HSL */

                            color: hsl(221, 83%, 53%);

                            /* With transparency */

                            color: rgba(37, 99, 235, 0.5);

                            color: hsla(221, 83%, 53%, 0.5);