Rich cacao-inspired color palettes for design systems. This package ships ready-made palettes, dark variants, and a generator for creating your own shades.

Install

npm install @cacao-research/colors
# or
yarn add @cacao-research/colors
# or
pnpm add @cacao-research/colors

Usage

import {
  cacao,
  caramel,
  red,
  green,
  presetPalettes,
  presetDarkPalettes,
  generate,
} from '@cacao-research/colors';

console.log(cacao);
// -> array of 10 progressively darker shades
console.log(cacao.primary); // '#7B3F00'
console.log(red.primary); // '#F15644'
console.log(green['green-1']); // first green shade
console.log(presetPalettes['green-1']); // same value, exposed at root level

const twilight = generate('#7a5a3a');
console.log(twilight.primary); // '#7A5A3A'

const twilightDark = generate('#7a5a3a', {
  theme: 'dark',
  backgroundColor: '#101012',
});
console.log(twilightDark);

Preset palettes

Named palettes are exposed both as individual exports and through presetPalettes/presetDarkPalettes.

import { mocha, presetPalettes } from '@cacao-research/colors';

mocha.primary; // '#6F4E37'
presetPalettes.mocha === mocha; // true
presetDarkPalettes.mocha; // dark-friendly variant blended for low-light UIs

Available names:

red, volcano, orange, gold, yellow, lime, green, cyan, blue, geekblue, purple, magenta, grey, cacao, cocoa, espresso, mocha, caramel, dulce, vanilla, hazelnut, almond, cinnamon, macchiato, darkchocolate.

Every palette also exposes numbered aliases:

• presetPalettes['green-1'] through presetPalettes['green-10']
• green['green-1'] through green['green-10']

Palette generator

generate(color: string, options?: {
  theme?: 'default' | 'dark';
  backgroundColor?: string;
}): string[] & { primary: string }

• color — Any 3 or 6-digit hex string. Shorthand like #abc is accepted.
• theme — Set to 'dark' to blend the palette against a dark background ('#141414' by default).
• backgroundColor — Override the background color used for dark palettes.

Each returned palette contains exactly 10 shades and a primary property that matches the 6th entry (index 5), mirroring the API of @ant-design/colors.

Test

npm test

Runs a basic smoke check to ensure palette generation and presets stay aligned.

License

MIT © Juan