Skip to main content

​
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:

Tailwind Shades Generator

Generate color palettes with 10 shades from a single base color. Ideal for creating consistent primary and secondary color schemes.

​
How to Use Tailwind Shades

  1. Visit 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: 
'99, 102, 241'
Example: 
// 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: 
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: 
export type StatusColor = {
  Foreground: string;  // Text color
  Background: string;  // Background color
}

​
Primary Colors

​
primary
ThemeColor
Primary color palette used for main UI elements. Includes 10 shades (100-900), a DEFAULT value, and a text color.
Example: 
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

​
secondary
ThemeColor
Secondary color palette used for backgrounds, cards, and supporting UI elements. Follows the same structure as primary colors.
Example: 
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

​
tertiary
string
Tertiary color used for borders, dividers, and subtle UI elements. Single RGB value.
Example: 
tertiary: '148, 163, 184'
Usage:
  • Borders
  • Dividers
  • Input field outlines
  • Decorative elements

​
Button Text Color

​
buttonTextColor
string
Text color specifically for buttons. Overrides the primary text color for button labels.
Example: 
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

​
warning
StatusColor
Warning color with foreground (text) and background values.
warning: {
  Foreground: '234, 179, 8',   // Warning text color (yellow/amber)
  Background: '254, 252, 232'  // Warning background color (light yellow)
}

​
Error Colors

​
error
StatusColor
Error color with foreground (text) and background values.
error: {
  Foreground: '239, 68, 68',   // Error text color (red)
  Background: '254, 242, 242'  // Error background color (light red)
}

​
Success Colors

​
success
StatusColor
Success color with foreground (text) and background values.
success: {
  Foreground: '34, 197, 94',   // Success text color (green)
  Background: '240, 253, 244'  // Success background color (light green)
}

​
Color Format Requirements

Important: All colors must be in RGB format without the rgb() wrapper. Use '99, 102, 241' instead of 'rgb(99, 102, 241)'.
The widget internally handles the color formatting, so you only need to provide the numeric RGB values as strings. Correct Format: 
primary: {
  DEFAULT: '99, 102, 241',
  '500': '99, 102, 241',
  // ...
}
Incorrect Format: 
primary: {
  DEFAULT: 'rgb(99, 102, 241)',     // ❌ Don't include rgb()
  '500': '#6366f1',                 // ❌ Don't use hex
  // ...
}

​
Complete Color Configuration Example

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

Theme Configuration

Configure borders, headers, and other theme elements

Theme Examples

Browse complete theme examples

Test in Playground

Experiment with colors in real-time

Generate Palettes

Create color schemes with Tailwind Shades