ELEMENTS

Colors

CSS variables and theme presets for easy customization.

How to Use

Copy the CSS variables to your stylesheet and customize the colors as needed.

  • - Use var(--color-primary) in your CSS
  • - Add theme classes like theme-blue to the HTML element
  • - Click on any color swatch to copy its hex value

Theme Presets

Click a theme to preview the color scheme:

Primary
Secondary
Accent

CSS Variables

:root {
    /* Primary Colors */
    --color-primary: #8b5cf6;
    --color-primary-light: #a78bfa;
    --color-primary-dark: #7c3aed;

    /* Secondary Colors */
    --color-secondary: #d946ef;
    --color-secondary-light: #e879f9;
    --color-secondary-dark: #c026d3;

    /* Accent */
    --color-accent: #06b6d4;

    /* Background */
    --color-background: #0a0a0f;
    --color-surface: #12121a;
    --color-border: rgba(255, 255, 255, 0.1);
}

Brand Colors

Violet 500
#8b5cf6
Copied!
Fuchsia 500
#d946ef
Copied!
Cyan 500
#06b6d4
Copied!
Emerald 500
#10b981
Copied!
Amber 500
#f59e0b
Copied!
Red 500
#ef4444
Copied!

Dark Theme

Dark 900
#0a0a0f
Copied!
Dark 800
#12121a
Copied!
Dark 700
#1a1a25
Copied!
Dark 600
#252532
Copied!

Gradients

Violet to Fuchsia
from-violet-600 to-fuchsia-600
Copied!
Cyan to Blue
from-cyan-600 to-blue-600
Copied!
Emerald to Teal
from-emerald-600 to-teal-600
Copied!
Orange to Amber
from-orange-600 to-amber-600
Copied!
Pink to Rose
from-pink-600 to-rose-600
Copied!
Indigo to Purple
from-indigo-600 to-purple-600
Copied!

Gray Scale

50
Copied!
100
Copied!
200
Copied!
300
Copied!
400
Copied!
500
Copied!
600
Copied!
700
Copied!
800
Copied!
900
Copied!