---
title: Color System
description: Versatile color palette and themable colors ready for your next project.
breadcrumbs:
- Theming
---
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.
#### Example
```tsx showLineNumbers
Easy
// Tailwind color
Peasy
// Wedges color
Lemon Squeezy
// 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`.
```tsx showLineNumbers
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:
```tsx showLineNumbers
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:
```tsx title="tailwind.config.ts" {6-9} showLineNumbers
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:
By default, `background` and `foreground` colors are applied to the `` element.
#### Example
Toggle between light and dark mode to preview each theme.
#### Color Scale
Themable color scale is more flexible than Wedges Palette color scale, it is defined like this:
```tsx showLineNumbers
type ThemableColorScale = Partial | 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:
```tsx showLineNumbers
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:"
```tsx {} title="tailwind.config.ts" showLineNumbers
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:
```tsx {11} title="tailwind.config.ts" showLineNumbers /wedgesPalette/
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.
Ensure that these changes are applied to the `wedgesTW` plugin options, rather than the `theme`
section in your `tailwind.config.ts` file.