Visit the live demo
Pigments is a modern accessible digital color system rooted in traditional artistic pigments. A collection of six primary colors with ten perceptually uniform brightness levels each, designed for harmonious, and visually distinct interfaces, and selected to reflect modern accessibility standards.
It is based on six pigment colors, widely used by artists for over hundreds of years: Ash Gray,
Celadonite Green,
Prussian Blue,
Manganese Violet,
Iron Oxide Red, and
Gold Ochre Yellow. From these, a full palette of 60 colors, ten derived from each pigment, is crafted. The full palette is colorblind-friendly and ensures sufficient contrast for color combinations.
Pigments comes in many ready-to-use formats. If you can't find one for your use-case, or spot an error, Pigments is always open for contributions!
| Color | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 |
|---|---|---|---|---|---|---|---|---|---|---|
| Ash Gray |  #f1f0ef |
 #dddad7 |
 #c8c4bf |
 #b3afab |
 #9d9a97 |
 #898683 |
 #75726f |
 #615f5d |
 #4f4d4a |
 #3d3b38 |
| Celadonite Green |  #f0f5c2 |
 #d7e9b4 |
 #b3cd9b |
 #9bb989 |
 #89a377 |
 #788d64 |
 #677851 |
 #56633f |
 #4a512d |
 #40401f |
| Prussian Blue |  #e2f5f0 |
 #b7eceb |
 #98d4dd |
 #79bacd |
 #5ea4c0 |
 #4590a9 |
 #2e7c92 |
 #176778 |
 #0b5561 |
 #074248 |
| Manganese Violet |  #f9ecff |
 #eddbff |
 #d7b8fb |
 #c4a1f1 |
 #a98ce4 |
 #9177d4 |
 #7e62c0 |
 #6d4da5 |
 #5f3f7e |
 #502f5a |
| Iron Oxide Red |  #ffede8 |
 #ffd3cc |
 #ffb0a4 |
 #ff9283 |
 #f27666 |
 #e15953 |
 #cb4245 |
 #aa333f |
 #94202b |
 #720d1e |
| Gold Ochre Yellow |  #f9f2c8 |
 #f6e299 |
 #e6c069 |
 #d9a850 |
 #c98f39 |
 #b77927 |
 #9f6520 |
 #825420 |
 #5f3d16 |
 #4b3313 |
Pigments is available in multiple formats:
| Format | Filename |
|---|---|
| Apple Color List | pigments.clr |
| CSS Variables | pigments.css |
| SCSS Variables | _pigments.scss |
| LESS Variables | pigments.less |
| JSON | pigments.json |
| Bootstrap SCSS | pigments.bootstrap.scss |
| GIMP Palette | pigments.gpl |
| iTerm2 Colors | pigments.itermcolors |
| Material Design | pigments.material.json |
| React Theme | pigments.react.theme.js |
| Sketch Palette | pigments.sketchpalette |
| LibreOffice Palette | pigments.soc |
| SVG Swatches | pigments.svg |
| Tailwind Config | pigments.tailwind.config.js |
| TeX | pigments.sty |
pigments.vim |
|
pigments.vscode.json |
|
| Windows Terminal Theme | pigments.winterm.json |
Formats with
If you can't find what you're looking for, open an issue, or contribute a port by adding your file to public/downloads/ and referencing it in Downloads.vue