Какво представлява шестнадесетичният код? Всичко, което трябва да знаете

Работата с цветове в HTML е сравнително лесна. С няколко прости CSS декларации можете да промените цвета на всеки текст или фон на вашата уеб страница. Но как да посочите цвят? Отговорът на този въпрос ще ни отведе в заешка дупка, която в крайна сметка ни отвежда до концепцията за шестнадесетични цветни кодове.

Ако сте работили с HTML или CSS преди, вероятно сте чували термина шестнадесетичен код. Но какво точно е шестнадесетичен код? Какви са някои примери за шестнадесетични кодове? Каква е разликата между шестнадесетичен код и RGB цветен код?

Какво е шестнадесетичен код?

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

#FF0092

Свързани: Основни термини за графичен дизайн, които трябва да знаете

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

CSS предлага две основни опции: RGB и шестнадесетичен. И в двата формата посочвате количествата червено, зелено и синьо, които съставляват крайния цвят. RGB използва три числа между 0 и 255. Hex прави точно същото, само с различна основа (16) от десетичната запетая (10), с която сте свикнали.

Hex използва буквите A-F, в допълнение към цифрите 0-9, за общо 16 символа. A в шестнадесетичен е еквивалент на 10 в десетичен знак. F в шестнадесетичен е 15 в десетичната запетая.

Как работят шестнадесетичните цветни кодове?

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

С 16 × 16 (256) стойности за всеки цветен компонент, тогава има 256 × 256 × 256 възможни комбинации. В шестнадесетичен те варират от #000000 (чисто черно) до #FFFFFF (чисто бяло).

Как да четете шестнадесетични цветни кодове

Разбирането на шестнадесетичните цветови кодове е лесно. Да вземем пример с #FF5733. Първо, разделете шестте знака на три части, съдържащи по два знака всяка. Както знаете, първите две части представляват червено, вторите две части представляват зелено, а третите две части представляват синьо. И така, в нашия пример:

• Червеният компонент, RR, има стойността FF.
• Зеленият компонент, GG, е 57.
• Синият компонент, BB, е 33.

Сега, за да намерите интензивността на тези цветни сегменти, трябва да изчислите шестнадесетичното число, като използвате тези три стъпки:

1. Умножете първия шестнадесетичен знак на RR с 16. Ако знакът е буква, преобразувайте го в съответната стойност. В този случай първият знак е F, което е 15. Така че, за нашия пример, вие умножавате 15 × 16, което е равно на 240.
2. След това добавете втория знак на RR. Отново преобразувайте буква в съответната стойност, ако възникне нужда. В нашия пример вторият знак е F, което е равно на 15.
3. След като сте готови, добавете сумите, за да получите единична стойност. Ако добавите 240 и 15 от нашия пример, ще видите, че стойността на FF е 255.

Повторете същата формула за останалите два сегмента, GG означен с 57 и BB, означен с 33. Ако ръчните изчисления изглеждат твърде непосилни, винаги можете да използвате инструмент за преобразуване на шестнадесетичен в RGB (напр BinaryHex конвертор), за да прочетете цвят. Трябва да откриете, че шестнадесетичната стойност #FF5733 е еквивалентен на rgb (255, 87, 51).

Защо шестнадесетичният цветен код е толкова популярен?

Въпреки че има няколко различни цветови модела (RGB, CMYK, HSL), шестнадесетичните цветови кодове са може би най-широко използваното представяне. Това е така, защото те са прости и лесни за разбиране.

Форматът с фиксирана ширина също е много полезен. Шестнадесетичните цветове с пълна дължина винаги са седем знака, включително водещите # символ.

Шестнадесетичните цветове са много ефективни, като се използват само тези седем знака за представяне на повече от 16 милиона цвята. И разграничаването на тези цветове е лесен процес.

Hex срещу RGB: Има ли разлика?

RGB системата за цветово кодиране използва три десетични числа, за да посочи относителния интензитет на червено, зелено и синьо. Използва цифрите 0-9.

Hex също използва три числа за представяне на червено, зелено и синьо, но използва допълнителни цифри (A-F), за да се погрижи за база 16. Няма разлика в получените цветове, те са просто различни формати за предаване на една и съща информация.

Свързани: Основи на CSS: Работа с цветове

За какво се използва шестнадесетичният код?

Разнообразие от различни приложения използват RGB, от телевизионни екрани до мобилни устройства, игри и знаци. Ще виждате главно шестнадесетични цветни кодове в уеб дизайна и други графични програми.

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

Шестнадесетичният цветен код не е ракетна наука

И така, имате основите на шестнадесетичните цветови кодове. Те не са точно твърда наука, но служат на определена цел в дизайна (и в света на технологиите). Ако търсите инструмент, който ще ви помогне да разберете как работят шестнадесетичните цветове, или такъв, който ще ви научи за теорията на RGB смесването, има много онлайн. Не забравяйте, че ключът към научаването на нещо ново е да го правите стъпка по стъпка.

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

Как да намерите шестнадесетичната стойност на всеки цвят на вашия екран

Научете как да изберете произволна цветова стойност от екрана си за секунди. Особено полезно за уеб дизайнери!

Прочетете Следващото

За автора