Forgeora Logo
Back to tools

Design Tokens Workspace

SaaS Color Palette Generator

Generate HSL scales and preview variables in clean components. Customize by adding or removing secondary and accent colors.

Configure Brand Colors

Generated Color Scales

Primary Scale

50#ecf2fd
100#d5e1fb
200#abc3f7
300#7ca2f3
400#5284ef
500#2463eb
600#134cc9
700#0e3995
800#0a2767
900#051433
950#030b1c

Secondary Scale

50#f3ecfd
100#e6dafc
200#cab0f8
300#b18af4
400#9560f0
500#7c3bed
600#5b14d7
700#450fa3
800#2e0a6b
900#180538
950#0c031c

Accent Scale

50#fef7eb
100#fdeed3
200#fbdaa2
300#f9c56c
400#f7b23b
500#f59f0a
600#c47f08
700#935f06
800#674304
900#362302
950#1d1301

Live SaaS Component Showcase

See how the generated custom scales blend on layouts simultaneously.

Settings Form

Auto-renew cycle billing

Charge automatically

Interactive Accordion

Custom colors calculate true lightness variations across weights 50 to 950 automatically.

Buttons & Status Pills

CheckedPendingAlert Status

Context Dropdown Menu

Access token updated

Custom scales bind immediately to layout components.

Product Sales Growth

$45,210.80

+14.8%

Magic Border Card

Combines primary, secondary, and accent variables dynamically.

Template Layout

Dynamic Component Systems

Custom Tinted Shadows

Soft shadow
Deep shadow
Glow shadow

Tailwind CSS Config

colors: {
  primary: {
      50: '#ecf2fd',
      100: '#d5e1fb',
      200: '#abc3f7',
      300: '#7ca2f3',
      400: '#5284ef',
      500: '#2463eb',
      600: '#134cc9',
      700: '#0e3995',
      800: '#0a2767',
      900: '#051433',
      950: '#030b1c',
  },
  secondary: {
      50: '#f3ecfd',
      100: '#e6dafc',
      200: '#cab0f8',
      300: '#b18af4',
      400: '#9560f0',
      500: '#7c3bed',
      600: '#5b14d7',
      700: '#450fa3',
      800: '#2e0a6b',
      900: '#180538',
      950: '#0c031c',
  },
  accent: {
      50: '#fef7eb',
      100: '#fdeed3',
      200: '#fbdaa2',
      300: '#f9c56c',
      400: '#f7b23b',
      500: '#f59f0a',
      600: '#c47f08',
      700: '#935f06',
      800: '#674304',
      900: '#362302',
      950: '#1d1301',
  }
}

CSS Custom Properties

/* Primary Scale */
--color-primary-50: #ecf2fd;
--color-primary-100: #d5e1fb;
--color-primary-200: #abc3f7;
--color-primary-300: #7ca2f3;
--color-primary-400: #5284ef;
--color-primary-500: #2463eb;
--color-primary-600: #134cc9;
--color-primary-700: #0e3995;
--color-primary-800: #0a2767;
--color-primary-900: #051433;
--color-primary-950: #030b1c;

/* Secondary Scale */
--color-secondary-50: #f3ecfd;
--color-secondary-100: #e6dafc;
--color-secondary-200: #cab0f8;
--color-secondary-300: #b18af4;
--color-secondary-400: #9560f0;
--color-secondary-500: #7c3bed;
--color-secondary-600: #5b14d7;
--color-secondary-700: #450fa3;
--color-secondary-800: #2e0a6b;
--color-secondary-900: #180538;
--color-secondary-950: #0c031c;

/* Accent Scale */
--color-accent-50: #fef7eb;
--color-accent-100: #fdeed3;
--color-accent-200: #fbdaa2;
--color-accent-300: #f9c56c;
--color-accent-400: #f7b23b;
--color-accent-500: #f59f0a;
--color-accent-600: #c47f08;
--color-accent-700: #935f06;
--color-accent-800: #674304;
--color-accent-900: #362302;
--color-accent-950: #1d1301;