Generate Color Palette

Pearl UI provides a utility function to create a color palette from a single color. This color palette can then be inserted into theme.palette to be used by components.

Import#

import { generatePalette } from "pearl-ui";

Usage#

Allowed color inputs#

The function uses TinyColor under the hood, so it's very permissive with the input value for the color property

// Support for Hex values and 8-digit (RGBA) Hex valuesgeneratePalette("#000", "label");generatePalette("000", "label");generatePalette("#369C", "label");generatePalette("369C", "label");generatePalette("#f0f0f6", "label");generatePalette("f0f0f6", "label");generatePalette("#f0f0f688", "label");generatePalette("f0f0f688", "label");
// Support for RGB and RGBA valuesgeneratePalette("rgb (255, 0, 0)", "label");generatePalette("rgb 255 0 0", "label");generatePalette("rgba (255, 0, 0, .5)", "label");
// Support for HSL and HSLA valuesgeneratePalette("hsl(0, 100%, 50%)", "label");generatePalette("hsla(0, 100%, 50%, .5)", "label");generatePalette("hsl(0, 100%, 50%)", "label");generatePalette("hsl 0 1.0 0.5", "label");
// Support for HSV and HSVA valuesgeneratePalette("hsv(0, 100%, 100%)", "label");generatePalette("hsva(0, 100%, 100%, .5)", "label");generatePalette("hsv (0 100% 100%)", "label");generatePalette("hsv 0 1 1", "label");
// Support for Named color valuesgeneratePalette("RED", "label");generatePalette("blanchedalmond", "label");generatePalette("darkblue", "label");

Basic Usage#

const colorPalette = generatePalette("#00fa9a", "accent");

Output#

// colorPalette{  "accent": {    "100": "#b6fee2",    "200": "#89fdd0",    "300": "#5bfcbe",    "400": "#2efbac",    "500": "#00fa9a",    "600": "#00cd7f",    "700": "#00a163",    "800": "#007448",    "900": "#00472c"  }}

Accent 100

#b6fee2

Accent 200

#89fdd0

Accent 300

#5bfcbe

Accent 400

#2efbac

Accent 500

#00fa9a

Accent 600

#00cd7f

Accent 700

#00a163

Accent 800

#007448

Accent 900

#00472c

Advanced Usage#

You can tweak the count and similarity prop values to have more fine grained control over the palette generation.

const colorPalette = generatePalette("#00fa9a", "accent", 5, 4);

Output#

// colorPalette{  "accent": {    "100": "#40fbb3",    "200": "#20fba7",    "300": "#00fa9a",    "400": "#00db87",    "500": "#00bc74"  }}

Accent 100

#40fbb3

Accent 200

#20fba7

Accent 300

#00fa9a

Accent 400

#00db87

Accent 500

#00bc74

const colorPalette = generatePalette("#00fa9a", "accent", 14, 1);

Output#

// colorPalette{  "accent": {    "100": "#ffffff",    "200": "#dbfef1",    "300": "#b6fee2",    "400": "#92fdd4",    "500": "#6dfcc5",    "600": "#49fbb7",    "700": "#24fba8",    "800": "#00d684",    "900": "#00b36e",    "1000": "#008f58",    "1100": "#006b42",    "1200": "#00472c",    "1300": "#002416",    "1400": "#000000"  }}

Accent 100

#ffffff

Accent 200

#dbfef1

Accent 300

#b6fee2

Accent 400

#92fdd4

Accent 500

#6dfcc5

Accent 600

#49fbb7

Accent 700

#24fba8

Accent 800

#00d684

Accent 900

#00b36e

Accent 1000

#008f58

Accent 1100

#006b42

Accent 1200

#00472c

Accent 1300

#002416

Accent 1400

#000000

Adding palette to theme#

You can insert the generated palette into your theme object as follows. The values accent.100, accent.200, accent.300, etc. would then be available to the props which query the PearlTheme['palette'] values (ie, color and backgroundColor).

// theme.jsexport default {  palette: {    primary: {      100: "#E1E6FF",      200: "#C3CCFF",      300: "#A5B1FF",      400: "#8F9DFF",      500: "#6A7BFF",      600: "#4D5BDB",      700: "#3541B7",      800: "#212A93",      900: "#141B7A",    }
    ...colorPalette,
    // ...  },};

Props#

Name	Required	Type	Default	Description
color	true	string		Color to generate tints and shades for
label	true	string		Identifier for the generated colors ('primary', 'secondary', etc). Eg, for a label of 'primary', the generated tints and shades be referred as 'primary.100', 'primary.200', etc.
count	false	number	`9`	The number of color values to be generated
similarity	false	number	`1.4`	The similarity between the generated colors