CSS использует значения цвета для указания цвета. Как правило, они используются для установки цвета либо для переднего плана элемента (то есть его текста), либо для фона элемента. Они также могут использоваться для изменения цвета границ и других декоративных эффектов.
Вы можете указать свои значения цвета в различных форматах. В следующих таблицах перечислены все возможные форматы -
| Формат | Синтаксис | пример |
|---|---|---|
| Шестнадцатеричный код | #RRGGBB | р {цвет: # FF0000;} |
| Короткие шестнадцатеричные коды | #RGB | р {цвет: # 6À7;} |
| RGB% | rgb ( rrr %, ggg %, bbb %) | p { цвет: rgb (50%, 50%, 50%);} |
| RGB Absolute | rgb ( rrr, ggg, bbb ) | p { цвет: rgb (0,0,255);} |
| ключевое слово | аква, черный и т. д. | p { color: teal ;} |
Цвета CSS - шестнадцатеричные коды
Hex - это шестизначное представление цвета. Первые две цифры (RR) представляют собой красное значение, следующие два - это зеленое значение (GG), а последнее - синее значение (BB).
Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Jasc Paintshop Pro или даже с помощью Advanced Paint Brush.
Каждому шестнадцатеричному коду предшествует знак фунта или хеша #. Ниже приведены примеры использования шестнадцатеричных обозначений.
| цвет | Цвет HEX |
|---|---|
| #000000 | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFF00 | |
| #00FFFF | |
| #FF00FF | |
| #C0C0C0 | |
| #FFFFFF |
Цвета CSS - Короткие шестнадцатеричные коды
Это более короткая форма шестизначной нотации. В этом формате каждая цифра реплицируется, чтобы получить эквивалентное шестизначное значение. Например: #6A7 становится #66AA77.
Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Jasc Paintshop Pro или даже с помощью Advanced Paint Brush.
Каждому шестнадцатеричному коду предшествует знак фунта или хеша #. Ниже приведены примеры использования шестнадцатеричных обозначений.
| цвет | Цвет HEX |
|---|---|
| #000 | |
| #F00 | |
| #0F0 | |
| #0FF | |
| #FF0 | |
| #0FF | |
| #F0F | |
| #FFF |
Цвета CSS - значения RGB
Это значение цвета задается с помощью свойства rgb(). Это свойство принимает три значения: по одному для красного, зеленого и синего. Значение может быть целым числом от 0 до 255 или процентом.
ПРИМЕЧАНИЕ. Все браузеры не поддерживают свойство rgb() для цвета, поэтому рекомендуется не использовать его.
Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.
| цвет | Цвет RGB |
|---|---|
| rgb(0,0,0) | |
| rgb(255,0,0) | |
| rgb(0,255,0) | |
| rgb(0,0,255) | |
| rgb(255,255,0) | |
| rgb(0,255,255) | |
| rgb(255,0,255) | |
| rgb(192, 192, 192) | |
| rgb(255, 255, 255) |
Безопасные цвета браузера
Вот список из 216 цветов, которые должны быть наиболее безопасными и независимыми от компьютера цветами. Эти цвета варьируются от шестнадцатеричного кода 000000 до FFFFFF. Эти цвета безопасны в использовании, потому что они гарантируют, что все компьютеры будут правильно отображать цвета при работе с 256 цветовой палитрой -
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366cc | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99ccff |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
cc0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | cc33ff |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | ff9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- Правила в CSS - 25/02/2019 19:57
- Псевдо-элементы в CSS - 25/02/2019 19:57
- Псевдо-классы в CSS - 25/02/2019 19:57
- Слои в CSS - 25/02/2019 19:57
- Полосы прокрутки в CSS - 25/02/2019 19:57
- Видимость в CSS - 25/02/2019 19:57
- Поля в CSS - 25/02/2019 19:57
- Списки в CSS - 25/02/2019 19:57
- Отступы в CSS - 25/02/2019 19:57
- Позиционирование в CSS - 25/02/2019 19:57
- Стили курсоров в CSS - 25/02/2019 19:57
- Контуры в CSS - 25/02/2019 19:57
- Размеры в CSS - 25/02/2019 19:57
- Ссылки и CSS - 25/02/2019 19:53
- Использование изображений в CSS - 25/02/2019 18:02
- Свойства текста в CSS - 25/02/2019 17:57
- Свойства шрифтов в CSS - 25/02/2019 17:56
- Справочная информация CSS - 25/02/2019 13:33