1. Docs
2. Utilities
3. Farbmischung

Farbmischung 1.2.0

Erzeuge Tints und Shades aus Theme-Farben mit color-mix()-Utilities, ohne neue Tokens zu erfinden. English: Color Mix

Wann verwenden

• Blend brand colors with color-mix() utilities when you need tints without new tokens.

Wann nicht

• Bevorzuge semantische Tokens fuer primaere UI; Mix-Utilities sind fuer Akzente und Experimente gedacht.

So funktioniert es

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-Farbmischung

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-Unterstuetzung

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.