🎨 Color Picker & Converter
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats. Perfect for designers, developers, and anyone working with colors.
📋 All Color Formats
📖 Color Formats Explained
HEX
Hexadecimal format used in web design. Format: #RRGGBB
RGB
Red, Green, Blue values from 0-255. Used in screens and digital displays.
HSL
Hue, Saturation, Lightness. More intuitive for adjusting colors.
CMYK
Cyan, Magenta, Yellow, Black. Used in printing and physical media.
📋 How to Use the Color Picker
- Pick a colour with the colour selector, or type a HEX code such as #FF5733.
- Read the matching RGB, HSL and CMYK values, which update together.
- Adjust any channel to fine tune the colour.
- Use Copy Color Code, Random Color, or Generate Palette to find matching colours.
🎯 When to Use It
- Converting a brand colour from HEX to RGB for CSS or HSL for design tools.
- Finding CMYK values for print work.
- Building a quick colour palette for a page or design.
💡 Tips & Common Pitfalls
- CMYK values here are a mathematical conversion. Printed colours can look different, so check a proof for important work.
- HSL is the easiest format for making a colour lighter or darker: change only the lightness.
- Use the HEX code in CSS, and keep enough contrast between text and background colours for readability.
❓ Frequently Asked Questions
How do I use the color picker?
Click on the large color display to open the native color picker, or manually enter color codes in HEX, RGB, HSL, or CMYK format.
What's the difference between RGB and CMYK?
RGB is for digital screens (additive color), while CMYK is for printing (subtractive color). RGB uses light, CMYK uses ink.
Can I generate color palettes?
Yes! Click "Generate Palette" to create complementary, analogous, and contrasting colors based on your selected color.
How do I copy color codes?
Click the "Copy Color Code" button to copy the current color in your selected format, or click any palette color to copy it.