На веб-сторінках існує декілька різновидів представлення кольору:
За допомогою кольорової моделі RGB - це червоний (Red), зелений (Green) та синій (Blue) кольори з їх числовою кількістю (від 0 до 255). Можливий четвертий параметр, який визначає ступінь непрозорості кольору. Наприклад, rgba (0, 255, 0, 0.3) що відповідає зеленому коліру із прозорістю 70 %.
Використовується також шістнадцяткове представлення кольору у вигляді рядку, що починається з символу «#» (U+0023) і включає три пари цифр, які відповідають відповідно за червоний (перша пара), зелений (друга пара) і синій (третя пара) кольори. Наприклад, #0000FF - синій колір.
Існує ще варіант представлення кольору за допомогою колірної моделі HSL (скорочено від англ. Hue, Saturation, Lightness). HSL - колірна модель, в якій будь-який колір визначається трьома характеристиками: кольоровим тоном ( Hue),; насиченістю (Saturation),; та освітленням, або «світністю» (Lightness).
Крім перелічених варіантів представлення кольору, в якості значень для html розмітки чинним також вважається використання звичайного текстового позначення кольору, наприклад green, black, red тощо.
Ось приклад представлення тексту блакитного кольору різними кодами:
<p style="color: #87ceeb;">Текст блакитного кольору</p>
<p style="color: rgb(135,206,235);">Текст блакитного кольору</p>
<p style="color: hsl(197, 71%, 73%);">Текст блакитного кольору</p>
Звичайно, що позначати колір простіш за все звичайною назвою. Але не всі кольори можна позначати таким чином.
13 популярних кольорів, назви яких можна використовувати замість шістнадцяткового значення, зведені у таблицю нижче.
Шістнадцяткові та RGB значення багатьох кольорів, що використовуються у веб-дизайні, можна взяти на сторінці Таблиця кольорів.
КОЛІР |
ЗРАЗОК КОЛЬОРУ |
RGB |
HTML |
White | 255 255 255 | white #FFFFFF |
|
Black | 0 0 0 | black #000000 |
|
Aqua | 0 255 255 | aqua #00FFFF |
|
Red | 255 0 0 | red #FF0000 |
|
Teal | 0 128 128 | teal #008080 |
|
Lime | 0 255 0 | lime #00FF00 |
|
Green | 0 128 0 | green #008000 |
|
Yellow | 255 255 0 | yellow #FFFF00 |
|
Magenta | 255 0 255 | magenta #FF00FF |
|
Olive | 128 128 0 | olive #808000 |
|
Purple | 128 0 128 | purple #800080 |
|
Maroon | 128 0 0 | maroon #800000 |
|
Skyblue | 135 206 235 | skyblue #87ceeb |