Pixel art palette · 10 colors

Tomodachi Palette

Tomodachi keeps outlines soft and readable while leaving enough warm accents for faces, clothes, food stalls, pets, and small scenes.

avatarscozy gamessocial iconsfriendly UI badges

Use in workbench

CSS variables

:root {
  --palettely-background: #f7ead9;
  --palettely-outline: #2d2630;
  --palettely-skin: #f2c7a4;
  --palettely-skin-shadow: #d99b83;
  --palettely-blush: #ec8b9f;
  --palettely-hair: #f2d15a;
  --palettely-shirt: #d84f4f;
  --palettely-accent: #ffffff;
  --palettely-highlight: #fff9ec;
  --palettely-detail: #17151a;
}

Tailwind config

export default {
  theme: {
    extend: {
      colors: {
        palettely: {
        'background': '#f7ead9',
        'outline': '#2d2630',
        'skin': '#f2c7a4',
        'skin-shadow': '#d99b83',
        'blush': '#ec8b9f',
        'hair': '#f2d15a',
        'shirt': '#d84f4f',
        'accent': '#ffffff',
        'highlight': '#fff9ec',
        'detail': '#17151a',
        },
      },
    },
  },
};

JSON

[
  {
    "id": 0,
    "name": "Background",
    "hex": "#f7ead9"
  },
  {
    "id": 1,
    "name": "Outline",
    "hex": "#2d2630"
  },
  {
    "id": 2,
    "name": "Skin",
    "hex": "#f2c7a4"
  },
  {
    "id": 3,
    "name": "Skin shadow",
    "hex": "#d99b83"
  },
  {
    "id": 4,
    "name": "Blush",
    "hex": "#ec8b9f"
  },
  {
    "id": 5,
    "name": "Hair",
    "hex": "#f2d15a"
  },
  {
    "id": 6,
    "name": "Shirt",
    "hex": "#d84f4f"
  },
  {
    "id": 7,
    "name": "Accent",
    "hex": "#ffffff"
  },
  {
    "id": 8,
    "name": "Highlight",
    "hex": "#fff9ec"
  },
  {
    "id": 9,
    "name": "Detail",
    "hex": "#17151a"
  }
]