4 начина за дефиниране на цветове в CSS

Ключови изводи

• Използване на имена на цветове: CSS предоставя 145 имена на цветове за лесен и удобен за начинаещи избор на цвят, но опциите са ограничени и може да не отговарят на точните дизайнерски нужди.
• Шестнадесетични цветови кодове: Шестнадесетичните кодове предлагат широка гама от цветови опции и прецизна персонализация, въпреки че могат да бъдат по-малко интуитивни за използване и запомняне.
• RGB и RGBA цветови стойности: RGB позволява точен контрол на цветовете с цифрови стойности, докато RGBA добавя прозрачност. Осигуряването на достъпни цветови комбинации е важно.

Цветовете са сред най-често използваните CSS атрибути, които играят жизненоважна роля при оформянето на визуалната идентичност, настроението и потребителското изживяване на уебсайта. CSS предлага набор от възможности за избор за използване на цвят, всеки от които е съобразен със специфични дизайнерски нужди и предпочитания.

Въпреки че е лесно да пренебрегнете важността на цветовата дефиниция, вашият избор може значително да повлияе на външния вид и усещането на уебсайта ви. Изследването на разликите между различните методи и как да ги прилагате и комбинирате на практика ще подобри способността ви да създавате визуално привлекателни уебсайтове.

1. Използване на имена на цветове

CSS предоставя удобен начин за дефиниране на цветове с помощта на имена и има 145 налични опции. Тези имена на цветове варират от просто „червено“, „зелено“ и „синьо“ до по-специфични нюанси като „корал“ или „лавандула“.

Използването на именувани цветове е лесно: избирате име на цвят като „червено“ и го използвате в CSS свойство, което поддържа цветови стойности. Такива свойствата включват очевидното цвят и Цвят на фона, но също цвят на границата, контур-цвят, и текст-сянка, между другото.

Имената на цветовете са удобни, когато имате нужда от временен цвят за създаване на прототипи или искате да запазите кода си лесен за четене. Ето синтаксиса:

color_property: color_name;

В този случай просто сменете цвят_име с конкретния цвят, който искате да използвате. Например, ако искате да зададете текста цвят от параграф към червен, напиши:

p {
color: red;
}

Това ще даде на абзаците ви червен цвят на текста:

Професионалисти: Те са лесни за четене и разбиране във вашия CSS код. Те са удобни за начинаещи, работят добре в различни браузъри и са удобни за бързи идеи за дизайн.

минуси: Те имат ограничени възможности и може да не предложат точните нюанси, от които се нуждаете, което ограничава креативността на дизайна. Освен това те може не винаги да отговарят на строги изисквания за достъпност и поддръжката в по-стари системи може да варира.

2. Шестнадесетични цветови кодове

Шестнадесетичните цветови кодове, често наричани „шестнадесетични кодове“, са най-често срещаните методи за определяне на цветове в уеб дизайна. Тези кодове се състоят от комбинации от шест знака от цифри и букви (0-9, A-F), представляващи комбинация от червени, зелени и сини (RGB) компоненти в цвят.

Въпреки че са лесни за използване, разбирането как работят може да бъде предизвикателство. Можеш да вземеш дълбоко гмуркане в шестнадесетичните кодове да разберем по-добре. Ето основен пример за това как можете да използвате шестнадесетични кодове в CSS:

color: #RRGGBB;

В този формат RR, GG и BB представляват съответно червените, зелените и сините компоненти. Всеки компонент може да варира от 00 (без интензитет) до FF (максимален интензитет). Например, ако искате да зададете цвета на фона на заглавката на уебсайт на конкретен нюанс на синьото, можете да използвате шестнадесетичен код като този:

header {
background-color: #336699;
}

Това ще доведе до тъмносин цвят:

​​​​​

Можете също да използвате стенограма, ако всеки от трите компонента повтаря един и същ знак два пъти. Можете да напишете горния пример като:

header {
background-color: #369;
}

Професионалисти: Шестнадесетичните цветови кодове предоставят широка гама от цветови опции, което ви позволява да генерирате подробни и персонализирани нюанси. Те предлагат плавен контрол върху избора на цвят, което ги прави идеални за сложни дизайнерски изисквания.

минуси: Въпреки че шестнадесетичните кодове са мощни, те могат да бъдат по-малко интуитивни от наименуваните цветове. Може също да се сблъскате с предизвикателството да запомните специфични цветови стойности. за щастие инструменти за намиране на шестнадесетични кодове на цветовете които срещате, са налични, което прави процеса по-управляем.

3. RGB и RGBA цветови стойности

Подобно на шестнадесетичните кодове, този формат ви позволява да указвате цветовете чрез техните червени, зелени и сини компоненти. Този път обаче можете да използвате по-удобни цели числа.

RGB цветови стойности

RGB цветовите стойности са вторият най-често използван метод за дефиниране на цветове в CSS. „RGB“ представлява червено, зелено и синьо, изразени като CSS функция със скоби след нея. Вътре в скобите присвоявате стойности на всеки цветен канал, вариращи от 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); 
}

RGBA цветови стойности

RGBA функционира по същия начин като RGB, като единствената разлика е включването на алфа стойност. „А“ в RGBA означава алфа, което определя нивото на прозрачност или непрозрачност за избрания цвят. Стойност 0 представлява пълна прозрачност, което прави цвета напълно невидим, докато стойност 1 представлява пълна непрозрачност, което прави цвета напълно видим.

RGBA е особено полезен, когато искате да създадете елементи с различни нива на прозрачност, като полупрозрачен фон или избледнял текст. Пълният синтаксис е:

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

Тук, червена_стойност, зелена_стойност, и синя_стойност представят цветовите канали като в RGB, и алфа_стойност определя нивото на прозрачност.

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

В този пример алфа стойността от 0,5 присвоява 50% прозрачност на зеления цвят, което позволява на съдържанието под него да се показва през:

Професионалисти: RGB и RGBA ви позволяват да контролирате точно цветовете, което улеснява избора на точни нюанси и изработването на визуално привлекателни дизайни. Те са съвместими с различни уеб браузъри, като гарантират, че избраните от вас цветове изглеждат последователни.

минуси: Предизвикателството е в осигуряването на достъпни цветови комбинации. От решаващо значение е да обърнете внимание на контрастните съотношения, главно когато работите с прозрачност в RGBA. Насоките на WCAG могат да помогнат гарантирате, че вашият дизайн е достъпен.

4. HSL и HSLA цветови стойности

HSL — съкратено от Hue, Saturation и Lightness — е друга CSS функция, която дефинира цветовете. Подобно на RGB, HSL използва числови стойности за представяне на цветовете, но го прави по различен начин. Може да сте запознати с HSL стойности от UI компоненти в приложения за дизайн и другаде.

Hue: Това представлява самия цвят с помощта на градуси на цветно колело, вариращи от 0 до 360. Представете си това като избиране на точка върху кръг, където всеки градус съответства на различен цвят. Например 0 и 360 градуса за червено, 120 градуса за зелено и 240 градуса за синьо.

Насищане: Наситеността определя яркостта или интензивността на цвета. Той определя връзката на цвета със сивото, като 0% е напълно сива скала (ненаситена), а 100% е напълно наситена (жизнена и чиста).

Лекота: Светлотата представлява колко ярък или тъмен изглежда цветът. Това е свързано с позицията на цвета в спектъра между черно (0%) и бяло (100%). Стойност от 50% представлява нормалния цвят, докато стойности под 50% потъмняват цвета, а стойности над 50% го изсветляват.

В допълнение към HSL има HSLA, където „A“ означава „алфа“. Това е подобно на „A“ в RGBA и означава прозрачност.

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

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Използвайки този синтаксис, заменете hue_value, процент_насищане, и лекота_процент със специфичните стойности, които искате за всеки компонент. Например:

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

В този пример цветът на фона на a див елемент е настроен на живо зелено с помощта на HSL стойности. 120 представлява оттенъка (зелено), 100% е за пълна наситеност, а 50% настройва лекотата на балансирано ниво.

Професионалисти: HSL и HSLA предлагат разнообразни цветови изчисления, използвайки потребителски свойства на CSS. Те са много съвместими със съвременните браузъри и позволяват лесно регулиране на светлотата на цветовете.

минуси: Изучаването на HSL включва разбиране на цветната наука, като нюанси и наситености, които могат да бъдат по-предизвикателни от познатите RGB цветове.

Прегръщане на силата на CSS цветовете

Има още методи, които можете да проверите и докато проучвате различните формати за дефиниране на цветове в CSS имайте предвид, че имате силата да оформите външния вид, настроението и потребителското изживяване на вашия уебсайт.

Вашият избор на цветови формат – независимо дали става въпрос за прости имена на цветове, шестнадесетични кодове, RGB или HSL – може да повлияе на начина, по който аудиторията ви възприема вашия сайт. Така че експериментирайте, учете и намерете дефинициите на цветовете, които най-добре отговарят на вашите дизайнерски цели.