- CSS Цвета
- Значения цвета
- пример
- Оттенки серого
- Оттенки красного
- 16 миллионов цветов
- Web Safe цвета?
- doctor Brain
- Почему в CSS серый цвет темнее темно-серого?
- Новые публикации
- JavaScript: сохраняем страницу в pdf
- CSS свойство filter
- Поддержка браузерами
- Значения свойства
- Версия CSS
- Наследуется
- Анимируемое
- Пример использования
- Эффект размытия изображения — функция blur()
- Эффект увеличения яркости изображения — функция brightness()
- Эффект увеличения контрастности изображения — функция contrast()
- Эффект тени изображения — функция drop-shadow()
- Эффект замены цветов изображения в зависимости от заданного угла — функция hue-rotate()
- Эффект градации серого цвета — функция grayscale() (черно-белое изображение на CSS)
- Эффект инвертирования цвета изображения — функция invert()
- Эффект установки прозрачности изображения — функция opacity()
- Эффект установки насыщенности изображения — функция saturate()
- Конвертирование изображение в сепию — функция sepia()
- Размещение SVG фильтра в теле страницы — функция url()
CSS Цвета
Цвета отображаются сочетания красный, зеленый и синий свет.
Значения цвета
CSS цвета определяются с помощью шестнадцатеричной (HEX) обозначение для комбинации красного, зеленого и синего цветовых значений (RGB) . Самое низкое значение , которое может быть дано одному из источников света 0 (HEX 00) . Наибольшее значение равно 255 (HEX FF) .
Значения HEX записываются в виде 3 двойных чисел цифры, начиная с символа #.
пример
| цвет | Цвет HEX | Цвет RGB |
|---|---|---|
| # 000000 | RGB (0,0,0) | |
| # FF0000 | RGB (255,0,0) | |
| # 00FF00 | RGB (0,255,0) | |
| # 0000FF | RGB (0,0,255) | |
| # FFFF00 | RGB (255,255,0) | |
| # 00FFFF | RGB (0255255) | |
| # FF00FF | RGB (255.0.255) | |
| # C0C0C0 | RGB (192192192) | |
| #FFFFFF | RGB (255,255,255) |
Оттенки серого
Серые цвета отображаются с помощью равное количество энергии для всех источников света. Для того, чтобы сделать его более легким для вас, чтобы выбрать правильный серый цвет мы составили таблицу оттенков серого для Вас:
| оттенков серого цвета | HEX | RGB |
|---|---|---|
| # 000000 | RGB (0,0,0) | |
| # 080808 | RGB (8,8,8) | |
| # 101010 | RGB (16,16,16) | |
| # 181818 | RGB (24,24,24) | |
| # 202020 | RGB (32,32,32) | |
| # 282828 | RGB (40,40,40) | |
| # 303030 | RGB (48,48,48) | |
| # 383838 | RGB (56,56,56) | |
| # 404040 | RGB (64,64,64) | |
| # 484848 | RGB (72,72,72) | |
| # 505050 | RGB (80,80,80) | |
| # 585858 | RGB (88,88,88) | |
| # 606060 | RGB (96,96,96) | |
| # 686868 | RGB (104104104) | |
| # 707070 | RGB (112112112) | |
| # 787878 | RGB (120120120) | |
| # 808080 | RGB (128128128) | |
| # 888888 | RGB (136136136) | |
| # 909090 | RGB (144144144) | |
| # 989898 | RGB (152152152) | |
| # A0A0A0 | RGB (160160160) | |
| # A8A8A8 | RGB (168168168) | |
| # b0b0b0 | RGB (176176176) | |
| # B8B8B8 | RGB (184184184) | |
| # C0C0C0 | RGB (192192192) | |
| # C8C8C8 | RGB (200200200) | |
| # D0D0D0 | RGB (208208208) | |
| # D8D8D8 | RGB (216216216) | |
| # E0E0E0 | RGB (224224224) | |
| # E8E8E8 | RGB (232232232) | |
| # F0F0F0 | RGB (240240240) | |
| # F8F8F8 | RGB (248248248) | |
| #FFFFFF | RGB (255,255,255) |
Оттенки красного
Если вы посмотрите на таблицу цвета ниже, вы увидите результат той или иной красный свет от 0 до 255, при этом сохраняя зеленый и синий свет в нуле.
Нажмите на шестнадцатеричные значения, если вы хотите, чтобы проанализировать цвет в нашей палитры цветов.
| Красный свет | HEX | RGB |
|---|---|---|
| # 000000 | RGB (0,0,0) | |
| # 080000 | RGB (8,0,0) | |
| # 100000 | RGB (16,0,0) | |
| # 180000 | RGB (24,0,0) | |
| # 200000 | RGB (32,0,0) | |
| # 280000 | RGB (40,0,0) | |
| # 300000 | RGB (48,0,0) | |
| # 380000 | RGB (56,0,0) | |
| # 400000 | RGB (64,0,0) | |
| # 480000 | RGB (72,0,0) | |
| # +500000 | RGB (80,0,0) | |
| # 580000 | RGB (88,0,0) | |
| # 600000 | RGB (96,0,0) | |
| # 680000 | RGB (104,0,0) | |
| # 700000 | RGB (112,0,0) | |
| # 780000 | RGB (120,0,0) | |
| # 800000 | RGB (128,0,0) | |
| # 880000 | RGB (136,0,0) | |
| # 900000 | RGB (144,0,0) | |
| # 980000 | RGB (152,0,0) | |
| # A00000 | RGB (160,0,0) | |
| # A80000 | RGB (168,0,0) | |
| # B00000 | RGB (176,0,0) | |
| # B80000 | RGB (184,0,0) | |
| # C00000 | RGB (192,0,0) | |
| # C80000 | RGB (200,0,0) | |
| # D00000 | RGB (208,0,0) | |
| # D80000 | RGB (216,0,0) | |
| # E00000 | RGB (224,0,0) | |
| # E80000 | RGB (232,0,0) | |
| # F00000 | RGB (240,0,0) | |
| # F80000 | RGB (248,0,0) | |
| # FF0000 | RGB (255,0,0) |
16 миллионов цветов
Сочетание значений красного, зеленого и синего от 0 до 255 дает в общей сложности более 16 миллионов различных цветов , чтобы играть с (256 x 256 x 256) .
Большинство современных мониторов способны отображать по меньшей мере 16384 различных цветов.
Web Safe цвета?
Много лет назад, когда компьютеры поддерживаются максимум 256 различных цветов, список 216 «Web Safe Colors» был предложен в качестве Web стандарта (40 фиксированных оговорку цвета системы).
Это не важно сейчас, так как большинство компьютеров может отображать миллионы разных цветов.
Это 216 шестнадцатеричные значения кросс-браузерный цветовая палитра была создана, чтобы гарантировать, что все компьютеры будут корректно отображать цвета при работе 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 |
doctor Brain
Почему в CSS серый цвет темнее темно-серого?
Конфликты цветовых схем в CSS на примере оттенков серого цвета
Скорее всего, даже имея дело с предопределенными цветами, Вы не обращали внимания на такие мелочи. Тем не менее, в HTML и CSS существуют цвета, которые являются не тем, чем кажутся. Наиболее наглядным примером стала проблема серого (Gray) и темно-серого (Dark Gray) цветов.
Попробуйте верно расставить цвета: светло-серый (Light Gray), серый (Gray) и темено-серый (Dark Gray) — на картинке размещенной ниже.
Логично представить, что наименования при перечислении сверху-вниз будут выглядеть так:
Но, не тут-то было. Верный ответ выглядит так:
Можете начинать удивляться: для HTML/CSS темно-серый (Dark Gray) цвет светлее просто серого (Gray) и находиться на RGB-шкале оттенков серого ближе к серебристому цвету.
Почему же так получилось? Естественно, как и для множества других нелепых вещей, сопровождающих нашу жизнь, здесь есть историческая основа.
Изначально наименование цвета Gray было зарезирвировано в цветовой схеме X11 оконной системы X Window system для первых браузеров Mosaic и Netscape Navigator. Цвету Gray соответстовало RGB-значение 190,190,190 (75% на триплексной шкале 0..255).
Со временем World Wide Web Consortium (W3C) поглотил цветовую схему X11. Это событие не обошлось без конфликтов: так для серого цвета (Gray) в новой цветовой схеме уже было зарезирвировано место, которое соответстовало RGB-значению 128,128,128 (50%). Естественно, за цветом Gray было закреплено новое значение 128,128,128, которое и сохраняется по настоящее время.
В то же время, для светло-серого (Light Gray) и темно-серого (Dark Gray) цветов никаких конфликтов цветовых схем не существовало. Поэтому они успешно перекочевали из X11 в W3C: Light Gray — c RGB-значением 211,211,211 (83%), а Dark Gray — с RGB-значением 169,169,169 (66%). В результате получилось так, что серый цвет (Gray) оказался темнее темно-серого (Dark Gray).
Теперь мы знааем, почему в HTML, CSS и JavaScript темно-серый цвет светлее серого.
Кстати W3C разрешил именовать серый цвет, как Gray или Grey — ни один из вариантов не будет ошибочным.
Новые публикации
JavaScript: сохраняем страницу в pdf
CSS свойство filter 
CSS свойство filter устанавливает визуальный эффект (фильтр) для элемента (например, размытие или изменение цвета). Примеры и описание всех возможных визуальных эффектов рассмотрены ниже.
Поддержка браузерами
| Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
filter  | 18.0 -webkit- | 35.0 | 15.0 -webkit- | 9.1 6.0 -webkit- | Нет | 13.0* |
filter:"none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()"; Допускается иcпользование нескольких фильтров к элементу в одном объявлении. filter:"blur(10px) brightness(150%);
object.style.webkitFilter = "blur(10px)" Значения свойства
Версия CSS
Наследуется
Анимируемое
Пример использования
Эффект размытия изображения — функция blur()
img -webkit-filter:blur(5px); /* для расширенной поддержки свойства */ filter:blur(5px); /* эффект размытия изображения (указываем радиус) */ 
Эффект увеличения яркости изображения — функция brightness()
img -webkit-filter:brightness(200%); /* для расширенной поддержки свойства */ filter:brightness(200%); /* эффект увеличения яркости изображения */ brightness(100%) — по умолчанию
Эффект увеличения контрастности изображения — функция contrast()
img -webkit-filter:contrast(200%); /* для расширенной поддержки свойства */ filter:contrast(200%); /* эффект увеличения контрастности изображения */ contrast(100%) — по умолчанию
Эффект тени изображения — функция drop-shadow()
img -webkit-filter:drop-shadow(20px 10px 15px forestgreen); /* для расширенной поддержки свойства */ filter:drop-shadow(20px 10px 15px forestgreen); /* эффект тени изображения */ 
drop-shadow(-40px -100px 10px rgb(255, 36, 0))
drop-shadow(20px 10px 15px forestgreen)
Эффект замены цветов изображения в зависимости от заданного угла — функция hue-rotate()
img -webkit-filter:hue-rotate(45deg); /* для расширенной поддержки свойства */ filter:hue-rotate(45deg); /* эффект замены цветов изображения */ hue-rotate(0deg) — по умолчанию
Эффект градации серого цвета — функция grayscale() (черно-белое изображение на CSS)
img -webkit-filter:grayscale(100%); /* для расширенной поддержки свойства */ filter:grayscale(100%); /* эффект градации серого цвета */ 
Эффект инвертирования цвета изображения — функция invert()
img -webkit-filter:invert(100%); /* для расширенной поддержки свойства */ filter:invert(100%); /* эффект инвертирования цвета изображения */ 
Эффект установки прозрачности изображения — функция opacity()
img -webkit-filter:opacity(50%); /* для расширенной поддержки свойства */ filter:opacity(50%); /* эффект прозрачности изображения */ 
Эффект установки насыщенности изображения — функция saturate()
img -webkit-filter:saturate(200%); /* для расширенной поддержки свойства */ filter:saturate(200%); /* эффект насыщенности изображения */ saturate(100%) — по умолчанию
Конвертирование изображение в сепию — функция sepia()
img -webkit-filter:sepia(100%); /* для расширенной поддержки свойства */ filter:sepia(100%); /* конвертирование изображение в сепию (вид графической техники, использующий оттенки коричневого цвета) */ 
Размещение SVG фильтра в теле страницы — функция url()
Пример img display: inline-block; /* устанавливаем, что изображения будут блочно-строчные (выстраиваются вертикально - в линейку) */ width: 25%; /* устанавливаем ширину изображений */ margin: 5% 2%; /* устанавливаем внешние отступы для изображений (верх/низ право/лево) */ > test1 -webkit-filter:url(#brightness); /* для расширенной поддержки свойства */ filter:url(#brightness); /* ссылаемся на SVG фильтр, размещенный в теле страницы (эффект увеличения яркости изображения - 2(200%) */ > test2 -webkit-filter:url(#saturate); /* для расширенной поддержки свойства */ filter:url(#saturate); /* ссылаемся на SVG фильтр, размещенный в теле страницы (эффект установки насыщенности изображения - 2(200%) */ > src = "/images/kot_shock.jpeg" alt = "kot_shock"> src = "/images/kot_shock.jpeg" alt = "kot_shock" class = "test1"> src = "/images/kot_shock.jpeg" alt = "kot_shock" class = "test2"> xmlns = "http://www.w3.org/2000/svg" height = "0px" width = "0px"> id = "brightness"> /* SVG фильтр (эффект увеличения яркости изображения - 2(200%) */ type = "linear" slope = "2"/> type = "linear" slope = "2"/> type = "linear" slope = "2"/> id = "saturate"> /* SVG фильтр (эффект установки насыщенности изображения - 2(200%) */ type = "saturate" values = "2"/>