CSS Color Variables Generator
CSS Variables
Base Color Input: Enter the base color in the input field (e.g., #4287f5). Alternatively, click “Random” to generate a random base color.
Generate Palette: Click on the “Generate Palette” button to create a color palette based on the base color.
View Generated Colors:
Primary: Contains light, base, and dark variations.
Secondary: Contains light, base, and dark variations.
Tertiary: Contains light, base, and dark variations.
Analogous1 and Analogous2: Two sets of analogous colors with light, base, and dark variations.
Complementary: A set of complementary colors with light, base, and dark variations.
Copy CSS Variables: The generated CSS variables are provided in the text area under CSS Variables. Click Copy CSS to copy the variables to your clipboard.
Dark Theme Variables: The dark theme variables are automatically generated with darker shades for each color category.
Use in Your Project: Paste the copied CSS variables into your project’s stylesheet within the :root selector for general use. Use the .dark class in your HTML or CSS to apply the dark theme colors when needed.
