Color Picker & Palette Generator
Pick a color and instantly see HEX, RGB, HSL, plus a full tint/shade palette and complementary harmonies.
What is a Color Picker?
A color picker lets you select, inspect, and convert colors between different formats: HEX (e.g. #6366f1), RGB (rgb(99, 102, 241)), HSL (hsl(239, 84%, 67%)), and more. It is an essential tool for web designers, front-end developers, and anyone working with CSS or digital graphics.
How to use the color picker online
- Click the color swatch or use the visual picker to choose a color.
- Or type a HEX, RGB, or HSL value directly into the input fields.
- The tool shows the color in all formats simultaneously.
- Click any format value to copy it to your clipboard.
Frequently Asked Questions
What is the difference between HEX and RGB?
HEX is a 6-character hexadecimal notation (#RRGGBB) used in CSS and HTML. RGB is a functional notation (rgb(R, G, B)) with values from 0-255. They represent the same colors — #ff0000 and rgb(255, 0, 0) are both pure red.
What is HSL?
HSL stands for Hue, Saturation, Lightness. Hue is the base color (0-360 degrees), Saturation is the intensity (0-100%), and Lightness is the brightness (0% = black, 50% = pure color, 100% = white). HSL is often more intuitive than RGB for creating color variations programmatically.
What is a complementary color?
A complementary color is the color directly opposite on the color wheel (180 degrees hue difference). Complementary pairs create high contrast and are commonly used in design to make elements stand out.
What is the difference between rgba and rgb?
rgba adds an alpha channel (opacity) as a fourth value from 0 (fully transparent) to 1 (fully opaque). For example, rgba(99, 102, 241, 0.5) is a 50% transparent indigo.