Таблиця (палітра) кольорів htmlнадає можливість самостійно підібрати потрібний вам тон. Значення кольору відображається у трьох форматах: Hex, RGB та HSV.
- Hex складається з трьох двох символьних значень у шістнадцятковій системі числення. Наприклад: #ff00b3, де перша пара чисел – червоний, друга – зелений, а третя – синій.
- RGB (RedGreenBlue) має вигляд "200,100,255", що позначає кількість відповідного тону (червоний, зелений, синій) в кольорі.
- HSV (Hue, Saturation, Value - тон, насиченість, значення) - колірна модель, в якій координатами є:
- Hue - колірний тон, може змінюватись в межах від 0° до 360°.
- Saturation - насиченість, що варіюється в межах 0-100 або 0-1. Чим більший цей параметр, тим чистіший колір, тому цей параметр іноді називають чистотою кольору. А чим ближче цей параметр до нуля, тим ближчий колір до нейтрального сірого.
- Value (значення кольору) - задає яскравість, значення так само може змінюватись в межах 0-100 або 0-1.
Введіть код кольору: GO
Список квітів із назвами
У таблиці перераховані назви кольорів англійською мовою (які можна використовувати як значення), що підтримуються всіма браузерами, та їх шістнадцяткові значення. Всі перелічені кольори є "безпечними", тобто у всіх браузерах відображатимуться однаково.
| Назва кольору | HEX | Колір |
|---|---|---|
| Black | #000000 | |
| Navy | #000080 | |
| DarkBlue | #00008B | |
| MediumBlue | #0000CD | |
| Blue | #0000FF | |
| DarkGreen | #006400 | |
| Green | #008000 | |
| Teal | #008080 | |
| DarkCyan | #008B8B | |
| DeepSkyBlue | #00BFFF | |
| DarkTurquoise | #00CED1 | |
| MediumSpringGreen | #00FA9A | |
| Lime | #00FF00 | |
| SpringGreen | #00FF7F | |
| Aqua | #00FFFF | |
| Cyan | #00FFFF | |
| MidnightBlue | #191970 | |
| DodgerBlue | #1E90FF | |
| LightSeaGreen | #20B2AA | |
| ForestGreen | #228B22 | |
| SeaGreen | #2E8B57 | |
| DarkSlateGray | #2F4F4F | |
| LimeGreen | #32CD32 | |
| MediumSeaGreen | #3CB371 | |
| Turquoise | #40E0D0 | |
| RoyalBlue | #4169E1 | |
| SteelBlue | #4682B4 | |
| DarkSlateBlue | #483D8B | |
| MediumTurquoise | #48D1CC | |
| Indigo | #4B0082 | |
| DarkOliveGreen | #556B2F | |
| CadetBlue | #5F9EA0 | |
| CornflowerBlue | #6495ED | |
| MediumAquaMarine | #66CDAA | |
| DimGray | #696969 | |
| SlateBlue | #6A5ACD | |
| OliveDrab | #6B8E23 | |
| SlateGray | #708090 | |
| LightSlateGray | #778899 | |
| MediumSlateBlue | #7B68EE | |
| LawnGreen | #7CFC00 | |
| Chartreuse | #7FFF00 | |
| Aquamarine | #7FFFD4 | |
| Maroon | #800000 | |
| Purple | #800080 | |
| Olive | #808000 | |
| Gray | #808080 | |
| SkyBlue | #87CEEB | |
| LightSkyBlue | #87CEFA | |
| BlueViolet | #8A2BE2 | |
| DarkRed | #8B0000 | |
| DarkMagenta | #8B008B | |
| SaddleBrown | #8B4513 | |
| DarkSeaGreen | #8FBC8F | |
| LightGreen | #90EE90 | |
| MediumPurple | #9370D8 | |
| DarkViolet | #9400D3 | |
| PaleGreen | #98FB98 | |
| DarkOrchid | #9932CC | |
| YellowGreen | #9ACD32 | |
| Sienna | #A0522D | |
| Brown | #A52A2A | |
| DarkGray | #A9A9A9 | |
| LightBlue | #ADD8E6 | |
| GreenYellow | #ADFF2F | |
| PaleTurquoise | #AFEEEE | |
| LightSteelBlue | #B0C4DE | |
| PowderBlue | #B0E0E6 | |
| FireBrick | #B22222 | |
| DarkGoldenRod | #B8860B | |
| MediumOrchid | #BA55D3 | |
| RosyBrown | #BC8F8F | |
| DarkKhaki | #BDB76B | |
| Silver | #C0C0C0 | |
| MediumVioletRed | #C71585 | |
| IndianRed | #CD5C5C | |
| Peru | #CD853F | |
| Chocolate | #D2691E | |
| Tan | #D2B48C | |
| LightGray | #D3D3D3 | |
| PaleVioletRed | #D87093 | |
| Thistle | #D8BFD8 | |
| Orchid | #DA70D6 | |
| GoldenRod | #DAA520 | |
| Crimson | #DC143C | |
| Gainsboro | #DCDCDC | |
| Plum | #DDA0DD | |
| BurlyWood | #DEB887 | |
| LightCyan | #E0FFFF | |
| Lavender | #E6E6FA | |
| DarkSalmon | #E9967A | |
| Violet | #EE82EE | |
| PaleGoldenRod | #EEE8AA | |
| LightCoral | #F08080 | |
| Khaki | #F0E68C | |
| AliceBlue | #F0F8FF | |
| HoneyDew | #F0FFF0 | |
| Azure | #F0FFFF | |
| SandyBrown | #F4A460 | |
| Wheat | #F5DEB3 | |
| Beige | #F5F5DC | |
| WhiteSmoke | #F5F5F5 | |
| MintCream | #F5FFFA | |
| GhostWhite | #F8F8FF | |
| Salmon | #FA8072 | |
| AntiqueWhite | #FAEBD7 | |
| Linen | #FAF0E6 | |
| LightGoldenRodYellow | #FAFAD2 | |
| OldLace | #FDF5E6 | |
| Red | #FF0000 | |
| Fuchsia | #FF00FF | |
| Magenta | #FF00FF | |
| DeepPink | #FF1493 | |
| OrangeRed | #FF4500 | |
| Tomato | #FF6347 | |
| HotPink | #FF69B4 | |
| Coral | #FF7F50 | |
| Darkorange | #FF8C00 | |
| LightSalmon | #FFA07A | |
| Orange | #FFA500 | |
| LightPink | #FFB6C1 | |
| Pink | #FFC0CB | |
| Gold | #FFD700 | |
| PeachPuff | #FFDAB9 | |
| NavajoWhite | #FFDEAD | |
| Moccasin | #FFE4B5 | |
| Bisque | #FFE4C4 | |
| MistyRose | #FFE4E1 | |
| BlanchedAlmond | #FFEBCD | |
| PapayaWhip | #FFEFD5 | |
| LavenderBlush | #FFF0F5 | |
| SeaShell | #FFF5EE | |
| Cornsilk | #FFF8DC | |
| LemonChiffon | #FFFACD | |
| FloralWhite | #FFFAF0 | |
| Snow | #FFFAFA | |
| Yellow | #FFFF00 | |
| LightYellow | #FFFFE0 | |
| Ivory | #FFFFF0 | |
| White | #FFFFFF |
Модуль CSS color докладно описує значення, які дозволяють авторам визначати кольори та непрозорість html-елементів, а також значення якості color.
Властивість color
1. Пріоритетні кольори: якість color
Властивість задає колір шрифту за допомогою різних систем передачі кольорів. Властивість визначає колір текстового вмісту елемента. Крім того, воно використовується для надання потенційного непрямого значення (currentColor) для будь-яких інших властивостей, які набувають значення кольору.
Властивість успадковується.
2. Значення кольору
2.1. Основні ключові слова
Список основних ключових слів включає наступні значення:
| Назва | HEX | RGB | Колір |
|---|---|---|---|
| black | #000000 | 0,0,0 | |
| silver | #C0C0C0 | 192,192,192 | |
| gray | #808080 | 128,128,128 | |
| white | #FFFFFF | 255,255,255 | |
| maroon | #800000 | 128,0,0 | |
| red | #FF0000 | 255,0,0 | |
| purple | #800080 | 128,0,128 | |
| fuchsia | #FF00FF | 255,0,255 | |
| green | #008000 | 0,128,0 | |
| lime | #00FF00 | 0,255,0 | |
| olive | #808000 | 128,128,0 | |
| yellow | #FFFF00 | 255,255,0 | |
| navy | #000080 | 0,0,128 | |
| blue | #0000FF | 0,0,255 | |
| teal | #008080 | 0,128,128 | |
| aqua | #00FFFF | 0,255,255 |
Назви кольорів не чутливі до регістру.
Синтаксис
Color: teal;
2.2. Числові значення кольору
2.2.1. Кольори моделі RGB
Формат значення RGB у шістнадцятковому форматі — це знак # , за яким відразу йдуть три або шість шістнадцяткових символів. Тризначний запис RGB #rgb перетворюється на шестизначну форму #rrggbb шляхом копіювання цифр, а не шляхом додавання нулів. Наприклад, #fb0 розширюється до #ffbb00. Це гарантує, що білий #ffffff може бути вказаний у короткому записі #fff і видаляє будь-які залежності від глибини кольору дисплея.
Формат значення RGB у функціональній нотації — rgb(, за яким слідує розділений комами список із трьох числових значень (або трьох цілочисельних значень, або трьох відсоткових значень), за якими слідує символ) . Цілочисленне значення 255 відповідає 100% і F або FF у шістнадцятковому записі:
RGB (255,255,255) = RGB (100%, 100%, 100%) = #FFF
Символи пропуску допускаються навколо числових значень.
Для завдання кольорів використовуються числа у шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. Цифри від 10 до 15 замінені латинськими літерами. Числа більше 15 у шістнадцятковій системі утворюються об'єднанням двох чисел в одне. Наприклад, числу 255 у десятковій системі відповідає число FF у шістнадцятковій системі. Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставлять символ ґрат #, наприклад #666999. Кожен із трьох кольорів – червоний, зелений та синій – може приймати значення від 00 до FF. Таким чином, позначення кольору розбивається на три складові #rrggbb, де перші два символи відзначають червону компоненту кольору, два середні - зелену, а два останні - синю. Дозволяється використовувати скорочену форму #rgb, де кожен символ слід подвоювати. Так запис #fe0 слід розцінювати як #ffee00.
За назвою
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Браузери підтримують деякі кольори за їхньою назвою. У табл. 1 наведено назви, шістнадцятковий код, значення у форматі RGB, HSL та опис.
| Ім'я | Колір | Код | RGB | HSL | Опис |
|---|---|---|---|---|---|
| white | #ffffff або #fff | rgb(255,255,255) | hsl(0,0%,100%) | Білий | |
| silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Сірий | |
| gray | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Темно-сірий | |
| black | #000000 або #000 | rgb(0,0,0) | hsl(0,0%,0%) | Чорний | |
| maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Темно червоний | |
| red | #ff0000 або #f00 | rgb(255,0,0) | hsl(0,100%,50%) | червоний | |
| orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Помаранчевий | |
| yellow | #ffff00 або #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Жовтий | |
| olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Оливковий | |
| lime | #00ff00 або #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Світло зелений | |
| green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Зелений | |
| aqua | #00ffff або #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Блакитний | |
| blue | #0000ff або #00f | rgb(0,0,255) | hsl(240,100%,50%) | Синій | |
| navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Темно синій | |
| teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Синьо-зелений | |
| fuchsia | #ff00ff або #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Рожевий | |
| purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Фіолетовий |
За допомогою RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Можна визначити колір, використовуючи значення червоної, зеленої та синьої складової у десятковому численні. Кожна з трьох компонент кольору приймає значення від 0 до 255. Також допустимо задавати колір у відсотковому відношенні, при цьому 100% буде відповідати числу 255. Спочатку вказується ключове слово rgb, а потім у дужках через кому вказуються компоненти кольору, наприклад rgb(255 , 128, 128) або RGB (100%, 50%, 50%).
RGBA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат RGBA схожий по синтаксису на RGB, але включає альфа-канал, що задає прозорість елемента. Значення 0 відповідає повній прозорості, 1 – непрозорості, а проміжне значення на кшталт 0.5 – напівпрозорості.
RGBA доданий до CSS3, тому валідацію CSS-коду треба проводити саме за цією версією. Слід зазначити, що стандарт CSS3 ще у розробці і деякі можливості у ньому можуть змінитися. Наприклад, колір у форматі RGB доданий до якості background-color проходить валідацію, а доданий до якості background вже немає. При цьому браузери цілком коректно розуміють колір для тієї та іншої властивості.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Назва формату HSL утворена від поєднання перших букв Hue (відтінок), Saturate (насиченість) та Lightness (світло). Відтінок це значення кольору на колі (рис. 1) і задається в градусах. 0 ° відповідає червоному кольору, 120 ° - зеленому, а 240 ° - синьому. Значення відтінку може змінюватись від 0 до 359.
Мал. 1. Колірний круг
Насиченістю називається інтенсивність кольору, що вимірюється у відсотках від 0% до 100%. Значення 0% означає відсутність кольору та відтінок сірого, 100% максимальне значення насиченості.
Світлона задає, наскільки колір яскравий і вказується у відсотках від 0% до 100%. Малі значення роблять колір темнішим, а високі світлішими, крайні значення 0% і 100% відповідають чорному та білому кольору.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Формат HSLA схожий по синтаксису на HSL, але включає альфа-канал, що задає прозорість елемента. Значення 0 відповідає повній прозорості, 1 – непрозорості, а проміжне значення на кшталт 0.5 – напівпрозорості.
Значення кольору у форматах RGBA, HSL та HSLA додані до CSS3, тому під час використання цих форматів перевіряйте код на валідність з урахуванням версії.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Попередження
Усі перелічені на сайті методи лову лева є теоретичними та базуються на обчислювальних методах. Автори не гарантують вашої безпеки при їх використанні та знімають із себе будь-яку відповідальність за результат. Пам'ятайте, лев це хижак та небезпечна тварина!
Результат цього прикладу показано на рис. 2.
Мал. 2. Кольори на веб-сторінці
У HTML колір можна задавати трьома способами:
Завдання кольору в HTML за його назвою
Деякі кольори можна задавати за їхньою назвою, використовуючи як значення назву кольору англійською мовою. Найпоширеніші ключові слова: black (чорний), white (білий), red (червоний), green (зелений), blue (синій) та ін.
Колір тексту – червоний
Найбільш популярні кольори стандарту Консорціуму Всесвітньої павутини (World Wide Web Consortium, W3C):
| Колір | Назва | Колір | Назва | Колір | Назва | Колір | Назва |
|---|---|---|---|---|---|---|---|
| Black | Gray | Silver | White | ||||
| Yellow | Lime | Aqua | Fuchsia | ||||
| Red | Green | Blue | Purple | ||||
| Maroon | Olive | Navy | Teal |
Приклад використання різних колірних назв:
Приклад: завдання кольору за назвою
- Спробуй сам »
Заголовок на червоному тлі
Заголовок на помаранчевому фоні
Заголовок на фоні лайм
Білий текст на блакитному тлі
Заголовок на червоному тлі
Заголовок на помаранчевому фоні
Заголовок на фоні лайм
Білий текст на блакитному тлі
Завдання кольору за допомогою RGB
При відображенні різних кольорів на моніторі за основу береться палітра RGB. Будь-який колір отримують, змішуючи три основні: R - червоний (red), G - зелений (green), В - синій (blue). Яскравість кожного кольору задається одним байтом і, отже, може набувати значення від 0 до 255. Наприклад, RGB (255,0,0) відображається як червоний, оскільки червоний встановлюється в його найвище значення (255), а інші встановлені в 0 Також можна задавати колір у відсотковому відношенні. Кожен із параметрів позначає рівень яскравості відповідного кольору. Наприклад: значення rgb(127, 255, 127) і rgb(50%, 100%, 50%) будуть задавати однаковий зелений колір середньої насиченості:
Приклад: Завдання кольору за допомогою RGB
- Спробуй сам »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Завдання кольору за шістнадцятковим значенням
Значення R G Bтакож можуть бути вказані за допомогою шістнадцяткових (HEX) значень кольору у формі: #RRGGBB, де RR (червоний), GG (зелений) та BB (синій) є шістнадцятковими значеннями від 00 до FF (так само, як десяткове 0-255) . Шістнадцяткова система, на відміну десяткової системи, базується, як випливає з її назви, на числі 16. Шістнадцяткова система використовує такі знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, З, D, E, F. Тут цифри від 10 до 15 замінено латинськими літерами. Числа більше 15 у шістнадцятковій системі являють собою об'єднання двох знаків в одне значення. Наприклад, найбільшому числу 255 у десятковій системі відповідає найвище значення FF у шістнадцятковій системі. На відміну від десяткової системи, перед шістнадцятковим числом ставлять символ решітки # , наприклад, #FF0000 відображається як червоний колір, оскільки червоний встановлюється у його найвище значення (FF), а решті кольорів встановлено мінімальне значення (00). Знаки після решітки символу # можна набирати як великими, так і малими. Шістнадцяткова система дозволяє використовувати скорочену форму виду #rgb, де кожен символ рівнозначний подвоєному. Так запис #f7O слід розцінювати як #ff7700.
Приклад: Колір HEX
- Спробуй сам »
червоний: #FF0000
зелений: #00FF00
синій: #0000FF
червоний: #FF0000
зелений: #00FF00
синій: #0000FF
червоний+зелений=жовтий: #FFFF00
червоний+синій=фіолетовий: #FF00FF
зелений+синій=блакитний: #00FFFF
Список широко поширених кольорів (назва, HEX та RGB):
| Англійська назва | Російська назва | Зразок | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amaranth | Амарантовий | #E52B50 | 229 | 43 | 80 | |
| Amber | Бурштиновий | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Синьо-зелений | #00FFFF | 0 | 255 | 255 | |
| Azure | Блакитний | #007FFF | 0 | 127 | 255 | |
| Black | Чорний | #000000 | 0 | 0 | 0 | |
| Blue | Синій | #0000FF | 0 | 0 | 255 | |
| Bondi Blue | Вода пляжу Бонді | #0095B6 | 0 | 149 | 182 | |
| Brass | Латунний | #B5A642 | 181 | 166 | 66 | |
| Brown | Коричневий | #964B00 | 150 | 75 | 0 | |
| Cerulean | Блакитний | #007BA7 | 0 | 123 | 167 | |
| Dark spring green | Темний весняно-зелений | #177245 | 23 | 114 | 69 | |
| Emerald | Смарагдовий | #50C878 | 80 | 200 | 120 | |
| Eggplant | Баклажановий | #990066 | 153 | 0 | 102 | |
| Fuchsia | Фуксія | #FF00FF | 255 | 0 | 255 | |
| Gold | Золотий | #FFD700 | 250 | 215 | 0 | |
| Gray | Сірий | #808080 | 128 | 128 | 128 | |
| Green | Зелений | #00FF00 | 0 | 255 | 0 | |
| Indigo | Індіго | #4B0082 | 75 | 0 | 130 | |
| Jade | Нефритовий | #00A86B | 0 | 168 | 107 | |
| Lime | Лайм | #CCFF00 | 204 | 255 | 0 | |
| Malachite | Малахітовий | #0BDA51 | 11 | 218 | 81 | |
| Navy | Темно синій | #000080 | 0 | 0 | 128 | |
| Ochre | Охра | #CC7722 | 204 | 119 | 34 | |
| Olive | Оливковий | #808000 | 128 | 128 | 0 | |
| Orange | Помаранчевий | #FFA500 | 255 | 165 | 0 | |
| Peach | Персиковий | #FFE5B4 | 255 | 229 | 180 | |
| Pumpkin | Гарбуз | #FF7518 | 255 | 117 | 24 | |
| Purple | Фіолетовий | #800080 | 128 | 0 | 128 | |
| Red | червоний | #FF0000 | 255 | 0 | 0 | |
| Saffron | Шафрановий | #F4C430 | 244 | 196 | 48 | |
| Sea Green | Зелене море | #2E8B57 | 46 | 139 | 87 | |
| Swamp green | Болотяний | #ACB78E | 172 | 183 | 142 | |
| Teal | Синьо-зелений | #008080 | 0 | 128 | 128 | |
| Ultramarine | Ультрамариновий | #120A8F | 18 | 10 | 143 | |
| Violet | Фіолетовий | #8B00FF | 139 | 0 | 255 | |
| Yellow | Жовтий | #FFFF00 | 255 | 255 | 0 | |
Коди кольорів (фон) за насиченістю та відтінком.
На цій сторінці наведено таблицю з ключовими словами, які можна використовувати для позначення кольорів у таких мовах Web-розробника як: HTML, CSS, JavaScript, Flash та ін.
У старих специфікаціях концерну WC3 було прописано лише 16 ключових слів, за допомогою яких встановлювалися кольори в HTML і CSS. У подальших, більш сучасних специфікаціях було додано ще 130 ключових слів для позначення назв кольорів. Наступна таблиця містить імена кольорів, шістнадцятковий та RGB коди, яким вони відповідають.
Відповідно до правил CSS імена кольору не чутливі до регістру. Записи кольору IndianRed і indianred рівнозначні.
Також варто звернути увагу, що із 146 ключових слів таблиці, кольорів у ній насправді менше. Це викликано тим, що деякі ключові слова позначають той самий колір. Так імена Grey, і Gray позначають 50-відсотковий сірий колір з кодом #808080, а слово Magenta - це синонім HTML кольору Fuchsia, що відповідає шістнадцятковому коду #FF00FF. Також синонімами є слова Aqua і Cyan, вони відповідають коду #00FFFF.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||