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
#FF6347rgb(255, 99, 71)hsl(9, 100%, 64%)(1.000, 0.388, 0.278)--color: #FF6347;bg-[#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.
Color Models Explained
Modern screens display color by mixing three primary light channels: Red, Green, and Blue (RGB). Every other color notation (HEX, HSL, HSB/HSV, OKLCH) is simply a different mathematical representation of that same RGB value. The choice of notation is about readability and editability, not about the color itself.
Color Format Comparison
| Format | Example (red) | Best for |
|---|---|---|
| HEX | #FF0000 | HTML/CSS tokens, design systems, copy-paste |
| RGB | rgb(255, 0, 0) | CSS, dynamic values via JS, alpha with rgba() |
| HSL | hsl(0, 100%, 50%) | CSS color manipulation — easy to lighten/darken |
| HSB/HSV | hsb(0, 100%, 100%) | Design tools (Figma, Photoshop, Illustrator) |
| OKLCH | oklch(62.8% 0.258 29.2) | CSS Color Level 4 — perceptually uniform |
Why HSL is Ideal for CSS Theming
HSL is the most intuitive format for building CSS design tokens. Because Hue, Saturation, and Lightness are independent axes, you can create a full color palette by holding the hue constant and varying only the lightness:
--color-primary-100: hsl(220, 90%, 95%); --color-primary-500: hsl(220, 90%, 50%); --color-primary-900: hsl(220, 90%, 15%);
This makes it trivial to implement light/dark mode themes by swapping the lightness value while keeping the brand hue identical.