# Värin vaalennusten luontityökalu

Luo värin vaaleampia versioita sekoittamalla sitä valkoiseen tasaisin askelin. Syötä yksi väri missä tahansa muodossa CSS, valitse 2–20 askelta ja sekoitusväriavaruus, niin saat taulukon, jossa on jokaisen vaalennuksen HEX-, RGB-, HSL- ja OKLCH-arvot alkuperäisestä väristä alkaen. sRGB-sekoitus vastaa perinteisiä vaalennustyökaluja ja Sass, kun taas OKLab tuottaa havaintojen mukaan tasavälisiä askelia. Sopii erinomaisesti taustoihin, hover-tiloihin ja väriasteikkoihin.

## Usein kysytyt kysymykset

### Mikä on vaalennus?

Vaalennus on väri, johon on sekoitettu valkoista. Sävy säilyy ennallaan ja väri muuttuu vaaleammaksi ja haaleammaksi, toisin kuin tummennettu väri, johon sekoitetaan mustaa, tai murrettu väri, johon sekoitetaan harmaata.

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

Kun askelia on N, rivillä k väriin sekoitetaan valkoista 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 valkoista.

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

sRGB-sekoituksessa lasketaan gamma-koodattujen kanava-arvojen keskiarvo, kuten Sass mix() valkoisen kanssa ja useimmat perinteiset vaalennusgeneraattorit tekevät. OKLab-sekoitus tapahtuu havaintoperustaisessa väriavaruudessa, joten vaaleuserot näyttävät tasaisemmilta eivätkä vaaleat sävyt haalistu yhtä nopeasti.

### 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 vaalennusta 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 valkoisen 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 vaalennuksessa, koska valkoinen 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 vaalennuksia CSS:ssä?

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

### Voinko käyttää valkoista tekstiä vaalealla vaalennuksella?

Yleensä et, sillä vaaleiden sävyjen kontrasti valkoista vasten on pieni. Käytä tummaa tekstiä vaaleilla sävyillä ja tarkista jokainen väriyhdistelmä kontrastintarkistimella. Tavallisen tekstin kontrastin on oltava vähintään 4.5:1 WCAG AA:n mukaan.

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)