4 būdai, kaip apibrėžti spalvas CSS

Key Takeaways

• Spalvų pavadinimų naudojimas: CSS suteikia 145 spalvų pavadinimus, kad būtų lengva ir pradedantiesiems patogiai pasirinkti spalvas, tačiau parinktys yra ribotos ir gali neatitikti tikslių dizaino poreikių.
• Šešioliktainiai spalvų kodai: šešioliktainiai kodai siūlo platų spalvų pasirinkimą ir tikslų pritaikymą, nors juos naudoti ir prisiminti gali būti ne taip intuityvu.
• RGB ir RGBA spalvų reikšmės: RGB leidžia tiksliai valdyti spalvas su skaitinėmis reikšmėmis, o RGBA padidina skaidrumą. Svarbu užtikrinti prieinamus spalvų derinius.

Spalvos yra vienas dažniausiai naudojamų CSS atributų, vaidinančių gyvybiškai svarbų vaidmenį formuojant svetainės vizualinę tapatybę, nuotaiką ir vartotojo patirtį. CSS siūlo daugybę spalvų naudojimo pasirinkimų, kiekvienas pritaikytas pagal konkrečius dizaino poreikius ir pageidavimus.

Nors lengva nepastebėti spalvų apibrėžimo svarbos, jūsų pasirinkimai gali labai paveikti jūsų svetainės išvaizdą ir pojūtį. Ištyrę įvairių metodų skirtumus ir kaip juos praktiškai pritaikyti bei derinti, pagerinsite savo galimybes kurti vizualiai patrauklias svetaines.

1. Spalvų pavadinimų naudojimas

CSS yra patogus būdas apibrėžti spalvas naudojant pavadinimus ir yra 145 parinktys. Šie spalvų pavadinimai svyruoja nuo paprastų „raudonos“, „žalios“ ir „mėlynos“ iki konkretesnių atspalvių, tokių kaip „koralas“ ar „levanda“.

Naudoti pavadintas spalvas paprasta: pasirenkate spalvos pavadinimą, pvz., „raudona“, ir naudojate jį CSS ypatybėje, kuri palaiko spalvų reikšmes. Toks savybės apima akivaizdžias spalva ir fono spalva, bet ir kraštinė-spalva, kontūras-spalva, ir tekstas-šešėlis, tarp kitų.

Spalvų pavadinimai yra naudingi, kai reikia laikinos spalvos prototipui arba norite, kad kodas būtų lengvai skaitomas. Štai sintaksė:

color_property: color_name;

Tokiu atveju tiesiog pakeiskite spalvos_pavadinimas su konkrečia spalva, kurią norite naudoti. Pavyzdžiui, jei norite nustatyti tekstą spalva pastraipos į raudona, rašyk:

p {
color: red;
}

Tai suteiks jūsų pastraipoms raudoną teksto spalvą:

Argumentai "už": juos lengva perskaityti ir suprasti jūsų CSS kode. Jie tinka pradedantiesiems, gerai veikia visose naršyklėse ir yra patogūs greitoms dizaino idėjoms.

Minusai: Jų galimybės yra ribotos ir gali nepasiūlyti tikslių atspalvių, kurių jums reikia, o tai riboja dizaino kūrybiškumą. Be to, jie ne visada gali atitikti griežtus prieinamumo reikalavimus, o palaikymas senesnėse sistemose gali skirtis.

2. Šešioliktainiai spalvų kodai

Šešioliktainiai spalvų kodai, dažnai vadinami šešioliktainiais kodais, yra labiausiai paplitę interneto dizaino spalvų nustatymo metodai. Šiuos kodus sudaro šešių simbolių skaičių ir raidžių (0–9, A–F) deriniai, vaizduojantys raudonos, žalios ir mėlynos spalvos (RGB) komponentų derinį.

Nors juos lengva naudoti, suprasti, kaip jie veikia, gali būti sudėtinga. Gali paimti giliai pasinerti į šešioliktainius kodus kad geriau suprastum. Štai pagrindinis pavyzdys, kaip galite naudoti šešioliktainius kodus CSS:

color: #RRGGBB;

Šiame formate RR, GG ir BB reiškia atitinkamai raudoną, žalią ir mėlyną komponentus. Kiekvienas komponentas gali svyruoti nuo 00 (be intensyvumo) iki FF (maksimalaus intensyvumo). Pavyzdžiui, jei norite nustatyti svetainės antraštės fono spalvą į konkretų mėlynos spalvos atspalvį, galite naudoti šešioliktainį kodą, pavyzdžiui:

header {
background-color: #336699;
}

Tai suteiks sodriai mėlyną spalvą:

​​​​​

Taip pat galite naudoti trumpinį, jei kiekvienas iš trijų komponentų pakartoja tą patį simbolį du kartus. Aukščiau pateiktą pavyzdį galite parašyti taip:

header {
background-color: #369;
}

Argumentai "už": Šešioliktainiai spalvų kodai suteikia platų spalvų pasirinkimą, leidžiantį generuoti išsamius ir pritaikytus atspalvius. Jie leidžia sklandžiai valdyti spalvų pasirinkimą, todėl puikiai tinka sudėtingiems dizaino reikalavimams.

Minusai: Nors šešioliktainiai kodai yra galingi, jie gali būti mažiau intuityvūs nei įvardintos spalvos. Taip pat galite susidurti su iššūkiu prisiminti konkrečias spalvų reikšmes. Laimei, įrankių šešioliktainiams spalvų kodams rasti yra prieinami, todėl procesas tampa lengviau valdomas.

3. RGB ir RGBA spalvų reikšmės

Kaip ir šešioliktainiai kodai, šis formatas leidžia nurodyti spalvas pagal jų raudoną, žalią ir mėlyną komponentus. Tačiau šį kartą galite naudoti draugiškesnius sveikuosius skaičius.

RGB spalvų reikšmės

RGB spalvų reikšmės yra antras dažniausiai naudojamas CSS spalvų nustatymo metodas. „RGB“ reiškia raudoną, žalią ir mėlyną, išreikštą CSS funkcija su skliaustais po jos. Skliausteliuose kiekvienam spalvų kanalui priskiriate reikšmes nuo 0 iki 255. Tai leidžia valdyti norimos naudoti spalvos raudonos, žalios ir mėlynos spalvos intensyvumą.

Štai sintaksė:

rgb(red_value, green_value, blue_value);

Pakeiskite raudona_vertė, žalia_vertė, ir mėlyna_vertė su atitinkamomis skaitinėmis reikšmėmis. Pavyzdžiui, galite pasiekti baltos, juodos ir raudonos spalvos, kaip parodyta šiame paveikslėlyje:

Kai nustatote visų trijų spalvų kanalų (raudonos, žalios ir mėlynos) maksimalią reikšmę 255, kiekvienam kanalui bus nustatytas didžiausias intensyvumas ir sukuriama balta spalva:

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

Kai nustatote visų trijų spalvų kanalų mažiausią reikšmę 0, tai reiškia, kad kiekviename kanale nėra spalvos, todėl juoda.

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

Raudonajam kanalui nustačius maksimalią 255 vertę, o kitiems kanalams išlaikant mažiausią 0 reikšmę, gaunama raudona spalva:

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

RGBA spalvų reikšmės

RGBA veikia taip pat, kaip ir RGB, vienintelis skirtumas yra alfa reikšmės įtraukimas. RGBA raidė „A“ reiškia alfa, kuri nustato pasirinktos spalvos skaidrumo arba neskaidrumo lygį. 0 reikšmė reiškia visišką skaidrumą, todėl spalva tampa visiškai nematoma, o 1 reiškia visišką neskaidrumą, todėl spalva visiškai matoma.

RGBA ypač naudinga, kai norite sukurti įvairaus skaidrumo elementus, pvz., permatomus fonus arba išblukusią tekstą. Visa sintaksė yra:

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

Čia raudona_vertė, žalia_vertė, ir mėlyna_vertė vaizduoja spalvų kanalus kaip RGB ir alfa_vertė nurodomas skaidrumo lygis.

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

Šiame pavyzdyje alfa reikšmė 0,5 priskiria 50 % skaidrumo žaliai spalvai, todėl po ja esantis turinys gali būti rodomas per:

Argumentai "už": RGB ir RGBA leidžia tiksliai valdyti spalvas, todėl lengviau pasirinkti tikslius atspalvius ir sukurti vizualiai patrauklų dizainą. Jie yra suderinami su įvairiomis interneto naršyklėmis, todėl jūsų pasirinktos spalvos atrodo vienodos.

Minusai: Iššūkis yra užtikrinti prieinamus spalvų derinius. Labai svarbu atkreipti dėmesį į kontrasto santykį, ypač dirbant su skaidrumu RGBA. WCAG gairės gali padėti užtikrinate, kad jūsų dizainas būtų prieinamas.

4. HSL ir HSLA spalvų reikšmės

HSL – atspalvių, sodrumo ir šviesumo trumpinys – tai dar viena CSS funkcija, apibrėžianti spalvas. Panašiai kaip RGB, HSL naudoja skaitines reikšmes spalvoms pavaizduoti, tačiau tai daro kitaip. Galbūt esate susipažinę su HSL reikšmės iš UI komponentų dizaino programose ir kitur.

Atspalvis: reiškia pačią spalvą, naudojant spalvų rato laipsnius nuo 0 iki 360. Įsivaizduokite, kad pasirenkate tašką apskritime, kur kiekvienas laipsnis atitinka skirtingą spalvą. Pavyzdžiui, 0 ir 360 laipsnių raudonai, 120 laipsnių žaliai ir 240 laipsnių mėlynai.

Sodrumas: sodrumas nustato spalvos ryškumą arba intensyvumą. Jis apibrėžia spalvos santykį su pilka spalva, o 0% yra visiškai pilkos spalvos (nesočiųjų) ir 100% yra visiškai sočiųjų (gyva ir gryna).

Lengvumas: Šviesumas parodo, kaip ryški arba tamsi spalva atrodo. Tai susiję su spalvos padėtimi spektre tarp juodos (0%) ir baltos (100%). 50 % reikšmė reiškia normalią spalvą, o mažesnės nei 50 % vertės patamsina spalvą, o didesnės nei 50 % – šviesina.

Be HSL, yra HSLA, kur „A“ reiškia „alfa“. Tai panašu į „A“ RGBA ir reiškia skaidrumą.

Štai sintaksė:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Naudodami šią sintaksę pakeiskite atspalvio_vertė, prisotinimo_procentas, ir lengvumo_procentas su konkrečiomis norimomis kiekvieno komponento reikšmėmis. Pavyzdžiui:

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

Šiame pavyzdyje a fono spalva div elementas nustatomas į ryškiai žalią spalvą naudojant HSL reikšmes. 120 reiškia atspalvį (žalias), 100% yra visiškam sodrumui, o 50% nustato šviesumą iki subalansuoto lygio.

Argumentai "už": HSL ir HSLA siūlo universalius spalvų skaičiavimus naudojant pasirinktines CSS savybes. Jie puikiai suderinami su šiuolaikinėmis naršyklėmis ir leidžia lengvai reguliuoti spalvų šviesumą.

Minusai: HSL mokymasis apima suprasti spalvų mokslą, pvz., atspalvius ir sodrumą, kurie gali būti sudėtingesni nei pažįstamos RGB spalvos.

Pasinaudokite CSS spalvų galia

Yra ir daugiau metodų, kuriuos galite patikrinti ir tyrinėdami skirtingus spalvų apibrėžimo formatus CSS atminkite, kad galite keisti savo svetainės išvaizdą, nuotaiką ir naudotojo patirtį.

Jūsų pasirinktas spalvų formatas – ar tai būtų paprasti spalvų pavadinimai, šešioliktainiai kodai, RGB ar HSL – gali turėti įtakos tam, kaip auditorija suvoks jūsų svetainę. Taigi eksperimentuokite, mokykitės ir raskite spalvų apibrėžimus, kurie geriausiai atitinka jūsų dizaino tikslus.