4 начина дефинисања боја у ЦСС-у

Кључне Такеаваис

• Коришћење назива боја: ЦСС пружа 145 назива боја за лак избор боја прилагођен почетницима, али опције су ограничене и можда неће задовољити прецизне потребе дизајна.
• Хексадецимални кодови боја: Хексадецимални кодови нуде широк спектар опција боја и прецизно прилагођавање, иако могу бити мање интуитивни за употребу и памћење.
• РГБ и РГБА вредности боја: РГБ омогућава прецизну контролу боја са нумеричким вредностима, док РГБА додаје транспарентност. Важно је осигурати приступачне комбинације боја.

Боје су међу најчешће коришћеним ЦСС атрибутима и играју виталну улогу у обликовању визуелног идентитета, расположења и корисничког искуства веб локације. ЦСС нуди низ избора за коришћење боја, од којих је сваки прилагођен специфичним потребама и преференцијама дизајна.

Иако је лако превидети важност дефиниције боја, ваши избори могу значајно утицати на изглед и осећај ваше веб локације. Истраживање разлика између различитих метода и како их практично применити и комбиновати ће побољшати вашу способност да креирате визуелно привлачне веб странице.

1. Коришћење имена боја

ЦСС пружа згодан начин за дефинисање боја помоћу имена, а на располагању је 145 опција. Ови називи боја крећу се од једноставних „црвених“, „зелених“ и „плавих“ до специфичнијих нијанси попут „кораља“ или „лаванде“.

Коришћење именованих боја је једноставно: бирате име боје као што је „црвена“ и користите га у својству ЦСС-а које подржава вредности боја. Такве својства укључују очигледне боја и боја позадине, али и боја ивице, контура-боја, и текст-сенка, међу другима.

Имена боја су згодна када вам је потребна привремена боја за израду прототипа или желите да ваш код буде лак за читање. Ево синтаксе:

color_property: color_name;

У овом случају, једноставно замените име_боје са одређеном бојом коју желите да користите. На пример, ако желите да поставите текст боја од параграфа до црвена, напиши:

p {
color: red;
}

Ово ће вашим параграфима дати црвену боју текста:

Прос: Лако их је читати и разумети у вашем ЦСС коду. Погодни су за почетнике, добро функционишу у свим претраживачима и згодни су за брзе идеје за дизајн.

Цонс: Имају ограничене могућности и можда неће понудити прецизне нијансе које су вам потребне, ограничавајући креативност дизајна. Поред тога, они можда не испуњавају увек строге захтеве приступачности, а подршка у старијим системима може да варира.

2. Хексадецимални кодови боја

Хексадецимални кодови боја, који се често називају „хексадецимални кодови“, најчешћи су методи одређивања боја у веб дизајну. Ови кодови се састоје од комбинација бројева и слова од шест знакова (0-9, А-Ф), који представљају мешавину црвених, зелених и плавих (РГБ) компоненти у боји.

Иако су лаки за употребу, разумевање начина на који раде може бити изазовно. Можете узети дубоко заронити у хексадецималне кодове да боље разумем. Ево основног примера како можете да користите хексадецималне кодове у ЦСС-у:

color: #RRGGBB;

У овом формату, РР, ГГ и ББ представљају црвену, зелену и плаву компоненту, респективно. Свака компонента може да се креће од 00 (без интензитета) до ФФ (максимални интензитет). На пример, ако желите да поставите боју позадине заглавља веб локације на одређену нијансу плаве, можете користити хексадецимални код као што је овај:

header {
background-color: #336699;
}

Ово ће произвести тамноплаву боју:

​​​​​

Можете користити и стенографију ако свака од три компоненте двапут понавља исти знак. Горњи пример можете написати као:

header {
background-color: #369;
}

Прос: Хексадецимални кодови боја пружају широк спектар опција боја, омогућавајући вам да генеришете детаљне и прилагођене нијансе. Они нуде глатку контролу избора боја, што их чини идеалним за сложене захтеве дизајна.

Цонс: Иако су хексадецимални кодови моћни, могу бити мање интуитивни од именованих боја. Такође можете наићи на изазов памћења одређених вредности боја. Срећом, алати за проналажење хексадецималних кодова боја на које наиђете су доступни, чинећи процес лакшим за управљање.

3. РГБ и РГБА вредности боја

Као и хексадецимални кодови, овај формат вам омогућава да одредите боје према њиховим црвеним, зеленим и плавим компонентама. Овај пут, међутим, можете користити љубазније целе бројеве.

РГБ вредности боја

РГБ вредности боја су други најчешће коришћени метод за дефинисање боја у ЦСС-у. „РГБ“ представља црвену, зелену и плаву, изражену као ЦСС функција са заградама иза ње. Унутар заграда, сваком каналу боја додељујете вредности у распону од 0 до 255. Ово вам омогућава да контролишете интензитет црвене, зелене и плаве боје у боји коју желите да користите.

Ево синтаксе:

rgb(red_value, green_value, blue_value);

Заменити ред_валуе, греен_валуе, и блуе_валуе са њиховим одговарајућим нумеричким вредностима. На пример, можете постићи белу, црну и црвену боју попут оних приказаних на овој слици:

Када подесите сва три канала у боји (црвени, зелени и плави) на њихову максималну вредност од 255, то резултира највећим интензитетом за сваки канал, стварајући белу боју:

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

Када поставите сва три канала у боји на њихову минималну вредност од 0, то представља одсуство боје у сваком каналу, што резултира црном.

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

Постављањем црвеног канала на максималну вредност од 255, док се остали канали држе на минималној вредности од 0, производи црвену боју:

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

РГБА вредности боја

РГБА функционише на исти начин као РГБ, једина разлика је укључивање алфа вредности. „А“ у РГБА означава алфа, која одређује ниво транспарентности или непрозирности за изабрану боју. Вредност 0 представља потпуну транспарентност, чинећи боју потпуно невидљивом, док вредност 1 представља пуну непрозирност, чинећи боју потпуно видљивом.

РГБА је посебно користан када желите да креирате елементе са различитим нивоима транспарентности, као што су провидне позадине или избледели текст. Пуна синтакса је:

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

овде, ред_валуе, греен_валуе, и блуе_валуе представљају канале боја као у РГБ, и алпха_валуе одређује ниво транспарентности.

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

У овом примеру, алфа вредност од 0,5 додељује 50% транспарентности зеленој боји, омогућавајући садржају испод ње да се види кроз:

Прос: РГБ и РГБА вам омогућавају да прецизно контролишете боје, што олакшава одабир прецизних нијанси и креирање визуелно атрактивних дизајна. Компатибилне су са различитим веб прегледачима, осигуравајући да боје које сте изабрали изгледају доследно.

Цонс: Изазов лежи у обезбеђивању приступачних комбинација боја. Кључно је обратити пажњу на однос контраста, углавном када радите са транспарентношћу у РГБА. Смернице ВЦАГ могу помоћи осигуравате да је ваш дизајн доступан.

4. ХСЛ и ХСЛА вредности боја

ХСЛ — скраћеница за Хуе, Сатуратион и Лигхтнесс — је још једна ЦСС функција која дефинише боје. Слично као РГБ, ХСЛ користи нумеричке вредности за представљање боја, али то ради другачије. Можда сте упознати са ХСЛ вредности из компоненти корисничког интерфејса у апликацијама за дизајн и другде.

Нијанса: Ово представља саму боју користећи степене на кругу боја, у распону од 0 до 360. Замислите то као одабир тачке на кругу, где сваки степен одговара другој боји. На пример, 0 и 360 степени за црвену, 120 степени за зелену и 240 степени за плаву.

Засићење: Засићеност одређује живописност или интензитет боје. Дефинише однос боје са сивом, при чему је 0% потпуно сивих тонова (незасићено), а 100% је потпуно засићено (живо и чисто).

Лакоћа: Светлост представља колико је светла или тамна боја. Повезан је са позицијом боје у спектру између црне (0%) и беле (100%). Вредност од 50% представља нормалну боју, док вредности испод 50% потамњују боју, а вредности изнад 50% је светле.

Поред ХСЛ-а, постоји и ХСЛА, где „А“ значи „алфа“. Ово је слично „А“ у РГБА и означава транспарентност.

Ево синтаксе:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Користећи ову синтаксу, замените хуе_валуе, проценат_засићења, и лигхтнесс_перцентаге са специфичним вредностима које желите за сваку компоненту. На пример:

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

У овом примеру, боја позадине а див елемент је подешен на живописну зелену помоћу ХСЛ вредности. 120 представља нијансу (зелену), 100% је за пуну засићеност, а 50% поставља светлост на уравнотежен ниво.

Прос: ХСЛ и ХСЛА нуде разноврсне прорачуне боја користећи ЦСС прилагођена својства. Веома су компатибилни са модерним претраживачима и омогућавају лако прилагођавање светлости боје.

Цонс: Учење ХСЛ укључује разумевање науке о бојама, као што су нијансе и засићености, што може бити изазовније од познатих РГБ боја.

Прихватање моћи ЦСС боја

Постоји више метода које можете проверити и док истражујете различите формате за дефинисање боја у ЦСС-у, имајте на уму да имате моћ да обликујете изглед, расположење и корисничко искуство своје веб локације.

Ваш избор формата боја — било да се ради о једноставним називима боја, хексадецималним кодовима, РГБ или ХСЛ — може утицати на то како ваша публика перципира вашу веб локацију. Дакле, експериментишите, учите и пронађите дефиниције боја које најбоље одговарају вашим циљевима дизајна.