Підручник кольорів
Кольори відображаються, поєднуючи ЧЕРВОНЕ, ЗЕЛЕНЕ і СИНЄ світло.
Назви кольорів
За допомогою CSS можна встановлювати кольори використовуючи назви кольорів:
CSS Значення кольору
За допомогою CSS кольори можна вказувати по-різному:
- За назвами кольорів
- Як значення RGB
- Як шістнадцяткові значення (HEX)
- Як значення HSL (CSS3)
- Як значення HWB (CSS4)
- За допомогою ключового слова
currentcolor
RGB Кольори
RGB значення кольорів підтримуються у всіх браузерах.
RGB значення кольору вказано за допомогою: rgb( RED , GREEN , BLUE ).
Кожен параметр визначає інтенсивність кольору як ціле число від 0 до 255.
Наприклад, rgb(0,0,255) відображається як синій, оскільки для синього параметра встановлено найвище значення (255), а для інших - 0.
Приклад
| Колір | RGB | Колір |
|---|---|---|
| rgb(255,0,0) | Червоний | |
| rgb(0,255,0) | Зелений | |
| rgb(0,0,255) | Синій |
Відтінки сірого часто визначають, використовуючи рівні значення для всіх 3 джерел світла:
Приклад
| Колір | RGB | Колір |
|---|---|---|
| rgb(0,0,0) | Чорний | |
| rgb(128,128,128) | Сірий | |
| rgb(255,255,255) | Білий |
Шістнадцяткові кольори (HEX)
Шістнадцяткові значення кольору також підтримуються у всіх браузерах.
Шістнадцятковий колір позначається символом: #RRGGBB.
RR (red - червоний), GG (green - зелений) та BB (blue - синій) є шістнадцятковими цілими числами від 00 до FF, що вказують інтенсивність кольору.
Наприклад, #0000FF відображається як синій, оскільки для синього компонента встановлено найвище значення (FF), а для інших - 00.
Приклад
| Колір | HEX | RGB | Колір |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Червоний | |
| #00FF00 | rgb(0,255,0) | Зелений | |
| #0000FF | rgb(0,0,255) | Синій |
Відтінки сірого часто визначають, використовуючи рівні значення для всіх 3 джерел світла:
Приклад
| Колір | HEX | RGB | Колір |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Чорний | |
| #808080 | rgb(128,128,128) | Сірий | |
| #FFFFFF | rgb(255,255,255) | Білий |
Верхній регістр чи нижній регістр?
Ви можете використовувати великі або малі літери, щоб вказати шістнадцяткові значення.
Малі літери писати простіше. Великі регістри легше читати.
Назви кольорів
CSS підтримує 140 стандартних назв кольорів.
У наступному розділі ви знайдете повний алфавітний список назв кольорів із шістнадцятковими значеннями:
| Назва кольору | Hex | Колір |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Ключове слово currentcolor
Ключове слово currentcolor відноситься до значення властивості кольору елемента.
Приклад
Колір межі наступного елемента <div> буде синім, оскільки колір тексту елементу <div> синій:
#myDIV {
color: blue; /* Синій колір тексту */
border: 10px solid currentcolor; /* Синій колір межі */
}
Спробуйте самі »
