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 {
--cffy-primary-base: #4f46e5;
--cffy-secondary-base: #ec4899;
}
Mix a custom tone
The tonal steps already exist as tokens (--cffy-primary-a10 … a90). For a one-off tone, mix in CSS:
.swatch {
background: color-mix(in oklab, var(--cffy-primary-base) 10%, var(--cffy-background));
}