Color Palette Tools
Free tools for every step of choosing colors: build a palette from color harmony or a photo, expand a color into shades and tints, see it on a real design, then check contrast and convert codes. No sign-up, and everything runs in your browser.
Create a palette
Palette Generator
Pick a base color and explore harmonies like complementary and triadic.
- Color harmonies
- HEX · RGB · HSL
- Export
Palette from Image
Upload a photo and get its main colors as a palette.
- Photos & screenshots
- Stays on your device
Shades & Tints
Turn one color into a full scale of shades, tints and tones.
- 950 → 50 scale
- Tones
- CSS · Tailwind
Color Wheel Explorer
Drag a color around the wheel and see its color harmonies live.
- 6 harmony rules
- Draggable wheel
- Send to generator
Color Picker
Pick a color from the wheel or your screen and copy its HEX, RGB and HSL codes.
- Color wheel
- Screen eyedropper
- HEX · RGB · HSL
Preview a palette
Check & convert
Which tool should I use?
It depends on what you're starting with.
You have one color in mind
Start with the Palette Generator. Pick your color, choose a harmony such as complementary, analogous or triadic, and it builds the rest of the palette around it.
Open Palette GeneratorYou have a photo you love
Use Palette from Image. Upload a photo, screenshot or mood board and it picks out the main colors. The image is processed in your browser and never uploaded.
Open Palette from ImageYou have a palette and want to see it in use
Open the Palette Visualizer. It paints your colors onto websites, app screens, rooms and outfits, so you can judge them in context and export CSS or Tailwind.
Open Palette VisualizerYou need text people can read
Use the Contrast Checker. Enter a text and a background color to see the contrast ratio and every WCAG AA and AAA result, and get the nearest color that passes if they fail.
Open Contrast CheckerYou need lighter and darker versions of a color
Use Shades & Tints. Pick one color and get its full scale from 950 to 50, plus muted tones, for hover states, backgrounds, borders and text. Export it as CSS or Tailwind.
Open Shades & TintsYou have a color code in the wrong format
Use the Color Converter. Paste a HEX, RGB, HSL, HSV, CMYK or OKLCH value and get it in every other format, ready to copy into your CSS or design tool.
Open Color ConverterYou want to know which colors go with yours
Use the Color Wheel Explorer. Drag your color around the wheel and see its complementary, analogous, triadic and other harmonies, then open the colors in the generator.
Open Color Wheel ExplorerYou need the code for a color
Use the Color Picker. Choose a color on the wheel, pick one from anywhere on your screen or type a code, and copy it as HEX, RGB or HSL.
Open Color PickerThey work together: make or extract a palette, send it to the visualizer to see it in use, and check your text and background pairs in the Contrast Checker before you build.