Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL and other formats.
Color Picker
Preset Colors
Color Formats
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)color: #3B82F6;How to Use Color Picker
- Click anywhere on the color picker canvas to select a color, or drag the cursor to fine-tune
- Use the hue slider below the canvas to change the base color
- The HEX, RGB, RGBA, HSL, and CSS values update instantly — click "Copy" next to any format
- Use "Random Color" for inspiration, or click any Preset Color swatch to jump to a common color
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX (#3B82F6) is used in web design and CSS. RGB (59, 130, 246) describes red/green/blue intensity on a 0-255 scale. HSL (217°, 91%, 60%) describes hue, saturation, and lightness — often easier for designers to adjust intuitively.
Which format should I use for my CSS stylesheet?
Any format works in CSS. HEX is the most common and shortest. Use HSL if you want to adjust lightness or create color variations easily, since changing only the L value gives you shades of the same color.
Can I enter a known HEX code to start from?
Yes. Type or paste any HEX code directly into the HEX input field (e.g. #FF5733) and the picker will update to show that exact color with all converted formats.
What is RGBA and when should I use it?
RGBA adds an alpha (opacity) channel from 0 (fully transparent) to 1 (fully opaque). Use RGBA in CSS when you want a semi-transparent color, for example for overlays or backgrounds with opacity.
Related Articles
Design toolkit — explore these with it: