CSS-liukuväri – tee lineaarinen, säteittäinen tai kartioliukuväri ja kopioi koodi
Tee lineaarinen, säteittäinen tai kartiomainen liukuväri, lisää enintään kuusi väripistettä ja kopioi valmis CSS. Esikatselu päivittyy heti, kun muutat väriä, kulmaa tai pisteiden paikkaa.
Pisteitä voi siirtää vetämällä, ja palkkia napauttamalla saa uuden pisteen siihen kohtaan. Säteittäiselle ja kartiolle voi valita keskipisteen, säteittäiselle myös ympyrän tai ellipsin. Työkalu laskee koko liukuvärin matkalta heikoimman kontrastin valkoiselle ja mustalle tekstille, joten näet heti, erottuuko teksti taustan päällä.
Mitä OKLCH-sekoitus tekee?
Oletuksena selain sekoittaa värit sRGB:ssä, jolloin esimerkiksi sinisen ja keltaisen puoliväli on harmaa. CSS Color 4 sallii sekoituksen OKLCH-väriavaruudessa (esim. linear-gradient(90deg in oklch, …)), jolloin väri kulkee sävyympyrää pitkin ja pysyy kylläisenä. Kopioitu CSS sisältää ensin tavallisen rivin, jota vanhemmat selaimet käyttävät, ja sen jälkeen OKLCH-rivin.
Ladataan työkalua...
Etkö tiedä mihin ryhtyä seuraavaksi? Selaa kaikki työkalut
Hae työkalua →Liukuväritysgeneraattori tekee CSS-liukuvärin (gradient) ja antaa valmiin koodin kopioitavaksi.
Valitse tyyppi, värit ja pisteiden paikat. Tulos ja CSS näkyvät ylimpänä.
- linear-gradient, radial-gradient ja conic-gradient.
- 2–6 väripistettä, jotka voi siirtää vetämällä tai kentästä.
- Kulma, keskipiste, ympyrä tai ellipsi sekä sekoitus sRGB:ssä tai OKLCH:ssa.
Kontrastiluvut kertovat liukuvärin heikoimman kohdan.
- Vihreä (vähintään 4,5:1) riittää tavalliseen tekstiin, keltainen (3:1) vain isoon.
- Jos kumpikaan ei riitä, siirrä tekstiä, tummenna liukuväriä tai lisää tekstin taakse tausta.
- Kartio on saumaton, kun ensimmäinen ja viimeinen väri ovat samat.
Liukuväri piirretään selaimessa.
- Se skaalautuu kaikille näytöille eikä tarvitse kuvatiedostoa.
- OKLCH-sekoitus toimii uusissa selaimissa; kopioitu CSS sisältää varalinjan.
- Lähteet: W3C, CSS Images Module Level 3 ja 4; W3C, CSS Color Module Level 4; W3C, WCAG 2.2 (kontrastisuhde).