Pick, convert, and generate color palettes with support for HEX, RGB, HSL, and CMYK
Color representation involves multiple spaces: RGB (additive, screen displays), HSL (hue-saturation-lightness, intuitive adjustments), HEX (compact RGB encoding), CMYK (subtractive, print). This picker enables conversion between spaces while showing visual representation. The math: RGB to HSL requires finding min/max channels for lightness and saturation calculations; complementary colors rotate 180° on hue wheel; tints add white (increase lightness), shades add black (decrease). Particularly useful when designers provide HEX values but CSS requires rgba() with alpha transparency, or when generating accessible color combinations meeting WCAG contrast ratios. All calculations execute locally in JavaScript—no color data transmits to servers, though that's less privacy-sensitive than other tool categories.
Learn more about this tool and related topics in our blog.
This tool uses client-side WebAssembly to ensure your data never touches a server. Secure, fast, and 100% private by design.
Use the color wheel or sliders to select a color.
Alternatively, type a HEX or RGB code into the input box.
View the color in different formats instantly.
Scroll down to see generated palettes and shades.
Click on any color code to copy it to your clipboard.
Convert web colors for CSS
#3498db (Blue)
RGB: rgb(52, 152, 219) - Use in CSS!
Generate matching color schemes
Pick: #FF6B6B (Coral Red)
Complementary: #6BFFFF (Turquoise) - Perfect contrast!
Get harmonious shades
Base: #2ECC71 (Green)
Palette: Light→Dark shades + Analogous colors
Match exact brand colors across formats.
Convert screen colors for printing.
Create darker/lighter versions of brand color.
Ensure text is readable on backgrounds.
**HEX** (#RRGGBB): - 6 characters: #FF5733 - Each pair = Red, Green, Blue in hexadecimal (00-FF) - Most common in web/CSS - Shorthand: #F73 = #FF7733 **RGB** (Red, Green, Blue): - rgb(255, 87, 51) - Each value 0-255 - Light-based (additive color) - Used for screens **HSL** (Hue, Saturation, Lightness): - hsl(9, 100%, 60%) - Hue: 0-360° color wheel - Saturation: 0-100% (gray to vivid) - Lightness: 0-100% (black to white) - Intuitive for adjustments! **CMYK** (Cyan, Magenta, Yellow, Key/Black): - cmyk(0%, 66%, 80%, 0%) - Ink-based (subtractive color) - Used for printing - can't match all RGB colors! **HSV/HSB** (Hue, Saturation, Value/Brightness): - Similar to HSL but different lightness model - Used in design software
**HEX ↔ RGB** (Easy!): - HEX is just RGB in hexadecimal - #FF5733 = FF(255) 57(87) 33(51) - FF in hex = 255 in decimal **RGB → HSL** (Complex math!): 1. Normalize RGB to 0-1 range 2. Find min/max values 3. Calculate Hue from color ratios 4. Calculate Saturation 5. Calculate Lightness **RGB → CMYK** (Subtractive conversion): - RGB adds light (screen) - CMYK subtracts light (ink) - Formula accounts for different color models - Some colors can't convert perfectly! **Why conversions matter**: - CSS accepts HEX, RGB, HSL - Design tools use different formats - Printers need CMYK - One color, many representations
**Complementary Colors**: - Opposite on color wheel (180° apart) - Red ↔ Cyan, Blue ↔ Orange - High contrast, vibrant combinations - Use for CTAs and emphasis **Analogous Colors**: - Next to each other on wheel - Green, Yellow-Green, Yellow - Harmonious, pleasing to eye - Use for gradients and themes **Monochromatic**: - Different shades of same hue - Vary lightness/saturation only - Professional, cohesive look - Easy to get right! **Triadic**: - Three colors equally spaced (120°) - Red, Yellow, Blue - Vibrant but balanced - Advanced technique **60-30-10 Rule**: - 60% dominant color - 30% secondary color - 10% accent color - Professional design formula
Power up your workflow with related utilities.
Shrink image file sizes by up to 90% without losing visible quality. Optimize JPG, PNG, and WebP for websites and fast email sharing.
Change the dimensions of any picture. Perfect for fitting that weird social media aspect ratio.
Build custom, track-free QR codes for URLs, WiFi, and contact info. Download in high-res PNG or infinitely scalable SVG formats.
Learn more about this tool and related topics in our blog.
