«Единственный способ творить великие дела – это любить то, что ты делаешь»
Статьи


В HTML и CSS существует два способа задания цвета: при помощи ключевых слов и в цветовой модели RGB.

RGB это аббревиатура трех английских слов: red, green и blue, которые в переводе обозначают красный, зелёный и синий.

Цветовая модель RGB описывает один из способов синтеза цвета с помощью трёх цветов - их принято называть основными.

Более подробно о том, как задаются цвета в цветовой модели RGB описано далее. А сначала немного поговорим о ключевых словах, которые применяются для обозначения того или иного цвета.



Ключевые слова – Имена цветов

Итак, способ задания цвета при помощи ключевых слов заключается в следующем: существуют 16 базовых цветов, которые можно записывать не только их цифровыми значениями, но и цветовыми именами.

Ниже приведен перечень основных 16 цветов и их имен.

Цвет Название Шестнадцатеричное значение
  Aqua #00FFFF
  Black #000000
  Blue #0000FF
  Fuchsia #FF00FF
  Gray #808080
  Green #008000
  Lime #00FF00
  Maroon #800000
  Navy #000080
  Olive #808000
  Purple #800080
  Red #FF0000
  Silver #C0C0C0
  Teal #008080
  White #FFFFFF
  Yellow #FFFF00
Фрагмент кода

<p style="color:blue;">
Синий цвет текста для этого абзаца задан указанием имени цвета.
</p>

Результат

Синий цвет текста для этого абзаца задан указанием имени цвета.

Модель RGB - Десятичная запись цвета

В цветовой модели RGB цвет задается следующим образом.

Основные цвета red, green и blue – красный, зеленый и синий могут иметь условные значения от 0 до 255 или от 0% до 100%. Из сочетания трех цветов, каждому из которых присваивается одно из значений, получается необходимый цвет.

Например, белый цвет задается как 255,255,255, а черный цвет – как 0,0,0. Первое десятичное число определяет насыщенность красного, второе - насыщенность зеленого и последнее - синего.

Аналогично цвет задается в процентной записи.

Фрагмент кода

<p style="color:rgb(0,0,255);">
Синий цвет текста этого абзаца задан в цветовой модели RGB указанием десятичных значений.
</p>

Результат

Синий цвет текста этого абзаца задан в цветовой модели RGB указанием десятичных значений.

Модель RGB - шестнадцатеричная запись цвета

Но в основном, используя цветовую модель RGB, цвета указывают в шестнадцатеричной записи.

Шестнадцатеричная система основывается на числе 16. В нее входят цифры от 0 до 9 и буквы A, B, C, D, E, F (они заменяют десятичные числа от 10 до 15), с помощью которых можно представить любое число.

Основные цвета red, green и blue – красный, зеленый и синий могут иметь условные значения от 00 до FF (их аналог в десятичном представлении - это числа от 0 до 255). Из сочетания трех цветов, каждому из которых присваивается одно из значений, получается необходимый цвет.

Например, белый цвет задается как #FFFFFF, а черный цвет как #000000. Первые две цифры кода (двухзначное шестнадцатеричное число) определяют насыщенность красного, следующие две - насыщенность зеленого и последние две – это синий цвет.

Как видите, шестнадцатеричная запись цвета короче и проще десятичной, а процентная запись кроме этого уступает в разнообразии оттенков. Поэтому удобнее всего пользоваться именно шестнадцатеричным представлением цветов.

Перед шестнадцатеричным числом, обозначающим цвет, ставят символ решетки #. Он обязателен. Это делается для исключения путаницы в определении системы счисления.

Фрагмент кода

<p style="color:#0000FF;">
Синий цвет текста этого абзаца задан в цветовой модели RGB указанием шестнадцатеричных значений.
</p>

Результат

Синий цвет текста этого абзаца задан в цветовой модели RGB указанием шестнадцатеричных значений.

Полезно знать и следует учитывать:

В HTML цвета задаются с помощью ключевых слов и в цветовой модели RGB указанием шестнадцатеричных значений.

В CSS есть возможность задания цвета в цветовой модели RGB с помощью десятичных значений и в процентной записи.

Безопасная палитра цветов

Существует так называемая «безопасная» палитра, которая состоит из 216 цветов.

Цвета, которые входят в безопасную палитру, хороши тем, что они всегда неизменны при переходе от одного браузера к другому. Также они обеспечивает наиболее точное соответствие отображения на различных мониторах того, что изначально было задумано разработчиком.

1-2 красный 3-4 зеленый 5-6 синий 256 цветов
FFFFFF CCCCCC 999999 666666 333333 000000 CCCC66 CCCC33
999966 999933 999900 666600 CCFF66 CCFF00 CCFF33 CCCC99
666633 333300 99FF00 99FF33 99CC66 99CC00 99CC33 669900
CCFF99 99FF99 66CC00 66CC33 669933 336600 66FF00 66FF33
33FF00 33CC00 339900 009900 33FF33 00FF33 00FF00 00CC00
33CC33 00CC33 CCFFCC 99CC99 66CC66 669966 336633 003300
99FF99 66FF66 33FF66 00FF66 339933 006600 66FF99 33FF99
00FF99 33CC66 00CC66 009933 66CC99 33CC99 00CC99 339966
009966 006633 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999
CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC 99CCCC 66CCCC
339999 669999 006666 336666 66CCFF 33CCFF 00CCFF 3399CC
0099CC 003333 99CCFF 3399FF 0099FF 6699CC 336699 006699
0066FF 3366CC 0066CC 0033FF 003399 003366 6699FF 3366FF
0000FF 0000CC 0033CC 000033 3333FF 3300FF 3300CC 3333CC
000099 000066 9999CC 6666FF 6666CC 666699 333399 333366
CCCCFF 9999FF 6666FF 6600FF 330099 330066 9966CC 9966FF
6600CC 6633CC 663399 330033 CC99FF CC66FF 9933FF 9900FF
660099 663366 CC66FF CC33FF CC00FF 9900CC 996699 660066
CC99CC CC66CC CC33CC CC00CC 990099 993399 FFCCFF FF99FF
FF66FF FF33FF FF00FF CC3399 FF66CC FF00CC FF33CC CC6699
CC0099 990066 FF99CC FF3399 FF0099 CC0066 993366 660033
FF6699 FF3399 FF0066 CC3366 996666 663333 CC9999 CC6666
CC3333 CC0000 990033 330000 FFCCCC FF9999 FF6666 FF3333
FF0000 CC0033 FF6633 CC3300 FF3300 FF0000 CC0000 990000
FFCC99 FFCC66 FF6600 CC6633 993300 660000 FF9900 FF9933
CC9966 CC6600 996633 663300 FFCC66 FFCC00 FFCC33 CC9900
CC9933 996600 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00

Полезно знать, и следует учитывать, что если любое из трех значений цвета отличается от:

  • Шестнадцатеричных  00, 33, 66, 99, СС или FF. 

  • Десятичных  0, 51, 102, 153, 204 или 255.

  • В процентах  0%, 20%, 40%, 60%, 80% или 100%.

то цвет не является безопасным.

Пример изменения насыщенности цвета

В таблице приведена шкала значений, в соответствии с которыми меняется насыщенность синего цвета.

Насыщенность Шестнадцатеричное значение Десятичное значение Процентная запись/td>
 

#000000

0, 0, 0

0%, 0%, 0%

 

#000033

0, 0, 51

0%, 0%, 20%

 

#000066

0, 0, 102

0%, 0%, 40%

 

#000099

0, 0, 153

0%, 0%, 60%

 

#0000CC

0, 0, 204

0%, 0%, 80%

 

#0000FF

0, 0, 255

0%, 0%, 100%

Как видите, существует несколько способов задания цвета в HTML и CSS. При помощи ключевых слов или в цветовой модели RGB, для которой существует три вариантов записи цвета: шестнадцатеричная, десятичная и процентная. По возможности используйте 256 цветов из безопасной палитры.

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?

Статьи по популярности