«Томат» против #FF6347 — трагикомичная история названий цветов в CSS

Original author: Julianne Tveten
  • Translation

Просто рыжий кот. Или он цвета #FFCC33?

В разделе «Named Colors» в последней спецификации CSS размещен перечень из сто сорок одного стандартного цвета. Каждый из них имеет не только код, но и свое название. И это не только «черный», «белый» и знакомые всем нам оттенки, но и такие цвета как «лимон шифон», «коралловый» и «шоколадный».

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

Эта история берет начало в 1980-х годах в Массачусетсе. Изначально, цвета CSS были продуктом X Window System (X), графического пользовательского интерфейса (GUI), распространенного в MIT с 1984 года. В июне 1986 был сформирован первый список цветов этого GUI, после настройки его для работы на терминале VT240. Список включал в себя шестьдесят девять основных цветов и оттенков, которые записывались ста тридцатью восьмью способами с учетом регистра (то есть «darkred» и «DarkRed» были разными цветами).

В 1988 году в GUI X11R2 добавили три новых цвета, в том числе два одинаковых оттенка серого, которые, однако, записывались по-разному, как “gray" и “grey”. Во время обсуждения цветов на конференции JavaScript в прошлом году, разработчик Алекс Секстон рассказал, что программисты компании Hewlett-Packard не могли запомнить правильное написание «серый» через «а» (Gray), поэтому дублирующий вариант (Grey) был добавлен, чтобы избежать ошибок в коде.

Наиболее существенные изменения произошли с релизом X11R4 в 1989 году, выпустил который Пол Равелинг. Это обновление возвестило о появлении множества «легких» нейтральных тонов, в ответ на жалобы подчиненных Равелинга на цветопередачу. Суть проблемы заключалась в том, что в восьмидесятых годах прошлого века цветопередача могла значительно варьироваться от монитора к монитору, в зависимости от производителя оборудования. Последней каплей стал вскрик его сотрудника «ЭТО пшеница?!?!». В новой версии от Равелинга для программистов были введены вышеупомянутые «романтичные» имена оттенков, такие как «Papaya whip», «lemon chiffon» и прочие «миленькие» названия на подобие «blanched almond» и «peach puff».

Названия цветов Равелинг взял не с потолка. За первоисточник он принял цветовую гамму красок ныне не существующей компании-производителя Sinclair. Это была чистой воды самодеятельность. Он пытался получить разрешение от Американского Национального Института Стандартов (ANSI), который определял стандарты для используемых в вебе цветов. Однако, институт «доблестно сожрал» уплаченные Равелингом 16$ и просто проигнорировал его запрос. После неудачи он решил все взять в свои руки. Равелинг самостоятельно «откалибровал» цвета на своем мониторе HP.

image
Казалось бы, причем тут детские мелки?

В том же году X11 получила набор смелых цветов благодаря программисту Джону С. Томасу. Обновление Равелинга оптимизировало оттенки, чтобы не вводить пользователей в заблуждение. Томас же, независимо от Равелинга, в 1989 получил письмо с замечаниями касательно набора RGB-цветов от своего коллеги Брюса Шухардта:

"(Я) все еще в шоке и ужасе от стандартного набора цветов в базе данных RGB. В частности, «розовый» выглядит как лицо человека, которого несколько часов рвало и который будет больше рад получить пулю в голову, чем продолжать жить".

Томас согласился с коллегой. Разочарованный противоречивостью цветопередачи дисплеев того времени, он начал искать способ, как стандартизировать названия цветов. В своем ответном электронном письме он написал, что «сел как-то вечером и и нашел удобный способ стандартизировать названия цветов, используя за основу названия семидесяти двух цветных мелков производителя Crayola». Так свет увидели цвета «аквамарин», «орхидея», «лосось» и многие другие.


Слева цвета Джона С. Томаса. Он добавил весьма смелые оттенки и использовал имена и цвет мелков Crayola. Справа — распределение цветов Равелинга

К 2001 году World Wide Web Consortium (W3C) опубликовал первый рабочий проект Color Module CSS 3, который включал в себя и цвета. В свете развития технологий некоторые из них выпали из использования, но W3C заявил своей целью «кодифицировать существующую практику». Данные цвета поддерживались всеми браузерами, следовательно, W3C могли использовать их в тестах совместимости, а включение данных цветов в CSS, по их мнению, позволяло бы сайтам корректно отображаться на различных платформах.

Реакция последовала незамедлительно. Цвета в базе данных были подвергнуты множественным изменениям по прихоти различных программистов. Это привело к настолько глубокой дезорганизации, что некоторые стали утверждать, что им не место в CSS.

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

Пожалуй, самую негативную реакцию на цвета в CSS отражает письмо программиста Стивена Пембертона, отправленное им в 2002 году: «Названия цветов в Х11 — это мерзость, которая должна была быть задушена при рождении, а добавление этих цветов в CSS является не иначе как пятном на его отличном дизайне. Сказать, что имена цветов в Х11 были „разработаны“, есть оскорбление самого слова „разработка“. Это просто бардак».

Другим спорным моментом стали культурные и этнические разногласия. Некоторых программистов оскорбила ориентированность цветов в сторону аналогий, таких как «dodger blue», за основу которого был взят цвет формы бейсбольной команды Los Angeles Dodgers. Другие усмотрели в названиях «navajo white» и «indian red» расистский подтекст. Стоит заметить, что «indian red» — название цвета мелка Crayola, который компания в последствии переименовала по тем же причинам (жалобы на расизм) в chestnut.

image
Мелок Crayola до и после

Прочие разработчики считали, что исключительно англо-ориентированные названия «отчуждают» иноязычную аудиторию.

Вот что написал французский разработчик и сопредседатель рабочей группы CSS Даниель Глазман: «Я не являюсь носителем английского языка. А теперь представьте мою реакцию, когда я впервые увидел цвет „gainsboro“ (по всей видимости, тут присутствует отсылка к работам английского живописца, графика, портретиста и пейзажиста восемнадцатого века Гейнсборо Томаса прим.), или „papaya whip“. »

Считается, что всего этого можно было избежать. В восьмидесятых у программистов системы Х была возможность определять цвета, как и у многих сегодняшних разработчиков, при помощи шестнадцатеричных значений, например, #FFFF00, или цветовой палитры кода RGB, например, 255,255,0. Этот подход позволяет выбирать цвета с большей точностью и он основан на схематичном подборе. Так почему же это не стали использовать с самого начала?

«Использование названий цветов было подтверждением того, что почти никто не любит использовать коды и цифровые значения. Люди думают не терминами F5B об определенных оттенках, а думают аналогиями. Использование имен для определения цвета является для людей более естественным», — сказал Джим Фултон, бывший студентом в Массачусетском Технологическом Институте в момент создания перечня цветов Равелингом и Томасом. Тем не менее он же признает, что «не каждая идея является удачной».

image
140 из 141 стандартных цветов CSS. Отсутствует rebecca purple, #663399

В 2014 году список из сто сорока цветов пополнился новым оттенком: «rebecca purple». Добавили его в память о Ребекке Майер, дочери Эрика Майера, уважаемого специалиста в среде CSS-программистов и писателей. Ребекка умерла от рака мозга в возрасте шести лет, а оттенок #663399 был выбран, чтобы отразить ее любимый цвет. Однако, и у этой инциативы нашлись противники. Ряд разработчиков выступил против добавления оттенка «rebecca purple», указывая на то, что в стандартном наборе цветов, используемых в работе, нет места эмоциям и сантиментам. Сообщество их не поддержало, обвинив в грубости и черствости.

image
Спорный, сто сорок первый цвет «rebecca purple»

Тем не менее, многие согласны, что коды цветов лучше защищены в качестве содержимого, но если вам нужно быстро набрать цвет, то проще написать «tomato», чем "#FF6347". Это важно для начинающих дизайнеров и их проектов, а также иногда используется в качестве шутки.

«Я рассматриваю возможность до сих пор задавать цвета названиями как развлечение», — сказал Джим Фултон. «Я думаю, что если сейчас проверить, как задаются цвета в топ-100 или даже в топ-1000 сайтов интернета, вы, с вероятностью близкой к нулю встретите „white“ или „black“ в коде».

«Если мне нужно показать, как использовать шестнадцатеричные значения, я могу позволить себе написать #C0FFEE или #BADA55. Но такое написание недалеко уходит от упоминаемого „papaya whip“ », — добавил Алекс Секстон.

Так если цветам дали нестандартные имена, почему же на разработчиков посыпалась серия гневных писем и постоянно возникали споры на эту тему? Возможно, дело в том, что программисты вновь оказались на «неизведанной территории», как и их коллеги из восьмидесятых. Поэтому, естественно, они стали экспериментировать так, как умели.

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

P.S. Если вы обнаружили какие-нибудь неточности или ошибки в переводе, очень прошу вас сообщить о них в ЛС или через Skype, обязательно поправлю.
ua-hosting.company
Хостинг-провайдер: серверы в NL до 300 Гбит/с

Comments 59

    +10
    По-моему идеально было бы иметь именования 7 (к.о.ж.з.г.с.ф) базовых цветов, 14 их более светлых и тёмных аналогов (light-blue, dark-red, например), плюс смеси в процентном соотношении 50\50, вида «yellow-green» (жёлтозелёный или «green-yellow») и 4, белый и чёрный, светлосерый и тёмносерый. Не важно насколько они популярны, более важно, что они были бы стандартизированными.

    А потом уже можно добавлять свои названия, вроде rebeccapurple, никто бы не возразил даже тогда, думаю.

    P.S. Никогда не пользовался названиями, только hex или rgb\rgba форматы.
      +1
      Голубой-синий-фиолетовый как-то слабо годятся на роль базовых. Я бы предпочёл такое мнемокодирование:
      яркость: DD — очень тёмный, D — тёмный, DL — средней яркости, L — яркий, LL — очень яркий
      насыщенность: SS — очень ненасыщенный, S — насыщенный, SH — средней насыщенности, H — яркий, HH — очень яркий.
      оттенок: R — красный, Y — жёлтый, G — зелёный, С — голубой, B — синий, M — пурпурный; плюс промежуточные оттенки: RY, YG, GC, CB, BM, MR; плюс можно ещё уточнить: RRY, RYY, YYG, YGG, GGC, GCC, CCB, CBB, BBM, BMM, MMR, MRR
        0
        Цвет из заголовка таким образом будет так выражаться: LHHHR — яркий максимально насыщенный красный.
          0
          Не смог расшифровать пример LHHHR: получается это L — яркий + H — яркий + HH — очень яркий + R — красный? Или у вас ошибка?
            0
            Да, ошибка из-за копипасты, H — насыщенный.
              0
              Уже есть более простое и настраиваемое предлоежение в 4-ом уровне спецификации цветов — drafts.csswg.org/css-color. Смотрите в сторону функции color() и прочее в той же спецификации.
                0
                hsl(120, 100%, 50%) — это какой цвет?
                hwb(100, 50%, 90%) — а это?
                rgb(173, 216, 230) — ну а это?
                device-cmyk(0, 81%, 81%, 30%) — ну а тут-то?
                #FFDAB9 — ну хотя бы это?

                  +1
                  Я пользуюсь почти всегде hsl-нотацией, так что здесь все просто. По цветовому колесу (увы, не силен в терминологии) быстро запоминаются основные цвета. Сл-но, 120 — зеленый. Далее идет «чистота цвета», которая ведет к «обесцвечиванию», что в примере 100%, то бишь цвет «чистый». Ну и уклон в сторону черного, аль белого в последнем параметре (50% — среднее). Так что hsl из поддерживаемых как раз, по моему мнению, самый удобный, так как читается, в отличие от rgb / hex. hwb — будущее и, как я понимаю, не хуже hsl. Про функцию device-cmyk из спецификации ничего не знаю, так что не могу что-либо ответить. Сейчас многие используют rgb, но многие ли из них смогу его прочесть не прибегая к расчетам — вопрос. :)
                    0
                    С оттенками сложнее. 205 — это какой цвет?
                        +1
                        Ну, то есть затрудняетесь ответить без шпаргалок.
                          0
                          Чуть-чуть потренировавшись, можно спокойно и RGB / Hex расшифровывать в уме.
                          Не с точностью до оттенка, конечно же, но достаточно близко.
                            –1
                            То, что предлагаю я:

                            Мнемо́ника (греч. τὰ μνημονικά — искусство запоминания), мнемоте́хника — совокупность специальных приёмов и способов, облегчающих запоминание нужной информации и увеличивающих объём памяти путём образования ассоциаций (связей). Замена абстрактных объектов и фактов на понятия и представления, имеющие визуальное, аудиальное или кинестетическое представление, связывание объектов с уже имеющейся информацией в памяти различных типов для упрощения запоминания.

                            То, что предлагаете вы:

                            Заучивание наизусть (также зубрёжка)— метод запоминания, заключающийся в многократном устном повторении текста за небольшой промежуток времени.
                              0
                              Вот только работающие мнемоники у разных людей разные. Ниже уже был пример про «морковный».
                                –1
                                Красный, синий и зелёный у всех одинаковые.
                                  0
                                  С красным, синим и зеленым никто и не спорит.
                                +1
                                Эм, нет.
                                Я предлагаю понимание основ RGB и построение своих выводов на этом.
                                Единственное, что нужно помнить — это то, что (255, 255, 0) — жёлтый, (0, 255, 255) — бирюзовый (или как его назвать), а (255, 0, 255) — ярко-розовый.
                                Такие цвета, как (255, 0, 0) полностью очевидны.
                                Если ещё и понимать, что чем больше компоненты, тем цвет светлее — это уже вообще хорошо.

                                И, встречая, например, (255, 200, 200), вы можете с уверенностью сказать, что это розовый, или, (100, 100, 0) — жёлтый+чёрный. Или посложнее: (255, 100, 10) — оранжевый. Потому что смесь (255,0,0) и (255,255,0), т.е. красного и жёлтого. Вот и всё.

                                Ну и ещё можно сказать, что у серых цветов все компоненты одинаковы. И, встретив, например, (230, 235, 240), понятно, что это серый с небольшим уклоном в синий.

                                С Hex-цветами абсолютно та же история, только там 3 оттенка всего лишь хранятся в шестнадцатиричных числах. Например, #FF00AA — это (FF, 00, AA), т.е. (255, 0, 170).
                                  0
                                  RGB и так все понимают, а вот калькулятор в мозг встроен далеко не у всех.
                                    +1
                                    Оно приходит само с опытом, достаточно года работы на соответствующей должности. Даже заучивать не надо особо. Так что я полностью согласен с Keyten в его высказывании.
                                      0
                                      Ну, значит я редкостный идиот, раз за 10 лет не научился rgb в hsl в уме переводить :-)
                                        0
                                        Я не говорил про перевод в hsl, я говорил что можно по rgb значению понять что это примерно за цвет без каких-либо подсказок.
                                          –2
                                          hsl — это и есть описание трёх характеристик цвета, которые различимы человеком.
                                            0
                                            hue = 285
                                            Какой цвет?
                                              0
                                              Без понятия. Не я тут хвастался, что помню номера цветов по памяти.
                                                0
                                                Просто hsl вовсе не различимы человеком, в частности, hue. Я хотел сказать именно об этом.

                                                А вообще, если сильно хочется, можно представить цветовой круг, красный, синий и зелёный, между ними — смеси, отмерить на нём 285 градусов и примерно предположить. Но это неочевидно.
                                                  0
                                                  Я же написал, различимы характеристики друг от друга. Увеличение яркости для человека — это именно увеличение яркости, а не увеличение синего, зелёного и красного каналов.

                                                  Ага, ща возьму свой мысленный транспортир и отмерю :-)
                                                    +1
                                                    Транспортир гораздо более очевиден :).
                                                    Мысленное деление пополам: нижняя точка — 180 градусов, дальше прибавляем четверть: 270, вот у нас и есть примерный цвет. В данном случае: 285 градусов это между красным и синим, причём ближе к синему…
                                                    Вот и получили человеческое описание hsl-цвета.

                                                    Это не QR-коды вручную расшифровывать, тут и в уме можно.
                                                      0
                                                      Так в чём проблема так и писать «красно-синий ближе к синему» (RBB), а не устраивать шарады с виртуальным транспортиром?
                                                        0
                                                        В том, что получится пара десятков оттенков, и придётся извращаться как в посте.
                                                        Да и не совсем очевидно, что краснее — тыквенно-красный или апельсиново-красный, например. А так сразу видно, что к какому цвету ближе. Знающему человеку, естественно.
                                                        Так мы снова пришли к понимать vs запоминать, только уже с другой стороны.
                      +6
                      Современные редакторы умеют такое:
                      image
                      Достаточно просто навести курсор.
                        0
                        Вы хабр через современный редактор читаете? :-)
                          +1
                          Вы так часто видите на хабре в текстах постов или комментариев цвета, записанные в одном из форматов CSS?
                            0
                            То, что для решения проблемы есть костыли в частных случаях, лишь свидетельствует о наличии проблемы. А проблема простая — абракадабра неинформативна. Более того, я — дальтоник, так что цветной квадрат мне мало о чём говорит.
                            +4
                            Я не понимаю ни эти ваши коды, ни LHHHR, ни papaya whip. Но не помню ни одной ситуации до этой, где встречал бы такие цвета вне редактора и хотел бы понять какие они.
              +1
              Это немного похоже на переизобретение шведской системы NCS
              en.wikipedia.org/wiki/Natural_Color_System

              P.S. Я пользовался максимум десятком. black, white, grey, silver — такое встречается и на продакшене. Несколько простых и ярких цветов (reg, green, blue, orange) — часто используются для отладки верстки.
              +12
              Ха.

              Есть такая тема: культурологические различия в восприятии цветов, названных в честь «общеизвестных» вещей. Например, «морковный» в современном контексте это примерно то же самое, что и «апельсиновый». Но если спросить древнего египтянина, он скажет, что «морковный» — это такой оттенок фиолетового. И будет прав. Потому что оранжевый сорт моркови вывели только в средние века, по приказу герцогов Оранжских, в честь которых во многих европейских языках названы апельсины, а до того морковь была какая угодно — белая, фиолетовая, красная, но только не «морковного» апельсинового цвета…

              На скользкую дорожку встали разработчики X11, ой на скользкую… и весь веб за собой утащили.
                +2
                Да зачем ходить далеко, особенно во времени? Для меня до сегодняшнего дня «морковный» было синонимом «желтого» — ведь именно такая морковь растет в саду у бабушки :)
                  +4
                  OK, морковный

                  Carrots
                  +15
                  Гляжу, у Ализара появились достойные преемники.
                  Данные цвета поддерживались всеми браузерами, следовательно, W3C могли использовать их в тестах совместимости, а включение данных цветов в CSS, по их мнению, должно было препятствовать взлому сайтов.
                  Казалось бы, какое отношение названия цветов имеют ко взлому сайтов?
                  А на самом-то деле:
                  Incorporating the colors into CSS, then, would prevent sites from breaking.
                  Включение данных цветов в CSS позволяло бы сайтам корректно отображаться на различных платформах.

                  (с английского это переводится как взбитые сливки с папайей, но так как в немецком и французском „whip“ имеет однозначное значение, то для Глазмана „вкусняшка“ превратилась в „папайевый кнут“. К слову, в французском языке есть еще и слово „fouet“, которое, в зависимости от контекста, так же обозначает кнут, бич и тому подобное прим.)

                  Тут какая-то чистейшая отсебятина. Слова „whip“ нет ни в немецком, ни во французском языке. И при чём тут „fouet“ вообще? Вроде бы, цвета „papaya fouet“ в CSS пока ещё нет.
                    –11
                    P.S. Если вы обнаружили какие-нибудь неточности или ошибки в переводе, очень прошу вас сообщить о них в ЛС или через Skype, обязательно поправлю.


                    Я не проф. переводчик, поэтому оставил в конце поста просьбу, процитированную выше. Спасибо, за то что выполнили ее и повели себя согласно тому, как здесь принято исправлять ошибки, т.е. написали в ЛС.
                      +22
                      Блин, «имена цветов защищают от взлома сайтов» — это не «неточность при переводе», это означает, что переводчик даже не пытается вникнуть в смысл того текста, который постит.

                      Вставка трёх строчек бессмыслицы ни к селу ни к городу — это тоже не «неточность при переводе».
                      +8
                      Вы будете смеяться, но ализариновый – это тоже цвет.
                    0
                    Интересно, а такие названия цветов только для CSS или для Python тоже можно использовать? А то недавно над этим билась методом тыка.
                      +1
                      Все зависит от используемой библиотеки, в самом языке этому не место. Image.new('RGB', (128,128), 'red') по крайней мере сделать можно.
                      Да и никто не мешает взять и сделать отдельный модуль, наверняка их есть уже сотни
                      0
                      Я в колор пикере как-то названия цветов локализовывал — чтобы можно было в форму вводить на русском «красный», или например, «чертополох». Говорят, пользователи даже пользовались.
                        +13
                        Ну и мой любимый CSS-класс:

                        .green
                        {
                            color: red;
                        }
                        
                          +9
                          — Это какая ягода?
                          — Чёрная смородина.
                          — А почему красная?
                          — Потому что зелёная.
                            +1
                            Немножко не так.

                            — Это черная?
                            — Нет, красная.
                            — А почему белая?
                            — Потому что зеленая.
                          0
                          Забавно то, что стандарты стандартами, а поддерживаются так себе. К примеру, в соответствии со спецификацией hsl(120, 100%, 25%) и green должны быть одинаковыми цветами, но в последних Firefox'е и Chrome'е это не так (проверял на Win 10). Удивительно, что правильно мой тест на цвет прошел только EDGE. Если кому-нибудь это интересно, то, вот. Проверял пипеткой стороннего приложения.
                            +1
                            Открыл в сафари 9 на OS X 10.11. Забавно, на глаз я вижу, что до разделителя есть переход между двумя разными, но очень похожими цветами. Но pixie (graphics tools for xcode 7), говорит, что это один цвет srgb(0.0, 0.5, 0.0).
                              0
                              Ибо все дело. как я понимаю, в округлении. colorizer.org — единственный конвретер цветов из множества найденных, который учитывает символы после запятой. В итоге в нем получается так, что hsl(120, 100%, 25%) — это rgb(0, 127.5, 0).

                              По сути на глаз это очень сложно разглядеть, так как разница мизерная. В своей задаче я пришел к этому только ища программно цвет на Canvas'е, где точность цвета была в приоритете.
                                0
                                Я бы не сказал, что это сложно разглядеть. Разница видна очень хорошо (между 6 и 7), хотя скорее всего тут монитор играет большую роль. Как то верстал несколько лет назад на очень плохом монике — и то что на нём выглядело хорошо, при просмотре на получше хотелось плакать.
                                  +1
                                  www.xrite.com/online-color-test-challenge — я проходил когда-то этот тест идеально на своем не самом лучшем мониторе. Здесь разница больше чем в единицу и то, заметить ее не то, чтобы просто. 1 — слишком малая погрешность, учитывая, что в примере выше это даже не 1, а .5. Для меня обнаружить сие, разве что знать и специально искать разницу.
                            +1
                            Для меня, не так давно, было открытием, что значит цвет Navy. Один из любимых, на ровне с Maroon.
                              +2
                              наравне.
                              0
                              А я вот этим пользуюсь для названия переменных цвета в стилях: chir.ag/projects/name-that-color/#DEDEDE
                                0
                                Как же вы напомнили мне своими цветовыми кубами чудный инструмент Colorluck:

                                image

                                В него внесено порядка 2500 художественных названий цветов; и, кстати, согласно нему #FF6347 таки «Tomato».
                                  0
                                  Бело-оранжеый, оранжевый, бело-зеленый, синий, бело-синий, зеленый, бело-коричневый, коричневый…

                                  Only users with full accounts can post comments. Log in, please.