Color Mix

VelinStyle is one of the first CSS frameworks to ship native color-mix() utilities, letting you create dynamic tints, shades, and blends without preprocessors.

How It Works

The CSS color-mix() function blends two colors in a given color space. VelinStyle generates utility classes that mix theme colors with white (tint) or black (shade) at fixed percentages.

.velin-bg-primary-tint-30 {
  background-color: color-mix(in srgb, var(--velin-primary), white 30%);
}
.velin-bg-primary-shade-50 {
  background-color: color-mix(in srgb, var(--velin-primary), black 50%);
}
.velin-text-danger-tint-20 {
  color: color-mix(in srgb, var(--velin-danger), white 20%);
}

Tint Utilities

Mix with white to lighten. Available from 10 to 90 in steps of 10:

<div class="velin-bg-primary-tint-10 velin-p-3">Tint 10%</div>
<div class="velin-bg-primary-tint-30 velin-p-3">Tint 30%</div>
<div class="velin-bg-primary-tint-50 velin-p-3">Tint 50%</div>
<div class="velin-bg-primary-tint-70 velin-p-3">Tint 70%</div>
<div class="velin-bg-primary-tint-90 velin-p-3">Tint 90%</div>

Shade Utilities

Mix with black to darken:

<div class="velin-bg-primary-shade-10 velin-text-white velin-p-3">Shade 10%</div>
<div class="velin-bg-primary-shade-30 velin-text-white velin-p-3">Shade 30%</div>
<div class="velin-bg-primary-shade-50 velin-text-white velin-p-3">Shade 50%</div>

Text Color Mix

The same tint/shade pattern works for text colors:

<p class="velin-text-primary-tint-30">Lighter primary text</p>
<p class="velin-text-danger-shade-20">Darker danger text</p>

Browser Support

color-mix() is supported in all modern browsers (Chrome 111+, Firefox 113+, Safari 16.2+). VelinStyle does not include a fallback — the base color is applied if color-mix() is unsupported.