Skip to content

No results for

↑ ↓ navigate ↵ open Esc close

Theme Studio

New

Customize your Aura UI color palette, preview components in real-time, and export your theme configuration.

Presets

My Presets

Import

Paste a :root { --color-aura-<family>-500: … } block to seed the editor from an existing theme.

Colors

Primary

#6366f1

Secondary

#8b5cf6

Accent

#ec4899

Success

#22c55e

Warning

#f59e0b

Danger

#ef4444

Surface

#64748b

Appearance

Shadow

#000000
Intensity 1.0x

AI Evaluation

Export

CSS Variables 
/* Aura Theme Studio export */
:root {
    --color-aura-primary-50: oklch(0.975 0.1173 277.117);
    --color-aura-primary-100: oklch(0.940 0.1245 277.117);
    --color-aura-primary-200: oklch(0.880 0.1367 277.117);
    --color-aura-primary-300: oklch(0.800 0.1530 277.117);
    --color-aura-primary-400: oklch(0.700 0.1734 277.117);
    --color-aura-primary-500: oklch(0.600 0.1939 277.117);
    --color-aura-primary-600: oklch(0.510 0.1959 277.117);
    --color-aura-primary-700: oklch(0.420 0.1775 277.117);
    --color-aura-primary-800: oklch(0.340 0.1612 277.117);
    --color-aura-primary-900: oklch(0.270 0.1469 277.117);
    --color-aura-primary-950: oklch(0.200 0.1326 277.117);
    --color-aura-secondary-50: oklch(0.975 0.1259 292.717);
    --color-aura-secondary-100: oklch(0.940 0.1335 292.717);
    --color-aura-secondary-200: oklch(0.880 0.1467 292.717);
    --color-aura-secondary-300: oklch(0.800 0.1642 292.717);
    --color-aura-secondary-400: oklch(0.700 0.1861 292.717);
    --color-aura-secondary-500: oklch(0.600 0.2080 292.717);
    --color-aura-secondary-600: oklch(0.510 0.2102 292.717);
    --color-aura-secondary-700: oklch(0.420 0.1905 292.717);
    --color-aura-secondary-800: oklch(0.340 0.1729 292.717);
    --color-aura-secondary-900: oklch(0.270 0.1576 292.717);
    --color-aura-secondary-950: oklch(0.200 0.1423 292.717);
    --color-aura-accent-50: oklch(0.975 0.1218 354.308);
    --color-aura-accent-100: oklch(0.940 0.1292 354.308);
    --color-aura-accent-200: oklch(0.880 0.1419 354.308);
    --color-aura-accent-300: oklch(0.800 0.1588 354.308);
    --color-aura-accent-400: oklch(0.700 0.1800 354.308);
    --color-aura-accent-500: oklch(0.600 0.2012 354.308);
    --color-aura-accent-600: oklch(0.510 0.2033 354.308);
    --color-aura-accent-700: oklch(0.420 0.1842 354.308);
    --color-aura-accent-800: oklch(0.340 0.1673 354.308);
    --color-aura-accent-900: oklch(0.270 0.1525 354.308);
    --color-aura-accent-950: oklch(0.200 0.1377 354.308);
    --color-aura-success-50: oklch(0.975 0.1104 149.579);
    --color-aura-success-100: oklch(0.940 0.1171 149.579);
    --color-aura-success-200: oklch(0.880 0.1286 149.579);
    --color-aura-success-300: oklch(0.800 0.1440 149.579);
    --color-aura-success-400: oklch(0.700 0.1632 149.579);
    --color-aura-success-500: oklch(0.600 0.1824 149.579);
    --color-aura-success-600: oklch(0.510 0.1843 149.579);
    --color-aura-success-700: oklch(0.420 0.1670 149.579);
    --color-aura-success-800: oklch(0.340 0.1517 149.579);
    --color-aura-success-900: oklch(0.270 0.1382 149.579);
    --color-aura-success-950: oklch(0.200 0.1248 149.579);
    --color-aura-warning-50: oklch(0.975 0.0947 70.080);
    --color-aura-warning-100: oklch(0.940 0.1004 70.080);
    --color-aura-warning-200: oklch(0.880 0.1103 70.080);
    --color-aura-warning-300: oklch(0.800 0.1235 70.080);
    --color-aura-warning-400: oklch(0.700 0.1400 70.080);
    --color-aura-warning-500: oklch(0.600 0.1564 70.080);
    --color-aura-warning-600: oklch(0.510 0.1581 70.080);
    --color-aura-warning-700: oklch(0.420 0.1433 70.080);
    --color-aura-warning-800: oklch(0.340 0.1301 70.080);
    --color-aura-warning-900: oklch(0.270 0.1186 70.080);
    --color-aura-warning-950: oklch(0.200 0.1070 70.080);
    --color-aura-danger-50: oklch(0.975 0.1195 25.331);
    --color-aura-danger-100: oklch(0.940 0.1268 25.331);
    --color-aura-danger-200: oklch(0.880 0.1393 25.331);
    --color-aura-danger-300: oklch(0.800 0.1559 25.331);
    --color-aura-danger-400: oklch(0.700 0.1767 25.331);
    --color-aura-danger-500: oklch(0.600 0.1975 25.331);
    --color-aura-danger-600: oklch(0.510 0.1995 25.331);
    --color-aura-danger-700: oklch(0.420 0.1808 25.331);
    --color-aura-danger-800: oklch(0.340 0.1642 25.331);
    --color-aura-danger-900: oklch(0.270 0.1497 25.331);
    --color-aura-danger-950: oklch(0.200 0.1351 25.331);
    --color-aura-surface-50: oklch(0.975 0.0234 257.417);
    --color-aura-surface-100: oklch(0.940 0.0248 257.417);
    --color-aura-surface-200: oklch(0.880 0.0273 257.417);
    --color-aura-surface-300: oklch(0.800 0.0305 257.417);
    --color-aura-surface-400: oklch(0.700 0.0346 257.417);
    --color-aura-surface-500: oklch(0.600 0.0387 257.417);
    --color-aura-surface-600: oklch(0.510 0.0391 257.417);
    --color-aura-surface-700: oklch(0.420 0.0354 257.417);
    --color-aura-surface-800: oklch(0.340 0.0322 257.417);
    --color-aura-surface-900: oklch(0.270 0.0293 257.417);
    --color-aura-surface-950: oklch(0.200 0.0265 257.417);
    --radius-aura-xs: 4px;
    --radius-aura-sm: 6px;
    --radius-aura-md: 8px;
    --radius-aura-lg: 12px;
    --radius-aura-xl: 16px;
    --radius-aura-2xl: 24px;
    --radius-aura-full: 9999px;
    --font-aura-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    --font-aura-mono: 'JetBrains Mono', ui-monospace, monospace;
    --shadow-aura-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-aura-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-aura-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-aura-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --shadow-aura-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
    --shadow-aura-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.dark {
    --color-aura-surface-50: oklch(0.975 0.0234 257.417);
    --color-aura-surface-100: oklch(0.940 0.0248 257.417);
    --color-aura-surface-200: oklch(0.880 0.0273 257.417);
    --color-aura-surface-300: oklch(0.800 0.0305 257.417);
    --color-aura-surface-400: oklch(0.700 0.0346 257.417);
    --color-aura-surface-500: oklch(0.600 0.0387 257.417);
    --color-aura-surface-600: oklch(0.510 0.0391 257.417);
    --color-aura-surface-700: oklch(0.420 0.0354 257.417);
    --color-aura-surface-800: oklch(0.340 0.0322 257.417);
    --color-aura-surface-900: oklch(0.270 0.0293 257.417);
    --color-aura-surface-950: oklch(0.200 0.0265 257.417);
}
Tailwind @theme 
@theme {
    --color-aura-primary-50: oklch(0.975 0.1173 277.117);
    --color-aura-primary-100: oklch(0.940 0.1245 277.117);
    --color-aura-primary-200: oklch(0.880 0.1367 277.117);
    --color-aura-primary-300: oklch(0.800 0.1530 277.117);
    --color-aura-primary-400: oklch(0.700 0.1734 277.117);
    --color-aura-primary-500: oklch(0.600 0.1939 277.117);
    --color-aura-primary-600: oklch(0.510 0.1959 277.117);
    --color-aura-primary-700: oklch(0.420 0.1775 277.117);
    --color-aura-primary-800: oklch(0.340 0.1612 277.117);
    --color-aura-primary-900: oklch(0.270 0.1469 277.117);
    --color-aura-primary-950: oklch(0.200 0.1326 277.117);
    --color-aura-secondary-50: oklch(0.975 0.1259 292.717);
    --color-aura-secondary-100: oklch(0.940 0.1335 292.717);
    --color-aura-secondary-200: oklch(0.880 0.1467 292.717);
    --color-aura-secondary-300: oklch(0.800 0.1642 292.717);
    --color-aura-secondary-400: oklch(0.700 0.1861 292.717);
    --color-aura-secondary-500: oklch(0.600 0.2080 292.717);
    --color-aura-secondary-600: oklch(0.510 0.2102 292.717);
    --color-aura-secondary-700: oklch(0.420 0.1905 292.717);
    --color-aura-secondary-800: oklch(0.340 0.1729 292.717);
    --color-aura-secondary-900: oklch(0.270 0.1576 292.717);
    --color-aura-secondary-950: oklch(0.200 0.1423 292.717);
    --color-aura-accent-50: oklch(0.975 0.1218 354.308);
    --color-aura-accent-100: oklch(0.940 0.1292 354.308);
    --color-aura-accent-200: oklch(0.880 0.1419 354.308);
    --color-aura-accent-300: oklch(0.800 0.1588 354.308);
    --color-aura-accent-400: oklch(0.700 0.1800 354.308);
    --color-aura-accent-500: oklch(0.600 0.2012 354.308);
    --color-aura-accent-600: oklch(0.510 0.2033 354.308);
    --color-aura-accent-700: oklch(0.420 0.1842 354.308);
    --color-aura-accent-800: oklch(0.340 0.1673 354.308);
    --color-aura-accent-900: oklch(0.270 0.1525 354.308);
    --color-aura-accent-950: oklch(0.200 0.1377 354.308);
    --color-aura-success-50: oklch(0.975 0.1104 149.579);
    --color-aura-success-100: oklch(0.940 0.1171 149.579);
    --color-aura-success-200: oklch(0.880 0.1286 149.579);
    --color-aura-success-300: oklch(0.800 0.1440 149.579);
    --color-aura-success-400: oklch(0.700 0.1632 149.579);
    --color-aura-success-500: oklch(0.600 0.1824 149.579);
    --color-aura-success-600: oklch(0.510 0.1843 149.579);
    --color-aura-success-700: oklch(0.420 0.1670 149.579);
    --color-aura-success-800: oklch(0.340 0.1517 149.579);
    --color-aura-success-900: oklch(0.270 0.1382 149.579);
    --color-aura-success-950: oklch(0.200 0.1248 149.579);
    --color-aura-warning-50: oklch(0.975 0.0947 70.080);
    --color-aura-warning-100: oklch(0.940 0.1004 70.080);
    --color-aura-warning-200: oklch(0.880 0.1103 70.080);
    --color-aura-warning-300: oklch(0.800 0.1235 70.080);
    --color-aura-warning-400: oklch(0.700 0.1400 70.080);
    --color-aura-warning-500: oklch(0.600 0.1564 70.080);
    --color-aura-warning-600: oklch(0.510 0.1581 70.080);
    --color-aura-warning-700: oklch(0.420 0.1433 70.080);
    --color-aura-warning-800: oklch(0.340 0.1301 70.080);
    --color-aura-warning-900: oklch(0.270 0.1186 70.080);
    --color-aura-warning-950: oklch(0.200 0.1070 70.080);
    --color-aura-danger-50: oklch(0.975 0.1195 25.331);
    --color-aura-danger-100: oklch(0.940 0.1268 25.331);
    --color-aura-danger-200: oklch(0.880 0.1393 25.331);
    --color-aura-danger-300: oklch(0.800 0.1559 25.331);
    --color-aura-danger-400: oklch(0.700 0.1767 25.331);
    --color-aura-danger-500: oklch(0.600 0.1975 25.331);
    --color-aura-danger-600: oklch(0.510 0.1995 25.331);
    --color-aura-danger-700: oklch(0.420 0.1808 25.331);
    --color-aura-danger-800: oklch(0.340 0.1642 25.331);
    --color-aura-danger-900: oklch(0.270 0.1497 25.331);
    --color-aura-danger-950: oklch(0.200 0.1351 25.331);
    --color-aura-surface-50: oklch(0.975 0.0234 257.417);
    --color-aura-surface-100: oklch(0.940 0.0248 257.417);
    --color-aura-surface-200: oklch(0.880 0.0273 257.417);
    --color-aura-surface-300: oklch(0.800 0.0305 257.417);
    --color-aura-surface-400: oklch(0.700 0.0346 257.417);
    --color-aura-surface-500: oklch(0.600 0.0387 257.417);
    --color-aura-surface-600: oklch(0.510 0.0391 257.417);
    --color-aura-surface-700: oklch(0.420 0.0354 257.417);
    --color-aura-surface-800: oklch(0.340 0.0322 257.417);
    --color-aura-surface-900: oklch(0.270 0.0293 257.417);
    --color-aura-surface-950: oklch(0.200 0.0265 257.417);
    --radius-aura-xs: 4px;
    --radius-aura-sm: 6px;
    --radius-aura-md: 8px;
    --radius-aura-lg: 12px;
    --radius-aura-xl: 16px;
    --radius-aura-2xl: 24px;
    --radius-aura-full: 9999px;
    --font-aura-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Outfit', ui-sans-serif, system-ui, sans-serif;
    --font-aura-mono: 'JetBrains Mono', ui-monospace, monospace;
    --shadow-aura-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-aura-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-aura-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-aura-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --shadow-aura-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
    --shadow-aura-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.dark {
    --color-aura-surface-50: oklch(0.975 0.0234 257.417);
    --color-aura-surface-100: oklch(0.940 0.0248 257.417);
    --color-aura-surface-200: oklch(0.880 0.0273 257.417);
    --color-aura-surface-300: oklch(0.800 0.0305 257.417);
    --color-aura-surface-400: oklch(0.700 0.0346 257.417);
    --color-aura-surface-500: oklch(0.600 0.0387 257.417);
    --color-aura-surface-600: oklch(0.510 0.0391 257.417);
    --color-aura-surface-700: oklch(0.420 0.0354 257.417);
    --color-aura-surface-800: oklch(0.340 0.0322 257.417);
    --color-aura-surface-900: oklch(0.270 0.0293 257.417);
    --color-aura-surface-950: oklch(0.200 0.0265 257.417);
}
Filament Panel Provider 
// In your Panel provider (requires bluestarsystem/aura-filament):
\BlueStarSystem\AuraFilament\AuraFilamentTheme::apply(
    $panel,
    primaryColor: [
        '50' => 'oklch(0.975 0.1173 277.117)',
        '100' => 'oklch(0.940 0.1245 277.117)',
        '200' => 'oklch(0.880 0.1367 277.117)',
        '300' => 'oklch(0.800 0.1530 277.117)',
        '400' => 'oklch(0.700 0.1734 277.117)',
        '500' => 'oklch(0.600 0.1939 277.117)',
        '600' => 'oklch(0.510 0.1959 277.117)',
        '700' => 'oklch(0.420 0.1775 277.117)',
        '800' => 'oklch(0.340 0.1612 277.117)',
        '900' => 'oklch(0.270 0.1469 277.117)',
        '950' => 'oklch(0.200 0.1326 277.117)',
    ],
    font: 'Outfit',
);
Share Theme

Live Preview

Color Palettes

primary

secondary

accent

success

warning

danger

surface

Buttons

Alerts

Operation completed successfully!
Please review before continuing.
An error occurred.

Badges

Primary Secondary Accent Success Warning Danger Surface

Card

Project Dashboard

Overview of your project metrics and recent activity.

Form Elements

Progress

Primary 75%
Success 100%
Warning 45%

Generated CSS Variables

:root {
    /* primary (#6366f1) */
    --color-aura-primary-50: oklch(0.975 0.1173 277.117);
    --color-aura-primary-100: oklch(0.940 0.1245 277.117);
    --color-aura-primary-200: oklch(0.880 0.1367 277.117);
    --color-aura-primary-300: oklch(0.800 0.1530 277.117);
    --color-aura-primary-400: oklch(0.700 0.1734 277.117);
    --color-aura-primary-500: oklch(0.600 0.1939 277.117);
    --color-aura-primary-600: oklch(0.510 0.1959 277.117);
    --color-aura-primary-700: oklch(0.420 0.1775 277.117);
    --color-aura-primary-800: oklch(0.340 0.1612 277.117);
    --color-aura-primary-900: oklch(0.270 0.1469 277.117);
    --color-aura-primary-950: oklch(0.200 0.1326 277.117);

    /* secondary (#8b5cf6) */
    --color-aura-secondary-50: oklch(0.975 0.1259 292.717);
    --color-aura-secondary-100: oklch(0.940 0.1335 292.717);
    --color-aura-secondary-200: oklch(0.880 0.1467 292.717);
    --color-aura-secondary-300: oklch(0.800 0.1642 292.717);
    --color-aura-secondary-400: oklch(0.700 0.1861 292.717);
    --color-aura-secondary-500: oklch(0.600 0.2080 292.717);
    --color-aura-secondary-600: oklch(0.510 0.2102 292.717);
    --color-aura-secondary-700: oklch(0.420 0.1905 292.717);
    --color-aura-secondary-800: oklch(0.340 0.1729 292.717);
    --color-aura-secondary-900: oklch(0.270 0.1576 292.717);
    --color-aura-secondary-950: oklch(0.200 0.1423 292.717);

    /* accent (#ec4899) */
    --color-aura-accent-50: oklch(0.975 0.1218 354.308);
    --color-aura-accent-100: oklch(0.940 0.1292 354.308);
    --color-aura-accent-200: oklch(0.880 0.1419 354.308);
    --color-aura-accent-300: oklch(0.800 0.1588 354.308);
    --color-aura-accent-400: oklch(0.700 0.1800 354.308);
    --color-aura-accent-500: oklch(0.600 0.2012 354.308);
    --color-aura-accent-600: oklch(0.510 0.2033 354.308);
    --color-aura-accent-700: oklch(0.420 0.1842 354.308);
    --color-aura-accent-800: oklch(0.340 0.1673 354.308);
    --color-aura-accent-900: oklch(0.270 0.1525 354.308);
    --color-aura-accent-950: oklch(0.200 0.1377 354.308);

    /* success (#22c55e) */
    --color-aura-success-50: oklch(0.975 0.1104 149.579);
    --color-aura-success-100: oklch(0.940 0.1171 149.579);
    --color-aura-success-200: oklch(0.880 0.1286 149.579);
    --color-aura-success-300: oklch(0.800 0.1440 149.579);
    --color-aura-success-400: oklch(0.700 0.1632 149.579);
    --color-aura-success-500: oklch(0.600 0.1824 149.579);
    --color-aura-success-600: oklch(0.510 0.1843 149.579);
    --color-aura-success-700: oklch(0.420 0.1670 149.579);
    --color-aura-success-800: oklch(0.340 0.1517 149.579);
    --color-aura-success-900: oklch(0.270 0.1382 149.579);
    --color-aura-success-950: oklch(0.200 0.1248 149.579);

    /* warning (#f59e0b) */
    --color-aura-warning-50: oklch(0.975 0.0947 70.080);
    --color-aura-warning-100: oklch(0.940 0.1004 70.080);
    --color-aura-warning-200: oklch(0.880 0.1103 70.080);
    --color-aura-warning-300: oklch(0.800 0.1235 70.080);
    --color-aura-warning-400: oklch(0.700 0.1400 70.080);
    --color-aura-warning-500: oklch(0.600 0.1564 70.080);
    --color-aura-warning-600: oklch(0.510 0.1581 70.080);
    --color-aura-warning-700: oklch(0.420 0.1433 70.080);
    --color-aura-warning-800: oklch(0.340 0.1301 70.080);
    --color-aura-warning-900: oklch(0.270 0.1186 70.080);
    --color-aura-warning-950: oklch(0.200 0.1070 70.080);

    /* danger (#ef4444) */
    --color-aura-danger-50: oklch(0.975 0.1195 25.331);
    --color-aura-danger-100: oklch(0.940 0.1268 25.331);
    --color-aura-danger-200: oklch(0.880 0.1393 25.331);
    --color-aura-danger-300: oklch(0.800 0.1559 25.331);
    --color-aura-danger-400: oklch(0.700 0.1767 25.331);
    --color-aura-danger-500: oklch(0.600 0.1975 25.331);
    --color-aura-danger-600: oklch(0.510 0.1995 25.331);
    --color-aura-danger-700: oklch(0.420 0.1808 25.331);
    --color-aura-danger-800: oklch(0.340 0.1642 25.331);
    --color-aura-danger-900: oklch(0.270 0.1497 25.331);
    --color-aura-danger-950: oklch(0.200 0.1351 25.331);

    /* surface (#64748b) */
    --color-aura-surface-50: oklch(0.975 0.0234 257.417);
    --color-aura-surface-100: oklch(0.940 0.0248 257.417);
    --color-aura-surface-200: oklch(0.880 0.0273 257.417);
    --color-aura-surface-300: oklch(0.800 0.0305 257.417);
    --color-aura-surface-400: oklch(0.700 0.0346 257.417);
    --color-aura-surface-500: oklch(0.600 0.0387 257.417);
    --color-aura-surface-600: oklch(0.510 0.0391 257.417);
    --color-aura-surface-700: oklch(0.420 0.0354 257.417);
    --color-aura-surface-800: oklch(0.340 0.0322 257.417);
    --color-aura-surface-900: oklch(0.270 0.0293 257.417);
    --color-aura-surface-950: oklch(0.200 0.0265 257.417);

}