Curated Color Library
Hand-picked color collections for interfaces and brands. Click any swatch to copy its hex code.
How to use the color library
- Choose a collection: the UI and brand set, Flat UI, Pastel, Earth & Nature, the Tailwind-spectrum sample, or Web-safe 216.
- Browse its swatches and compare colors side by side.
- Click a swatch to copy its hex code.
- Paste the hex into your CSS or design file, or into another tool here to adapt it.
What each collection is for
- UI and brand set: a small working system with roles already assigned: a primary indigo (
#6366f1), a secondary violet, a rose accent, dark and light neutrals, and success, warning and error colors. Use it to see how a complete interface palette is structured. - Flat UI: saturated mid-tones such as turquoise
#1abc9cand blue#3498db, from the flat-design era. Good for illustrations, icons, charts and playful products. - Pastel: very light, soft colors such as
#fed7aaand#bae6fd. Made for backgrounds, cards and tags behind dark text. - Earth & Nature: clay, sand, moss, forest, slate and umber. Suits food, outdoor, sustainability and editorial brands.
- Tailwind-spectrum sample: the 500 step of a dozen Tailwind colors, from slate to rose, for quick picks in Tailwind projects. The full 22-family palette is on the Tailwind colors page.
- Web-safe 216: the 1990s palette built from six levels per channel, kept for reference and retro work. The web-safe colors page explains its history.
Using a collection as a starting point
A curated palette solves the hard first step, choosing colors that already sit well together, but it knows nothing about your content, audience or accessibility needs. Take one or two colors as anchors and build the system from them: generate lighter and darker steps for each anchor with the tint and shade generator, and add neutrals if the collection has none.
Check text pairs early. Several Flat UI colors are too bright for white text: blue #3498db with white measures 3.15:1 and turquoise #1abc9c 2.4:1, both under the 4.5:1 AA minimum for body text. Use them as fills behind dark text, or darken them before putting white on top.
Adapting a palette to your brand
Shift a borrowed palette as a set rather than color by color. Convert each color with the HEX to OKLCH converter, then rotate every hue by the same number of degrees so your brand hue lands where the palette's lead color was. Keeping each color's L and C values preserves the lightness relationships, so contrast between the colors stays roughly where it was. For a softer or bolder feel, scale chroma down or up across every color instead of editing one swatch. If only the lead color changes, the rest of the set can look borrowed.
Frequently asked questions
What makes a good color palette for a website?
A clear primary color, a restrained accent, a neutral scale for text and surfaces, and distinct semantic colors for errors, warnings and success. The UI and brand set in the library shows that structure with every role filled.
What are pastel colors best used for?
Backgrounds, cards, tags and highlights behind dark text. Pastels are too light to use as text or icon colors on white.
What is the Flat UI color palette?
A set of saturated, mid-light colors associated with the flat design trend of the early 2010s, with names such as Turquoise, Peter River and Alizarin. It works well for illustrations, charts and icons.
How do I change a palette to match my brand color?
Convert the palette to OKLCH and rotate every hue by the same amount so the lead color matches your brand hue. Keeping lightness and chroma unchanged preserves the palette's balance.
Are web-safe colors still necessary?
No. They were designed for 256-color displays in the 1990s, and modern screens show millions of colors. The collection is kept for reference and retro styling.