Серый образец — это часто используемый цвет в веб-дизайне и графическом дизайне. Он представляет собой нейтральный полутоновый серый. Конкретный шестнадцатеричный код или код RGB для этого серого цвета зависит от используемой цветовой системы. В HTML и CSS существует несколько различных способов указать этот средний серый цвет.
Шестнадцатеричный код — это 6-значный код, представляющий значения RGB цвета. Он начинается с символа #. Шестнадцатеричный код основного серого образца — #808080. Этот код представляет средний серый с равными частями красного, зеленого и синего (значения RGB 128, 128, 128).
Вот пример использования шестнадцатеричного кода в HTML:
Этот шестнадцатеричный код можно использовать в HTML, CSS, приложениях для графического дизайна, таких как Photoshop и Illustrator, и во многих других местах, которые принимают шестнадцатеричный ввод цвета. Преимущество шестнадцатеричного кода в том, что он очень специфичен — для этого кода существует только один возможный цвет. Недостатком является то, что шестнадцатеричные коды может быть сложно запомнить или визуализировать.
Код RGB представляет количество красного, зеленого и синего света, из которых состоит цвет. Код RGB для средне-серого цвета — rgb(128, 128, 128). Это означает 128 частей красного, 128 частей зеленого и 128 частей синего света.
Вот пример использования кода RGB в CSS:
“`css
.box {
background-color: rgb(128, 128, 128);
}
“`
Коды RGB полезны в CSS, программировании и везде, где принимается ввод цвета RGB. Значения находятся в диапазоне от 0 до 255. Коды RGB немного проще читать и визуализировать, чем шестнадцатеричные коды, но они менее точны.
В HTML и CSS вы также можете ссылаться на цвета по их названиям. Основной цвет серого образца называется «серый» или «серый».
Вот пример в CSS:
“`css
div {
background-color: gray;
}
“`
Это даст тот же средне-серый цвет, что и шестнадцатеричные и RGB-значения выше. Названия цветов легче всего запомнить, но они не такие точные. Существует много оттенков «серого», и точный тон может немного отличаться в разных браузерах и программах.
Код HSL (оттенок, насыщенность, яркость) — это еще один способ определения цветов. Для средне-серого цвета код HSL:
hsl(0, 0%, 50%)
Это означает:
– Оттенок: 0 (градусы вокруг цветового круга)
– Насыщенность: 0% (нейтральный серый не имеет насыщенности)
– Яркость: 50% (средний тон между белым и черным)
Вот пример в CSS:
“`css
div {
background-color: hsl(0, 0%, 50%);
}
“`
Код HSL позволяет легко настраивать оттенок серого, изменяя значение яркости. Это полезно, когда вам нужно изменить яркость цвета.
В веб-дизайне существует понятие «безопасных для веб-дизайна» цветов. Это 216 определенных цветов, которые не будут размываться или ухудшаться на дисплеях с низкой цветопередачей. Веб-безопасный серый имеет шестнадцатеричный код #808080. Это тот же средний серый, который обсуждался выше.
В наши дни веб-безопасные цвета менее важны из-за высокой поддержки цветов на современных экранах. Но #808080 по-прежнему считается средним серым цветом по умолчанию для веб.
Система Material Design от Google определяет палитру цветов для дизайна пользовательского интерфейса. Средний серый в Material Design имеет шестнадцатеричный код #9E9E9E.
Вот пример в CSS:
“`css
div {
background-color: #9E9E9E; /* Материальный средний серый */
}
“`
Это немного светлее традиционного среднего серого #808080. Он имеет значения RGB (158, 158, 158). Серые цвета Material Design варьируются от #FFFFFF (белый) до #000000 (черный) с шагом в 10% темноты.
Многие системы дизайна, такие как Bootstrap, Tailwind CSS и Basekit, используют средний серый #808080 в качестве образца по умолчанию. Вот несколько примеров:
**Класс серого Bootstrap:**
“`html
“`
Это применяет фон #808080.
**Класс серого Tailwind CSS:**
“`html
“`
Это также применяет фон #808080.
Итак, подведем итог: стандартный средний серый для веб-сайтов и пользовательского интерфейса — это #808080. Этот шестнадцатеричный код следует использовать для основного серого образца в большинстве случаев. Material Design использует немного более светлый оттенок #9E9E9E. Названия цветов, такие как «серый» или «серый», также могут использоваться в HTML и CSS.
Средний серый #808080 находится в середине полного серого спектра. Вот еще несколько распространенных оттенков серого, используемых в веб-дизайне и графическом дизайне:
| Оттенок | Шестнадцатеричный код |
|---|---|
| Самый светлый серый | #F2F2F2 |
| Светло-серый | #E0E0E0 |
| Средне-серый | #808080 |
| Темно-серый | #A9A9A9 |
| Самый темный серый | #696969 |
Есть Бесконечные оттенки серого между белым и черным. Средний серый #808080 имеет яркость 50%. Более светлые оттенки серого часто используются для фонов, границ и второстепенных элементов пользовательского интерфейса. Более темные оттенки серого используются для текста и разделительных линий.
Серый цвет имеет нейтральный, но сбалансированный психологический эффект. Он олицетворяет самообладание и зрелость. Светло-серые оттенки могут предполагать утонченность и элегантность. Темно-серые оттенки более формальные и консервативные. Средне-серые оттенки, такие как #808080, обеспечивают идеальный баланс, поскольку они не слишком светлые и не тяжелые. Это делает средне-серый цвет очень универсальным и удобным в дизайне и брендинге.
Стандартный образец средне-серого цвета имеет шестнадцатеричный код #808080. Он представляет собой равномерное сочетание красного, синего и зеленого света для получения нейтрального полутонового серого цвета. Этот цвет можно указать в HTML, CSS, приложениях для дизайна и везде, где цвета определены в коде. Другие оттенки серого варьируются от светлого #F2F2F2 до темного #696969. Средний серый обеспечивает идеальный нейтральный баланс и широко используется в дизайне пользовательского интерфейса, веб-дизайне и графическом дизайне. Так что если вам нужен чистый, профессиональный и универсальный серый, используйте образец среднего серого #808080.