Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL, and CMYK formats instantly.
About This Tool
The Color Picker lets you select any color visually or enter a value in HEX, RGB, or HSL format and instantly convert between all three. It is an essential tool for web designers, UI/UX professionals, and anyone who needs precise color values for CSS, graphic design, or branding work.
color: #3B82F6; background-color: rgb(59, 130, 246); background-color: hsl(217, 91%, 60%); /* CMYK: cmyk(76%, 47%, 0%, 4%) */
Preview Text - Normal Text
Preview Text - Large Text
How It Works
Colors can be represented in multiple mathematical models. HEX is a hexadecimal notation (#RRGGBB) where each pair represents Red, Green, and Blue intensity from 00 to FF (0–255 in decimal). RGB (Red, Green, Blue) uses decimal values from 0 to 255 for each channel, defining colors as combinations of light intensities.
HSL (Hue, Saturation, Lightness) represents color in a more intuitive way: Hue is the color angle on a 360° color wheel (0°=Red, 120°=Green, 240°=Blue), Saturation is the color intensity from 0% (gray) to 100% (vivid), and Lightness ranges from 0% (black) to 100% (white) with 50% being the pure color.
Conversion between these formats involves mathematical transformations. HEX to RGB is a direct base-16 to base-10 conversion. RGB to HSL requires computing the chroma (difference between max and min channel values), then deriving hue from the dominant channel, saturation from chroma relative to lightness, and lightness as the average of max and min values.
How to Use
- Pick a color from the color picker or enter a value in any format (HEX, RGB, HSL, CMYK).
- All other formats update automatically in real-time.
- Click the copy button next to any format to copy the value to your clipboard.
- Use the palette generator to create complementary, analogous, or triadic color schemes.
- Check text/background contrast ratio for WCAG accessibility compliance.