Documentation

Video run through

Installation

View color palette

Edit colors

Video run through

Installation

Install the Browser Extension from the Chrome Web Store and pin the icon.

View the color palette

All global CSS Variables that are valid colors will be shown in the Extension.

:root {
  --primary: #845EF7;
}

.foo {
  background: var(--primary);
}

Colors can also be defined as HSL or OKLCH channels. The Tailwind Docs explain why you might want to do this.

:root {
  --secondary: 319 91% 67%;
}

.bar {
  background: hsl(var(--secondary));
}

For these to be recognized we need to set the "Color Format" in the Extension.

Edit colors

Changing a color in the Extension updates that CSS Variable in the page.

This can be done with:

A color picker.
Via HSL or OKLCH color channels.
Chosen from Tailwind's default palette.

UI libraries

If you're using a UI library select it from the "Library" dropdown top left in the extension.

Currently shadcn/ui and daisyUI are supported. If you'd like a different UI library to be added contact me.

Using a Library will give you additional features:

A Swatch for viewing the Color Palette together

An Accessability Panel which shows the contrast and score according to WCAG guidelines.

The Colors List will have semantic descriptions of the colors.

These come from the UI library's official documentation.

Custom Configuration

If you're not using a supported UI library you can still access the Swatch, Accessability Panel and have descriptions in the Colors List via a Custom Configuration.

If you are using a supported UI library you can override the default behavior with a Custom Configuration.

Configuration data is stored in a JavaScript object that's passed to the extension by being stringifying and rendered in a div with a data attribute data-design-gui-config.

Color groups / descriptions

Imagine you have these CSS Variables:

:root {
  --primary: #5a1e69;
  --primary-background: #eebefa;
  --card: #e9fac8;
  --error:  #e03131;;
}

The extension will look like this:

If you add 2 colors to the custom config:

const customConfig = {
  colorGroups: [{
    description: 'Primary colors to use for CTA',
    colors: [{
      name: "primary", // don't add "--" to the name. Eg "primary" references the CSS variable "--primary"
    }, {
      name: "primary-background",
    }]
  }],
}

And stringify the object, and render it on the page with a data attribute of data-design-gui-config.

// JSX example
<div data-design-gui-config>{JSON.stringify(customConfig)}</div>

Then the extension will look like this:

You can also have descriptions for individual colors, aswell as or instead of color group descriptions.

const customConfig = {
  colorGroups: [{
    colors: [{
      name: "card",
      description: 'Background for Cards',
    }, {
      name: "error",
      description: 'Destructive / error state',
    }]
  }],
}

In which case the extension will look like this:

Swatch

You can add any colors that you wish to appear in the Swatch panel.

const customConfig = {
  swatch: ['primary', 'primary-background', 'card', "error"],
}

Accessability

To see the color contrast add colors as pairs.

const customConfig = {
  allyPairs: [
    ['primary', 'primary-background'],
    ['card', 'error']
  ],
}

Settings

You can set the Library and Color Format.

const customConfig = {
  settings: {
    library: 'shadcn',
    colorFormat: 'hsl',
  }
}

You can also hide the individual color descriptions from the main Colors List. Here is why you might want to do this:

If you have descriptions for both color groups and individual colors it may be redundant to show them both.

const customConfig = {
  colorGroups: [{
    description: 'Primary colors to use for CTA',
    colors: [{
      name: "primary",
      description: 'Text color for Primary button'
    }, {
      name: "primary-background",
      description: 'Background color for Primary button'
    }]
  }],
}

Individual color descriptions are used for the AI-generation so you may wish to hide rather than remove them.

const customConfig = {
  colorGroups: [{
    description: 'Primary colors to use for CTA',
    colors: [{
      name: "primary",
      description: 'Text color for Primary button'
    }, {
      name: "primary-background",
      description: 'Background color for Primary button'
    }]
  }],
  settings: {
    showColorDescriptionInColorGroups: false, // default is true, unless you're using shadcn/ui
  }
}

TypeScript

This is the TypeScript type for the config object:

type Config = {
  colorGroups?: {
    description?: string;
    colors: {
      name: string;
      description?: string;
    }[];
  }[];
  swatch?: string[];
  allyPairs?: [string, string][];
  settings?: {
    library?: "shadcn" | "daisyui";
    colorFormat?: "hsl" | "oklch";
    showColorDescriptionInColorGroups?: boolean;
  };
};

Generate Color Palette with AI

Click on the "Generate with AI" button.

Paste your OpenAI API key from platform.openai.com.

You can now set the "User Prompt" and "System Prompt" to describe the Color Palette you'd like to create.

The Schema used Function Calling to ensure the response from AI matches the colors that you need, and to tell the AI the semantic meaning of the colors.

The default color descriptions come from the Library's official documentation or from the Custom Configuration Object, but you can override these or add extra context for the AI.

Choose a model and click "Go"

* If you've just signed up for an OpenAI account you may not have access to all of the models immediately. Please check the OpenAI Playground for more information.

After generating a new palette you may want to check the Accessability Panel.

Tip: If a color is just failing you can tweak the lightness via the color channel sliders until it passes.

Export changes

After making changes you can export the new CSS Variable values to paste into your app.

This project is a work in progress so any issues or feature requests please contact me.

@jchetters