Color Palette & Hex Picker
Pick a color to instantly see its HEX, RGB and HSL codes, along with an auto-generated palette of complementary shades and tints — click any swatch to copy its code.
How to Use This Tool
Pick a color
Use the color picker, or type a HEX code directly.
View the HEX, RGB and HSL values
All three formats shown at once, ready to copy.
Browse the generated palette
Shades, tints, and complementary colors based on your pick.
Click any code to copy it
Paste directly into your CSS, design tool, or code.
About the Color Palette & Hex Picker
Colors on the web and in design software are represented in a few different formats — HEX (like #FA057B, common in CSS and design tools), RGB (red-green-blue values, like rgb(250, 5, 123)), and HSL (hue-saturation-lightness, often more intuitive for adjusting a color's brightness or intensity) — and it's common to need a color translated between these formats.
This tool takes any color you pick or type and instantly shows it in all three formats, saving the step of manually converting between them or looking up a conversion tool separately.
It also generates a small palette around your chosen color — lighter tints, darker shades, and a complementary color from the opposite side of the color wheel — which is useful for quickly exploring a cohesive color scheme built around a single starting color, like a brand color.
Frequently Asked Questions
What's the difference between HEX, RGB and HSL?
HEX is a six-digit code representing red, green and blue values in hexadecimal (base-16) format, most common in CSS and design software. RGB expresses the same red-green-blue values in plain decimal numbers from 0-255. HSL represents color as hue (the color itself), saturation (intensity), and lightness (brightness), which many people find more intuitive for adjusting a color.
What are "tints" and "shades" in the generated palette?
A tint is your chosen color mixed with white, making it lighter. A shade is your chosen color mixed with black, making it darker. Together they give you a range of related colors at different brightness levels, useful for creating visual hierarchy while staying within one color family.
What is a complementary color, and why is it included?
A complementary color sits directly opposite your chosen color on the traditional color wheel, creating strong visual contrast when paired together. It's included as a quick starting point for accent colors that will stand out against your primary color choice.
Can I type a color name instead of a HEX code?
This tool is built around HEX code and color-picker input specifically. Standard CSS color names (like "red" or "tomato") aren't directly supported as text input, though you could look up the HEX equivalent of a named color separately and enter that.
Will the copied color code work directly in my CSS file?
Yes — HEX, RGB and HSL are all valid CSS color value formats, so any of the codes shown can be pasted directly into a CSS property like color, background-color, or border-color without modification.
Is my color choice saved or uploaded anywhere?
No — all color conversion and palette generation happens locally in your browser using JavaScript. Nothing is uploaded, logged, or saved.