Gray vs Grey: правописание, оттенки и коды цвета

«Gray» или «grey»? Ответ целиком зависит от того, по какую сторону Атлантики вы находитесь. Написание в коде, в зависимости от выбранного соглашения, может давать разные результаты. Это один из тех цветовых вопросов, где правописание действительно имеет значение в технических контекстах, хотя оба слова обозначают одно и то же визуальное явление: ахроматический нейтральный между чёрным и белым, а также все близкие к нейтральному тёплые и холодные варианты вокруг него.

В этой статье рассматривается вопрос правописания, правила CSS, техническая суть того, что делает цвет «серым», практическое руководство по выбору между тёплыми и холодными серыми, а также справочная таблица ключевых hex-кодов серого по всему спектру светлоты.

Американское vs британское написание: gray vs grey

Разница в написании — один из наиболее ярких примеров расхождения американского и британского английского:

Оба варианта написания древние. Слово восходит к древнеанглийскому grǣg, и оба — «gray» и «grey» — встречаются в английских текстах со средневекового периода. Расхождение в том, какой вариант стал доминирующим, следует общей закономерности: американский английский стандартизировался вокруг одного варианта, тогда как британский сохранил другой.

Полезный мнемонический приём: grAy — американский (American), grEy — европейский (European). Гласные A и E соответствуют континентам.

В повседневном использовании ни одно из написаний не является неправильным — оба обозначают один и тот же цвет. Руководства по стилю и брендовые гайды обычно указывают одно написание для единообразия. Если вы пишете для международной аудитории без чёткого регионального предпочтения, «gray» имеет небольшое преимущество в веб-контекстах, поскольку именно его предпочитает спецификация CSS.

CSS-именованные цвета: gray как стандарт

Когда стандарты HTML и CSS цветов устанавливались, было принято решение о том, какое написание закодировать. Оба варианта принимаются в CSS, но не всегда обозначают один и тот же цвет — что создаёт тонкую техническую ловушку.

Семейство серых в CSS

CSS включает несколько именованных серых цветов. Вот полный набор с обоими вариантами написания, где применимо:

Важная заметка: для большинства составных слов (lightgray, darkgray, dimgray, slategray) существуют оба варианта написания и оба ссылаются на идентичные hex-значения. Базовые gray и grey тоже оба соответствуют #808080. Разграничение важнее всего для разработчиков, полагающихся на значения браузера по умолчанию — на практике CSS корректно обрабатывает оба написания.

Более важное техническое правило: в hex-кодах и RGB-значениях слово «gray» vs «grey» не имеет значения — важны только числа. #808080 остаётся #808080 независимо от того, как вы его называете.

Что делает серый «серым»? Техническая суть

Чистый серый — технически называемый ахроматическим цветом — имеет равные значения во всех трёх RGB-каналах. Когда красный, зелёный и синий идентичны, результатом является нейтральный цвет без оттенка:

В HSL-терминах любой по-настоящему ахроматический серый имеет 0% насыщенности и неопределённый оттенок. Процент светлоты определяет, насколько он светлый или тёмный.

Однако большинство «серых» цветов в реальном дизайне не являются абсолютно ахроматическими — они несут лёгкий цветовой оттенок, делающий их «тёплыми» или «холодными».

50 оттенков серого: ключевые hex-коды по всему спектру

Практический справочник, охватывающий полный диапазон от почти-белого до почти-чёрного:

Важный серый для доступности: #767676

Этот конкретный серый имеет особое значение в веб-дизайне: это самый светлый серый, достигающий соотношения контрастности 4,5:1 на белом фоне #FFFFFF, что является минимумом WCAG AA для обычного текста. Любой серый светлее #767676 не проходит WCAG AA как текст на белом фоне.

Это означает, что CSS gray (#808080) технически не проходит WCAG AA — он достигает лишь примерно 3,95:1 контрастности на белом. Несмотря на название «серый» и ощущение относительной тёмности, этот цвет недостаточно тёмный для доступного основного текста. Используйте #767676 или темнее для любого текста, предназначенного быть доступным.

Холодный vs тёплый серый: настоящий вопрос дизайнера

На практике для дизайнеров более важное разграничение — не «gray vs grey», а тёплый серый против холодного.

Холодные серые склоняются к синему, зелёному или фиолетовому. Они ощущаются элегантными, современными и клиническими. Хорошо сочетаются с другими холодными цветами и создают технологичную эстетику.

Тёплые серые склоняются к красному, оранжевому или жёлтому. Они ощущаются натуральными, доступными и земными. Хорошо сочетаются с деревянными тонами, терракотой и другими тёплыми природными материалами.

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

Примеры тёплых и холодных серых

Как определить тёплый или холодный серый по hex-коду

Посмотрите на RGB-значения: - Если синий наибольший среди трёх каналов → холодный серый - Если красный или зелёный наибольший → тёплый серый - Если все три равны → нейтральный серый

Например: - #708090 = rgb(112, 128, 144) → синий (144) наибольший → холодный серый - #9B9B8A = rgb(155, 155, 138) → синий (138) наименьший → тёплый серый - #808080 = rgb(128, 128, 128) → все равны → нейтральный серый

Серый в современном веб-дизайне

Серый, пожалуй, самый важный цвет в веб-дизайне. Он встречается: - В фонах страниц — использование светло-серого вместо белого снижает нагрузку на глаза и создаёт визуальную иерархию - В компонентах UI — границы, разделители, фоны полей ввода и карточек практически универсально серые - В типографике — основной текст в вебе часто тёмно-серый, а не чисто чёрный, что снижает резкость - В отключённых состояниях — приглушённые интерактивные элементы универсально сигнализируют о недоступности

Практические значения серого для веб-дизайн-систем

Шкала серого Tailwind CSS (от #F9FAFB до #030712) стала широко принятым эталоном для веб-дизайн-систем. Используйте генератор оттенков для создания шкалы серого в стиле Tailwind от 50 до 950 из любого базового серого значения.

Стратегия серого для тёмного режима

Дизайн тёмного режима требует тщательного выбора серых. Соблазн использовать чисто чёрный #000000 в качестве фона тёмного режима следует в большинстве случаев преодолевать — чистый чёрный создаёт некомфортно резкий контраст с белым текстом. Вместо этого:

• Фоны тёмного режима лучше всего работают в диапазоне от #121212 до #1E1E1E — тёмные, но не чёрные
• Поверхности тёмного режима (карточки, диалоги) должны быть на ступень-две светлее фона: #2C2C2C до #3A3A3A
• Текст на тёмных фонах лучше работает в тёплых, почти белых тонах (от #E8E8E8 до #F5F5F5), а не чисто белым

Конвертация серых оттенков между цветовыми моделями

Для любого серого конвертация проста, поскольку ахроматическое свойство делает CMYK и другие модели предсказуемыми:

Для истинно ахроматических серых (с равными R, G, B) значение CMYK всегда C:0 M:0 Y:0 K:{X}, где K равен 100 минус процент светлоты. Используйте конвертер цветов для обработки тёплых и холодных серых с ненулевым оттенком, где значения CMYK становятся сложнее.

Ключевые выводы

• Правописание: «Gray» — американский английский; «grey» — британский. В CSS оба написания действительны для именованных цветов; большинство соответствуют идентичным hex-значениям. Базовые gray и grey оба равны #808080
• Техническое определение: Истинно ахроматический серый имеет равные RGB-каналы (R=G=B) и 0% насыщенности HSL. Любой дисбаланс каналов создаёт тёплый (красный/зелёный выше) или холодный (синий выше) серый
• Критический порог доступности: #767676 — самый светлый серый, проходящий WCAG AA (4,5:1) как текст на белом. CSS gray #808080 не проходит — достигает лишь ~3,95:1 контрастности
• Определение тёплого vs холодного: Синий канал наибольший → холодный серый. Красный/зелёный наибольший → тёплый серый. Равные каналы → нейтральный
• Веб-дизайн: Серые фоны, границы и варианты текста образуют структурный слой почти каждого веб-UI. Используйте фоны светлого режима около #F5F5F5 и фоны тёмного режима от #121212 до #1E1E1E
• Используйте генератор оттенков для построения полной шкалы серого и конвертер для перевода любого серого в CMYK, HSL, RGB или OKLCH