https://github.com/lgienapp/pigments

Pigments is an accessible modern color palette, inspired by traditional pigments.
https://github.com/lgienapp/pigments

art color color-scheme color-schemes css design design-system design-systems palette palettes scss theme themes ui ui-development

Last synced: 4 months ago
JSON representation

Pigments is an accessible modern color palette, inspired by traditional pigments.

• Host: GitHub
• URL: https://github.com/lgienapp/pigments
• Owner: lgienapp
• License: mit
• Created: 2025-03-15T19:42:39.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-25T13:38:23.000Z (about 1 year ago)
• Last Synced: 2025-04-15T03:48:49.225Z (about 1 year ago)
• Topics: art, color, color-scheme, color-schemes, css, design, design-system, design-systems, palette, palettes, scss, theme, themes, ui, ui-development
• Language: Vue
• Homepage: http://gien.app/pigments/
• Size: 174 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
 Visit the live demo 


# Pigments 

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: ![](https://placehold.co/16x16/9d9a97/9d9a97) Ash Gray, ![](https://placehold.co/16x16/788d64/788d64) Celadonite Green, ![](https://placehold.co/16x16/074248/074248) Prussian Blue, ![](https://placehold.co/16x16/6d4da5/6d4da5) Manganese Violet, ![](https://placehold.co/16x16/94202b/94202b) Iron Oxide Red, and ![](https://placehold.co/16x16/9f6520/9f6520) 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!

## Palette

| Color             | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 |

|:------------------|:-----|:-----|:-----|:-----|:-----|:-----|:-----|:-----|:-----|:-----|

| Ash Gray          | ![#f1f0ef](https://placehold.co/100x100/f1f0ef/f1f0ef.png) `#f1f0ef` | ![#dddad7](https://placehold.co/100x100/dddad7/dddad7.png) `#dddad7` | ![#c8c4bf](https://placehold.co/100x100/c8c4bf/c8c4bf.png) `#c8c4bf` | ![#b3afab](https://placehold.co/100x100/b3afab/b3afab.png) `#b3afab` | ![#9d9a97](https://placehold.co/100x100/9d9a97/9d9a97.png) `#9d9a97` | ![#898683](https://placehold.co/100x100/898683/898683.png) `#898683` | ![#75726f](https://placehold.co/100x100/75726f/75726f.png) `#75726f` | ![#615f5d](https://placehold.co/100x100/615f5d/615f5d.png) `#615f5d` | ![#4f4d4a](https://placehold.co/100x100/4f4d4a/4f4d4a.png) `#4f4d4a` | ![#3d3b38](https://placehold.co/100x100/3d3b38/3d3b38.png) `#3d3b38` |

| Celadonite Green  | ![#f0f5c2](https://placehold.co/100x100/f0f5c2/f0f5c2.png) `#f0f5c2` | ![#d7e9b4](https://placehold.co/100x100/d7e9b4/d7e9b4.png) `#d7e9b4` | ![#b3cd9b](https://placehold.co/100x100/b3cd9b/b3cd9b.png) `#b3cd9b` | ![#9bb989](https://placehold.co/100x100/9bb989/9bb989.png) `#9bb989` | ![#89a377](https://placehold.co/100x100/89a377/89a377.png) `#89a377` | ![#788d64](https://placehold.co/100x100/788d64/788d64.png) `#788d64` | ![#677851](https://placehold.co/100x100/677851/677851.png) `#677851` | ![#56633f](https://placehold.co/100x100/56633f/56633f.png) `#56633f` | ![#4a512d](https://placehold.co/100x100/4a512d/4a512d.png) `#4a512d` | ![#40401f](https://placehold.co/100x100/40401f/40401f.png) `#40401f` |

| Prussian Blue     | ![#e2f5f0](https://placehold.co/100x100/e2f5f0/e2f5f0.png) `#e2f5f0` | ![#b7eceb](https://placehold.co/100x100/b7eceb/b7eceb.png) `#b7eceb` | ![#98d4dd](https://placehold.co/100x100/98d4dd/98d4dd.png) `#98d4dd` | ![#79bacd](https://placehold.co/100x100/79bacd/79bacd.png) `#79bacd` | ![#5ea4c0](https://placehold.co/100x100/5ea4c0/5ea4c0.png) `#5ea4c0` | ![#4590a9](https://placehold.co/100x100/4590a9/4590a9.png) `#4590a9` | ![#2e7c92](https://placehold.co/100x100/2e7c92/2e7c92.png) `#2e7c92` | ![#176778](https://placehold.co/100x100/176778/176778.png) `#176778` | ![#0b5561](https://placehold.co/100x100/0b5561/0b5561.png) `#0b5561` | ![#074248](https://placehold.co/100x100/074248/074248.png) `#074248` |

| Manganese Violet  | ![#f9ecff](https://placehold.co/100x100/f9ecff/f9ecff.png) `#f9ecff` | ![#eddbff](https://placehold.co/100x100/eddbff/eddbff.png) `#eddbff` | ![#d7b8fb](https://placehold.co/100x100/d7b8fb/d7b8fb.png) `#d7b8fb` | ![#c4a1f1](https://placehold.co/100x100/c4a1f1/c4a1f1.png) `#c4a1f1` | ![#a98ce4](https://placehold.co/100x100/a98ce4/a98ce4.png) `#a98ce4` | ![#9177d4](https://placehold.co/100x100/9177d4/9177d4.png) `#9177d4` | ![#7e62c0](https://placehold.co/100x100/7e62c0/7e62c0.png) `#7e62c0` | ![#6d4da5](https://placehold.co/100x100/6d4da5/6d4da5.png) `#6d4da5` | ![#5f3f7e](https://placehold.co/100x100/5f3f7e/5f3f7e.png) `#5f3f7e` | ![#502f5a](https://placehold.co/100x100/502f5a/502f5a.png) `#502f5a` |

| Iron Oxide Red    | ![#ffede8](https://placehold.co/100x100/ffede8/ffede8.png) `#ffede8` | ![#ffd3cc](https://placehold.co/100x100/ffd3cc/ffd3cc.png) `#ffd3cc` | ![#ffb0a4](https://placehold.co/100x100/ffb0a4/ffb0a4.png) `#ffb0a4` | ![#ff9283](https://placehold.co/100x100/ff9283/ff9283.png) `#ff9283` | ![#f27666](https://placehold.co/100x100/f27666/f27666.png) `#f27666` | ![#e15953](https://placehold.co/100x100/e15953/e15953.png) `#e15953` | ![#cb4245](https://placehold.co/100x100/cb4245/cb4245.png) `#cb4245` | ![#aa333f](https://placehold.co/100x100/aa333f/aa333f.png) `#aa333f` | ![#94202b](https://placehold.co/100x100/94202b/94202b.png) `#94202b` | ![#720d1e](https://placehold.co/100x100/720d1e/720d1e.png) `#720d1e` |

| Gold Ochre Yellow | ![#f9f2c8](https://placehold.co/100x100/f9f2c8/f9f2c8.png) `#f9f2c8` | ![#f6e299](https://placehold.co/100x100/f6e299/f6e299.png) `#f6e299` | ![#e6c069](https://placehold.co/100x100/e6c069/e6c069.png) `#e6c069` | ![#d9a850](https://placehold.co/100x100/d9a850/d9a850.png) `#d9a850` | ![#c98f39](https://placehold.co/100x100/c98f39/c98f39.png) `#c98f39` | ![#b77927](https://placehold.co/100x100/b77927/b77927.png) `#b77927` | ![#9f6520](https://placehold.co/100x100/9f6520/9f6520.png) `#9f6520` | ![#825420](https://placehold.co/100x100/825420/825420.png) `#825420` | ![#5f3d16](https://placehold.co/100x100/5f3d16/5f3d16.png) `#5f3d16` | ![#4b3313](https://placehold.co/100x100/4b3313/4b3313.png) `#4b3313` |

## Formats

Pigments is available in multiple formats:

| Format                   | Filename                                                                      |

|:-------------------------|:------------------------------------------------------------------------------|

| Apple Color List         | [`pigments.clr`](public/downloads/pigments.clr)                               |

| CSS Variables            | [`pigments.css`](public/downloads/pigments.css)                               |

| SCSS Variables           | [`_pigments.scss`](public/downloads/_pigments.scss)                           |

| LESS Variables           | [`pigments.less`](public/downloads/pigments.less)                             |

| JSON                     | [`pigments.json`](public/downloads/pigments.json)                             |

| Bootstrap SCSS           | [`pigments.bootstrap.scss`](public/downloads/pigments.bootstrap.scss)         |

| GIMP Palette             | [`pigments.gpl`](public/downloads/pigments.gpl)                               |

| iTerm2 Colors            | [`pigments.itermcolors`](public/downloads/pigments.itermcolors)               |

| Material Design          | [`pigments.material.json`](public/downloads/pigments.material.json)           |

| React Theme              | [`pigments.react.theme.js`](public/downloads/pigments.react.theme.js)         |

| Sketch Palette           | [`pigments.sketchpalette`](public/downloads/pigments.sketchpalette)           |

| LibreOffice Palette      | [`pigments.soc`](public/downloads/pigments.soc)                               |

| SVG Swatches             | [`pigments.svg`](public/downloads/pigments.svg)                               |

| Tailwind Config          | [`pigments.tailwind.config.js`](public/downloads/pigments.tailwind.config.js) |

| TeX                      | [`pigments.sty`](public/downloads/pigments.sty)                               |

| ⚠️ Vim/Neovim Colorscheme | [`pigments.vim`](public/downloads/pigments.vim)                               |

| ⚠️ VS Code Theme          | [`pigments.vscode.json`](public/downloads/pigments.vscode.json)               |

| Windows Terminal Theme   | [`pigments.winterm.json`](pigments.winterm.json)                              |

Formats with ⚠️ are still work in progress and subject to change.

If you can't find what you're looking for, open an issue, or contribute a port by adding your file to [`public/downloads/`](public/downloads) and referencing it in [Downloads.vue](src/components/Downloads.vue)