Väriarvot: nimetyt värit, heksadesimaali, RGB ja HSL
Opitte kaikki CSS:n väritavat: nimetyt värit, heksakoodit sekä rgb()- ja hsl()-funktiot.
Väriarvot: nimetyt värit, heksadesimaali, RGB ja HSL on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
CSS-värimuodot
CSS tukee useita värimuotoja. Oikean valinta riippuu työskentelytavastanne, käyttämistänne työkaluista sekä siitä, tarvitsetteko läpinäkyvyyttä tai värien dynaamista käsittelyä.
Nimetyt värit
CSS määrittelee yli 140 nimettyä väriä, kuten red, tomato ja cornflowerblue. Ne sopivat erinomaisesti nopeaan prototypointiin, mutta niiden tarkkuus on rajallinen.
<h1>Named Colors</h1>
<button>cornflowerblue button</button>
Heksadesimaalivärit
Heksadesimaalivärit käyttävät #-merkkiä, jota seuraa 6 heksanumeroa (tai lyhytmerkinnässä 3). Kukin numeropari ilmaisee punaisen, vihreän ja sinisen arvon (0–255).
<p class="full-hex">Full hex: #ff6347</p>
<p class="shorthand-hex">Shorthand hex: #f64</p>
Heksadesimaalivärit alfakanavalla
Lisää neljäs heksanumeroiden pari (tai lyhytmerkinnässä neljäs numero) ilmaisemaan alfakanavan läpinäkyvyyttä:
<div class="hex-alpha-full">8-digit hex alpha</div>
<div class="hex-alpha-short">4-digit shorthand alpha</div>
RGB-värit
rgb() ottaa kolme kokonaislukua (0–255) punaiselle, vihreälle ja siniselle kanavalle. Muoto on erittäin helppolukuinen, ja sen toimintaa on helppo käsitellä ohjelmallisesti.
<p class="rgb-tomato">rgb(255, 99, 71)</p>
<p class="rgb-black">rgb(0, 0, 0)</p>
<p class="rgb-white">rgb(255, 255, 255)</p>
RGBA-värit
Lisää rgb()-funktioon neljäs parametri (0–1) alfakanavan läpinäkyvyyttä varten. Tämä vastaa uudempaa rgb()-syntaksia, jossa käytetään kauttaviivaa.
<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
<p class="rgba-modern">rgb(255 99 71 / 0.5)</p>
HSL-värit
hsl() määrittelee värin sävyn (0–360°), kylläisyyden (0–100 %) ja valoisuuden (0–100 %) avulla. Tämä on huomattavasti intuitiivisempi tapa luoda väripaletteja ja niiden muunnelmia.
<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
<p class="hsl-steelblue">hsl(210, 70%, 50%)</p>
HSLA-värit
Kuten rgba(), myös hsla() lisää alfakanavan. Nykyaikaisessa CSS:ssä voitte käyttää sen sijaan kauttaviivaa erottimena:
<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
<p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>
Värimuunnelmien luominen HSL:n avulla
HSL on omimmillaan sävyjen vaalentamiseen ja tummentamiseen. Pidä sävy ja kylläisyys samoina ja muuta valoisuutta:
<button class="btn-light">Light</button>
<button class="btn">Base</button>
<button class="btn-dark">Dark</button>
currentColor-avainsana
currentColor on dynaaminen arvo, joka vastaa elementin nykyisen color-ominaisuuden arvoa. Sen avulla reunat, varjot tai SVG-täytöt voivat periä tekstin värin automaattisesti.
<a href="#">Link with currentColor border</a>
transparent-avainsana
transparent-avainsana vastaa arvoa rgba(0,0,0,0) eli täysin läpinäkyvää väriä. Se on hyödyllinen hover-tehosteissa, joissa siirrytään läpinäkyvästä väristä johonkin väriin.
<button>Transparent background</button>
Pikatarkistus
Millä värimuodolla saman sävyn vaaleampien ja tummempien muunnelmien luominen on helpointa?
Yhteenveto
CSS tarjoaa nimetyt, heksadesimaali-, RGB- ja HSL-värimuodot. HSL sopii erinomaisesti värien ohjelmalliseen käsittelyyn. Kaikkiin muotoihin voi lisätä alfakanavan läpinäkyvyyttä varten. currentColor ja transparent ovat käteviä erityisiä avainsanoja.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Väriarvot: nimetyt värit, heksadesimaali, RGB ja HSL” ilmainen?
Kyllä – oppitunnin ”Väriarvot: nimetyt värit, heksadesimaali, RGB ja HSL” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Väriarvot: nimetyt värit, heksadesimaali, RGB ja HSL”?
Opitte kaikki CSS:n väritavat: nimetyt värit, heksakoodit sekä rgb()- ja hsl()-funktiot. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Väriarvot: nimetyt värit, heksadesimaali, RGB ja HSL”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Väriarvot: nimetyt värit, heksadesimaali, RGB ja HSL
- Taustaväri ja -kuva
- Liukuvärit: lineaarinen ja säteittäinen
- Peittävyys ja RGBA-läpinäkyvyys