Color Picker
Pick colors and convert between HEX, RGB, and HSL
Preview
rgb(99, 102, 241)
Hue239°
Saturation84%
Lightness67%
hsl(239, 84%, 67%)
Quick Reference
HEX: 6-digit code, commonly used in CSS (#RRGGBB)
RGB: Red, Green, Blue values (0-255 each)
HSL: Hue (0-360°), Saturation, Lightness (0-100%)
About Color Picker
How to Use the Color Picker
- Pick your color - Use the color picker or enter a color value in any format
- See conversions - All formats update automatically
- Adjust values - Fine-tune with sliders or direct input
- Copy - Click copy to get the color code in your preferred format
Color Format Comparison
| Format | Example | Best For |
|---|---|---|
| HEX | #FF5733 | CSS, shorthand notation |
| RGB | rgb(255, 87, 51) | When you need alpha/transparency |
| HSL | hsl(14, 100%, 60%) | Creating color variations |
Understanding Color Spaces
HEX Colors
- 6-digit format:
#RRGGBB - 3-digit shorthand:
#RGB(e.g.,#F00=#FF0000) - Each pair represents 0-255 in hexadecimal (00-FF)
RGB Colors
- Red: 0-255
- Green: 0-255
- Blue: 0-255
- Combined: over 16 million color combinations
HSL Colors
- Hue: The color itself (0° = red, 120° = green, 240° = blue)
- Saturation: Color intensity (0% = gray, 100% = full color)
- Lightness: Brightness (0% = black, 50% = normal, 100% = white)
Why Designers Love HSL
HSL is intuitive for creating color schemes:
- Keep hue constant, vary saturation for muted/vibrant versions
- Adjust lightness for light/dark variations
- Easy to create accessible color palettes
Related Tools
Dummy Data Generator
Generate fake names, emails, phone numbers, and addresses for testing. Free random data generator for developers and designers.
Gradient Generator
Create beautiful CSS gradients with a visual editor. Generate linear, radial, and conic gradients with multiple color stops.
Hashtag Generator
Generate relevant hashtags for Instagram, TikTok, and Twitter. Find popular and trending hashtags for your content.