Beautiful palettes, ready to use.

Color library

Ready-made palettes and shade scales. Pick a style, then tap a color to copy it.

How to use this tool (step by step)

Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.

1. Choose a style

   • Press a button such as Pastel, Vibrant, Warm, Cool, Earth, Retro or Dark.
   • Press All to see everything.
   • Or type a word in the search box, for example ocean.

   Why we do this: Palettes are grouped by mood, so you can start from the feeling you want, not from a code.

2. Look at the palette

   • Each palette is a row of colors that were chosen to work together.
   • Hover over (or tap) a color to see its code.
   • Compare a few palettes before you decide.

   Why we do this: Colors that look good alone can clash together. These sets are already balanced.

3. Copy colors

   • Tap one color to copy it.
   • Or press Copy all to copy the whole palette.
   • Press Copy CSS if you want ready-made website variables.

   Why we do this: Copying saves you from typing codes by hand, which avoids mistakes.

4. Use a shade scale

   • Scroll down to Shade scales.
   • Choose a color family and pick lighter shades for backgrounds and darker shades for text or buttons.
   • Tap to copy any shade.

   Why we do this: Using several shades of the same color is the easiest way to make a design look professional and consistent.

Questions people ask

Quick answers.