Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Интернет-магазин под ключ

Статьи для сайтов!!!
Главная Статьи Способы задания цвета Семейства шрифтов

Способы задания цвета

Ключевые слова
RGB - десятичная запись
RGB - шестнадцатеричная запись
«Безопасная» палитра
Пример изменения насыщенности цвета


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

Ключевые слова

Этот способ заключается в следующем: существуют 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 цветов.

 

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%.

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

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

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

 

 

#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%

Единицы измерения в CSS Способы задания цвета Семейства шрифтов
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru