GradientLive demo.

Pick a brand color. Gradient computes the scales in your browser with the same code as the npm package, checks every promised contrast pair and writes the stylesheet you can copy into your project.

Everything runs in this page. Nothing you enter is sent anywhere.

Colors

Eleven steps, two modesThe number under each swatch is its contrast to the page.

Light mode is measured against white, dark mode against black. Step 500 reaches at least 3:1, step 600 at least 4.5:1 and step 800 at least 7:1, whatever color you pick.

Brand color

Accent color

Examples

Add an accent colorKeep the exact brand color on its closest step

brand

Closest to your color: step 600

Light

Dark

accent

Closest to your color: step 500

Light

Dark

neutral

Light

Dark

Preview

The same classes in both modesNo dark: variant needed.

Both panels use identical markup and the same variables. Only the values change with the mode.

Light

Spring collection

New

Body text in neutral 700 on a tinted surface, links in brand 600. Every pair here passes WCAG AA. Read more

Accent

Notices use the accent scale, with the same steps as the brand.

Dark

Spring collection

New

Body text in neutral 700 on a tinted surface, links in brand 600. Every pair here passes WCAG AA. Read more

Accent

Notices use the accent scale, with the same steps as the brand.

Checks

Contrast checksEvery pair the steps promise.

84 of 84 contrast checks pass.

Export

Copy it into your projectOr generate it with one command.

Same result with the CLI

npx @sweberdev/gradient "#e30613" accent=#0a84ff --format tailwind --out app/gradient.css

/* Generated by @sweberdev/gradient. */
@theme {
  --color-brand-50: oklch(97.98% 0.0098 25.07);
  --color-brand-100: oklch(95.3% 0.0233 27.34);
  --color-brand-200: oklch(91.13% 0.0457 28.02);
  --color-brand-300: oklch(85.44% 0.0791 27.47);
  --color-brand-400: oklch(75.69% 0.1456 28.03);
  --color-brand-500: oklch(67.05% 0.217 28.02);
  --color-brand-600: oklch(57.42% 0.234 27.99);
  --color-brand-700: oklch(50.97% 0.2083 27.99);
  --color-brand-800: oklch(43.95% 0.1796 27.96);
  --color-brand-900: oklch(35.13% 0.1436 27.98);
  --color-brand-950: oklch(27.34% 0.1117 27.91);
  --color-brand-on-50: oklch(27.34% 0.1117 27.91);
  --color-brand-on-100: oklch(27.34% 0.1117 27.91);
  --color-brand-on-200: oklch(27.34% 0.1117 27.91);
  --color-brand-on-300: oklch(27.34% 0.1117 27.91);
  --color-brand-on-400: oklch(27.34% 0.1117 27.91);
  --color-brand-on-500: oklch(27.34% 0.1117 27.91);
  --color-brand-on-600: oklch(100% 0 0);
  --color-brand-on-700: oklch(100% 0 0);
  --color-brand-on-800: oklch(100% 0 0);
  --color-brand-on-900: oklch(100% 0 0);
  --color-brand-on-950: oklch(100% 0 0);
  --color-accent-50: oklch(97.74% 0.0108 256.69);
  --color-accent-100: oklch(95.13% 0.0234 256.1);
  --color-accent-200: oklch(90.57% 0.0463 255.36);
  --color-accent-300: oklch(84.51% 0.0778 255.74);
  --color-accent-400: oklch(74.03% 0.1358 255.87);
  --color-accent-500: oklch(64.81% 0.1908 255.49);
  --color-accent-600: oklch(54.91% 0.1842 255.53);
  --color-accent-700: oklch(48.85% 0.1646 255.64);
  --color-accent-800: oklch(42.13% 0.1416 255.57);
  --color-accent-900: oklch(33.66% 0.1143 255.85);
  --color-accent-950: oklch(26.19% 0.0887 255.79);
  --color-accent-on-50: oklch(26.19% 0.0887 255.79);
  --color-accent-on-100: oklch(26.19% 0.0887 255.79);
  --color-accent-on-200: oklch(26.19% 0.0887 255.79);
  --color-accent-on-300: oklch(26.19% 0.0887 255.79);
  --color-accent-on-400: oklch(26.19% 0.0887 255.79);
  --color-accent-on-500: oklch(26.19% 0.0887 255.79);
  --color-accent-on-600: oklch(100% 0 0);
  --color-accent-on-700: oklch(100% 0 0);
  --color-accent-on-800: oklch(100% 0 0);
  --color-accent-on-900: oklch(100% 0 0);
  --color-accent-on-950: oklch(100% 0 0);
  --color-neutral-50: oklch(97.98% 0.0098 25.07);
  --color-neutral-100: oklch(95.28% 0.0144 28.01);
  --color-neutral-200: oklch(90.74% 0.0146 28.02);
  --color-neutral-300: oklch(84.51% 0.0137 28.88);
  --color-neutral-400: oklch(74.14% 0.014 23.25);
  --color-neutral-500: oklch(64.58% 0.0136 29.9);
  --color-neutral-600: oklch(54.8% 0.0139 23.84);
  --color-neutral-700: oklch(48.47% 0.0147 29.95);
  --color-neutral-800: oklch(41.98% 0.015 23.96);
  --color-neutral-900: oklch(33.54% 0.0145 24.66);
  --color-neutral-950: oklch(26.2% 0.014 25.51);
  --color-neutral-on-50: oklch(26.2% 0.014 25.51);
  --color-neutral-on-100: oklch(26.2% 0.014 25.51);
  --color-neutral-on-200: oklch(26.2% 0.014 25.51);
  --color-neutral-on-300: oklch(26.2% 0.014 25.51);
  --color-neutral-on-400: oklch(26.2% 0.014 25.51);
  --color-neutral-on-500: oklch(26.2% 0.014 25.51);
  --color-neutral-on-600: oklch(100% 0 0);
  --color-neutral-on-700: oklch(100% 0 0);
  --color-neutral-on-800: oklch(100% 0 0);
  --color-neutral-on-900: oklch(100% 0 0);
  --color-neutral-on-950: oklch(100% 0 0);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-brand-50: oklch(15.12% 0.0328 31.25);
    --color-brand-100: oklch(20.5% 0.0659 28.21);
    --color-brand-200: oklch(26.65% 0.1089 27.81);
    --color-brand-300: oklch(32.73% 0.1338 28.07);
    --color-brand-400: oklch(42.51% 0.1738 28);
    --color-brand-500: oklch(51.37% 0.2099 27.91);
    --color-brand-600: oklch(60.87% 0.2345 27.93);
    --color-brand-700: oklch(67.27% 0.215 27.95);
    --color-brand-800: oklch(73.99% 0.1587 28.34);
    --color-brand-900: oklch(82.99% 0.0946 28.05);
    --color-brand-950: oklch(90.5% 0.0492 27.38);
    --color-brand-on-50: oklch(100% 0 0);
    --color-brand-on-100: oklch(100% 0 0);
    --color-brand-on-200: oklch(100% 0 0);
    --color-brand-on-300: oklch(100% 0 0);
    --color-brand-on-400: oklch(100% 0 0);
    --color-brand-on-500: oklch(100% 0 0);
    --color-brand-on-600: oklch(15.12% 0.0328 31.25);
    --color-brand-on-700: oklch(15.12% 0.0328 31.25);
    --color-brand-on-800: oklch(15.12% 0.0328 31.25);
    --color-brand-on-900: oklch(15.12% 0.0328 31.25);
    --color-brand-on-950: oklch(15.12% 0.0328 31.25);
    --color-accent-50: oklch(14.79% 0.0274 255.17);
    --color-accent-100: oklch(19.78% 0.058 256.45);
    --color-accent-200: oklch(25.66% 0.0856 255.35);
    --color-accent-300: oklch(31.5% 0.1051 255.37);
    --color-accent-400: oklch(40.56% 0.1357 255.45);
    --color-accent-500: oklch(49.07% 0.1634 255.31);
    --color-accent-600: oklch(58.73% 0.1966 255.46);
    --color-accent-700: oklch(65.07% 0.1893 255.42);
    --color-accent-800: oklch(72.2% 0.1465 255.58);
    --color-accent-900: oklch(81.94% 0.0918 255.26);
    --color-accent-950: oklch(89.96% 0.0493 255.9);
    --color-accent-on-50: oklch(100% 0 0);
    --color-accent-on-100: oklch(100% 0 0);
    --color-accent-on-200: oklch(100% 0 0);
    --color-accent-on-300: oklch(100% 0 0);
    --color-accent-on-400: oklch(100% 0 0);
    --color-accent-on-500: oklch(100% 0 0);
    --color-accent-on-600: oklch(14.79% 0.0274 255.17);
    --color-accent-on-700: oklch(14.79% 0.0274 255.17);
    --color-accent-on-800: oklch(14.79% 0.0274 255.17);
    --color-accent-on-900: oklch(14.79% 0.0274 255.17);
    --color-accent-on-950: oklch(14.79% 0.0274 255.17);
    --color-neutral-50: oklch(14.92% 0.0129 28.8);
    --color-neutral-100: oklch(20.06% 0.0138 34.39);
    --color-neutral-200: oklch(25.37% 0.0141 25.54);
    --color-neutral-300: oklch(31.43% 0.0136 32.59);
    --color-neutral-400: oklch(40.36% 0.0141 31.15);
    --color-neutral-500: oklch(48.82% 0.0146 29.95);
    --color-neutral-600: oklch(58.2% 0.014 29.92);
    --color-neutral-700: oklch(65% 0.0147 28.91);
    --color-neutral-800: oklch(72.51% 0.0143 28.9);
    --color-neutral-900: oklch(82.33% 0.0138 28.88);
    --color-neutral-950: oklch(90.04% 0.0135 28.87);
    --color-neutral-on-50: oklch(100% 0 0);
    --color-neutral-on-100: oklch(100% 0 0);
    --color-neutral-on-200: oklch(100% 0 0);
    --color-neutral-on-300: oklch(100% 0 0);
    --color-neutral-on-400: oklch(100% 0 0);
    --color-neutral-on-500: oklch(100% 0 0);
    --color-neutral-on-600: oklch(14.92% 0.0129 28.8);
    --color-neutral-on-700: oklch(14.92% 0.0129 28.8);
    --color-neutral-on-800: oklch(14.92% 0.0129 28.8);
    --color-neutral-on-900: oklch(14.92% 0.0129 28.8);
    --color-neutral-on-950: oklch(14.92% 0.0129 28.8);
  }
}

:root.dark, .dark {
  --color-brand-50: oklch(15.12% 0.0328 31.25);
  --color-brand-100: oklch(20.5% 0.0659 28.21);
  --color-brand-200: oklch(26.65% 0.1089 27.81);
  --color-brand-300: oklch(32.73% 0.1338 28.07);
  --color-brand-400: oklch(42.51% 0.1738 28);
  --color-brand-500: oklch(51.37% 0.2099 27.91);
  --color-brand-600: oklch(60.87% 0.2345 27.93);
  --color-brand-700: oklch(67.27% 0.215 27.95);
  --color-brand-800: oklch(73.99% 0.1587 28.34);
  --color-brand-900: oklch(82.99% 0.0946 28.05);
  --color-brand-950: oklch(90.5% 0.0492 27.38);
  --color-brand-on-50: oklch(100% 0 0);
  --color-brand-on-100: oklch(100% 0 0);
  --color-brand-on-200: oklch(100% 0 0);
  --color-brand-on-300: oklch(100% 0 0);
  --color-brand-on-400: oklch(100% 0 0);
  --color-brand-on-500: oklch(100% 0 0);
  --color-brand-on-600: oklch(15.12% 0.0328 31.25);
  --color-brand-on-700: oklch(15.12% 0.0328 31.25);
  --color-brand-on-800: oklch(15.12% 0.0328 31.25);
  --color-brand-on-900: oklch(15.12% 0.0328 31.25);
  --color-brand-on-950: oklch(15.12% 0.0328 31.25);
  --color-accent-50: oklch(14.79% 0.0274 255.17);
  --color-accent-100: oklch(19.78% 0.058 256.45);
  --color-accent-200: oklch(25.66% 0.0856 255.35);
  --color-accent-300: oklch(31.5% 0.1051 255.37);
  --color-accent-400: oklch(40.56% 0.1357 255.45);
  --color-accent-500: oklch(49.07% 0.1634 255.31);
  --color-accent-600: oklch(58.73% 0.1966 255.46);
  --color-accent-700: oklch(65.07% 0.1893 255.42);
  --color-accent-800: oklch(72.2% 0.1465 255.58);
  --color-accent-900: oklch(81.94% 0.0918 255.26);
  --color-accent-950: oklch(89.96% 0.0493 255.9);
  --color-accent-on-50: oklch(100% 0 0);
  --color-accent-on-100: oklch(100% 0 0);
  --color-accent-on-200: oklch(100% 0 0);
  --color-accent-on-300: oklch(100% 0 0);
  --color-accent-on-400: oklch(100% 0 0);
  --color-accent-on-500: oklch(100% 0 0);
  --color-accent-on-600: oklch(14.79% 0.0274 255.17);
  --color-accent-on-700: oklch(14.79% 0.0274 255.17);
  --color-accent-on-800: oklch(14.79% 0.0274 255.17);
  --color-accent-on-900: oklch(14.79% 0.0274 255.17);
  --color-accent-on-950: oklch(14.79% 0.0274 255.17);
  --color-neutral-50: oklch(14.92% 0.0129 28.8);
  --color-neutral-100: oklch(20.06% 0.0138 34.39);
  --color-neutral-200: oklch(25.37% 0.0141 25.54);
  --color-neutral-300: oklch(31.43% 0.0136 32.59);
  --color-neutral-400: oklch(40.36% 0.0141 31.15);
  --color-neutral-500: oklch(48.82% 0.0146 29.95);
  --color-neutral-600: oklch(58.2% 0.014 29.92);
  --color-neutral-700: oklch(65% 0.0147 28.91);
  --color-neutral-800: oklch(72.51% 0.0143 28.9);
  --color-neutral-900: oklch(82.33% 0.0138 28.88);
  --color-neutral-950: oklch(90.04% 0.0135 28.87);
  --color-neutral-on-50: oklch(100% 0 0);
  --color-neutral-on-100: oklch(100% 0 0);
  --color-neutral-on-200: oklch(100% 0 0);
  --color-neutral-on-300: oklch(100% 0 0);
  --color-neutral-on-400: oklch(100% 0 0);
  --color-neutral-on-500: oklch(100% 0 0);
  --color-neutral-on-600: oklch(14.92% 0.0129 28.8);
  --color-neutral-on-700: oklch(14.92% 0.0129 28.8);
  --color-neutral-on-800: oklch(14.92% 0.0129 28.8);
  --color-neutral-on-900: oklch(14.92% 0.0129 28.8);
  --color-neutral-on-950: oklch(14.92% 0.0129 28.8);
}

/* Generated by @sweberdev/gradient. */
:root {
  --color-brand-50: oklch(97.98% 0.0098 25.07);
  --color-brand-100: oklch(95.3% 0.0233 27.34);
  --color-brand-200: oklch(91.13% 0.0457 28.02);
  --color-brand-300: oklch(85.44% 0.0791 27.47);
  --color-brand-400: oklch(75.69% 0.1456 28.03);
  --color-brand-500: oklch(67.05% 0.217 28.02);
  --color-brand-600: oklch(57.42% 0.234 27.99);
  --color-brand-700: oklch(50.97% 0.2083 27.99);
  --color-brand-800: oklch(43.95% 0.1796 27.96);
  --color-brand-900: oklch(35.13% 0.1436 27.98);
  --color-brand-950: oklch(27.34% 0.1117 27.91);
  --color-brand-on-50: oklch(27.34% 0.1117 27.91);
  --color-brand-on-100: oklch(27.34% 0.1117 27.91);
  --color-brand-on-200: oklch(27.34% 0.1117 27.91);
  --color-brand-on-300: oklch(27.34% 0.1117 27.91);
  --color-brand-on-400: oklch(27.34% 0.1117 27.91);
  --color-brand-on-500: oklch(27.34% 0.1117 27.91);
  --color-brand-on-600: oklch(100% 0 0);
  --color-brand-on-700: oklch(100% 0 0);
  --color-brand-on-800: oklch(100% 0 0);
  --color-brand-on-900: oklch(100% 0 0);
  --color-brand-on-950: oklch(100% 0 0);
  --color-accent-50: oklch(97.74% 0.0108 256.69);
  --color-accent-100: oklch(95.13% 0.0234 256.1);
  --color-accent-200: oklch(90.57% 0.0463 255.36);
  --color-accent-300: oklch(84.51% 0.0778 255.74);
  --color-accent-400: oklch(74.03% 0.1358 255.87);
  --color-accent-500: oklch(64.81% 0.1908 255.49);
  --color-accent-600: oklch(54.91% 0.1842 255.53);
  --color-accent-700: oklch(48.85% 0.1646 255.64);
  --color-accent-800: oklch(42.13% 0.1416 255.57);
  --color-accent-900: oklch(33.66% 0.1143 255.85);
  --color-accent-950: oklch(26.19% 0.0887 255.79);
  --color-accent-on-50: oklch(26.19% 0.0887 255.79);
  --color-accent-on-100: oklch(26.19% 0.0887 255.79);
  --color-accent-on-200: oklch(26.19% 0.0887 255.79);
  --color-accent-on-300: oklch(26.19% 0.0887 255.79);
  --color-accent-on-400: oklch(26.19% 0.0887 255.79);
  --color-accent-on-500: oklch(26.19% 0.0887 255.79);
  --color-accent-on-600: oklch(100% 0 0);
  --color-accent-on-700: oklch(100% 0 0);
  --color-accent-on-800: oklch(100% 0 0);
  --color-accent-on-900: oklch(100% 0 0);
  --color-accent-on-950: oklch(100% 0 0);
  --color-neutral-50: oklch(97.98% 0.0098 25.07);
  --color-neutral-100: oklch(95.28% 0.0144 28.01);
  --color-neutral-200: oklch(90.74% 0.0146 28.02);
  --color-neutral-300: oklch(84.51% 0.0137 28.88);
  --color-neutral-400: oklch(74.14% 0.014 23.25);
  --color-neutral-500: oklch(64.58% 0.0136 29.9);
  --color-neutral-600: oklch(54.8% 0.0139 23.84);
  --color-neutral-700: oklch(48.47% 0.0147 29.95);
  --color-neutral-800: oklch(41.98% 0.015 23.96);
  --color-neutral-900: oklch(33.54% 0.0145 24.66);
  --color-neutral-950: oklch(26.2% 0.014 25.51);
  --color-neutral-on-50: oklch(26.2% 0.014 25.51);
  --color-neutral-on-100: oklch(26.2% 0.014 25.51);
  --color-neutral-on-200: oklch(26.2% 0.014 25.51);
  --color-neutral-on-300: oklch(26.2% 0.014 25.51);
  --color-neutral-on-400: oklch(26.2% 0.014 25.51);
  --color-neutral-on-500: oklch(26.2% 0.014 25.51);
  --color-neutral-on-600: oklch(100% 0 0);
  --color-neutral-on-700: oklch(100% 0 0);
  --color-neutral-on-800: oklch(100% 0 0);
  --color-neutral-on-900: oklch(100% 0 0);
  --color-neutral-on-950: oklch(100% 0 0);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-brand-50: oklch(15.12% 0.0328 31.25);
    --color-brand-100: oklch(20.5% 0.0659 28.21);
    --color-brand-200: oklch(26.65% 0.1089 27.81);
    --color-brand-300: oklch(32.73% 0.1338 28.07);
    --color-brand-400: oklch(42.51% 0.1738 28);
    --color-brand-500: oklch(51.37% 0.2099 27.91);
    --color-brand-600: oklch(60.87% 0.2345 27.93);
    --color-brand-700: oklch(67.27% 0.215 27.95);
    --color-brand-800: oklch(73.99% 0.1587 28.34);
    --color-brand-900: oklch(82.99% 0.0946 28.05);
    --color-brand-950: oklch(90.5% 0.0492 27.38);
    --color-brand-on-50: oklch(100% 0 0);
    --color-brand-on-100: oklch(100% 0 0);
    --color-brand-on-200: oklch(100% 0 0);
    --color-brand-on-300: oklch(100% 0 0);
    --color-brand-on-400: oklch(100% 0 0);
    --color-brand-on-500: oklch(100% 0 0);
    --color-brand-on-600: oklch(15.12% 0.0328 31.25);
    --color-brand-on-700: oklch(15.12% 0.0328 31.25);
    --color-brand-on-800: oklch(15.12% 0.0328 31.25);
    --color-brand-on-900: oklch(15.12% 0.0328 31.25);
    --color-brand-on-950: oklch(15.12% 0.0328 31.25);
    --color-accent-50: oklch(14.79% 0.0274 255.17);
    --color-accent-100: oklch(19.78% 0.058 256.45);
    --color-accent-200: oklch(25.66% 0.0856 255.35);
    --color-accent-300: oklch(31.5% 0.1051 255.37);
    --color-accent-400: oklch(40.56% 0.1357 255.45);
    --color-accent-500: oklch(49.07% 0.1634 255.31);
    --color-accent-600: oklch(58.73% 0.1966 255.46);
    --color-accent-700: oklch(65.07% 0.1893 255.42);
    --color-accent-800: oklch(72.2% 0.1465 255.58);
    --color-accent-900: oklch(81.94% 0.0918 255.26);
    --color-accent-950: oklch(89.96% 0.0493 255.9);
    --color-accent-on-50: oklch(100% 0 0);
    --color-accent-on-100: oklch(100% 0 0);
    --color-accent-on-200: oklch(100% 0 0);
    --color-accent-on-300: oklch(100% 0 0);
    --color-accent-on-400: oklch(100% 0 0);
    --color-accent-on-500: oklch(100% 0 0);
    --color-accent-on-600: oklch(14.79% 0.0274 255.17);
    --color-accent-on-700: oklch(14.79% 0.0274 255.17);
    --color-accent-on-800: oklch(14.79% 0.0274 255.17);
    --color-accent-on-900: oklch(14.79% 0.0274 255.17);
    --color-accent-on-950: oklch(14.79% 0.0274 255.17);
    --color-neutral-50: oklch(14.92% 0.0129 28.8);
    --color-neutral-100: oklch(20.06% 0.0138 34.39);
    --color-neutral-200: oklch(25.37% 0.0141 25.54);
    --color-neutral-300: oklch(31.43% 0.0136 32.59);
    --color-neutral-400: oklch(40.36% 0.0141 31.15);
    --color-neutral-500: oklch(48.82% 0.0146 29.95);
    --color-neutral-600: oklch(58.2% 0.014 29.92);
    --color-neutral-700: oklch(65% 0.0147 28.91);
    --color-neutral-800: oklch(72.51% 0.0143 28.9);
    --color-neutral-900: oklch(82.33% 0.0138 28.88);
    --color-neutral-950: oklch(90.04% 0.0135 28.87);
    --color-neutral-on-50: oklch(100% 0 0);
    --color-neutral-on-100: oklch(100% 0 0);
    --color-neutral-on-200: oklch(100% 0 0);
    --color-neutral-on-300: oklch(100% 0 0);
    --color-neutral-on-400: oklch(100% 0 0);
    --color-neutral-on-500: oklch(100% 0 0);
    --color-neutral-on-600: oklch(14.92% 0.0129 28.8);
    --color-neutral-on-700: oklch(14.92% 0.0129 28.8);
    --color-neutral-on-800: oklch(14.92% 0.0129 28.8);
    --color-neutral-on-900: oklch(14.92% 0.0129 28.8);
    --color-neutral-on-950: oklch(14.92% 0.0129 28.8);
  }
}

:root.dark, .dark {
  --color-brand-50: oklch(15.12% 0.0328 31.25);
  --color-brand-100: oklch(20.5% 0.0659 28.21);
  --color-brand-200: oklch(26.65% 0.1089 27.81);
  --color-brand-300: oklch(32.73% 0.1338 28.07);
  --color-brand-400: oklch(42.51% 0.1738 28);
  --color-brand-500: oklch(51.37% 0.2099 27.91);
  --color-brand-600: oklch(60.87% 0.2345 27.93);
  --color-brand-700: oklch(67.27% 0.215 27.95);
  --color-brand-800: oklch(73.99% 0.1587 28.34);
  --color-brand-900: oklch(82.99% 0.0946 28.05);
  --color-brand-950: oklch(90.5% 0.0492 27.38);
  --color-brand-on-50: oklch(100% 0 0);
  --color-brand-on-100: oklch(100% 0 0);
  --color-brand-on-200: oklch(100% 0 0);
  --color-brand-on-300: oklch(100% 0 0);
  --color-brand-on-400: oklch(100% 0 0);
  --color-brand-on-500: oklch(100% 0 0);
  --color-brand-on-600: oklch(15.12% 0.0328 31.25);
  --color-brand-on-700: oklch(15.12% 0.0328 31.25);
  --color-brand-on-800: oklch(15.12% 0.0328 31.25);
  --color-brand-on-900: oklch(15.12% 0.0328 31.25);
  --color-brand-on-950: oklch(15.12% 0.0328 31.25);
  --color-accent-50: oklch(14.79% 0.0274 255.17);
  --color-accent-100: oklch(19.78% 0.058 256.45);
  --color-accent-200: oklch(25.66% 0.0856 255.35);
  --color-accent-300: oklch(31.5% 0.1051 255.37);
  --color-accent-400: oklch(40.56% 0.1357 255.45);
  --color-accent-500: oklch(49.07% 0.1634 255.31);
  --color-accent-600: oklch(58.73% 0.1966 255.46);
  --color-accent-700: oklch(65.07% 0.1893 255.42);
  --color-accent-800: oklch(72.2% 0.1465 255.58);
  --color-accent-900: oklch(81.94% 0.0918 255.26);
  --color-accent-950: oklch(89.96% 0.0493 255.9);
  --color-accent-on-50: oklch(100% 0 0);
  --color-accent-on-100: oklch(100% 0 0);
  --color-accent-on-200: oklch(100% 0 0);
  --color-accent-on-300: oklch(100% 0 0);
  --color-accent-on-400: oklch(100% 0 0);
  --color-accent-on-500: oklch(100% 0 0);
  --color-accent-on-600: oklch(14.79% 0.0274 255.17);
  --color-accent-on-700: oklch(14.79% 0.0274 255.17);
  --color-accent-on-800: oklch(14.79% 0.0274 255.17);
  --color-accent-on-900: oklch(14.79% 0.0274 255.17);
  --color-accent-on-950: oklch(14.79% 0.0274 255.17);
  --color-neutral-50: oklch(14.92% 0.0129 28.8);
  --color-neutral-100: oklch(20.06% 0.0138 34.39);
  --color-neutral-200: oklch(25.37% 0.0141 25.54);
  --color-neutral-300: oklch(31.43% 0.0136 32.59);
  --color-neutral-400: oklch(40.36% 0.0141 31.15);
  --color-neutral-500: oklch(48.82% 0.0146 29.95);
  --color-neutral-600: oklch(58.2% 0.014 29.92);
  --color-neutral-700: oklch(65% 0.0147 28.91);
  --color-neutral-800: oklch(72.51% 0.0143 28.9);
  --color-neutral-900: oklch(82.33% 0.0138 28.88);
  --color-neutral-950: oklch(90.04% 0.0135 28.87);
  --color-neutral-on-50: oklch(100% 0 0);
  --color-neutral-on-100: oklch(100% 0 0);
  --color-neutral-on-200: oklch(100% 0 0);
  --color-neutral-on-300: oklch(100% 0 0);
  --color-neutral-on-400: oklch(100% 0 0);
  --color-neutral-on-500: oklch(100% 0 0);
  --color-neutral-on-600: oklch(14.92% 0.0129 28.8);
  --color-neutral-on-700: oklch(14.92% 0.0129 28.8);
  --color-neutral-on-800: oklch(14.92% 0.0129 28.8);
  --color-neutral-on-900: oklch(14.92% 0.0129 28.8);
  --color-neutral-on-950: oklch(14.92% 0.0129 28.8);
}

/* Generated by @sweberdev/gradient. */
:root {
  --color-brand-50: 97.98% 0.0098 25.07;
  --color-brand-100: 95.3% 0.0233 27.34;
  --color-brand-200: 91.13% 0.0457 28.02;
  --color-brand-300: 85.44% 0.0791 27.47;
  --color-brand-400: 75.69% 0.1456 28.03;
  --color-brand-500: 67.05% 0.217 28.02;
  --color-brand-600: 57.42% 0.234 27.99;
  --color-brand-700: 50.97% 0.2083 27.99;
  --color-brand-800: 43.95% 0.1796 27.96;
  --color-brand-900: 35.13% 0.1436 27.98;
  --color-brand-950: 27.34% 0.1117 27.91;
  --color-brand-on-50: 27.34% 0.1117 27.91;
  --color-brand-on-100: 27.34% 0.1117 27.91;
  --color-brand-on-200: 27.34% 0.1117 27.91;
  --color-brand-on-300: 27.34% 0.1117 27.91;
  --color-brand-on-400: 27.34% 0.1117 27.91;
  --color-brand-on-500: 27.34% 0.1117 27.91;
  --color-brand-on-600: 100% 0 0;
  --color-brand-on-700: 100% 0 0;
  --color-brand-on-800: 100% 0 0;
  --color-brand-on-900: 100% 0 0;
  --color-brand-on-950: 100% 0 0;
  --color-accent-50: 97.74% 0.0108 256.69;
  --color-accent-100: 95.13% 0.0234 256.1;
  --color-accent-200: 90.57% 0.0463 255.36;
  --color-accent-300: 84.51% 0.0778 255.74;
  --color-accent-400: 74.03% 0.1358 255.87;
  --color-accent-500: 64.81% 0.1908 255.49;
  --color-accent-600: 54.91% 0.1842 255.53;
  --color-accent-700: 48.85% 0.1646 255.64;
  --color-accent-800: 42.13% 0.1416 255.57;
  --color-accent-900: 33.66% 0.1143 255.85;
  --color-accent-950: 26.19% 0.0887 255.79;
  --color-accent-on-50: 26.19% 0.0887 255.79;
  --color-accent-on-100: 26.19% 0.0887 255.79;
  --color-accent-on-200: 26.19% 0.0887 255.79;
  --color-accent-on-300: 26.19% 0.0887 255.79;
  --color-accent-on-400: 26.19% 0.0887 255.79;
  --color-accent-on-500: 26.19% 0.0887 255.79;
  --color-accent-on-600: 100% 0 0;
  --color-accent-on-700: 100% 0 0;
  --color-accent-on-800: 100% 0 0;
  --color-accent-on-900: 100% 0 0;
  --color-accent-on-950: 100% 0 0;
  --color-neutral-50: 97.98% 0.0098 25.07;
  --color-neutral-100: 95.28% 0.0144 28.01;
  --color-neutral-200: 90.74% 0.0146 28.02;
  --color-neutral-300: 84.51% 0.0137 28.88;
  --color-neutral-400: 74.14% 0.014 23.25;
  --color-neutral-500: 64.58% 0.0136 29.9;
  --color-neutral-600: 54.8% 0.0139 23.84;
  --color-neutral-700: 48.47% 0.0147 29.95;
  --color-neutral-800: 41.98% 0.015 23.96;
  --color-neutral-900: 33.54% 0.0145 24.66;
  --color-neutral-950: 26.2% 0.014 25.51;
  --color-neutral-on-50: 26.2% 0.014 25.51;
  --color-neutral-on-100: 26.2% 0.014 25.51;
  --color-neutral-on-200: 26.2% 0.014 25.51;
  --color-neutral-on-300: 26.2% 0.014 25.51;
  --color-neutral-on-400: 26.2% 0.014 25.51;
  --color-neutral-on-500: 26.2% 0.014 25.51;
  --color-neutral-on-600: 100% 0 0;
  --color-neutral-on-700: 100% 0 0;
  --color-neutral-on-800: 100% 0 0;
  --color-neutral-on-900: 100% 0 0;
  --color-neutral-on-950: 100% 0 0;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-brand-50: 15.12% 0.0328 31.25;
    --color-brand-100: 20.5% 0.0659 28.21;
    --color-brand-200: 26.65% 0.1089 27.81;
    --color-brand-300: 32.73% 0.1338 28.07;
    --color-brand-400: 42.51% 0.1738 28;
    --color-brand-500: 51.37% 0.2099 27.91;
    --color-brand-600: 60.87% 0.2345 27.93;
    --color-brand-700: 67.27% 0.215 27.95;
    --color-brand-800: 73.99% 0.1587 28.34;
    --color-brand-900: 82.99% 0.0946 28.05;
    --color-brand-950: 90.5% 0.0492 27.38;
    --color-brand-on-50: 100% 0 0;
    --color-brand-on-100: 100% 0 0;
    --color-brand-on-200: 100% 0 0;
    --color-brand-on-300: 100% 0 0;
    --color-brand-on-400: 100% 0 0;
    --color-brand-on-500: 100% 0 0;
    --color-brand-on-600: 15.12% 0.0328 31.25;
    --color-brand-on-700: 15.12% 0.0328 31.25;
    --color-brand-on-800: 15.12% 0.0328 31.25;
    --color-brand-on-900: 15.12% 0.0328 31.25;
    --color-brand-on-950: 15.12% 0.0328 31.25;
    --color-accent-50: 14.79% 0.0274 255.17;
    --color-accent-100: 19.78% 0.058 256.45;
    --color-accent-200: 25.66% 0.0856 255.35;
    --color-accent-300: 31.5% 0.1051 255.37;
    --color-accent-400: 40.56% 0.1357 255.45;
    --color-accent-500: 49.07% 0.1634 255.31;
    --color-accent-600: 58.73% 0.1966 255.46;
    --color-accent-700: 65.07% 0.1893 255.42;
    --color-accent-800: 72.2% 0.1465 255.58;
    --color-accent-900: 81.94% 0.0918 255.26;
    --color-accent-950: 89.96% 0.0493 255.9;
    --color-accent-on-50: 100% 0 0;
    --color-accent-on-100: 100% 0 0;
    --color-accent-on-200: 100% 0 0;
    --color-accent-on-300: 100% 0 0;
    --color-accent-on-400: 100% 0 0;
    --color-accent-on-500: 100% 0 0;
    --color-accent-on-600: 14.79% 0.0274 255.17;
    --color-accent-on-700: 14.79% 0.0274 255.17;
    --color-accent-on-800: 14.79% 0.0274 255.17;
    --color-accent-on-900: 14.79% 0.0274 255.17;
    --color-accent-on-950: 14.79% 0.0274 255.17;
    --color-neutral-50: 14.92% 0.0129 28.8;
    --color-neutral-100: 20.06% 0.0138 34.39;
    --color-neutral-200: 25.37% 0.0141 25.54;
    --color-neutral-300: 31.43% 0.0136 32.59;
    --color-neutral-400: 40.36% 0.0141 31.15;
    --color-neutral-500: 48.82% 0.0146 29.95;
    --color-neutral-600: 58.2% 0.014 29.92;
    --color-neutral-700: 65% 0.0147 28.91;
    --color-neutral-800: 72.51% 0.0143 28.9;
    --color-neutral-900: 82.33% 0.0138 28.88;
    --color-neutral-950: 90.04% 0.0135 28.87;
    --color-neutral-on-50: 100% 0 0;
    --color-neutral-on-100: 100% 0 0;
    --color-neutral-on-200: 100% 0 0;
    --color-neutral-on-300: 100% 0 0;
    --color-neutral-on-400: 100% 0 0;
    --color-neutral-on-500: 100% 0 0;
    --color-neutral-on-600: 14.92% 0.0129 28.8;
    --color-neutral-on-700: 14.92% 0.0129 28.8;
    --color-neutral-on-800: 14.92% 0.0129 28.8;
    --color-neutral-on-900: 14.92% 0.0129 28.8;
    --color-neutral-on-950: 14.92% 0.0129 28.8;
  }
}

:root.dark, .dark {
  --color-brand-50: 15.12% 0.0328 31.25;
  --color-brand-100: 20.5% 0.0659 28.21;
  --color-brand-200: 26.65% 0.1089 27.81;
  --color-brand-300: 32.73% 0.1338 28.07;
  --color-brand-400: 42.51% 0.1738 28;
  --color-brand-500: 51.37% 0.2099 27.91;
  --color-brand-600: 60.87% 0.2345 27.93;
  --color-brand-700: 67.27% 0.215 27.95;
  --color-brand-800: 73.99% 0.1587 28.34;
  --color-brand-900: 82.99% 0.0946 28.05;
  --color-brand-950: 90.5% 0.0492 27.38;
  --color-brand-on-50: 100% 0 0;
  --color-brand-on-100: 100% 0 0;
  --color-brand-on-200: 100% 0 0;
  --color-brand-on-300: 100% 0 0;
  --color-brand-on-400: 100% 0 0;
  --color-brand-on-500: 100% 0 0;
  --color-brand-on-600: 15.12% 0.0328 31.25;
  --color-brand-on-700: 15.12% 0.0328 31.25;
  --color-brand-on-800: 15.12% 0.0328 31.25;
  --color-brand-on-900: 15.12% 0.0328 31.25;
  --color-brand-on-950: 15.12% 0.0328 31.25;
  --color-accent-50: 14.79% 0.0274 255.17;
  --color-accent-100: 19.78% 0.058 256.45;
  --color-accent-200: 25.66% 0.0856 255.35;
  --color-accent-300: 31.5% 0.1051 255.37;
  --color-accent-400: 40.56% 0.1357 255.45;
  --color-accent-500: 49.07% 0.1634 255.31;
  --color-accent-600: 58.73% 0.1966 255.46;
  --color-accent-700: 65.07% 0.1893 255.42;
  --color-accent-800: 72.2% 0.1465 255.58;
  --color-accent-900: 81.94% 0.0918 255.26;
  --color-accent-950: 89.96% 0.0493 255.9;
  --color-accent-on-50: 100% 0 0;
  --color-accent-on-100: 100% 0 0;
  --color-accent-on-200: 100% 0 0;
  --color-accent-on-300: 100% 0 0;
  --color-accent-on-400: 100% 0 0;
  --color-accent-on-500: 100% 0 0;
  --color-accent-on-600: 14.79% 0.0274 255.17;
  --color-accent-on-700: 14.79% 0.0274 255.17;
  --color-accent-on-800: 14.79% 0.0274 255.17;
  --color-accent-on-900: 14.79% 0.0274 255.17;
  --color-accent-on-950: 14.79% 0.0274 255.17;
  --color-neutral-50: 14.92% 0.0129 28.8;
  --color-neutral-100: 20.06% 0.0138 34.39;
  --color-neutral-200: 25.37% 0.0141 25.54;
  --color-neutral-300: 31.43% 0.0136 32.59;
  --color-neutral-400: 40.36% 0.0141 31.15;
  --color-neutral-500: 48.82% 0.0146 29.95;
  --color-neutral-600: 58.2% 0.014 29.92;
  --color-neutral-700: 65% 0.0147 28.91;
  --color-neutral-800: 72.51% 0.0143 28.9;
  --color-neutral-900: 82.33% 0.0138 28.88;
  --color-neutral-950: 90.04% 0.0135 28.87;
  --color-neutral-on-50: 100% 0 0;
  --color-neutral-on-100: 100% 0 0;
  --color-neutral-on-200: 100% 0 0;
  --color-neutral-on-300: 100% 0 0;
  --color-neutral-on-400: 100% 0 0;
  --color-neutral-on-500: 100% 0 0;
  --color-neutral-on-600: 14.92% 0.0129 28.8;
  --color-neutral-on-700: 14.92% 0.0129 28.8;
  --color-neutral-on-800: 14.92% 0.0129 28.8;
  --color-neutral-on-900: 14.92% 0.0129 28.8;
  --color-neutral-on-950: 14.92% 0.0129 28.8;
}

// tailwind.config.js → theme.extend.colors
{
  "brand": {
    "50": "oklch(var(--color-brand-50) / <alpha-value>)",
    "100": "oklch(var(--color-brand-100) / <alpha-value>)",
    "200": "oklch(var(--color-brand-200) / <alpha-value>)",
    "300": "oklch(var(--color-brand-300) / <alpha-value>)",
    "400": "oklch(var(--color-brand-400) / <alpha-value>)",
    "500": "oklch(var(--color-brand-500) / <alpha-value>)",
    "600": "oklch(var(--color-brand-600) / <alpha-value>)",
    "700": "oklch(var(--color-brand-700) / <alpha-value>)",
    "800": "oklch(var(--color-brand-800) / <alpha-value>)",
    "900": "oklch(var(--color-brand-900) / <alpha-value>)",
    "950": "oklch(var(--color-brand-950) / <alpha-value>)",
    "on-50": "oklch(var(--color-brand-on-50) / <alpha-value>)",
    "on-100": "oklch(var(--color-brand-on-100) / <alpha-value>)",
    "on-200": "oklch(var(--color-brand-on-200) / <alpha-value>)",
    "on-300": "oklch(var(--color-brand-on-300) / <alpha-value>)",
    "on-400": "oklch(var(--color-brand-on-400) / <alpha-value>)",
    "on-500": "oklch(var(--color-brand-on-500) / <alpha-value>)",
    "on-600": "oklch(var(--color-brand-on-600) / <alpha-value>)",
    "on-700": "oklch(var(--color-brand-on-700) / <alpha-value>)",
    "on-800": "oklch(var(--color-brand-on-800) / <alpha-value>)",
    "on-900": "oklch(var(--color-brand-on-900) / <alpha-value>)",
    "on-950": "oklch(var(--color-brand-on-950) / <alpha-value>)"
  },
  "accent": {
    "50": "oklch(var(--color-accent-50) / <alpha-value>)",
    "100": "oklch(var(--color-accent-100) / <alpha-value>)",
    "200": "oklch(var(--color-accent-200) / <alpha-value>)",
    "300": "oklch(var(--color-accent-300) / <alpha-value>)",
    "400": "oklch(var(--color-accent-400) / <alpha-value>)",
    "500": "oklch(var(--color-accent-500) / <alpha-value>)",
    "600": "oklch(var(--color-accent-600) / <alpha-value>)",
    "700": "oklch(var(--color-accent-700) / <alpha-value>)",
    "800": "oklch(var(--color-accent-800) / <alpha-value>)",
    "900": "oklch(var(--color-accent-900) / <alpha-value>)",
    "950": "oklch(var(--color-accent-950) / <alpha-value>)",
    "on-50": "oklch(var(--color-accent-on-50) / <alpha-value>)",
    "on-100": "oklch(var(--color-accent-on-100) / <alpha-value>)",
    "on-200": "oklch(var(--color-accent-on-200) / <alpha-value>)",
    "on-300": "oklch(var(--color-accent-on-300) / <alpha-value>)",
    "on-400": "oklch(var(--color-accent-on-400) / <alpha-value>)",
    "on-500": "oklch(var(--color-accent-on-500) / <alpha-value>)",
    "on-600": "oklch(var(--color-accent-on-600) / <alpha-value>)",
    "on-700": "oklch(var(--color-accent-on-700) / <alpha-value>)",
    "on-800": "oklch(var(--color-accent-on-800) / <alpha-value>)",
    "on-900": "oklch(var(--color-accent-on-900) / <alpha-value>)",
    "on-950": "oklch(var(--color-accent-on-950) / <alpha-value>)"
  },
  "neutral": {
    "50": "oklch(var(--color-neutral-50) / <alpha-value>)",
    "100": "oklch(var(--color-neutral-100) / <alpha-value>)",
    "200": "oklch(var(--color-neutral-200) / <alpha-value>)",
    "300": "oklch(var(--color-neutral-300) / <alpha-value>)",
    "400": "oklch(var(--color-neutral-400) / <alpha-value>)",
    "500": "oklch(var(--color-neutral-500) / <alpha-value>)",
    "600": "oklch(var(--color-neutral-600) / <alpha-value>)",
    "700": "oklch(var(--color-neutral-700) / <alpha-value>)",
    "800": "oklch(var(--color-neutral-800) / <alpha-value>)",
    "900": "oklch(var(--color-neutral-900) / <alpha-value>)",
    "950": "oklch(var(--color-neutral-950) / <alpha-value>)",
    "on-50": "oklch(var(--color-neutral-on-50) / <alpha-value>)",
    "on-100": "oklch(var(--color-neutral-on-100) / <alpha-value>)",
    "on-200": "oklch(var(--color-neutral-on-200) / <alpha-value>)",
    "on-300": "oklch(var(--color-neutral-on-300) / <alpha-value>)",
    "on-400": "oklch(var(--color-neutral-on-400) / <alpha-value>)",
    "on-500": "oklch(var(--color-neutral-on-500) / <alpha-value>)",
    "on-600": "oklch(var(--color-neutral-on-600) / <alpha-value>)",
    "on-700": "oklch(var(--color-neutral-on-700) / <alpha-value>)",
    "on-800": "oklch(var(--color-neutral-on-800) / <alpha-value>)",
    "on-900": "oklch(var(--color-neutral-on-900) / <alpha-value>)",
    "on-950": "oklch(var(--color-neutral-on-950) / <alpha-value>)"
  }
}

{
  "light": {
    "brand": {
      "50": {
        "$type": "color",
        "$value": "#fff6f5"
      },
      "100": {
        "$type": "color",
        "$value": "#ffeae7"
      },
      "200": {
        "$type": "color",
        "$value": "#ffd7d1"
      },
      "300": {
        "$type": "color",
        "$value": "#ffbcb3"
      },
      "400": {
        "$type": "color",
        "$value": "#ff897b"
      },
      "500": {
        "$type": "color",
        "$value": "#ff4c41"
      },
      "600": {
        "$type": "color",
        "$value": "#e20211"
      },
      "700": {
        "$type": "color",
        "$value": "#c1000c"
      },
      "800": {
        "$type": "color",
        "$value": "#9e0008"
      },
      "900": {
        "$type": "color",
        "$value": "#740004"
      },
      "950": {
        "$type": "color",
        "$value": "#510002"
      },
      "on-50": {
        "$type": "color",
        "$value": "#510002"
      },
      "on-100": {
        "$type": "color",
        "$value": "#510002"
      },
      "on-200": {
        "$type": "color",
        "$value": "#510002"
      },
      "on-300": {
        "$type": "color",
        "$value": "#510002"
      },
      "on-400": {
        "$type": "color",
        "$value": "#510002"
      },
      "on-500": {
        "$type": "color",
        "$value": "#510002"
      },
      "on-600": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-700": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-800": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-900": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-950": {
        "$type": "color",
        "$value": "#ffffff"
      }
    },
    "accent": {
      "50": {
        "$type": "color",
        "$value": "#f3f8ff"
      },
      "100": {
        "$type": "color",
        "$value": "#e5f0ff"
      },
      "200": {
        "$type": "color",
        "$value": "#cce2ff"
      },
      "300": {
        "$type": "color",
        "$value": "#abcfff"
      },
      "400": {
        "$type": "color",
        "$value": "#6fadff"
      },
      "500": {
        "$type": "color",
        "$value": "#2c8dff"
      },
      "600": {
        "$type": "color",
        "$value": "#006ed9"
      },
      "700": {
        "$type": "color",
        "$value": "#005dba"
      },
      "800": {
        "$type": "color",
        "$value": "#004b98"
      },
      "900": {
        "$type": "color",
        "$value": "#003570"
      },
      "950": {
        "$type": "color",
        "$value": "#00234e"
      },
      "on-50": {
        "$type": "color",
        "$value": "#00234e"
      },
      "on-100": {
        "$type": "color",
        "$value": "#00234e"
      },
      "on-200": {
        "$type": "color",
        "$value": "#00234e"
      },
      "on-300": {
        "$type": "color",
        "$value": "#00234e"
      },
      "on-400": {
        "$type": "color",
        "$value": "#00234e"
      },
      "on-500": {
        "$type": "color",
        "$value": "#00234e"
      },
      "on-600": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-700": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-800": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-900": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-950": {
        "$type": "color",
        "$value": "#ffffff"
      }
    },
    "neutral": {
      "50": {
        "$type": "color",
        "$value": "#fff6f5"
      },
      "100": {
        "$type": "color",
        "$value": "#f9ecea"
      },
      "200": {
        "$type": "color",
        "$value": "#eadddb"
      },
      "300": {
        "$type": "color",
        "$value": "#d5c9c7"
      },
      "400": {
        "$type": "color",
        "$value": "#b4a8a7"
      },
      "500": {
        "$type": "color",
        "$value": "#968b89"
      },
      "600": {
        "$type": "color",
        "$value": "#796e6d"
      },
      "700": {
        "$type": "color",
        "$value": "#675c5a"
      },
      "800": {
        "$type": "color",
        "$value": "#554a49"
      },
      "900": {
        "$type": "color",
        "$value": "#3e3433"
      },
      "950": {
        "$type": "color",
        "$value": "#2b2221"
      },
      "on-50": {
        "$type": "color",
        "$value": "#2b2221"
      },
      "on-100": {
        "$type": "color",
        "$value": "#2b2221"
      },
      "on-200": {
        "$type": "color",
        "$value": "#2b2221"
      },
      "on-300": {
        "$type": "color",
        "$value": "#2b2221"
      },
      "on-400": {
        "$type": "color",
        "$value": "#2b2221"
      },
      "on-500": {
        "$type": "color",
        "$value": "#2b2221"
      },
      "on-600": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-700": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-800": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-900": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-950": {
        "$type": "color",
        "$value": "#ffffff"
      }
    }
  },
  "dark": {
    "brand": {
      "50": {
        "$type": "color",
        "$value": "#170604"
      },
      "100": {
        "$type": "color",
        "$value": "#2f0705"
      },
      "200": {
        "$type": "color",
        "$value": "#4e0002"
      },
      "300": {
        "$type": "color",
        "$value": "#690003"
      },
      "400": {
        "$type": "color",
        "$value": "#970007"
      },
      "500": {
        "$type": "color",
        "$value": "#c3000d"
      },
      "600": {
        "$type": "color",
        "$value": "#ef2121"
      },
      "700": {
        "$type": "color",
        "$value": "#ff4e43"
      },
      "800": {
        "$type": "color",
        "$value": "#ff7f70"
      },
      "900": {
        "$type": "color",
        "$value": "#ffb0a5"
      },
      "950": {
        "$type": "color",
        "$value": "#ffd4ce"
      },
      "on-50": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-100": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-200": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-300": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-400": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-500": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-600": {
        "$type": "color",
        "$value": "#170604"
      },
      "on-700": {
        "$type": "color",
        "$value": "#170604"
      },
      "on-800": {
        "$type": "color",
        "$value": "#170604"
      },
      "on-900": {
        "$type": "color",
        "$value": "#170604"
      },
      "on-950": {
        "$type": "color",
        "$value": "#170604"
      }
    },
    "accent": {
      "50": {
        "$type": "color",
        "$value": "#040b16"
      },
      "100": {
        "$type": "color",
        "$value": "#03152f"
      },
      "200": {
        "$type": "color",
        "$value": "#00224b"
      },
      "300": {
        "$type": "color",
        "$value": "#003065"
      },
      "400": {
        "$type": "color",
        "$value": "#004790"
      },
      "500": {
        "$type": "color",
        "$value": "#005eba"
      },
      "600": {
        "$type": "color",
        "$value": "#0079ed"
      },
      "700": {
        "$type": "color",
        "$value": "#2e8eff"
      },
      "800": {
        "$type": "color",
        "$value": "#63a7ff"
      },
      "900": {
        "$type": "color",
        "$value": "#9cc7ff"
      },
      "950": {
        "$type": "color",
        "$value": "#c9e0ff"
      },
      "on-50": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-100": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-200": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-300": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-400": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-500": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-600": {
        "$type": "color",
        "$value": "#040b16"
      },
      "on-700": {
        "$type": "color",
        "$value": "#040b16"
      },
      "on-800": {
        "$type": "color",
        "$value": "#040b16"
      },
      "on-900": {
        "$type": "color",
        "$value": "#040b16"
      },
      "on-950": {
        "$type": "color",
        "$value": "#040b16"
      }
    },
    "neutral": {
      "50": {
        "$type": "color",
        "$value": "#100908"
      },
      "100": {
        "$type": "color",
        "$value": "#1c1412"
      },
      "200": {
        "$type": "color",
        "$value": "#29201f"
      },
      "300": {
        "$type": "color",
        "$value": "#382f2d"
      },
      "400": {
        "$type": "color",
        "$value": "#504644"
      },
      "500": {
        "$type": "color",
        "$value": "#685d5b"
      },
      "600": {
        "$type": "color",
        "$value": "#837876"
      },
      "700": {
        "$type": "color",
        "$value": "#988c8a"
      },
      "800": {
        "$type": "color",
        "$value": "#afa3a1"
      },
      "900": {
        "$type": "color",
        "$value": "#cec2c0"
      },
      "950": {
        "$type": "color",
        "$value": "#e7dbd9"
      },
      "on-50": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-100": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-200": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-300": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-400": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-500": {
        "$type": "color",
        "$value": "#ffffff"
      },
      "on-600": {
        "$type": "color",
        "$value": "#100908"
      },
      "on-700": {
        "$type": "color",
        "$value": "#100908"
      },
      "on-800": {
        "$type": "color",
        "$value": "#100908"
      },
      "on-900": {
        "$type": "color",
        "$value": "#100908"
      },
      "on-950": {
        "$type": "color",
        "$value": "#100908"
      }
    }
  }
}

Use it in your projectMIT, no dependencies.

Generate the stylesheet once with the CLI, or create the palette in code, for example in a theme editor.

Read the docs

npx @sweberdev/gradient "#e30613" accent=#0a84ff --format tailwind --out app/gradient.css