Color Picker and Palette Generator
Pick a color, get its hex, RGB and HSL values, and build a matching palette.
Click any swatch to copy its hex code.
How to use Color Palette Generator
- 01Pick a base color or paste a hex code.
- 02Choose a harmony — complementary, analogous, triadic or monochrome — to generate matching colors.
- 03Copy any swatch as hex, RGB or HSL, and check the contrast readout before using it for text.
About Color Palette Generator
Hex, RGB and HSL describe the same color in different ways. HSL is the most useful for building a palette by hand, because changing lightness while holding hue and saturation gives you a coherent set of tints and shades.
Contrast decides whether text is readable. Body text should reach a ratio of at least 4.5 to 1 against its background, and large headings at least 3 to 1 — the readout here tells you which combinations pass.
Frequently asked questions
- What is a good contrast ratio?
- 4.5 to 1 for normal text and 3 to 1 for large text meet the widely used accessibility guideline.
- What is a complementary color?
- The color directly opposite on the color wheel, which gives the strongest contrast in hue.
- Can I copy colors as CSS?
- Yes, every swatch can be copied as a hex, rgb() or hsl() value.
Related tools and tools
QR Code Generator
Turn a link, message or contact detail into a QR code you can download and print.
Text Case Converter
Switch text between uppercase, lowercase, title, sentence, camel, snake and kebab case.
Random Picker
Paste a list to pick a random winner, shuffle it, or draw random numbers.
Password Generator
Generate strong random passwords with the length and character types you choose.