Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Customize
  3. Color

Color

VelinStyle uses the OKLCH color space for perceptually uniform colors, accessible contrast, and effortless palette generation.

Why OKLCH?

Unlike HSL or hex, OKLCH produces colors where equal lightness values actually look equally bright. This makes it ideal for generating accessible palettes and maintaining visual consistency across hues.

Semantic Colors

VelinStyle defines semantic color tokens that carry meaning throughout the framework. Each token has a base value plus tints and shades for interactive states: 

:root {
  --velin-primary:   oklch(0.55 0.22 264);
  --velin-secondary: oklch(0.60 0.10 250);
  --velin-success:   oklch(0.62 0.19 145);
  --velin-danger:    oklch(0.55 0.22 25);
  --velin-warning:   oklch(0.75 0.18 85);
  --velin-info:      oklch(0.65 0.15 230);
  --velin-light:     oklch(0.96 0.005 260);
  --velin-dark:      oklch(0.25 0.015 260);
}
Primary Secondary Success Danger Warning Info Light Dark

Palette Scale

Each semantic color generates a numeric scale from 50 (lightest) to 950 (darkest). These are produced by adjusting the OKLCH lightness channel: 

:root {
  --velin-primary-50:  oklch(0.97 0.03 264);
  --velin-primary-100: oklch(0.93 0.06 264);
  --velin-primary-200: oklch(0.85 0.10 264);
  --velin-primary-300: oklch(0.75 0.15 264);
  --velin-primary-400: oklch(0.65 0.19 264);
  --velin-primary-500: oklch(0.55 0.22 264);  /* base */
  --velin-primary-600: oklch(0.47 0.20 264);
  --velin-primary-700: oklch(0.39 0.17 264);
  --velin-primary-800: oklch(0.31 0.14 264);
  --velin-primary-900: oklch(0.23 0.10 264);
  --velin-primary-950: oklch(0.15 0.07 264);
}
50
100
200
300
400
500
600
700
800
900
950

Neutral Grays

A neutral gray scale is provided for surfaces, borders, and text. These use minimal chroma to stay truly neutral while benefiting from OKLCH's perceptual uniformity: 

:root {
  --velin-gray-50:  oklch(0.98 0.003 260);
  --velin-gray-100: oklch(0.95 0.005 260);
  --velin-gray-200: oklch(0.90 0.006 260);
  --velin-gray-300: oklch(0.82 0.008 260);
  --velin-gray-400: oklch(0.70 0.010 260);
  --velin-gray-500: oklch(0.55 0.012 260);
  --velin-gray-600: oklch(0.45 0.012 260);
  --velin-gray-700: oklch(0.37 0.010 260);
  --velin-gray-800: oklch(0.27 0.008 260);
  --velin-gray-900: oklch(0.20 0.006 260);
}

Custom Colors

Add your own brand colors by defining new tokens. They'll work with utilities when you define matching semantic utilities or use velin-bg-* / velin-text-* with custom properties: 

:root {
  --velin-brand: oklch(0.60 0.25 330);
  --velin-brand-hover: oklch(0.52 0.23 330);
}

.btn-brand {
  background: var(--velin-brand);
  color: #fff;
}
.btn-brand:hover {
  background: var(--velin-brand-hover);
}

Theme wählen