# Sävy, kylläisyys ja kirkkaus: HSB selkeästi selitettynä

[Canonical HTML page](https://gradiently.design/fi/guide/hue-saturation-brightness)

Hex-koodit ovat koneille. Sävy, kylläisyys ja kirkkaus kuvaavat sitä, miten ihmiset ajattelevat väriä: mikä väri, kuinka voimakas, kuinka vaalea. Kun tunnet kolme säädintä, ymmärrät värinvalitsimia.

## The short version

- Sävy, kylläisyys ja kirkkaus eli HSB kuvaa väriä kolmella luvulla: sävy on värin kulma väriympyrässä, kylläisyys sen voimakkuus ja kirkkaus sen valon määrä.
- HSB:tä kutsutaan myös HSV:ksi, jossa V tarkoittaa arvoa. Molemmat nimet kuvaavat samaa mallia.
- HSL on läheinen malli, jossa 50 prosentin vaaleus antaa puhtaan värin ja 100 prosenttia aina valkoisen.
- Figma ja Photoshop tarjoavat HSB-värinvalitsimia, kun taas CSS tukee hsl()-funktiota mutta ei HSB:tä.
- HSB ja HSL eivät kumpikaan vastaa silmän kokemaa värin kirkkautta, joten havaintoon perustuvat mallit, kuten OKLCH, sopivat paremmin tasaisten asteikkojen rakentamiseen.

**Sävy, kylläisyys ja kirkkaus** (HSB) kuvaa minkä tahansa värin kolmella selkeällä säätimellä. **Sävy** kertoo, mikä väri on kyseessä, kulmana 0:sta 360 asteeseen väriympyrässä. **Kylläisyys** kertoo voimakkuuden 0 prosentin harmaasta 100 prosentin täyteen väriin. **Kirkkaus** kertoo valon määrän 0 prosentin mustasta 100 prosentin kirkkaimpaan versioon kyseisestä väristä. Kun hahmotat värit näin, paletin säätäminen ei enää ole arvailua.

## Sävy: mikä väri

Sävy on sijainti [väriympyrässä](https://gradiently.design/fi/guide/color-wheel). Näyttövärien ympyrässä punainen on 0 asteessa, vihreä 120:ssa ja sininen 240:ssä. Keltainen, syaani ja magenta ovat niiden välissä. Koska sävy on kulma, väriharmoniat ovat yksinkertaista laskentaa: lisää 180 astetta vastavärille ja 120 astetta kolmisoinnulle.

Sävy 0:sta 360 asteeseen: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)`

Koko sävyalue täydellä kylläisyydellä ja kirkkaudella. Kaista alkaa ja päättyy punaiseen, koska sävy kiertää ympyrää.

## Kylläisyys: kuinka voimakas

Kylläisyys säätelee sävyn määrää. Kun lasket sitä, väri haalistuu harmaata kohti. Kun nostat sitä, väri voimistuu. Useimmat hienostuneet paletit pysyvät selvästi täyden kylläisyyden alapuolella. Täysin kylläiset värit huutavat, mikä sopii alennustarraan mutta väsyttää kokonaisella verkkosivustolla. [Hillityt väripaletit](https://gradiently.design/fi/guide/muted-color-palettes) perustuvat pitkälti matalampaan kylläisyyteen.

- Kylläisyys 0%: #808080
- Kylläisyys 25%: #7f609f
- Kylläisyys 50%: #7f40bf
- Kylläisyys 75%: #7f20df
- Kylläisyys 100%: #7f00ff

Yksi violetti sävy samalla vaaleudella. Vain kylläisyys muuttuu. Vasemmalla on puhdas harmaa, oikealla täysi väri.

## Kirkkaus: kuinka paljon valoa

HSB:ssä kirkkaus kertoo, kuinka valoisa väri on. 0 prosentissa jokainen väri on musta sävystä tai kylläisyydestä riippumatta. 100 prosentissa saat kirkkaimman version, jonka näyttö voi esittää kyseisellä sävyllä ja kylläisyydellä. Vaaleaa pastellia varten pidä kirkkaus korkeana ja laske kylläisyyttä, mikä sekoittaa väriin valkoista. Sama ajatus on [vaaleiden, murrettujen ja tummien sävyjen](https://gradiently.design/fi/guide/tints-tones-shades) taustalla.

## HSB ja HSL: ero, johon moni kompastuu

HSL näyttää lähes samalta: sävy, kylläisyys ja **vaaleus**. Sävy on sama. Kolmas säädin on eri. HSL:ssä 50 prosentin vaaleus on puhdas väri, 0 prosenttia musta ja 100 prosenttia aina valkoinen. HSB:ssä 100 prosentin kirkkaus on puhdas väri täydellä kylläisyydellä, ja valkoiseen pääset vain laskemalla myös kylläisyyttä. Kylläisyysluvutkin eroavat, joten samalla värillä on eri arvot kummassakin mallissa.

| Väri | Hex | HSB | HSL |
| --- | --- | --- | --- |
| Puhdas punainen | `#ff0000` | 0°, 100%, 100% | 0°, 100%, 50% |
| Violetti | `#7c3aed` | 262°, 76%, 93% | 262°, 83%, 58% |
| Tumma sinivihreä | `#0f766e` | 175°, 87%, 46% | 175°, 77%, 26% |
| Kirkas oranssi | `#f97316` | 25°, 91%, 98% | 25°, 95%, 53% |
| Valkoinen | `#ffffff` | Mikä tahansa sävy, 0%, 100% | Mikä tahansa sävy ja kylläisyys, 100% |

Sävy täsmää, mutta kylläisyys ja kolmas arvo eivät. Tarkista aina värinvalitsimen malli ennen lukujen kopiointia.

### HSB (myös HSV)

- 100%:n kirkkaus ja 100%:n kylläisyys antavat puhtaan värin
- Valkoinen vaatii 100%:n kirkkauden ja 0%:n kylläisyyden
- Käytössä monissa suunnittelutyökalujen värinvalitsimissa, kuten Photoshopissa ja Figmassa
- Ei käytettävissä suoraan CSS:ssä

### HSL

- 50%:n vaaleus antaa puhtaan värin
- 100%:n vaaleus on aina valkoinen
- Kirjoitetaan suoraan CSS:ään muodossa `hsl()`
- Helppo tapa tehdä vaaleampia ja tummempia versioita

## HSL:n käyttö CSS:ssä

CSS ymmärtää `hsl()`-funktion suoraan, joten se on kätevä teemoissa. Säilytä sävy muuttujassa, niin voit vaihtaa koko käyttöliittymän väriä yhdellä luvulla. Myös `hwb()` on tarjolla: hue, whiteness ja blackness eli sävy, valkoisuus ja mustuus. Sen ajatus on lähempänä HSB:tä. Yksityiskohdat ovat [MDN:n hsl()-sivulla](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl), ja [HSL-värit](https://gradiently.design/fi/guide/hsl-colors) syventää aihetta.

```css
:root {
  --hue: 262;
  --brand: hsl(var(--hue) 83% 58%);   /* #7c3aed */
  --brand-soft: hsl(var(--hue) 83% 92%);
  --brand-deep: hsl(var(--hue) 70% 28%);
  --brand-muted: hsl(var(--hue) 25% 55%);
}

/* Change --hue to 175 and the whole set turns teal */
```

Yksi sävy, neljä tehtävää. Vaaleus luo pehmeät ja syvät versiot, kylläisyys hillityn.

## Miksi sama vaaleus ei näytä samalta

HSB ja HSL ovat geometriaa, eivät havaintomalleja. Puhtaan keltaisen ja sinisen HSL-vaaleus on molemmilla 50 prosenttia, mutta keltainen näyttää paljon kirkkaammalta. WCAG-kaavalla sen suhteellinen luminanssi on noin 0,93, sinisen 0,07. Lisää kummallekin valkoinen teksti, niin ero on ilmeinen. Siksi tasaisilla HSL-vaaleuden askelilla rakennettu paletti voi näyttää epätasaiselta ja tekstin kontrasti pitää aina tarkistaa, ei olettaa.

- Keltainen, HSL 60° 100% 50%: #ffff00
- Vihreä, HSL 120° 100% 50%: #00ff00
- Punainen, HSL 0° 100% 50%: #ff0000
- Sininen, HSL 240° 100% 50%: #0000ff

Neljä väriä täsmälleen samalla HSL-vaaleudella. Valkoista vasten keltaisen kontrasti on noin 1,07:1 ja sinisen noin 8,6:1.

Havaintoon perustuvat mallit korjaavat tämän. [OKLCH](https://gradiently.design/fi/guide/oklch-explained) säilyttää vaaleuden, kroman ja sävyn helposti ymmärrettävän ajatuksen, mutta vaaleus seuraa silmän havaintoa, joten askeleet näyttävät tasaisilta. HSB ja HSL sopivat nopeaan säätöön. Valitse OKLCH brändin väriasteikkoon tai [liukuväriin, jonka keskiosa ei samene](https://gradiently.design/fi/guide/gradient-interpolation).

## Nopeat tavat säätää väriä HSB:llä

- **Liian räikeä:** laske kylläisyyttä 15-25 pistettä ennen muita muutoksia.
- **Liian vaisu:** nosta kylläisyyttä hieman tai siirrä sävyä muutama aste lämpimämpään suuntaan.
- **Tarvitset hover-tilan:** laske kirkkautta noin 10 pistettä.
- **Tarvitset vaalean taustan:** säilytä sävy, laske kylläisyyttä reilusti ja nosta kirkkaus lähelle 100:aa.
- **Kaksi väriä riitelee:** siirrä toisen sävyä lähemmäksi toista tai hillitse yhtä niistä.

Jos haluat aloittaa valmiista ilmeestä kolmen liukusäätimen sijaan, Gradientlyn Markkinoilla voit hakea Markeja värisanoilla, kuten ”deep teal” tai ”warm peach”.

## FAQ

### Mitä ovat sävy, kylläisyys ja kirkkaus?

Sävy on värin kulma väriympyrässä, kylläisyys sen voimakkuus ja kirkkaus sen valon määrä. Yhdessä ne kuvaavat minkä tahansa näyttövärin.

### Onko HSB sama kuin HSV?

Kyllä. HSV tarkoittaa hue, saturation ja value eli sävy, kylläisyys ja arvo. Arvo tarkoittaa samaa kuin kirkkaus.

### Mikä ero on HSB:llä ja HSL:llä?

HSB:ssä 100 prosentin kirkkaus täydellä kylläisyydellä antaa puhtaan värin. HSL:ssä 50 prosentin vaaleus antaa puhtaan värin ja 100 prosenttia valkoisen.

### Voinko käyttää HSB:tä CSS:ssä?

Et suoraan. CSS tukee funktioita `hsl()`, `hwb()` ja `oklch()`, joten muunna HSB-arvot johonkin niistä.

### Mikä ero on sävyllä ja kylläisyydellä?

Sävy kertoo, mikä väri on kyseessä, kuten punainen tai sininen. Kylläisyys kertoo sen voimakkuuden harmaasta voimakkaaseen väriin.