Pixel art palette · 10 colors

Bubblegum Palette

Bubblegum is built for bright silhouettes, magical props, cute mascots, and expressive social posts that still export cleanly to CSS and Tailwind.

mascotsmagic itemssocial poststoy-like sprites

Use in workbench

CSS variables

:root {
  --palettely-background: #f9ddea;
  --palettely-outline: #332432;
  --palettely-skin: #ffd2b8;
  --palettely-skin-shadow: #e79c91;
  --palettely-blush: #f36f98;
  --palettely-hair: #6d4bd8;
  --palettely-shirt: #304e7c;
  --palettely-accent: #ffd95c;
  --palettely-highlight: #fff8fb;
  --palettely-detail: #201326;
}

Tailwind config

export default {
  theme: {
    extend: {
      colors: {
        palettely: {
        'background': '#f9ddea',
        'outline': '#332432',
        'skin': '#ffd2b8',
        'skin-shadow': '#e79c91',
        'blush': '#f36f98',
        'hair': '#6d4bd8',
        'shirt': '#304e7c',
        'accent': '#ffd95c',
        'highlight': '#fff8fb',
        'detail': '#201326',
        },
      },
    },
  },
};

JSON

[
  {
    "id": 0,
    "name": "Background",
    "hex": "#f9ddea"
  },
  {
    "id": 1,
    "name": "Outline",
    "hex": "#332432"
  },
  {
    "id": 2,
    "name": "Skin",
    "hex": "#ffd2b8"
  },
  {
    "id": 3,
    "name": "Skin shadow",
    "hex": "#e79c91"
  },
  {
    "id": 4,
    "name": "Blush",
    "hex": "#f36f98"
  },
  {
    "id": 5,
    "name": "Hair",
    "hex": "#6d4bd8"
  },
  {
    "id": 6,
    "name": "Shirt",
    "hex": "#304e7c"
  },
  {
    "id": 7,
    "name": "Accent",
    "hex": "#ffd95c"
  },
  {
    "id": 8,
    "name": "Highlight",
    "hex": "#fff8fb"
  },
  {
    "id": 9,
    "name": "Detail",
    "hex": "#201326"
  }
]