Color Picker & Converter — Free Online Color Tool
Pick any color visually, convert between HEX, RGB, HSL, and CMYK instantly, generate palettes, shades, and copy ready-to-use CSS. Runs entirely in your browser.
How to Use the Color Picker & Converter
- Pick a color using the native color picker or type a HEX value directly.
- Convert formats — type in any format (HEX, RGB, HSL, CMYK) and click "Update from Input" to auto-convert to all others.
- Pick from image — upload a photo and click on it to extract any color with pixel precision.
- Generate palettes — choose complementary, analogous, triadic, split-complementary, or tetradic schemes.
- Explore shades — view 10 tints (lighter) to shades (darker) of your chosen color.
- Copy CSS — grab ready-to-use CSS variables, rgb(), hsl(), or hex values with one click.
- Check history — your last 20 picked colors are saved automatically for quick access.
Why Use This Color Picker & Converter
Designers and developers constantly need to convert between color formats, generate harmonious palettes, and ensure accessibility. This tool eliminates the need for multiple apps by combining everything into one interface. Whether you're matching a brand color from an image, generating a full palette, or ensuring WCAG contrast compliance, it all happens instantly in your browser.
The image color picker lets you extract exact colors from screenshots, logos, or photos. The palette generator uses color theory to create visually harmonious combinations. The shade generator gives you 10-step gradients for UI depth and hierarchy.
Frequently Asked Questions
HEX (#FF5733) uses hexadecimal digits — compact and widely used in CSS. RGB (255, 87, 51) defines red, green, blue channels (0-255) — useful for programmatic manipulation. HSL (11°, 100%, 60%) uses hue, saturation, lightness — more intuitive for humans. CMYK (0%, 82%, 100%, 0%) is subtractive — used in print design.
The generator uses established color theory: Complementary picks the opposite on the color wheel. Analogous uses adjacent hues. Triadic divides the wheel into three equal parts. Split-complementary uses two hues adjacent to the complement. Tetradic creates a rectangle on the color wheel for four contrasting colors.
Contrast ratio follows the WCAG 2.0 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter relative luminance and L2 is the darker. A ratio of 4.5:1 or higher passes WCAG AA for normal text. 7:1 or higher passes AAA. The tool shows contrast against both white and black backgrounds so you know which text color to pair.
Your color history is stored locally in your browser's localStorage — never sent to any server. The last 20 picked colors persist across sessions until you clear your browser data. The image you upload is processed entirely in-memory via Canvas and is never uploaded.
Use Cases
Screen Color Sampling
Sample colors from any image or screenshot for web design by uploading photos and picking exact pixel colors with magnifier precision.
CSS Hex Value Extraction
Get exact HEX, RGB, and HSL values from any color for use in CSS, with ready-to-copy CSS variable and function output formats.
Branding Color Discovery
Find complementary, analogous, and triadic colors for branding projects using color theory to create visually harmonious brand palettes.
Multi-Format Conversion
Convert between HEX, RGB, HSL, and CMYK formats instantly to use colors across different design tools and development environments.
Brand Guideline Matching
Match brand guidelines precisely by picking exact colors from logos, style guides, or reference images to ensure perfect brand consistency.