Pixel art palette · 10 colors

Mono Palette

Mono strips a sprite down to value and contrast, useful for game UI, placeholder assets, printable grids, and accessibility checks.

iconswireframesprintable gridscontrast studies

Use in workbench

CSS variables

:root {
  --palettely-background: #ece8dd;
  --palettely-outline: #1f2324;
  --palettely-skin: #c9c0b1;
  --palettely-skin-shadow: #8f897d;
  --palettely-blush: #7c7570;
  --palettely-hair: #aeb4b5;
  --palettely-shirt: #6d7477;
  --palettely-accent: #f2f0e8;
  --palettely-highlight: #faf8f0;
  --palettely-detail: #101314;
}

Tailwind config

export default {
  theme: {
    extend: {
      colors: {
        palettely: {
        'background': '#ece8dd',
        'outline': '#1f2324',
        'skin': '#c9c0b1',
        'skin-shadow': '#8f897d',
        'blush': '#7c7570',
        'hair': '#aeb4b5',
        'shirt': '#6d7477',
        'accent': '#f2f0e8',
        'highlight': '#faf8f0',
        'detail': '#101314',
        },
      },
    },
  },
};

JSON

[
  {
    "id": 0,
    "name": "Background",
    "hex": "#ece8dd"
  },
  {
    "id": 1,
    "name": "Outline",
    "hex": "#1f2324"
  },
  {
    "id": 2,
    "name": "Skin",
    "hex": "#c9c0b1"
  },
  {
    "id": 3,
    "name": "Skin shadow",
    "hex": "#8f897d"
  },
  {
    "id": 4,
    "name": "Blush",
    "hex": "#7c7570"
  },
  {
    "id": 5,
    "name": "Hair",
    "hex": "#aeb4b5"
  },
  {
    "id": 6,
    "name": "Shirt",
    "hex": "#6d7477"
  },
  {
    "id": 7,
    "name": "Accent",
    "hex": "#f2f0e8"
  },
  {
    "id": 8,
    "name": "Highlight",
    "hex": "#faf8f0"
  },
  {
    "id": 9,
    "name": "Detail",
    "hex": "#101314"
  }
]