HSL

Hue, Saturation, Lightness

A cylindrical color model describing colors by hue angle (0-360), saturation (%), and lightness (%).

Detail Teknis

The hsl is based on the three primary models: RYB (traditional pigment), RGB (additive light), and CMYK (subtractive print). In the perceptually uniform OKLCH color space, equal numerical distances correspond to equal perceived differences — unlike HSL where a 10-degree hue shift appears dramatically different at different lightness levels. Modern CSS supports oklch() natively, enabling designers to create harmonies with mathematically consistent perceptual contrast.

Contoh

```css
/* HSL color system for design tokens */
:root {
  --hue-primary: 225;  /* blue */
  --primary-50:  hsl(var(--hue-primary), 100%, 97%);
  --primary-500: hsl(var(--hue-primary), 84%, 60%);
  --primary-900: hsl(var(--hue-primary), 84%, 15%);
}

/* Change --hue-primary to theme entire site */
```

Alat Terkait

C Color Palette Generator T Type Scale Generator S Spacing Scale Generator R Responsive Breakpoints A Aspect Ratio Calculator C Color Shade Generator F Font Pairing Suggestions C Contrast Checker D Design Tokens Generator S Social Media Size Guide K Kalkulator Rasio Emas P Panduan Ukuran Ikon Aplikasi G Generator Sistem Shadow G Generator Gradien Multi-Stop G Generator Pola CSS

Istilah Terkait

Color Wheel Complementary Colors Analogous Colors Affordance Color Blindness Baseline Grid Accessibility Color Temperature