SCSS/Sass Variables Generator - Colors and Maps
Generate SCSS and Sass variables for your color palettes.
// Color Variables
$primary: #6366f1;
$secondary: #ec4899;
$accent: #f59e0b;
$success: #10b981;
$warning: #f59e0b;
$error: #ef4444;
// Color Map
$colors: (
"primary": $primary,
"secondary": $secondary,
"accent": $accent,
"success": $success,
"warning": $warning,
"error": $error
);
// Usage functions
@function color($name) {
@return map-get($colors, $name);
}
// Generate utility classes
@each $name, $color in $colors {
.bg-#{$name} {
background-color: $color;
}
.text-#{$name} {
color: $color;
}
.border-#{$name} {
border-color: $color;
}
}// SCSS Mixins
@mixin background($color) {
background-color: $color;
@if lightness($color) > 50% {
color: #1a1a1a;
} @else {
color: #ffffff;
}
}
@mixin button-variant($bg, $hover: darken($bg, 10%)) {
background-color: $bg;
border-color: $bg;
@if lightness($bg) > 50% {
color: #1a1a1a;
} @else {
color: #ffffff;
}
&:hover {
background-color: $hover;
border-color: $hover;
}
}
// Usage
.my-button {
@include button-variant($primary);
}
.my-section {
@include background($secondary);
}Supported formats
How it works
Add your colors to the palette
Define variable names
Choose format (simple variables or maps)
Copy the generated SCSS code
Privacy guaranteed
100% local generation in your browser.
Generate SCSS variables for your projects
SCSS remains the most used CSS preprocessor for professional projects. Our generator creates clean and organized SCSS variables, with maps for colors and functions for manipulations. Code ready to integrate into Bootstrap, Foundation or any other framework. Export your palette as SCSS variables ($primary, $accent, tone map) ready to integrate into your Sass architecture and mixins. Instantly convert between HEX, RGB, HSL, HSV and CMYK, adjust hue, saturation and lightness with real-time preview and check WCAG AA/AAA contrast for sRGB-compliant accessibility.
Simple variables and maps
Generate simple variables ($primary: #FF5733) or structured maps for large projects. Maps allow looping over colors and creating utility classes automatically.
SCSS variables for Bootstrap and frameworks
Customize Bootstrap by overriding its color variables. Our generator uses the same variable names ($primary, $secondary, $success, etc.) for frictionless integration into your existing Bootstrap projects.
Functions and mixins for colors
The generated code includes useful functions to manipulate your colors: lighten(), darken(), saturate(), and mixins to create consistent buttons, backgrounds and borders.
Organization by categories
Structure your colors into logical categories: primary, secondary, feedback (success, warning, error), neutral (gray scale). Our generator automatically organizes variables for optimal maintainability.
Free tool for front-end developers
Create your SCSS variable files for free. Ideal for starting a new project or refactoring an existing design system.
SCSS vs CSS variables: when to use what
SCSS variables are compiled (static), ideal for calculations and mixins. CSS variables are dynamic (modifiable at runtime). Our tool exports in both formats for maximum compatibility.