Колір CSS
Сайт для веб-розробників (програмістів, верстальників, дизайнерів).
Як призначити колір у мові CSS
У мові CSS, призначити колір HTML-тегам можна трьома способами: 1. За допомогою імені кольору 2. За допомогою десяткової системи числення RGB-форматі, 3. За допомогою шістнадцяткової системи числення в форматі RGB.
Колір у CSS на ім'я
Найбільш простий спосіб призначитиколір в CSS, це вказати його ім'я:
де red – це ім'я кольору (в даному випадку – червоний).
Ось деякі імена кольорів, які виступають як значення різних властивостей CSS:
| red | червоний |
| green | Зелений |
| blue | Синій |
| white | Білий |
| black | Чорний |
Колір у CSS, використовуємо десяткову систему числення та RGB-формат
RGB - R ed, G reen, B lue.
Всі кольори в мові CSS можна записати в десятковій системі числення. Наприклад:
color: rgb(255, 0, 0);
При використанні десяткової системи числення можна використовувати числа від 0 до 255.
У рядку color: rgb (255, 0, 0); спочатку йде CSS-властивість color: , потім його значення rgb(255, 0, 0) . Кожне з трьох чисел 255, 0, 0 відноситься до певного кольору:
255 - перше число, відноситься до червоного кольору R ED, 0 - друге число, відноситься до зеленого кольору G REEN, 0 - третє число, відноситься до синього кольору B LUE.
Щоб зробити чистий зелений колір, потрібно значення написати так rgb (0, 255, 0), чистий синій колір виглядатиме так rgb (0, 0, 255).
Щоб отримати темно-синій колір, потрібно зменшити третє число і написати наприклад 100 ,чим менше буде третє число, тим темнішим буде синій колір.
Запишемо поруч два кольори із синім відтінком, у першого буде значення 255 , а у другого 100 .
| Чистий синій | rgb(0, 0, 255) |
| Темно синій | rgb(0, 0, 100) |
Додамо до нашої першої таблиці, ще один стовпчик, де розташовуватиметься код кольору в десятковій системі числення:
| red | червоний | rgb(255, 0, 0) |
| green | Зелений | rgb(0, 128, 0) |
| blue | Синій | rgb(0, 0, 255) |
| white | Білий | rgb(255, 255, 255) |
| black | Чорний | rgb(0, 0, 0) |
| Чистий зелений | rgb(0, 255, 0) |
Збільшуючи та зменшуючи числа у RGB-форматі, можна отримати практично будь-який колір. Наприклад "змішавши" чистий червоний і чистий зелений колір, ми отримаємо чистий жовтий колір:
| Чистий жовтий | rgb(255, 255, 0) |
Зменшуючи кількість у зеленого кольору ми поступово будемо отримувати помаранчеві відтінки, давайте запишемо число зеленого кольору рівним 100:
| Помаранчевий | rgb(255, 100, 0) |
Колір CSS, використовуємо шістнадцяткову систему числення і RGB-формат
У повсякденному житті ми з вами користуємося десятковою системою числення від 0 до 9 . Працюючи з кольором, у програмуванні та дизайні, часто використовують шістнадцяткову систему числення від 0 до F , де F = 15 .
A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
Кожен колір можна записати в шістнадцятковій системі числення.Наприклад:
При використанні шістнадцяткової системи числення можна використовувати числа від 0 до ff, де ff = 255.
Якщо до нашої таблиці додати ще один стовпчик, з описом кольору в шістнадцятковій системі числення, вона виглядатиме так:
| red | червоний | rgb(255, 0, 0) | #ff0000 |
| green | Зелений | rgb(0, 128, 0) | #008000 |
| blue | Синій | rgb(0, 0, 255) | #0000ff |
| white | Білий | rgb(255, 255, 255) | #ffffff |
| black | Чорний | rgb(0, 0, 0) | #000000 |
| Чистий зелений | rgb(0, 255, 0) | #00ff00 |
Додаткову інформацію про колір, RGB-формат та шістнадцяткову систему числення ви також можете почитати на сторінці: HTML-колір
Таблиця кольорів
Нижче наведено невелику таблицю кольорів з їх іменами:
| white | Білий |
| ivory | Іворі (слонова кістка) |