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
Why #3B82F6 Looks Different on Every Screen: The Complete HEX, RGB & HSL Color Conversion Guide
Your designer sent #3B82F6 but your CSS needs rgb() — or your Figma uses HSL. Here's everything you need to know about color code formats, when to use each one, and how to convert between them instantly.
2026-03-26Why the Same Blue Looks Different on Print and Screen — The Color Code Guide
HEX, RGB, HSL, and CMYK explained in plain language. How to pick palettes, check WCAG contrast, and avoid the 'print looks nothing like screen' trap.
2026-03-30How I Replaced 47 Background Images with CSS Gradients: A Complete Guide for 2026
CSS gradients replace heavy background images with pure CSS — faster loads, infinite scalability, and zero HTTP requests. Covers linear vs radial, multi-stop syntax, 5 practical examples, performance comparisons, and 2026 design trends.