Lyhyesti
- 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.
Tällä sivulla
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ä. 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.
linear-gradient(90deg, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%)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 perustuvat pitkälti matalampaan kylläisyyteen.
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 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.
Hex
#ff0000HSB
HSL
#7c3aedHSB
HSL
Hex
#0f766eHSB
HSL
Hex
#f97316HSB
HSL
Hex
#ffffffHSB
HSL
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, ja HSL-värit syventää aihetta.
: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 */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.
Havaintoon perustuvat mallit korjaavat tämän. OKLCH 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.
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”.
Usein kysyttyä
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.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme