What is Color Picker?
Free color picker and palette generator. Get HEX, RGB, HSL, and CMYK values for any color and generate complementary, analogous, triadic, and monochromatic color palettes. No signup required.
Color Picker runs entirely in your browser using Canvas API. Your data never leaves your device.
Free Color Picker
Pick any color and instantly get its HEX, RGB, HSL, and CMYK values with one-click copy. Generate professional color palettes — complementary, analogous, triadic, split-complementary, and monochromatic — all based on your chosen color. Perfect for designers, developers, and anyone who works with color. 100% browser-based.
White text on your color
Preview how text looks on this background
Your color as text
Preview how this color looks as text on white
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?+
HEX is a base-16 shorthand for RGB, commonly used in web development (e.g., #3b82f6). RGB defines colors by red, green, and blue components (0–255 each). HSL defines colors by hue (0–360°), saturation (0–100%), and lightness (0–100%) — often more intuitive for adjusting colors.
What is a complementary color?+
A complementary color is directly opposite on the color wheel (hue + 180°). Complementary pairs create maximum contrast and are used for call-to-action buttons, highlights, and bold accents.
What is an analogous color palette?+
Analogous colors sit adjacent on the color wheel (±30° and ±60°). They create harmonious, low-contrast palettes that feel natural and cohesive — great for backgrounds, gradients, and calm UI designs.
What are triadic colors?+
Triadic colors are three evenly spaced colors on the wheel (120° apart). They create vibrant, balanced palettes that work well in logos, illustrations, and designs that need variety with visual balance.
What is CMYK used for?+
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in print. If you are designing for physical printing — business cards, brochures, packaging — give your printer CMYK values rather than RGB or HEX to ensure accurate color reproduction.
How do I convert a color between HEX and RGB?+
HEX to RGB: each pair of hex digits represents one color channel. #3b82f6 → R=0x3b=59, G=0x82=130, B=0xf6=246 → rgb(59, 130, 246). RGB to HEX: convert each decimal value to two hex digits. rgb(59, 130, 246) → #3b82f6. This tool does the conversion instantly — just click any value to copy it.
What is split-complementary color harmony?+
Split-complementary uses your base color plus the two colors adjacent to its complement (complement ±30°). It has the contrast benefit of complementary palettes but is softer and less visually jarring — a good choice when complementary feels too harsh. It works well for designs where you want visual interest without aggression.
You might also like
Browse all 22 Images & Documents tools →CSS Gradient Generator
Build beautiful CSS gradients visually and copy the code instantly
Color Contrast Checker
Check WCAG color contrast ratios for accessible web design
Image Compressor
Compress images up to 90% without visible quality loss
Understanding Color Models for Design and Development
Every digital color can be expressed in multiple models, each suited to a different workflow. HEX is a shorthand for RGB in base-16 (e.g., #3b82f6) — the standard for web CSS and design tools. RGB (Red, Green, Blue) defines colors by mixing light and is how screens render every pixel. HSL (Hue, Saturation, Lightness) is the most intuitive model for humans: adjust the hue to shift color, saturation to make it vivid or muted, and lightness to brighten or darken. CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard for print — give your printer CMYK values, not RGB, to ensure accurate color reproduction on physical media.
Choosing a Color Palette for Your Design
Complementary palettes use colors directly opposite on the wheel (hue ±180°) — maximum contrast, ideal for call-to-action buttons and highlights. Analogous palettes use neighboring hues (±30°–60°) — harmonious and cohesive, great for backgrounds and gradient systems. Triadic palettes balance three equally-spaced hues (120° apart) — vibrant and versatile for logos and illustrations. Split-complementary gives contrast with less tension than pure complementary — useful for designs that need visual interest without aggression. Monochromatic palettes use one hue at varying lightness — elegant and easy to apply consistently across a UI.
HEX vs RGB: Which Should You Use in CSS?
Both are equally valid in CSS. HEX (#3b82f6) is the most compact notation and widely used in design tools and code. RGB (rgb(59, 130, 246)) is easier to read at a glance when scanning CSS. HSL (hsl(217, 91%, 60%)) is best when you need to create variations programmatically — it is far easier to generate a lighter or darker shade by adjusting the L value than by recalculating HEX or RGB. Modern CSS supports all three natively, so choose whichever fits your team's convention.
Accessibility: Color Contrast for Readable UI
WCAG 2.1 accessibility guidelines require a minimum contrast ratio of 4.5:1 between text and background for normal text, and 3:1 for large text. Dark text on a light background or light text on a dark background achieves this most reliably. When building a UI, check your primary text color against your background using a contrast checker (available in browser developer tools and design tools like Figma). Avoid relying on color alone to convey information — color-blind users affect roughly 8% of men and 0.5% of women globally.