> ## Documentation Index
> Fetch the complete documentation index at: https://layerswaplabsv0-main-depositactionsguide.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Customization

> Complete guide to customizing widget colors and generating color palettes

## Overview

Color customization is the foundation of matching the Layerswap Widget to your branding. The widget supports comprehensive color theming including primary and secondary palettes, status colors, and text colors.

## Generating Color Palettes

Creating consistent color shades (100-900) for your theme is easy with **Tailwind Shades**:

<Card title="Tailwind Shades Generator" icon="swatchbook" href="https://tailwindshades.app/">
  Generate color palettes with 10 shades from a single base color. Ideal for creating consistent primary and secondary color schemes.
</Card>

### How to Use Tailwind Shades

1. Visit [tailwindshades.app](https://tailwindshades.app/)
2. Enter your brand's primary color (hex, RGB, or HSL)
3. The tool generates 10 shades (100-900) plus a DEFAULT shade
4. Copy the generated colors and convert to Layerswap format

### Converting Tailwind Colors to Layerswap Format

Tailwind Shades provides colors in various formats. For Layerswap, use the **`RGB values without the rgb() wrapper`**:

**Tailwind Shades Output:**

```
rgb(99, 102, 241)
```

**Layerswap Format:**

```typescript theme={null}
'99, 102, 241'
```

**Example:**

```typescript theme={null}
// From Tailwind Shades
const tailwindColor = {
  100: 'rgb(224, 231, 255)',
  200: 'rgb(199, 210, 254)',
  500: 'rgb(99, 102, 241)',
  // ... etc
}

// Convert to Layerswap format
const layerswapPrimary = {
  '100': '224, 231, 255',
  '200': '199, 210, 254',
  '500': '99, 102, 241',
  // ... etc
}
```

## Color Types

### ThemeColor Type

Primary and secondary colors follow the `ThemeColor` structure with 10 shades:

```typescript theme={null}
export type ThemeColor = {
  DEFAULT: string;
  100: string;    // Lightest
  200: string;
  300: string;
  400: string;
  500: string;    // Base shade
  600: string;
  700: string;
  800: string;
  900: string;    // Darkest
  text: string;   // Text color for this palette
}
```

### StatusColor Type

Status colors (warning, error, success) use a simpler structure:

```typescript theme={null}
export type StatusColor = {
  Foreground: string;  // Text color
  Background: string;  // Background color
}
```

## Primary Colors

<ResponseField name="primary" type="ThemeColor">
  Primary color palette used for main UI elements. Includes 10 shades (100-900), a DEFAULT value, and a text color.
</ResponseField>

**Example:**

```typescript theme={null}
primary: {
  DEFAULT: '99, 102, 241',    // Main primary color
  '100': '224, 231, 255',     // Lightest shade
  '200': '199, 210, 254',
  '300': '165, 180, 252',
  '400': '129, 140, 248',
  '500': '99, 102, 241',      // Base shade
  '600': '79, 70, 229',
  '700': '67, 56, 202',
  '800': '55, 48, 163',
  '900': '49, 46, 129',       // Darkest shade
  'text': '255, 255, 255',    // Text color on primary backgrounds
}
```

**Usage:**

* Main action buttons
* Links and interactive elements
* Primary highlights and accents
* Progress indicators

## Secondary Colors

<ResponseField name="secondary" type="ThemeColor">
  Secondary color palette used for backgrounds, cards, and supporting UI elements. Follows the same structure as primary colors.
</ResponseField>

**Example:**

```typescript theme={null}
secondary: {
  DEFAULT: '30, 41, 59',
  '100': '241, 245, 249',     // Lightest (for light themes)
  '200': '226, 232, 240',
  '300': '203, 213, 225',
  '400': '148, 163, 184',
  '500': '100, 116, 139',
  '600': '71, 85, 105',
  '700': '51, 65, 85',
  '800': '30, 41, 59',        // Darkest (for dark themes)
  '900': '15, 23, 42',
  'text': '148, 163, 184',    // Text color on secondary backgrounds
}
```

**Usage:**

* Card backgrounds
* Panel surfaces
* Secondary text and labels
* Borders and dividers

## Tertiary Color

<ResponseField name="tertiary" type="string">
  Tertiary color used for borders, dividers, and subtle UI elements. Single RGB value.
</ResponseField>

**Example:**

```typescript theme={null}
tertiary: '148, 163, 184'
```

**Usage:**

* Borders
* Dividers
* Input field outlines
* Decorative elements

## Button Text Color

<ResponseField name="buttonTextColor" type="string">
  Text color specifically for buttons. Overrides the primary text color for button labels.
</ResponseField>

**Example:**

```typescript theme={null}
buttonTextColor: '255, 255, 255'
```

## Status Colors

Status colors are used for displaying different states like warnings, errors, and success messages. Each status color has foreground (text) and background values.

### Warning Colors

<ResponseField name="warning" type="StatusColor">
  Warning color with foreground (text) and background values.
</ResponseField>

```typescript theme={null}
warning: {
  Foreground: '234, 179, 8',   // Warning text color (yellow/amber)
  Background: '254, 252, 232'  // Warning background color (light yellow)
}
```

### Error Colors

<ResponseField name="error" type="StatusColor">
  Error color with foreground (text) and background values.
</ResponseField>

```typescript theme={null}
error: {
  Foreground: '239, 68, 68',   // Error text color (red)
  Background: '254, 242, 242'  // Error background color (light red)
}
```

### Success Colors

<ResponseField name="success" type="StatusColor">
  Success color with foreground (text) and background values.
</ResponseField>

```typescript theme={null}
success: {
  Foreground: '34, 197, 94',   // Success text color (green)
  Background: '240, 253, 244'  // Success background color (light green)
}
```

## Color Format Requirements

<Warning>
  **Important**: All colors must be in RGB format **without** the `rgb()` wrapper. Use `'99, 102, 241'` instead of `'rgb(99, 102, 241)'`.
</Warning>

The widget internally handles the color formatting, so you only need to provide the numeric RGB values as strings.

**Correct Format:**

```typescript theme={null}
primary: {
  DEFAULT: '99, 102, 241',
  '500': '99, 102, 241',
  // ...
}
```

**Incorrect Format:**

```typescript theme={null}
primary: {
  DEFAULT: 'rgb(99, 102, 241)',     // ❌ Don't include rgb()
  '500': '#6366f1',                 // ❌ Don't use hex
  // ...
}
```

## Complete Color Configuration Example

```typescript theme={null}
const colorTheme = {
  // Primary palette
  primary: {
    DEFAULT: '99, 102, 241',
    '100': '224, 231, 255',
    '200': '199, 210, 254',
    '300': '165, 180, 252',
    '400': '129, 140, 248',
    '500': '99, 102, 241',
    '600': '79, 70, 229',
    '700': '67, 56, 202',
    '800': '55, 48, 163',
    '900': '49, 46, 129',
    'text': '255, 255, 255',
  },

  // Secondary palette
  secondary: {
    DEFAULT: '30, 41, 59',
    '100': '241, 245, 249',
    '200': '226, 232, 240',
    '300': '203, 213, 225',
    '400': '148, 163, 184',
    '500': '100, 116, 139',
    '600': '71, 85, 105',
    '700': '51, 65, 85',
    '800': '30, 41, 59',
    '900': '15, 23, 42',
    'text': '148, 163, 184',
  },

  // Single colors
  tertiary: '148, 163, 184',
  buttonTextColor: '255, 255, 255',

  // Status colors
  warning: {
    Foreground: '234, 179, 8',
    Background: '254, 252, 232'
  },
  error: {
    Foreground: '239, 68, 68',
    Background: '254, 242, 242'
  },
  success: {
    Foreground: '34, 197, 94',
    Background: '240, 253, 244'
  }
};
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Theme Configuration" icon="gear" href="/integration/UI/Widget/Customization/ThemeConfiguration">
    Configure borders, headers, and other theme elements
  </Card>

  <Card title="Theme Examples" icon="swatchbook" href="/integration/UI/Widget/Customization/ThemeExamples">
    Browse complete theme examples
  </Card>

  <Card title="Test in Playground" icon="flask" href="https://playground.layerswap.io">
    Experiment with colors in real-time
  </Card>

  <Card title="Generate Palettes" icon="palette" href="https://tailwindshades.app/">
    Create color schemes with Tailwind Shades
  </Card>
</CardGroup>