# Palette Vault

> A catalogue of four-color palettes with free browser-based color tools. Every
> palette is built in OKLCH, a perceptually uniform color space, and is free to
> use for any purpose without attribution.

Every palette is built in OKLCH, so equal steps in lightness look equal to the
eye. The four hues follow a classical relationship (monochrome, analogous,
complementary, split complementary, triad or tetrad), lightness runs as a
deliberate ladder from light to dark, and chroma tapers at both extremes where a
screen can hold less of it. Tags are derived from the measured result rather
than from any stated intent.

A palette's URL contains its colors: `/palette/<24 hex characters>/` is the four
HEX codes in a row, so the address is a complete description of the palette and
needs no lookup.

## Browse

- [Home - newest palettes](https://palettevault.github.io/)
- [All palettes - infinite browse](https://palettevault.github.io/palettes/)
- [Popular - ranked by likes](https://palettevault.github.io/popular/)
- [Random](https://palettevault.github.io/random/)
- [All colors - names, hex codes, shades](https://palettevault.github.io/colors/)
- [All tools](https://palettevault.github.io/tools/)
- [Blog](https://palettevault.github.io/blog/)

## Colors

Each page carries hex, RGB, HSL and OKLCH values, an eleven-step shade scale
built in OKLCH, contrast figures against white and black, and matching palettes.

- [Pastel color](https://palettevault.github.io/colors/pastel/): the soft, low-chroma family
- [Red color](https://palettevault.github.io/colors/red/)
- [Crimson color](https://palettevault.github.io/colors/crimson/)
- [Maroon color](https://palettevault.github.io/colors/maroon/)
- [Burgundy color](https://palettevault.github.io/colors/burgundy/)
- [Salmon color](https://palettevault.github.io/colors/salmon/)
- [Rose color](https://palettevault.github.io/colors/rose/)
- [Coral color](https://palettevault.github.io/colors/coral/)
- [Orange color](https://palettevault.github.io/colors/orange/)
- [Peach color](https://palettevault.github.io/colors/peach/)
- [Amber color](https://palettevault.github.io/colors/amber/)
- [Rust color](https://palettevault.github.io/colors/rust/)
- [Terracotta color](https://palettevault.github.io/colors/terracotta/)
- [Yellow color](https://palettevault.github.io/colors/yellow/)
- [Gold color](https://palettevault.github.io/colors/gold/): why a flat fill never reads as metal
- [Mustard color](https://palettevault.github.io/colors/mustard/)
- [Ivory color](https://palettevault.github.io/colors/ivory/)
- [Cream color](https://palettevault.github.io/colors/cream/)
- [Beige color](https://palettevault.github.io/colors/beige/)
- [Green color](https://palettevault.github.io/colors/green/)
- [Lime green color](https://palettevault.github.io/colors/lime-green/)
- [Mint color](https://palettevault.github.io/colors/mint/)
- [Olive color](https://palettevault.github.io/colors/olive/)
- [Sage color](https://palettevault.github.io/colors/sage/)
- [Forest green color](https://palettevault.github.io/colors/forest-green/)
- [Emerald color](https://palettevault.github.io/colors/emerald/)
- [Teal color](https://palettevault.github.io/colors/teal/)
- [Turquoise color](https://palettevault.github.io/colors/turquoise/)
- [Aqua color](https://palettevault.github.io/colors/aqua/)
- [Seafoam color](https://palettevault.github.io/colors/seafoam/)
- [Blue color](https://palettevault.github.io/colors/blue/)
- [Navy color](https://palettevault.github.io/colors/navy/)
- [Sky blue color](https://palettevault.github.io/colors/sky-blue/)
- [Royal blue color](https://palettevault.github.io/colors/royal-blue/)
- [Cobalt color](https://palettevault.github.io/colors/cobalt/)
- [Periwinkle color](https://palettevault.github.io/colors/periwinkle/)
- [Purple color](https://palettevault.github.io/colors/purple/)
- [Lavender color](https://palettevault.github.io/colors/lavender/)
- [Violet color](https://palettevault.github.io/colors/violet/)
- [Lilac color](https://palettevault.github.io/colors/lilac/)
- [Plum color](https://palettevault.github.io/colors/plum/)
- [Indigo color](https://palettevault.github.io/colors/indigo/)
- [Pink color](https://palettevault.github.io/colors/pink/)
- [Hot pink color](https://palettevault.github.io/colors/hot-pink/)
- [Blush color](https://palettevault.github.io/colors/blush/)
- [Magenta color](https://palettevault.github.io/colors/magenta/)
- [Fuchsia color](https://palettevault.github.io/colors/fuchsia/)
- [Black color](https://palettevault.github.io/colors/black/)
- [White color](https://palettevault.github.io/colors/white/)
- [Gray color](https://palettevault.github.io/colors/gray/)
- [Charcoal color](https://palettevault.github.io/colors/charcoal/)
- [Silver color](https://palettevault.github.io/colors/silver/)
- [Taupe color](https://palettevault.github.io/colors/taupe/)
- [Espresso color](https://palettevault.github.io/colors/espresso/)
- [Transparent blue color](https://palettevault.github.io/colors/transparent-blue/): alpha and opacity in CSS, and why transparency has no hex code
- [Gunmetal color](https://palettevault.github.io/colors/gunmetal/): the dark-mode background
- [Rose pink color](https://palettevault.github.io/colors/rose-pink/)
- [Brown color](https://palettevault.github.io/colors/brown/)
- [Chocolate color](https://palettevault.github.io/colors/chocolate/)
- [Tan color](https://palettevault.github.io/colors/tan/)
- [Sand color](https://palettevault.github.io/colors/sand/)
- [Steel blue color](https://palettevault.github.io/colors/steel-blue/)
- [Dusty blue color](https://palettevault.github.io/colors/dusty-blue/)
- [Denim color](https://palettevault.github.io/colors/denim/)
- [Prussian blue color](https://palettevault.github.io/colors/prussian-blue/)
- [Midnight blue color](https://palettevault.github.io/colors/midnight-blue/)
- [Powder blue color](https://palettevault.github.io/colors/powder-blue/)
- [Cornflower color](https://palettevault.github.io/colors/cornflower/)
- [Cerulean color](https://palettevault.github.io/colors/cerulean/)
- [Petrol color](https://palettevault.github.io/colors/petrol/)
- [Slate blue color](https://palettevault.github.io/colors/slate-blue/)
- [Eggplant color](https://palettevault.github.io/colors/eggplant/)
- [Mulberry color](https://palettevault.github.io/colors/mulberry/)
- [Damson color](https://palettevault.github.io/colors/damson/)
- [Mauve color](https://palettevault.github.io/colors/mauve/)
- [Wisteria color](https://palettevault.github.io/colors/wisteria/)
- [Wine color](https://palettevault.github.io/colors/wine/)
- [Raspberry color](https://palettevault.github.io/colors/raspberry/)
- [Dusty rose color](https://palettevault.github.io/colors/dusty-rose/)
- [Mocha color](https://palettevault.github.io/colors/mocha/)
- [Clay color](https://palettevault.github.io/colors/clay/)
- [Umber color](https://palettevault.github.io/colors/umber/)
- [Khaki color](https://palettevault.github.io/colors/khaki/)
- [Bronze color](https://palettevault.github.io/colors/bronze/)
- [Camel color](https://palettevault.github.io/colors/camel/)
- [Coffee color](https://palettevault.github.io/colors/coffee/)
- [Hunter green color](https://palettevault.github.io/colors/hunter-green/)
- [Pine color](https://palettevault.github.io/colors/pine/)
- [Moss color](https://palettevault.github.io/colors/moss/)
- [Juniper color](https://palettevault.github.io/colors/juniper/)
- [Slate color](https://palettevault.github.io/colors/slate/)
- [Onyx color](https://palettevault.github.io/colors/onyx/)
- [Pewter color](https://palettevault.github.io/colors/pewter/)

## Styles

Aesthetics rather than shades. These pages describe a look and the colors
that belong to it, so they carry no single hex value or shade scale.

- [Y2K](https://palettevault.github.io/colors/y2k/): the 1999-2003 aesthetic, and why it fails contrast checks
- [Tuscan](https://palettevault.github.io/colors/tuscan/)

## Tools

All run entirely in the browser. No image or color is ever uploaded.

- [Palette generator](https://palettevault.github.io/tools/generate/): Build harmonious four-color palettes from any base color. Lock the shades you like and reshuffle the rest.
- [Extract palette from image](https://palettevault.github.io/tools/extract/): Drop in a photo and pull out the colors that actually define it, clustered rather than sampled at random.
- [Color collage generator](https://palettevault.github.io/tools/collage/): Combine a photo with the colors extracted from it into one shareable PNG, with the swatches placed above, below, left or right.
- [Contrast checker](https://palettevault.github.io/tools/contrast/): Check any pair of colors against WCAG 2.1 AA and AAA thresholds for normal text, large text and UI components.
- [Color picker](https://palettevault.github.io/tools/picker/): Pick a color and read it back as HEX, RGB, HSL and OKLCH, with a full ramp of tints and shades.
- [OKLCH color picker and converter](https://palettevault.github.io/tools/oklch/): Pick a color by lightness, chroma and hue, see where it leaves the sRGB gamut, and copy it as OKLCH, HEX, RGB, HSL, Display P3, Lab or LCH.
- [Tailwind colors](https://palettevault.github.io/tools/tailwind/): The full default Tailwind CSS palette with every shade, ready to copy as a class name or a HEX value.
- [List of colors](https://palettevault.github.io/tools/colors/): Every named CSS color, sortable by hue and lightness, with HEX, RGB and HSL for each one.
- [Browse gradients](https://palettevault.github.io/tools/gradients/): A library of two-stop CSS gradients generated in OKLCH, so the midpoints stay clean instead of going grey.
- [Gradient maker](https://palettevault.github.io/tools/gradient-maker/): Compose a gradient from your own stops, choose the interpolation space and copy the CSS.

## Categories

Style and color-family tags. Membership is measured from the palette itself,
not declared, so a palette appears under Blue because its colors measure blue.

- [Vintage palettes](https://palettevault.github.io/tag/vintage/)
- [Retro palettes](https://palettevault.github.io/tag/retro/)
- [Neon palettes](https://palettevault.github.io/tag/neon/)
- [Gold palettes](https://palettevault.github.io/tag/gold/)
- [Light palettes](https://palettevault.github.io/tag/light/)
- [Dark palettes](https://palettevault.github.io/tag/dark/)
- [Warm palettes](https://palettevault.github.io/tag/warm/)
- [Cold palettes](https://palettevault.github.io/tag/cold/)
- [Summer palettes](https://palettevault.github.io/tag/summer/)
- [Fall palettes](https://palettevault.github.io/tag/fall/)
- [Winter palettes](https://palettevault.github.io/tag/winter/)
- [Spring palettes](https://palettevault.github.io/tag/spring/)
- [Happy palettes](https://palettevault.github.io/tag/happy/)
- [Nature palettes](https://palettevault.github.io/tag/nature/)
- [Earth palettes](https://palettevault.github.io/tag/earth/)
- [Night palettes](https://palettevault.github.io/tag/night/)
- [Space palettes](https://palettevault.github.io/tag/space/)
- [Rainbow palettes](https://palettevault.github.io/tag/rainbow/)
- [Gradient palettes](https://palettevault.github.io/tag/gradient/)
- [Sunset palettes](https://palettevault.github.io/tag/sunset/)
- [Sky palettes](https://palettevault.github.io/tag/sky/)
- [Sea palettes](https://palettevault.github.io/tag/sea/)
- [Kids palettes](https://palettevault.github.io/tag/kids/)
- [Skin palettes](https://palettevault.github.io/tag/skin/)
- [Food palettes](https://palettevault.github.io/tag/food/)
- [Cream palettes](https://palettevault.github.io/tag/cream/)
- [Coffee palettes](https://palettevault.github.io/tag/coffee/)
- [Wedding palettes](https://palettevault.github.io/tag/wedding/)
- [Christmas palettes](https://palettevault.github.io/tag/christmas/)
- [Halloween palettes](https://palettevault.github.io/tag/halloween/)
- [Vibrant palettes](https://palettevault.github.io/tag/vibrant/)
- [Red palettes](https://palettevault.github.io/tag/red/)
- [Orange palettes](https://palettevault.github.io/tag/orange/)
- [Yellow palettes](https://palettevault.github.io/tag/yellow/)
- [Green palettes](https://palettevault.github.io/tag/green/)
- [Turquoise palettes](https://palettevault.github.io/tag/turquoise/)
- [Blue palettes](https://palettevault.github.io/tag/blue/)
- [Pink palettes](https://palettevault.github.io/tag/pink/)
- [White palettes](https://palettevault.github.io/tag/white/)
- [Gray palettes](https://palettevault.github.io/tag/gray/)
- [Black palettes](https://palettevault.github.io/tag/black/)

## Writing

- [Blog](https://palettevault.github.io/blog/)
- [RSS feed](https://palettevault.github.io/blog/rss.xml)
- [OKLCH vs HSL: why your color scale looks uneven](https://palettevault.github.io/blog/oklch-vs-hsl/)
- [The Y2K Comeback: Why Retro UI Is Trending Again](https://palettevault.github.io/blog/y2k-renaissance/)

## About

- [About - method and licence](https://palettevault.github.io/about/)
- [Privacy policy](https://palettevault.github.io/privacy/)
- [Sitemap](https://palettevault.github.io/sitemap.xml)

## Licence

Colors cannot be owned. Every palette here is free for commercial and
non-commercial use, with no attribution required.

## Privacy

Like counts are the only server-side data, stored as a single number per
palette with nothing attached to identify who sent it. Saved collections live
in the visitor's browser and are never transmitted. There is no analytics, no
cookies and no accounts.