Color Converter
Convert between HEX, RGB, and HSL color formats with a live color preview.
H: 0-360 S/L: 0-100%
10 shades from lightest to darkest based on your selected color.
Color Format Reference
HEX — 6-digit hexadecimal, e.g. #6366f1. Most common in CSS and design tools.
RGB — Red, Green, Blue values (0-255), e.g. rgb(99, 102, 241). Great for programmatic color manipulation.
HSL — Hue, Saturation, Lightness, e.g. hsl(239, 84%, 67%). Intuitive for creating color palettes.
How to Convert Colors
Use the color picker to visually select any color, or type directly into any input field.
All three formats — HEX, RGB, and HSL — update simultaneously as you change any value.
Click Copy next to any format to copy the CSS-ready value to your clipboard.
Browse the color shades panel below to explore lighter and darker variants of your color.
Frequently Asked Questions
When should I use HEX vs RGB vs HSL?
Use HEX when copying colors from design tools (Figma, Sketch) into CSS — it is the most common format. Use RGB when you need to manipulate color values programmatically or add transparency with rgba(). Use HSL when creating color palettes, since it is intuitive to adjust hue, saturation, and lightness independently.
What does HSL stand for?
HSL stands for Hue, Saturation, and Lightness. Hue is the color angle on the color wheel (0–360°), Saturation is the intensity of the color (0–100%, where 0% is grey), and Lightness is how bright the color is (0% = black, 100% = white, 50% = pure color).
How do I add transparency to a color?
Use rgba(r, g, b, alpha) in CSS, where alpha is a value from 0 (fully transparent) to 1 (fully opaque). For example, 50% transparent red is rgba(255, 0, 0, 0.5). You can also use hsla() for HSL with alpha.
What is the difference between a 3-digit and 6-digit HEX color?
A 3-digit HEX (#RGB) is shorthand for a 6-digit color (#RRGGBB) where each digit is doubled. For example, #F3A is the same as #FF33AA. Not all colors can be expressed in 3-digit form — only those where both digits in each pair are identical.