Curated color archive

ColorArchive

A calm, searchable library of color. Browse a large curated spectrum, sort it with precision, and copy production-ready hex values in one click.

Browse archive Pick colors for me Browse collections →

Also on iPhone and iPad — free on the App Store

5,446 colors · 5,446 Showing · All families · Showing full archive

5,446colors

261collections

44free tools

Tool

Contrast Checker

Test any two colors against WCAG AA and AAA standards. Get instant readability scores and find accessible pairings.

Try contrast checker

Tool

Shareable Palettes

Build custom palettes and share them via URL. Collaborate on color choices with a direct link — no account needed.

Create a palette

Tool

Color Blindness Simulator

Preview how your palette looks under deuteranopia, protanopia, tritanopia, and achromatopsia. Paste up to 8 hex codes for a full simulation table.

Try the simulator

Color of the day

Token pipeline

Not a color picker — a design token library

Every color exports as production-ready code. Drop tokens straight into your CSS, Tailwind config, Figma, or Style Dictionary workflow — no reformatting.

CSS Variables

:root {
  --palette-1: #D09962; /* Coral Tone Clear */
  --palette-2: #13367C; /* Cobalt Shadow Vivid */
  --palette-3: #BFC5C2; /* Sage Gray Bloom */
  --palette-4: #DEDBCF; /* Amber Pearl Muted */
}

Tailwind Config

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
    "coral-tone-clear": "#D09962",
    "cobalt-shadow-vivid": "#13367C",
    "sage-gray-bloom": "#BFC5C2",
    "amber-pearl-muted": "#DEDBCF",
      },
    },
  },
};

Figma Tokens JSON

{
  "palette": {
    "coral-tone-clear": {
      "$type": "color",
      "$value": "#D09962",
      "$description": "Coral Tone Clear · hsl(30, 54%, 60%)"
    },
    "cobalt-shadow-vivid": {
      "$type": "color",
      "$value": "#13367C",
      "$description": "Cobalt Shadow Vivid · hsl(220, 74%, 28%)"
    },
    "sage-gray-bloom": {
      "$type": "color",
      "$value": "#BFC5C2",
      "$description": "Sage Gray Bloom · hsl(150, 5%, 76%)"
    },
    "amber-pearl-muted": {
      "$type": "color",
      "$value": "#DEDBCF",
      "$description": "Amber Pearl Muted · hsl(50, 18%, 84%)"
    }
  }
}

CSSTailwindFigma JSONStyle DictionarySCSSACOProcreate

Guides

High-intent color guides tied to real archive routes

Start from the question you actually have: brand palette, dark mode, free downloads, Figma tokens, Tailwind tokens, or website color direction.

Brand Guide

brand color palette ideas

Brand Color Palette Ideas That Hold Up Beyond the Launch

A practical guide to building a brand color palette that survives product growth, campaign work, and interface expansion without turning into disconnected swatches.

Dark Mode Guide

dark mode color palette

Dark Mode Color Palette Ideas for Real Product Interfaces

How to build a dark mode color palette that keeps contrast, separation, and enough chroma to avoid the usual generic neon-on-black look.

Free Download Guide

free color palette download

Free Color Palette Download That Actually Proves the Product

What makes a free color palette download useful, what users expect after signup, and why the free layer should feel like a smaller version of the paid product rather than a random teaser.

Token Guide

figma color tokens

Figma Color Tokens and the Fastest Route to a Shared Color System

A guide to keeping Figma, CSS variables, Tailwind tokens, and JSON exports aligned so color decisions survive handoff instead of drifting by file type.

Browse all guides Read notes

5,446 curated colors·Free, no account needed·Figma plugin available

Color tools