HEX / RGB / HSLPalette GeneratorEyeDropper API
How It Works
1
Pick a Color
Click the spectrum canvas or use the hue slider. Or pick from your screen with EyeDropper.
2
Convert Formats
See HEX, RGB, and HSL values update in real time. Edit any value to change the color.
3
Generate Palettes
Create Complementary, Analogous, Triadic, or Split-Complementary palettes. Click to copy.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX is a 6-character code (#FF5733) commonly used in web design. RGB defines colors by Red, Green, and Blue intensity (0-255). HSL uses Hue (0-360), Saturation (0-100%), and Lightness (0-100%), which is more intuitive for adjusting colors.
What are complementary colors?
Complementary colors sit opposite each other on the color wheel (180 degrees apart). They create high contrast and visual tension. Examples include red/cyan, blue/orange, and yellow/purple.
How do I create a harmonious color palette?
Use the palette generator to create Complementary (2 colors), Analogous (3 adjacent colors), Triadic (3 evenly spaced colors), or Split-Complementary (3 colors with softer contrast than complementary) palettes.
Does the EyeDropper work in all browsers?
The EyeDropper API is supported in Chrome, Edge, and Opera. Firefox and Safari do not yet support it. The button only appears when your browser supports the feature.
What is color theory?
Color theory is a framework for combining and using colors effectively. It includes the color wheel, color harmony rules (complementary, analogous, triadic), and concepts like warm/cool colors, contrast, and saturation to create visually appealing designs.
Explore More
Love this tool? Explore 999+ more
Free online tools for images, PDFs, text, code, and more. All running in your browser.
Explore All Tools