Просто рыжий кот. Или он цвета #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.
Казалось бы, причем тут детские мелки?
В том же году 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.
Мелок Crayola до и после
Прочие разработчики считали, что исключительно англо-ориентированные названия «отчуждают» иноязычную аудиторию.
Вот что написал французский разработчик и сопредседатель рабочей группы CSS Даниель Глазман: «Я не являюсь носителем английского языка. А теперь представьте мою реакцию, когда я впервые увидел цвет „gainsboro“ (по всей видимости, тут присутствует отсылка к работам английского живописца, графика, портретиста и пейзажиста восемнадцатого века Гейнсборо Томаса прим.), или „papaya whip“. »
Считается, что всего этого можно было избежать. В восьмидесятых у программистов системы Х была возможность определять цвета, как и у многих сегодняшних разработчиков, при помощи шестнадцатеричных значений, например, #FFFF00, или цветовой палитры кода RGB, например, 255,255,0. Этот подход позволяет выбирать цвета с большей точностью и он основан на схематичном подборе. Так почему же это не стали использовать с самого начала?
«Использование названий цветов было подтверждением того, что почти никто не любит использовать коды и цифровые значения. Люди думают не терминами F5B об определенных оттенках, а думают аналогиями. Использование имен для определения цвета является для людей более естественным», — сказал Джим Фултон, бывший студентом в Массачусетском Технологическом Институте в момент создания перечня цветов Равелингом и Томасом. Тем не менее он же признает, что «не каждая идея является удачной».
140 из 141 стандартных цветов CSS. Отсутствует rebecca purple, #663399
В 2014 году список из сто сорока цветов пополнился новым оттенком: «rebecca purple». Добавили его в память о Ребекке Майер, дочери Эрика Майера, уважаемого специалиста в среде CSS-программистов и писателей. Ребекка умерла от рака мозга в возрасте шести лет, а оттенок #663399 был выбран, чтобы отразить ее любимый цвет. Однако, и у этой инциативы нашлись противники. Ряд разработчиков выступил против добавления оттенка «rebecca purple», указывая на то, что в стандартном наборе цветов, используемых в работе, нет места эмоциям и сантиментам. Сообщество их не поддержало, обвинив в грубости и черствости.
Спорный, сто сорок первый цвет «rebecca purple»
Тем не менее, многие согласны, что коды цветов лучше защищены в качестве содержимого, но если вам нужно быстро набрать цвет, то проще написать «tomato», чем "#FF6347". Это важно для начинающих дизайнеров и их проектов, а также иногда используется в качестве шутки.
«Я рассматриваю возможность до сих пор задавать цвета названиями как развлечение», — сказал Джим Фултон. «Я думаю, что если сейчас проверить, как задаются цвета в топ-100 или даже в топ-1000 сайтов интернета, вы, с вероятностью близкой к нулю встретите „white“ или „black“ в коде».
«Если мне нужно показать, как использовать шестнадцатеричные значения, я могу позволить себе написать #C0FFEE или #BADA55. Но такое написание недалеко уходит от упоминаемого „papaya whip“ », — добавил Алекс Секстон.
Так если цветам дали нестандартные имена, почему же на разработчиков посыпалась серия гневных писем и постоянно возникали споры на эту тему? Возможно, дело в том, что программисты вновь оказались на «неизведанной территории», как и их коллеги из восьмидесятых. Поэтому, естественно, они стали экспериментировать так, как умели.
«В то время мы, в некотором роде, имели дело с зачатками графики для домашней компьютерной индустрии», — сказал Фултон. «Это было началом эпохи устройств с цветным дисплеем».
P.S. Если вы обнаружили какие-нибудь неточности или ошибки в переводе, очень прошу вас сообщить о них в ЛС или через Skype, обязательно поправлю.
Комментарии (52)
PastorGL
18.10.2015 21:01+12Ха.
Есть такая тема: культурологические различия в восприятии цветов, названных в честь «общеизвестных» вещей. Например, «морковный» в современном контексте это примерно то же самое, что и «апельсиновый». Но если спросить древнего египтянина, он скажет, что «морковный» — это такой оттенок фиолетового. И будет прав. Потому что оранжевый сорт моркови вывели только в средние века, по приказу герцогов Оранжских, в честь которых во многих европейских языках названы апельсины, а до того морковь была какая угодно — белая, фиолетовая, красная, но только не «морковного» апельсинового цвета…
На скользкую дорожку встали разработчики X11, ой на скользкую… и весь веб за собой утащили.mayorovp
18.10.2015 22:07+2Да зачем ходить далеко, особенно во времени? Для меня до сегодняшнего дня «морковный» было синонимом «желтого» — ведь именно такая морковь растет в саду у бабушки :)
tyomitch
18.10.2015 22:14+15Гляжу, у Ализара появились достойные преемники.
Данные цвета поддерживались всеми браузерами, следовательно, W3C могли использовать их в тестах совместимости, а включение данных цветов в CSS, по их мнению, должно было препятствовать взлому сайтов.
Казалось бы, какое отношение названия цветов имеют ко взлому сайтов?
А на самом-то деле:
Incorporating the colors into CSS, then, would prevent sites from breaking.
Включение данных цветов в CSS позволяло бы сайтам корректно отображаться на различных платформах.
(с английского это переводится как взбитые сливки с папайей, но так как в немецком и французском „whip“ имеет однозначное значение, то для Глазмана „вкусняшка“ превратилась в „папайевый кнут“. К слову, в французском языке есть еще и слово „fouet“, которое, в зависимости от контекста, так же обозначает кнут, бич и тому подобное прим.)
Тут какая-то чистейшая отсебятина. Слова „whip“ нет ни в немецком, ни во французском языке. И при чём тут „fouet“ вообще? Вроде бы, цвета „papaya fouet“ в CSS пока ещё нет.
ragequit
18.10.2015 22:18-11P.S. Если вы обнаружили какие-нибудь неточности или ошибки в переводе, очень прошу вас сообщить о них в ЛС или через Skype, обязательно поправлю.
Я не проф. переводчик, поэтому оставил в конце поста просьбу, процитированную выше. Спасибо, за то что выполнили ее и повели себя согласно тому, как здесь принято исправлять ошибки, т.е. написали в ЛС.tyomitch
18.10.2015 22:53+22Блин, «имена цветов защищают от взлома сайтов» — это не «неточность при переводе», это означает, что переводчик даже не пытается вникнуть в смысл того текста, который постит.
Вставка трёх строчек бессмыслицы ни к селу ни к городу — это тоже не «неточность при переводе».
pehat
18.10.2015 23:31+8Вы будете смеяться, но ализариновый – это тоже цвет.
Lamaster
19.10.2015 08:18+2Более того, есть даже кроваво-красный #chucknorris http://habrahabr.ru/post/173727/
ketrin7
18.10.2015 22:17Интересно, а такие названия цветов только для CSS или для Python тоже можно использовать? А то недавно над этим билась методом тыка.
kAIST
18.10.2015 23:01+1Все зависит от используемой библиотеки, в самом языке этому не место. Image.new('RGB', (128,128), 'red') по крайней мере сделать можно.
Да и никто не мешает взять и сделать отдельный модуль, наверняка их есть уже сотни
Antelle
18.10.2015 22:58Я в колор пикере как-то названия цветов локализовывал — чтобы можно было в форму вводить на русском «красный», или например, «чертополох». Говорят, пользователи даже пользовались.
Serator
18.10.2015 23:26Забавно то, что стандарты стандартами, а поддерживаются так себе. К примеру, в соответствии со спецификацией hsl(120, 100%, 25%) и green должны быть одинаковыми цветами, но в последних Firefox'е и Chrome'е это не так (проверял на Win 10). Удивительно, что правильно мой тест на цвет прошел только EDGE. Если кому-нибудь это интересно, то, вот. Проверял пипеткой стороннего приложения.
alexac
19.10.2015 00:15+1Открыл в сафари 9 на OS X 10.11. Забавно, на глаз я вижу, что до разделителя есть переход между двумя разными, но очень похожими цветами. Но pixie (graphics tools for xcode 7), говорит, что это один цвет srgb(0.0, 0.5, 0.0).
Serator
19.10.2015 00:23Ибо все дело. как я понимаю, в округлении. colorizer.org — единственный конвретер цветов из множества найденных, который учитывает символы после запятой. В итоге в нем получается так, что hsl(120, 100%, 25%) — это rgb(0, 127.5, 0).
По сути на глаз это очень сложно разглядеть, так как разница мизерная. В своей задаче я пришел к этому только ища программно цвет на Canvas'е, где точность цвета была в приоритете.
EvilPartisan
19.10.2015 07:49Я бы не сказал, что это сложно разглядеть. Разница видна очень хорошо (между 6 и 7), хотя скорее всего тут монитор играет большую роль. Как то верстал несколько лет назад на очень плохом монике — и то что на нём выглядело хорошо, при просмотре на получше хотелось плакать.
Serator
19.10.2015 13:44+1www.xrite.com/online-color-test-challenge — я проходил когда-то этот тест идеально на своем не самом лучшем мониторе. Здесь разница больше чем в единицу и то, заметить ее не то, чтобы просто. 1 — слишком малая погрешность, учитывая, что в примере выше это даже не 1, а .5. Для меня обнаружить сие, разве что знать и специально искать разницу.
vdv73rus
19.10.2015 12:16А я вот этим пользуюсь для названия переменных цвета в стилях: chir.ag/projects/name-that-color/#DEDEDE
andreymironov
19.10.2015 18:57Как же вы напомнили мне своими цветовыми кубами чудный инструмент Colorluck:
В него внесено порядка 2500 художественных названий цветов; и, кстати, согласно нему #FF6347 таки «Tomato».
Big-Boss
20.10.2015 22:33Бело-оранжеый, оранжевый, бело-зеленый, синий, бело-синий, зеленый, бело-коричневый, коричневый…
SerafimArts
По-моему идеально было бы иметь именования 7 (к.о.ж.з.г.с.ф) базовых цветов, 14 их более светлых и тёмных аналогов (light-blue, dark-red, например), плюс смеси в процентном соотношении 50\50, вида «yellow-green» (жёлтозелёный или «green-yellow») и 4, белый и чёрный, светлосерый и тёмносерый. Не важно насколько они популярны, более важно, что они были бы стандартизированными.
А потом уже можно добавлять свои названия, вроде rebeccapurple, никто бы не возразил даже тогда, думаю.
P.S. Никогда не пользовался названиями, только hex или rgb\rgba форматы.
vintage
Голубой-синий-фиолетовый как-то слабо годятся на роль базовых. Я бы предпочёл такое мнемокодирование:
яркость: 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
vintage
Цвет из заголовка таким образом будет так выражаться: LHHHR — яркий максимально насыщенный красный.
Delphinum
Не смог расшифровать пример LHHHR: получается это L — яркий + H — яркий + HH — очень яркий + R — красный? Или у вас ошибка?
vintage
Да, ошибка из-за копипасты, H — насыщенный.
Serator
Уже есть более простое и настраиваемое предлоежение в 4-ом уровне спецификации цветов — drafts.csswg.org/css-color. Смотрите в сторону функции color() и прочее в той же спецификации.
vintage
hsl(120, 100%, 50%) — это какой цвет?
hwb(100, 50%, 90%) — а это?
rgb(173, 216, 230) — ну а это?
device-cmyk(0, 81%, 81%, 30%) — ну а тут-то?
#FFDAB9 — ну хотя бы это?
Serator
Я пользуюсь почти всегде hsl-нотацией, так что здесь все просто. По цветовому колесу (увы, не силен в терминологии) быстро запоминаются основные цвета. Сл-но, 120 — зеленый. Далее идет «чистота цвета», которая ведет к «обесцвечиванию», что в примере 100%, то бишь цвет «чистый». Ну и уклон в сторону черного, аль белого в последнем параметре (50% — среднее). Так что hsl из поддерживаемых как раз, по моему мнению, самый удобный, так как читается, в отличие от rgb / hex. hwb — будущее и, как я понимаю, не хуже hsl. Про функцию device-cmyk из спецификации ничего не знаю, так что не могу что-либо ответить. Сейчас многие используют rgb, но многие ли из них смогу его прочесть не прибегая к расчетам — вопрос. :)
vintage
С оттенками сложнее. 205 — это какой цвет?
Serator
upload.wikimedia.org/wikipedia/commons/a/ad/HueScale.svg
vintage
Ну, то есть затрудняетесь ответить без шпаргалок.
Keyten
Чуть-чуть потренировавшись, можно спокойно и RGB / Hex расшифровывать в уме.
Не с точностью до оттенка, конечно же, но достаточно близко.
vintage
То, что предлагаю я:
Мнемо?ника (греч. ?? ????????? — искусство запоминания), мнемоте?хника — совокупность специальных приёмов и способов, облегчающих запоминание нужной информации и увеличивающих объём памяти путём образования ассоциаций (связей). Замена абстрактных объектов и фактов на понятия и представления, имеющие визуальное, аудиальное или кинестетическое представление, связывание объектов с уже имеющейся информацией в памяти различных типов для упрощения запоминания.
То, что предлагаете вы:
Заучивание наизусть (также зубрёжка)— метод запоминания, заключающийся в многократном устном повторении текста за небольшой промежуток времени.
mayorovp
Вот только работающие мнемоники у разных людей разные. Ниже уже был пример про «морковный».
vintage
Красный, синий и зелёный у всех одинаковые.
mayorovp
С красным, синим и зеленым никто и не спорит.
Keyten
Эм, нет.
Я предлагаю понимание основ 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).
vintage
RGB и так все понимают, а вот калькулятор в мозг встроен далеко не у всех.
SerafimArts
Оно приходит само с опытом, достаточно года работы на соответствующей должности. Даже заучивать не надо особо. Так что я полностью согласен с Keyten в его высказывании.
vintage
Ну, значит я редкостный идиот, раз за 10 лет не научился rgb в hsl в уме переводить :-)
SerafimArts
Я не говорил про перевод в hsl, я говорил что можно по rgb значению понять что это примерно за цвет без каких-либо подсказок.
vintage
hsl — это и есть описание трёх характеристик цвета, которые различимы человеком.
Denai
Современные редакторы умеют такое:
Достаточно просто навести курсор.
vintage
Вы хабр через современный редактор читаете? :-)
mayorovp
Вы так часто видите на хабре в текстах постов или комментариев цвета, записанные в одном из форматов CSS?
vintage
То, что для решения проблемы есть костыли в частных случаях, лишь свидетельствует о наличии проблемы. А проблема простая — абракадабра неинформативна. Более того, я — дальтоник, так что цветной квадрат мне мало о чём говорит.
Denai
Я не понимаю ни эти ваши коды, ни LHHHR, ни papaya whip. Но не помню ни одной ситуации до этой, где встречал бы такие цвета вне редактора и хотел бы понять какие они.
dom1n1k
Это немного похоже на переизобретение шведской системы NCS
en.wikipedia.org/wiki/Natural_Color_System
P.S. Я пользовался максимум десятком. black, white, grey, silver — такое встречается и на продакшене. Несколько простых и ярких цветов (reg, green, blue, orange) — часто используются для отладки верстки.