Color Picker
Pick colors and convert between HEX, RGB, and HSL formats.
HEX
#EF4444RGB
rgb(239, 68, 68)HSL
hsl(0, 84%, 60%)RGBA
rgba(239, 68, 68, 1)CSS Color Formats: HEX, RGB, and HSL
1. Pick your color
Use the visual color wheel or sliders to navigate to any hue, saturation, and brightness. Or paste an existing HEX, RGB, or HSL value to convert it instantly.
2. Choose your format
The picker shows your color in HEX, RGB, and HSL simultaneously. Use HEX for CSS, RGB for opacity control, and HSL when you want to adjust lightness and saturation intuitively.
3. Copy and use
Click any value to copy it to your clipboard. Paste directly into your CSS, Tailwind config, Figma color field, or any design tool.
Color Format Comparison
| Format | Example | Supports Opacity | Best For |
|---|---|---|---|
| HEX | #FF5733 | No (use #RRGGBBAA) | CSS color values, design tokens, Tailwind classes |
| RGB | rgb(255, 87, 51) | rgba() variant | CSS when opacity control is needed |
| HSL | hsl(11, 100%, 60%) | hsla() variant | Adjusting lightness/saturation programmatically |
| CMYK | cmyk(0, 66, 80, 0) | No | Print design, Photoshop, InDesign |
Common Web Colors Reference
Pure White
#FFFFFF
Pure Black
#000000
Tailwind Blue
#3B82F6
Tailwind Red
#EF4444
Tailwind Green
#22C55E
Tailwind Yellow
#EAB308
Tailwind Purple
#A855F7
Tailwind Gray
#6B7280
Understanding the HSL Color Model
HSL (Hue, Saturation, Lightness) is often the most intuitive color model for designers because it maps directly to how humans think about color:
Hue (0–360°)
The color itself — position on the color wheel. 0° = red, 120° = green, 240° = blue.
Saturation (0–100%)
The intensity of the color. 0% = grey, 100% = fully vivid color.
Lightness (0–100%)
How light or dark the color is. 0% = black, 50% = normal, 100% = white.
Frequently Asked Questions
Common questions about Color Picker