# Värisävyjen luontityökalu

Luo värin tummempia sävyjä sekoittamalla sitä mustaan tasaisin askelin. Syötä yksi väri missä tahansa muodossa CSS, valitse 2–20 askelta ja sekoitusväriavaruus, niin saat taulukon, jossa on jokaisen sävyn HEX-, RGB-, HSL- ja OKLCH-arvot alkuperäisestä väristä alkaen. sRGB-sekoitus vastaa perinteisiä sävytyökaluja ja Sass, kun taas OKLab tuottaa havaintojen mukaan tasavälisiä askelia. Sopii erinomaisesti UI-väriasteikkojen luomiseen.

## Usein kysytyt kysymykset

### Mikä on sävy?

Sävy on väri, johon on sekoitettu mustaa. Sävy säilyy ennallaan ja väri tummenee, toisin kuin vaalennettu väri, johon sekoitetaan valkoista, tai murrettu väri, johon sekoitetaan harmaata.

### Miten askelvälit määräytyvät?

Kun askelia on N, rivillä k väriin sekoitetaan mustaa määrä (k - 1) / N, joten 10 askeleen sarjassa arvot ovat 0 %, 10 %, 20 % ja niin edelleen 90 prosenttiin asti. Ensimmäisellä rivillä on aina alkuperäinen väri, eikä mukana ole koskaan puhdasta mustaa.

### Mitä eroa sRGB- ja OKLab-sekoituksella on?

sRGB-sekoituksessa lasketaan gamma-koodattujen kanava-arvojen keskiarvo, kuten Sass mix() mustan kanssa ja useimmat perinteiset sävygeneraattorit tekevät. OKLab-sekoitus tapahtuu havaintoperustaisessa väriavaruudessa, joten askelten vaaleuserot näyttävät tasaisemmilta ja tummissa sävyissä säilyy enemmän väriä.

### Mitä syötemuotoja voin käyttää?

Heksakoodit #-merkin kanssa tai ilman, CSS värinimet, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() ja cmyk(). Syötä yksi väri kerrallaan.

### Kuinka monta sävyä voin luoda?

Kerralla 2–20, oletuksena 10. Määrään lasketaan mukaan ensimmäisen rivin alkuperäinen väri.

### Mitä arvoja taulukossa näytetään?

Jokaisesta askeleesta näytetään mustan osuus, heksakoodi, rgb(), hsl() ja oklch() nykyaikaisella CSS-syntaksilla. RGB-kanavat ovat kokonaislukuja, HSL-prosentit näytetään enintään kahden desimaalin tarkkuudella ja OKLCH:n vaaleus ja värikylläisyys enintään neljän desimaalin tarkkuudella.

### Mitä läpinäkyville väreille tapahtuu?

Syötteen alfa-arvo säilyy jokaisessa sävyssä, koska musta sekoitetaan mukaan samalla alfa-arvolla. Heksakoodissa on tällöin 8 merkkiä, ja CSS-funktioiden lopussa alfa-arvo tulee vinoviivan jälkeen.

### Mitä sRGB-väriavaruuden ulkopuolisille väreille tapahtuu?

Sekoituksessa käytetään koko väriä, mutta HEX-, RGB- ja HSL-arvot voivat esittää vain sRGB:tä. Siksi näiden sarakkeiden väriavaruuden ulkopuoliset askeleet muunnetaan sRGB:hen CSS Color 4 -algoritmilla. OKLCH-sarakkeessa arvo säilyy muuntamattomana.

### Miten käytän sävyjä CSS:ssä?

Kopioi heksa- tai oklch()-arvot mukautettuihin ominaisuuksiin, kuten --brand-600 ja --brand-700. Jos haluat tehdä sekoituksen selaimessa, color-mix(in oklab, var(--brand) 80%, black) tuottaa saman 20 %:n sävyn kuin OKLab-asetus.

### Ovatko tummemmat sävyt automaattisesti saavutettavia?

Eivät. Tarkista tekstin kontrasti jokaisen sävyn kanssa kontrastintarkistimella, sillä tummalta näyttävän sävyn kontrasti voi silti jäädä alle arvon 4.5:1 toista tummaa väriä tai värillistä tekstiä vasten.

Mainospaikka vapaana?

[Lähetä meille sähköpostia](mailto:hi@dennn.is?subject=Mainostaminen%20palvelussa%20OneClick%20Pro)

[Mainos Agenteille valmis lisäosa­sarja tuotteelle WordPress.](https://sleekwp.com/?ref=oneclickpro)