Color System

Versatile color palette and themable colors ready for your next project.

Our color system is divided into three categories:

  • Tailwind CSS Defaults: The default colors provided by Tailwind CSS.
  • Wedges Palette: A set of core colors that are consistent across all themes.
  • Themable Colors: Configurable colors that adapt and change based on the active theme.

Wedges Palette

When using the Wedges color palette, you need to prefix color names with wg-, for example: bg-wg-gray-500. The default Tailwind CSS colors are available without the prefix.

Gray•wg-gray
50
100
200
300
400
500*
600
700
800
900
Yellow•wg-yellow
50
100
200
300
400
500*
600
700
800
900
Green•wg-green
50
100
200
300
400
500*
600
700
800
900
Blue•wg-blue
50
100
200
300
400
500*
600
700
800
900
Purple•wg-purple
50
100
200
300
400
500*
600
700
800
900
Orange•wg-orange
50
100
200
300
400
500*
600
700
800
900
Red•wg-red
50
100
200
300
400
500*
600
700
800
900
Pink•wg-pink
50
100
200
300
400
500*
600
700
800
900

Example

<div class="bg-yellow-400">Easy</div> // Tailwind color
<div class="bg-wg-yellow-400">Peasy</div> // Wedges color
<div class="bg-wg-yellow">Lemon Squeezy</div> // uses yellow.DEFAULT color

Color Scale

Similar to Tailwind CSS, the Wedges color palette utilizes a 10-step, graded color scale, along with a DEFAULT value. This default value is applied when no specific grade is provided through a class, such as in bg-wg-blue.

type ColorScale = {
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
  DEFAULT: string;
};

for example:

import type { ColorScale } from "@lemonsqueezy/wedges";
 
const wg_blue: ColorScale = {
  50: "#F0FAFF",
  100: "#DBF3FF",
  200: "#ADE4FF",
  300: "#70D1FF",
  400: "#38BEFF",
  500: "#00ACFF",
  600: "#0090D6",
  700: "#0075AD",
  800: "#005985",
  900: "#003E5C",
  DEFAULT: "#00ACFF",
};

Customization

These colors can be customized under the colors key in the theme section of your tailwind.config.ts file:

tailwind.config.ts
const config: Config = {
  // ...
  theme: {
    extend: {
      colors: {
        "wg-red": {
          DEFAULT: "#ff0000",
          500: "#ff0000",
        },
      },
    },
  },
  //...
};
 
export default config;

Themable Colors

Themable colors are configurable and can adapt with multiple themes. By default, themable colors will adapt to dark and light themes, but you can easily add more themes to your project.

The following themable colors are available:

Background
Foreground
Primary
Secondary
Destructive
Surface

By default, background and foreground colors are applied to the <html> element.

Example

Toggle between light and dark mode to preview each theme.

Easy PeasyLemon Squeezy

Color Scale

Themable color scale is more flexible than Wedges Palette color scale, it is defined like this:

type ThemableColorScale = Partial<ColorScale> | string;
 
type ThemableColors = {
  background: string;
  foreground: string;
  primary: ThemableColorScale;
  secondary: ThemableColorScale;
  surface: ThemableColorScale;
  destructive: ThemableColorScale;
};

This structure allows for a wide range of customization options, adapting to various design needs.

Default Values

The default themable colors are defined as follows:

const themableColorsLight: ThemableColors = {
  background: "#FFFFFF",
  foreground: palette.gray[900],
  primary: {
    ...palette["purple"], // `palette` is the Wedges Palette
    DEFAULT: palette["purple"][500],
  },
  secondary: {
    ...palette["gray"],
    DEFAULT: palette["gray"][900],
  },
  surface: {
    ...palette["gray"],
    DEFAULT: palette["gray"][50],
  },
  destructive: {
    ...palette["red"],
  },
};
 
const themableColorsDark: ThemableColors = {
  background: palette.gray[900],
  foreground: "#FFFFFF",
  primary: {
    ...palette["purple"],
    DEFAULT: palette["purple"][400],
    600: palette["purple"][500],
  },
  secondary: {
    ...palette["white"],
    900: palette["gray"][900],
    DEFAULT: palette["white"][900],
  },
  surface: {
    50: "rgba(255,255,255, 0.1)",
    100: "rgba(255,255,255, 0.2)",
    200: "rgba(255,255,255, 0.3)",
    300: "rgba(255,255,255, 0.4)",
    400: "rgba(255,255,255, 0.5)",
    500: "rgba(255,255,255, 0.5)",
    600: "rgba(255,255,255, 0.7)",
    700: "rgba(255,255,255, 0.8)",
    800: "rgba(255,255,255, 0.9)",
    900: "#FFFFFF",
    DEFAULT: "rgba(255,255,255, 0.1)",
  },
  destructive: palette["red"],
};

Customization

For optimal results, we suggest creating a ten-step graded color scale for your custom colors. You may find these online tools helpful in generating custom color scales: Palettte and Eva Design System.

Themable colors can be customized by adding options to the wedgesTW plugin in your tailwind.config.ts file. For instance, to use yellow as the primary color for dark theme only, you can set it like this:"

tailwind.config.ts
import { wedgesTW } from "@lemonsqueezy/wedges";
import type { Config } from "tailwindcss";
 
const config: Config = {
  // Other Tailwind CSS options...
  plugins: [
    wedgesTW({
      themes: {
        dark: {
          colors: {
            primary: {
              50: "#FFF9EB",
              100: "#FFF3D6",
              200: "#FFE7AD",
              300: "#FFDA85",
              400: "#FFCE5C",
              500: "#FFC233",
              600: "#FAAF00",
              700: "#C28800",
              800: "#8A6100",
              900: "#523900",
              DEFAULT: "#FFC233",
            },
          },
        },
        light: {
          colors: {
            // Define colors for `light` theme here...
          },
        },
      },
    }),
  ],
};
 
export default config;

If you want to use one of the Wedges Color Palette colors, wedgesPalette can be imported from @lemonsqueezy/wedges, for example:

tailwind.config.ts
import { wedgesPalette, wedgesTW } from "@lemonsqueezy/wedges";
import type { Config } from "tailwindcss";
 
const config: Config = {
  // Other Tailwind CSS options...
  plugins: [
    wedgesTW({
      themes: {
        dark: {
          colors: {
            primary: wedgesPalette.yellow,
          },
        },
      },
    }),
  ],
};
 
export default config;

This will set all ten steps of the yellow color scale as the primary color for the dark theme.

Tailwind PluginDefault Themes
Edit this page