Color Converter

Convert colors between HEX, RGB, and HSL formats. Includes color picker and CSS custom property output.

Color Converter

Convert colors between HEX, RGB, and HSL formats. Enter a HEX code, RGB, or HSL value and see all representations instantly.

Presets

Color Values

HEX#FF6347
RGBrgb(255, 99, 71)
HSLhsl(9, 100%, 64%)
RGB (0–1)(1.000, 0.388, 0.278)
CSS var--color: #FF6347;
Tailwind approxbg-[#FF6347]

FAQ

What is the difference between RGB and HSL?

RGB (Red, Green, Blue) describes a color by the intensity of each primary light channel. HSL (Hue, Saturation, Lightness) is more intuitive — hue is the color angle on a wheel, saturation controls vividness, and lightness controls brightness.

Can I enter a 3-digit HEX code?

Yes. 3-digit codes like #F63 are expanded to 6 digits (#FF6633) automatically.

What does the RGB (0–1) format mean?

Some tools (Unity, WebGL, Figma tokens) use floating-point RGB values between 0 and 1 instead of 0–255.

Frequently Asked Questions

What is the difference between HEX and RGB?

HEX uses a 6-digit hexadecimal notation (#RRGGBB), while RGB uses three decimal values 0–255. Both represent the same colors; HEX is more compact and common in CSS.

What is HSL?

HSL stands for Hue (0–360°), Saturation (0–100%), Lightness (0–100%). It is more intuitive for color manipulation than RGB, making it easy to adjust brightness or saturation independently.

What is the difference between HSL and HSB/HSV?

HSL and HSB (also called HSV) differ in the third component: HSL uses Lightness where 50% is a pure color, while HSB uses Brightness where 100% is a pure color. Most design tools use HSB/HSV.