Color Picker
Pick colors and convert between HEX, RGB, and HSL formats.
Pick Color
#
%
Color Codes
HEX
#6366f1
HEX + Alpha
#6366f1ff
RGB
rgb(99, 102, 241)
RGBA
rgba(99, 102, 241, 1.00)
HSL
hsl(239, 84%, 67%)
HSLA
hsla(239, 84%, 67%, 1.00)
Shades
#000000
#04052f
#080a5e
#0c0e8d
#1013bc
#1418eb
#4346ef
#7274f3
#a1a3f7
#d0d1fb
#ffffff
0102030405060708090100
Complementary and Analogous
Complementary
#f2ef64
Triadic
#f26467
Analogous 1
#a864f2
Analogous 2
#64adf2
Usage
This tool picks colors and converts between HEX, RGB, and HSL formats, with shade and harmony suggestions.
Features
- Convert between HEX, RGB, and HSL color formats
- Alpha channel support, generating HEX+Alpha, RGBA, and HSLA values
- Generate 0-100% lightness shades for design palettes
- Calculate complementary, triadic, and analogous colors
- Click any swatch or shade to set it as the active color
Steps
- Click the large swatch on the left to open the system color picker
- Or type a HEX value directly (3 or 6 digits supported)
- Adjust individual channels in the RGB / HSL input fields
- Use the alpha slider to adjust transparency
- Click the copy button in the "Color Codes" area to copy the value
- Click any shade or harmony swatch to set it as the active color
Notes
- HEX input is auto-completed to 6 digits
- RGB channels range 0-255; HSL H is 0-360, S/L are 0-100
- Shades vary only lightness, keeping hue and saturation
- All computation runs locally in your browser