Color Picker
Pick a color and convert between HEX, RGB, and HSL formats.
Color spaces
| Space | Value | |
|---|---|---|
| HEX | #3B82F6 | |
| RGB | rgb(59, 130, 246) | |
| HSL | hsl(217, 91%, 60%) | |
| HSV | hsv(217, 76%, 96%) | |
| CMYK | cmyk(76%, 47%, 0%, 4%) | |
| Decimal (R, G, B) | 59, 130, 246 |
Quick palette
Shades & tints
How to use
- 1
Pick a color
Use the color picker or type a HEX value to select any color. All formats update in real time.
- 2
View all formats
See the color displayed as HEX, RGB, and HSL values side by side for easy reference.
- 3
Copy any format
Click the copy button next to HEX, RGB, or HSL to copy that value to your clipboard for use in CSS or design tools.
Frequently Asked Questions
HEX uses a six-digit hexadecimal code (#RRGGBB). RGB defines red, green, and blue channels from 0–255. HSL uses hue, saturation, and lightness, which many designers find more intuitive for adjustments.
Yes. Type or paste any valid HEX code (with or without the #) and the picker, RGB, and HSL values update automatically.
Yes. Conversions use standard color space math. RGB and HSL values are rounded to whole numbers for practical use in CSS.
Absolutely. Copy HEX as #rrggbb, RGB as rgb(r, g, b), or HSL as hsl(h, s%, l%) — all are valid CSS color formats.
Related tools
QR Code Generator
Generate QR codes from text or URLs. Download as PNG or SVG.
JSON Formatter
Format, validate, and minify JSON with clear error messages.
Base64 Encoder / Decoder
Encode and decode text or images to Base64. Works entirely offline.
Timestamp Converter
Convert Unix timestamps to dates and back. Supports seconds and milliseconds.
Hash Generator
Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from any text.
Open Graph Image GeneratorNew
Create 1200×630 OG images for social sharing with custom title and colors.
Favicon GeneratorNew
Generate favicon PNGs in multiple sizes from one image and download as ZIP.
SVG Pattern GeneratorNew
Create repeating SVG background patterns and copy the CSS code.
Box Shadow GeneratorNew
Design CSS box shadows with live preview and copy ready-to-use code.
Signature Generator PNGNew
Draw a transparent signature and download as PNG for documents and forms.
Color Palette GeneratorNew
Generate complementary, analogous, and triadic color palettes from a base color.
Glassmorphism GeneratorNew
Design frosted-glass CSS effects with live preview. Copy blur, border, and background code.