Generate Color Palette

Pearl UI offers a powerful utility function, generatePalette, that allows you to create a comprehensive color palette from a single base color. This generated palette can then be seamlessly integrated into theme.palette, enabling consistent color usage across all components in your application.

Import#

import { generatePalette } from "pearl-ui";

Usage#

Color Input Formats#

The generatePalette function utilizes TinyColor internally, which allows for a wide range of color input formats. Here are some examples:

Hexadecimal Colors#

generatePalette("#000", "label");generatePalette("000", "label");generatePalette("#369C", "label");generatePalette("369C", "label");generatePalette("#f0f0f6", "label");generatePalette("f0f0f6", "label");generatePalette("#f0f0f688", "label");generatePalette("f0f0f688", "label");

RGB and RGBA Colors#

generatePalette("rgb (255, 0, 0)", "label");generatePalette("rgb 255 0 0", "label");generatePalette("rgba (255, 0, 0, .5)", "label");

HSL and HSLA Colors#

generatePalette("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");

HSV and HSVA Colors#

generatePalette("hsv(0, 100%, 100%)", "label");generatePalette("hsva(0, 100%, 100%, .5)", "label");generatePalette("hsv (0 100% 100%)", "label");generatePalette("hsv 0 1 1", "label");

Named Colors#

generatePalette("RED", "label");generatePalette("blanchedalmond", "label");generatePalette("darkblue", "label");

Basic Usage#

// Generate a color palette with a base color of "#00fa9a" and a label of "accent"const colorPalette = generatePalette("#00fa9a", "accent");

Output#

// The generated color palette is an object with the label as the key and the color shades as the values{  "accent": {    "100": "#b6fee2", // Lightest shade    "200": "#89fdd0",    "300": "#5bfcbe",    "400": "#2efbac",    "500": "#00fa9a", // Base color    "600": "#00cd7f",    "700": "#00a163",    "800": "#007448",    "900": "#00472c" // Darkest shade  }}

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#

For more control over the palette generation, you can adjust the count and similarity properties. The count property determines the number of color shades in the palette, while the similarity property adjusts the difference between each shade.

// Generate a color palette with a base color of "#00fa9a", a label of "accent", 5 color shades, and a similarity of 4const colorPalette = generatePalette("#00fa9a", "accent", 5, 4);

Output#

// The generated color palette is an object with the label as the key and the color shades as the values{  "accent": {    "100": "#40fbb3", // Lightest shade    "200": "#20fba7",    "300": "#00fa9a", // Base color    "400": "#00db87",    "500": "#00bc74" // Darkest shade  }}

Accent 100

#40fbb3

Accent 200

#20fba7

Accent 300

#00fa9a

Accent 400

#00db87

Accent 500

#00bc74

// Generate a color palette with a base color of "#00fa9a", a label of "accent", 14 color shades, and a similarity of 1const 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

Integrating the Palette into the Theme#

Once the palette is generated, it can be integrated into your theme object. This allows the values accent.100, accent.200, accent.300, etc. to be accessed by props that query the PearlTheme['palette'] values, such as 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,
    // Additional palette configurations...  },};

Function Parameters#

Parameter	Required	Type	Default	Description
color	true	string		The base color for generating tints and shades
label	true	string		The identifier for the generated colors (e.g., 'primary', 'secondary'). For a label of 'primary', the generated tints and shades will be referred to as 'primary.100', 'primary.200', etc.
count	false	number	`9`	The number of color values to generate
similarity	false	number	`1.4`	The degree of similarity between the generated colors