Color Code Converter

Convert color codes between HEX, RGB, HSL, and HSV formats instantly with a live color preview.

Color Picker

HEX

RGB

HSL

HEX

CSS rgba()

How It Works

Enter a color in any format — HEX (#FF5733), RGB (255, 87, 51), or HSL (14°, 100%, 60%). The tool converts it to all other formats simultaneously and displays a live color preview swatch.

Color representation in digital design spans multiple formats — each with different use cases. HEX is universal in web design, RGB is used in CSS and image editors, HSL makes color manipulation intuitive, and HSV (HSB) is used in design tools like Photoshop. Our converter handles them all.

**HEX Color Codes**

Hexadecimal color codes use 6 hex digits (preceded by #) to represent RGB values. Each pair of digits represents Red, Green, and Blue intensities from 00 (0) to FF (255). Example: `#FF5733` = R:255 G:87 B:51.

Short hex codes like `#F53` are shorthand for `#FF5533`. Our converter handles both formats.

**RGB (Red, Green, Blue)**

RGB specifies colors by the intensity of three light primaries: Red, Green, and Blue, each from 0 to 255. Used in CSS (`rgb(255, 87, 51)`), canvas API, and image processing. RGBA adds an alpha channel for transparency.

**HSL (Hue, Saturation, Lightness)**

HSL is more intuitive for designers:
- **Hue**: color angle on the color wheel (0–360°)
- **Saturation**: color intensity (0% = gray, 100% = vivid)
- **Lightness**: brightness (0% = black, 50% = normal, 100% = white)

HSL makes it easy to create color variations — change only lightness to create tints and shades of the same color.

**HSV/HSB (Hue, Saturation, Value/Brightness)**

Similar to HSL but with a different brightness model. HSV is used in Photoshop, Illustrator, and many design applications. Value 0% is always black; 100% is the brightest possible color.

**Practical Applications**

- Converting design tool colors (HSV) to CSS (HEX/RGB)
- Creating accessible color palettes with controlled contrast
- Building color scheme generators
- Understanding color relationships in design systems

**Privacy**

All conversions run locally in your browser.

Frequently Asked Questions

HEX is hexadecimal notation for RGB values. #FF0000 and rgb(255, 0, 0) represent the same red color. HEX is more compact for use in HTML/CSS; RGB is more readable.

Alpha controls opacity. In RGBA, the fourth value is 0 (transparent) to 1 (fully opaque). In 8-digit HEX (#RRGGBBAA), the last two digits are the alpha value.

HSL separates color (hue) from how light/dark it is (lightness) and how vivid it is (saturation). This makes it easy to create color themes by varying only lightness or saturation.

In HSL, 100% lightness is white. In HSV, 100% value at 100% saturation is the pure color. Photoshop uses HSV; CSS uses HSL. They are different mathematical representations.

CSS accepts HEX (#FF5733), rgb(), rgba(), hsl(), hsla(), and color keywords. Modern CSS also supports color-mix() and oklab() for advanced color manipulation.