HTML коди кольорів
Таблиця кольорів: HEX, RGB та HSL
Кольори відіграють важливу роль у веб-дизайні та графіці. Вибір правильного кольору може значно вплинути на естетику та функціональність вашого проекту. Існує кілька способів представлення кольорів у веб-технологіях, найпоширенішими з яких є HEX, RGB та HSL.
Що таке HEX, RGB та HSL?
HEX (шістнадцятковий) формат кольорів складається з шести символів, які представляють червоний, зелений та синій компоненти кольору. Наприклад, червоний колір представлений як #FF0000.
RGB (Red, Green, Blue) формат описує кольори за допомогою трьох чисел, що відповідають рівням червоного, зеленого та синього світла. Наприклад, червоний колір представлений як rgb(255, 0, 0).
HSL (Hue, Saturation, Lightness) формат використовує три параметри: відтінок (hue), насиченість (saturation) і яскравість (lightness). Наприклад, червоний колір представлений як hsl(0, 100%, 50%).
Таблиця кольорів: HEX, RGB та HSL
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) |
| Gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) |
| Violet | #EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) |
| Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) |
| Beige | #F5F5DC | rgb(245, 245, 220) | hsl(60, 56%, 91%) |
| Mint | #98FF98 | rgb(152, 255, 152) | hsl(120, 100%, 80%) |
| Coral | #FF7F50 | rgb(255, 127, 80) | hsl(16, 100%, 66%) |
| Turquoise | #40E0D0 | rgb(64, 224, 208) | hsl(174, 72%, 56%) |
| Salmon | #FA8072 | rgb(250, 128, 114) | hsl(6, 93%, 71%) |
| Lavender | #E6E6FA | rgb(230, 230, 250) | hsl(240, 67%, 94%) |
| Khaki | #F0E68C | rgb(240, 230, 140) | hsl(54, 77%, 75%) |
| Chocolate | #D2691E | rgb(210, 105, 30) | hsl(25, 75%, 47%) |
Використання кольорів у веб-дизайні
Веб-дизайнери використовують кольори для створення естетично привабливих і функціональних веб-сторінок. Кожен колір викликає певні емоції та може впливати на сприйняття користувачів. Наприклад, червоний колір може викликати відчуття енергії та терміновості, тоді як синій колір асоціюється зі спокоєм та довірою.
Розуміння різних форматів кольорів і їх застосування є важливою частиною веб-дизайну. Сподіваємось, що ця таблиця допоможе вам краще орієнтуватися в світі кольорів і зробить ваші проекти ще більш привабливими.