Color Formats Explained
HEX Colors
HEX colors are the most common format in web development. They use a # symbol followed by six hexadecimal digits representing the red, green, and blue components: #RRGGBB. For example, #FF0000 is pure red. A shorthand form #RGB is also valid when each pair is identical (e.g. #FFF = #FFFFFF).
RGB Colors
RGB stands for Red, Green, Blue. Each component has a value from 0 to 255. The CSS syntax is rgb(R, G, B) — for example, rgb(79, 70, 229). RGBA adds an alpha (opacity) channel: rgba(79, 70, 229, 0.5) is 50% transparent.
HSL Colors
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0–360), where 0 = red, 120 = green, 240 = blue. Saturation (0–100%) controls color intensity and Lightness (0–100%) controls brightness. HSL is often preferred when adjusting colors programmatically — to make a color lighter, you increase lightness; to mute it, you decrease saturation.
Which Format Should You Use?
- HEX: Best for static colors in CSS. Short, widely understood, used in design tools like Figma.
- RGB: Useful when you need to manipulate individual channels, add transparency (RGBA), or work with JavaScript canvas.
- HSL: Best for generating color palettes and themes programmatically. Intuitive for design — you can adjust lightness to create tints and shades without changing hue.
Frequently Asked Questions
Can I convert RGBA or HSLA colors? +
This tool converts the core HEX/RGB/HSL formats. RGBA and HSLA add an alpha channel — the alpha value does not affect the color conversion itself and can be added manually after conversion (e.g., convert #4F46E5 to rgb(79,70,229) then add opacity: rgba(79,70,229,0.5)).
What is the difference between HSL and HSB/HSV? +
HSB (Hue, Saturation, Brightness) and HSV (Hue, Saturation, Value) are the same model. They differ from HSL in how Lightness/Brightness is calculated. CSS uses HSL. Photoshop and many design tools use HSB/HSV. At 100% brightness in HSB, the color is fully vivid; in HSL, 50% lightness is the fully vivid point.
How do I convert a Figma color to CSS? +
Figma shows colors in HEX by default when you click on a fill. Copy the HEX value (with or without the # prefix) and paste it into this tool to get the RGB or HSL equivalent for use in CSS.
Why does HEX use letters A–F? +
Hexadecimal is base-16, so it needs 16 digits: 0–9 plus A (10), B (11), C (12), D (13), E (14), F (15). Each pair of hex digits represents a value from 0 (00) to 255 (FF). FF in hex = 15×16 + 15 = 255.