Color Format Reference
| Format | Example | Where used |
|---|---|---|
| HEX | #4d9fff | CSS, design tools, HTML attributes |
| HEX + Alpha | #4d9fff80 | CSS (modern browsers), transparent colors |
| RGB | rgb(77, 159, 255) | CSS, JavaScript canvas |
| RGBA | rgba(77, 159, 255, 0.5) | CSS transparency |
| HSL | hsl(213, 100%, 65%) | CSS, programmatic palettes |
| HSLA | hsla(213, 100%, 65%, 0.5) | CSS transparency |
How to Use It
1
Open the tool
Go to CSS & Frontend and scroll to the Color Picker & Converter.
2
Pick a color
Click on the color canvas, drag the hue slider, or type a HEX code directly into the input field.
3
View all formats
HEX, RGB and HSL values update instantly below the picker.
4
Copy the value
Click the copy button next to the format you need — HEX for CSS variables, RGB for Canvas, HSL for palette generation.
Pro Tips
💡Use HSL for design systems — keep the same hue and saturation, vary only lightness to generate shades:
hsl(213, 80%, 30%) through hsl(213, 80%, 90%).💡CSS custom properties with HSL make theming easy:
--color-primary-hsl: 213 100% 65%, then hsl(var(--color-primary-hsl) / 0.5) for transparency.💡The 4-digit and 8-digit HEX shorthand (
#rgba) is supported in modern browsers but not in older tools — use the 6/8 digit form for compatibility.Frequently Asked Questions
What is HEX color format?
#RRGGBB where each pair is a hex value 00–FF for red, green, blue. #4d9fff = RGB(77, 159, 255). HEX is the most common format in CSS.RGB vs HSL?
RGB mixes red/green/blue light values. HSL uses hue (color wheel 0–360°), saturation (vividness), and lightness. HSL is more intuitive for creating color variations.
How do I add transparency?
Use
rgba(r, g, b, alpha) or hsla(h, s%, l%, alpha) where alpha is 0 (transparent) to 1 (opaque). Or use 8-digit HEX: #4d9fff80.What is HSL good for?
Generating palettes — keep hue and saturation constant, adjust lightness to get the same color at different brightnesses. Perfect for design tokens and component theming.
Pick and convert colors now
Open the Color Picker and get HEX, RGB and HSL values for any color instantly — free, no login.
Open Color Picker →