Colorffy CSS
Color System
Use Colorffy's tonal colors, semantic colors, and gradients.
Colorffy CSS ships a powerful tonal color system exposed through utility classes and CSS variables.
Apply color utilities
<!-- Primary colors -->
<div class="bg-primary">Primary</div>
<div class="text-primary">Primary text</div>
<div class="border border-primary">Primary border</div>
<!-- Semantic colors -->
<div class="bg-success">Success</div>
<div class="bg-warning">Warning</div>
<div class="bg-danger">Danger</div>
<!-- Tonal & gradient variants -->
<div class="bg-primary-fixed">Tonal primary</div>
<div class="bg-gradient">Gradient primary</div>
Theme at runtime with CSS variables
Override custom properties to retheme without recompiling SCSS:
:root {
--theme-primary-base: #4f46e5;
--theme-secondary-base: #ec4899;
}
Generate tonal colors in SCSS
@use '@colorffy/css/scss/abstracts/functions' as fn;
@use '@colorffy/css/scss/abstracts/variables' as vars;
.swatch {
background: fn.tonal-color(vars.$primary, 10);
}