4 tapaa määrittää värit CSS: ssä

Key Takeaways

• Värinimien käyttäminen: CSS tarjoaa 145 värinimeä helppoa ja aloittelijaystävällistä värien valintaa varten, mutta vaihtoehdot ovat rajalliset, eivätkä ne välttämättä vastaa tarkkoja suunnittelutarpeita.
• Heksadesimaaliset värikoodit: Hex-koodit tarjoavat laajan valikoiman värivaihtoehtoja ja tarkan mukautuksen, vaikka niiden käyttö ja muistaminen voi olla vähemmän intuitiivista.
• RGB- ja RGBA-väriarvot: RGB mahdollistaa tarkan värinhallinnan numeerisilla arvoilla, kun taas RGBA lisää läpinäkyvyyttä. On tärkeää varmistaa saatavilla olevat väriyhdistelmät.

Värit ovat yleisimmin käytettyjä CSS-attribuutteja, ja niillä on tärkeä rooli verkkosivuston visuaalisen identiteetin, tunnelman ja käyttökokemuksen muokkaamisessa. CSS tarjoaa joukon vaihtoehtoja värien käyttämiseen, joista jokainen on räätälöity tiettyjen suunnittelutarpeiden ja mieltymysten mukaan.

Vaikka värien määrittelyn tärkeyttä on helppo unohtaa, valinnat voivat vaikuttaa merkittävästi verkkosivustosi ulkoasuun ja tuntumaan. Eri menetelmien erojen ja niiden käytännön soveltamisen ja yhdistämisen tutkiminen parantaa kykyäsi luoda visuaalisesti houkuttelevia verkkosivustoja.

1. Värinimien käyttäminen

CSS tarjoaa kätevän tavan määrittää värit nimien avulla, ja vaihtoehtoja on 145. Nämä värinimet vaihtelevat yksinkertaisesta "punaisesta", "vihreästä" ja "sinisesta" tarkempiin sävyihin, kuten "koralli" tai "laventeli".

Nimettyjen värien käyttäminen on yksinkertaista: valitset värin nimen, kuten "punainen", ja käytät sitä CSS-ominaisuuteen, joka tukee väriarvoja. Sellainen ominaisuuksia ovat ilmeiset väri ja taustaväri, mutta myös reunuksen väri, ääriviiva-väri, ja teksti-varjo, muiden joukossa.

Värien nimet ovat käteviä, kun tarvitset väliaikaista väriä prototyyppien tekemiseen tai haluat pitää koodisi helposti luettavana. Tässä on syntaksi:

color_property: color_name;

Tässä tapauksessa vaihda se yksinkertaisesti värin_nimi tietyllä värillä, jota haluat käyttää. Jos esimerkiksi haluat asettaa tekstin väri kappaleesta punainen, kirjoita:

p {
color: red;
}

Tämä antaa kappaleillesi punaisen tekstin värin:

Plussat: Niitä on helppo lukea ja ymmärtää CSS-koodissasi. Ne ovat aloittelijaystävällisiä, toimivat hyvin kaikilla selaimilla ja ovat käteviä nopeaan suunnitteluideaan.

Haittoja: Niillä on rajalliset vaihtoehdot, eivätkä ne välttämättä tarjoa tarvitsemiasi tarkkoja sävyjä, mikä rajoittaa suunnittelun luovuutta. Lisäksi ne eivät välttämättä aina täytä tiukkoja saavutettavuusvaatimuksia, ja tuki vanhemmissa järjestelmissä voi vaihdella.

2. Heksadesimaaliset värikoodit

Heksadesimaaliset värikoodit, joita usein kutsutaan "heksadesimaalikoodeiksi", ovat yleisimpiä tapoja määrittää värit verkkosuunnittelussa. Nämä koodit koostuvat kuuden merkin numeroiden ja kirjainten yhdistelmistä (0-9, A-F), jotka edustavat punaisen, vihreän ja sinisen (RGB) komponenttien yhdistelmää värissä.

Vaikka niitä on helppo käyttää, niiden toiminnan ymmärtäminen voi olla haastavaa. Voit ottaa syvä sukellus hex-koodeihin ymmärtämään paremmin. Tässä on perusesimerkki siitä, kuinka voit käyttää heksadesimaalikoodeja CSS: ssä:

color: #RRGGBB;

Tässä muodossa RR, GG ja BB edustavat punaista, vihreää ja sinistä komponenttia. Jokainen komponentti voi vaihdella 00:sta (ei intensiteettiä) FF: ään (maksimi intensiteetti). Jos esimerkiksi haluat määrittää verkkosivuston otsikon taustaväriksi tietyn sinisen sävyn, voit käyttää seuraavanlaista heksadesimaalikoodia:

header {
background-color: #336699;
}

Tämä tuottaa syvän sinisen värin:

​​​​​

Voit myös käyttää lyhennettä, jos kukin kolmesta komponentista toistaa saman merkin kahdesti. Voit kirjoittaa yllä olevan esimerkin seuraavasti:

header {
background-color: #369;
}

Plussat: Heksadesimaaliset värikoodit tarjoavat laajan valikoiman värivaihtoehtoja, joiden avulla voit luoda yksityiskohtaisia ​​ja mukautettuja sävyjä. Ne tarjoavat sujuvan värivalintojen hallinnan, mikä tekee niistä ihanteellisia monimutkaisiin suunnitteluvaatimuksiin.

Haittoja: Vaikka hex-koodit ovat tehokkaita, ne voivat olla vähemmän intuitiivisia kuin nimetyt värit. Saatat myös kohdata haasteen muistaa tiettyjä väriarvoja. Onneksi, työkalut värien heksadesimaalikoodien löytämiseen ovat saatavilla, mikä tekee prosessista hallittavamman.

3. RGB- ja RGBA-väriarvot

Kuten heksadesimaalikoodit, tämä muoto antaa sinun määrittää värit niiden punaisen, vihreän ja sinisen komponentin mukaan. Tällä kertaa voit kuitenkin käyttää ystävällisempiä kokonaislukuja.

RGB-väriarvot

RGB-väriarvot ovat toiseksi yleisimmin käytetty menetelmä värien määrittämiseen CSS: ssä. "RGB" edustaa punaista, vihreää ja sinistä ilmaistuna CSS-funktiona ja sen jälkeen suluissa. Suluissa voit määrittää kullekin värikanavalle arvot välillä 0 - 255. Tämän avulla voit hallita punaisen, vihreän ja sinisen voimakkuutta siinä värissä, jota haluat käyttää.

Tässä on syntaksi:

rgb(red_value, green_value, blue_value);

Korvata punainen_arvo, vihreä_arvo, ja sininen_arvo vastaavien numeeristen arvojen kanssa. Voit esimerkiksi saada valkoisen, mustan ja punaisen värin, kuten tässä kuvassa:

Kun asetat kaikki kolme värikanavaa (punainen, vihreä ja sininen) niiden enimmäisarvoon 255, tuloksena on suurin intensiteetti kullekin kanavalle, jolloin saadaan valkoinen väri:

.white-box {
 color: rgb(255, 255, 255);
}

Kun asetat kaikki kolme värikanavaa minimiarvoon 0, se edustaa värin puuttumista jokaisessa kanavassa, mikä johtaa mustaan.

.black-box {
color: rgb(0, 0, 0);
}

Punaisen kanavan asettaminen maksimiarvoonsa 255, samalla kun muut kanavat pidetään niiden minimiarvossa 0, tuottaa punaisen värin:

.red-box {
color: rgb(255, 0, 0); 
}

RGBA-väriarvot

RGBA toimii samalla tavalla kuin RGB, ainoa ero on alfa-arvon sisällyttäminen. RGBA: n "A" tarkoittaa alfaa, joka määrittää valitun värin läpinäkyvyyden tai peittävyyden tason. Arvo 0 edustaa täydellistä läpinäkyvyyttä, mikä tekee väristä täysin näkymätön, kun taas arvo 1 edustaa täyttä peittävyyttä, mikä tekee väristä täysin näkyvän.

RGBA on erityisen hyödyllinen, kun haluat luoda elementtejä, joiden läpinäkyvyys vaihtelee, kuten läpikuultava tausta tai haalistunut teksti. Koko syntaksi on:

color: rgba(red_value, green_value, blue_value, alpha_value);

Tässä, punainen_arvo, vihreä_arvo, ja sininen_arvo edustavat värikanavia kuten RGB: ssä ja alfa_arvo määrittelee läpinäkyvyyden tason.

div {
background-color: rgba(0, 128, 0, 0.5);
}

Tässä esimerkissä alfa-arvo 0,5 määrittää vihreälle värille 50 % läpinäkyvyyden, jolloin sen alla oleva sisältö näkyy läpi:

Plussat: RGB: n ja RGBA: n avulla voit hallita värejä tarkasti, mikä helpottaa tarkkojen sävyjen valitsemista ja visuaalisesti houkuttelevien kuvioiden luomista. Ne ovat yhteensopivia eri verkkoselaimien kanssa, mikä varmistaa, että valitsemasi värit näyttävät yhtenäisiltä.

Haittoja: Haaste on helppokäyttöisten väriyhdistelmien varmistaminen. On ratkaisevan tärkeää kiinnittää huomiota kontrastisuhteisiin, lähinnä käytettäessä läpinäkyvyyttä RGBA: ssa. WCAG-ohjeet voivat auttaa varmistat, että suunnittelusi on saatavilla.

4. HSL- ja HSLA-väriarvot

HSL – lyhenne sanoista Hue, Saturation ja Lightness – on toinen CSS-toiminto, joka määrittää värit. Aivan kuten RGB, HSL käyttää numeerisia arvoja edustamaan värejä, mutta se tekee sen eri tavalla. Saatat olla tuttu HSL-arvot suunnittelusovellusten käyttöliittymäkomponenteista ja muualla.

Värisävy: Tämä edustaa itse väriä käyttämällä väripyörän asteita, jotka vaihtelevat 0–360. Kuvittele, että valitset ympyrän pisteen, jossa jokainen aste vastaa eri väriä. Esimerkiksi 0 ja 360 astetta punaiselle, 120 astetta vihreälle ja 240 astetta siniselle.

Kylläisyys: Kylläisyys määrittää värin eloisuuden tai voimakkuuden. Se määrittelee värin suhteen harmaan kanssa: 0 % on täysin harmaasävyä (desaturoitunut) ja 100 % on täysin kylläistä (eloisaa ja puhdasta).

Keveys: Vaaleus ilmaisee, kuinka kirkkaalta tai tummalta väri näyttää. Se liittyy värin sijaintiin spektrissä mustan (0 %) ja valkoisen (100 %) välillä. Arvo 50 % edustaa normaalia väriä, alle 50 % tummentaa väriä ja yli 50 % vaalentaa sitä.

HSL: n lisäksi on olemassa HSLA, jossa "A" tarkoittaa "alpha". Tämä on samanlainen kuin "A" RGBA: ssa ja tarkoittaa läpinäkyvyyttä.

Tässä on syntaksi:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Käytä tätä syntaksia, korvaa sävyn_arvo, saturation_percentage, ja vaaleus_prosentti kullekin komponentille haluamasi arvot. Esimerkiksi:

div {
background-color: hsl(120, 100%, 50%);
}

Tässä esimerkissä a: n taustaväri div elementti on asetettu kirkkaan vihreäksi HSL-arvojen avulla. 120 edustaa sävyä (vihreä), 100 % on täydellistä kylläisyyttä ja 50 % asettaa vaaleuden tasapainoiselle tasolle.

Plussat: HSL ja HSLA tarjoavat monipuolisia värilaskelmia käyttämällä mukautettuja CSS-ominaisuuksia. Ne ovat erittäin yhteensopivia nykyaikaisten selainten kanssa ja mahdollistavat helpon värien vaaleuden säätämisen.

Haittoja: HSL: n oppiminen sisältää väritieteen ymmärtäminen, kuten sävyt ja värikylläisyydet, jotka voivat olla haastavampia kuin tutut RGB-värit.

Hyödynnä CSS-värien voima

Voit tarkistaa useita menetelmiä, ja samalla kun tutkit eri muotoja värien määrittämiseen CSS: ssä muista, että sinulla on valta muokata verkkosivustosi ulkonäköä, tunnelmaa ja käyttökokemusta.

Valitsemasi värimuoto – olipa kyseessä yksinkertaiset värien nimet, heksadesimaalikoodit, RGB tai HSL – voi vaikuttaa siihen, miten yleisösi näkee sivustosi. Joten kokeile, opi ja löydä värimääritelmät, jotka sopivat parhaiten suunnittelutavoitteisiisi.