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.
Frequently Asked Questions
What is the difference between HEX, RGB, HSL, and CMYK?▼
What is a WCAG contrast ratio?▼
How do I create a good color palette?▼
Can I use this tool for print design?▼
Why do my colors look different on different screens?▼
Related Tools
Related Articles
HEX to RGB Color Converter: A Designer's Complete Guide
Master color conversion between HEX, RGB, and HSL. Learn color theory for web design, CSS color codes, and how to create harmonious color palettes.
2026-03-26Color Picker Guide: HEX, RGB, HSL Color Codes Explained 2026
Learn the differences between HEX, RGB, HSL, and CMYK color codes. Master color palettes, contrast checking, and accessibility with our comprehensive guide.
2026-03-30CSS Gradient Guide: Linear & Radial Gradient Examples 2026
Master CSS gradients with practical examples. Learn linear-gradient, radial-gradient syntax, multi-color stops, and modern design trends.