Комментарии 65
По-моему идеально было бы иметь именования 7 (к.о.ж.з.г.с.ф) базовых цветов, 14 их более светлых и тёмных аналогов (light-blue, dark-red, например), плюс смеси в процентном соотношении 50\50, вида «yellow-green» (жёлтозелёный или «green-yellow») и 4, белый и чёрный, светлосерый и тёмносерый. Не важно насколько они популярны, более важно, что они были бы стандартизированными.
А потом уже можно добавлять свои названия, вроде rebeccapurple, никто бы не возразил даже тогда, думаю.
P.S. Никогда не пользовался названиями, только hex или rgb\rgba форматы.
А потом уже можно добавлять свои названия, вроде rebeccapurple, никто бы не возразил даже тогда, думаю.
P.S. Никогда не пользовался названиями, только hex или rgb\rgba форматы.
Голубой-синий-фиолетовый как-то слабо годятся на роль базовых. Я бы предпочёл такое мнемокодирование:
яркость: 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
яркость: 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
Цвет из заголовка таким образом будет так выражаться: LHHHR — яркий максимально насыщенный красный.
Не смог расшифровать пример LHHHR: получается это L — яркий + H — яркий + HH — очень яркий + R — красный? Или у вас ошибка?
Да, ошибка из-за копипасты, H — насыщенный.
Уже есть более простое и настраиваемое предлоежение в 4-ом уровне спецификации цветов — drafts.csswg.org/css-color. Смотрите в сторону функции color() и прочее в той же спецификации.
hsl(120, 100%, 50%) — это какой цвет?
hwb(100, 50%, 90%) — а это?
rgb(173, 216, 230) — ну а это?
device-cmyk(0, 81%, 81%, 30%) — ну а тут-то?
#FFDAB9 — ну хотя бы это?
hwb(100, 50%, 90%) — а это?
rgb(173, 216, 230) — ну а это?
device-cmyk(0, 81%, 81%, 30%) — ну а тут-то?
#FFDAB9 — ну хотя бы это?
Я пользуюсь почти всегде hsl-нотацией, так что здесь все просто. По цветовому колесу (увы, не силен в терминологии) быстро запоминаются основные цвета. Сл-но, 120 — зеленый. Далее идет «чистота цвета», которая ведет к «обесцвечиванию», что в примере 100%, то бишь цвет «чистый». Ну и уклон в сторону черного, аль белого в последнем параметре (50% — среднее). Так что hsl из поддерживаемых как раз, по моему мнению, самый удобный, так как читается, в отличие от rgb / hex. hwb — будущее и, как я понимаю, не хуже hsl. Про функцию device-cmyk из спецификации ничего не знаю, так что не могу что-либо ответить. Сейчас многие используют rgb, но многие ли из них смогу его прочесть не прибегая к расчетам — вопрос. :)
С оттенками сложнее. 205 — это какой цвет?
Ну, то есть затрудняетесь ответить без шпаргалок.
Чуть-чуть потренировавшись, можно спокойно и RGB / Hex расшифровывать в уме.
Не с точностью до оттенка, конечно же, но достаточно близко.
Не с точностью до оттенка, конечно же, но достаточно близко.
То, что предлагаю я:
Мнемо́ника (греч. τὰ μνημονικά — искусство запоминания), мнемоте́хника — совокупность специальных приёмов и способов, облегчающих запоминание нужной информации и увеличивающих объём памяти путём образования ассоциаций (связей). Замена абстрактных объектов и фактов на понятия и представления, имеющие визуальное, аудиальное или кинестетическое представление, связывание объектов с уже имеющейся информацией в памяти различных типов для упрощения запоминания.
То, что предлагаете вы:
Заучивание наизусть (также зубрёжка)— метод запоминания, заключающийся в многократном устном повторении текста за небольшой промежуток времени.
Мнемо́ника (греч. τὰ μνημονικά — искусство запоминания), мнемоте́хника — совокупность специальных приёмов и способов, облегчающих запоминание нужной информации и увеличивающих объём памяти путём образования ассоциаций (связей). Замена абстрактных объектов и фактов на понятия и представления, имеющие визуальное, аудиальное или кинестетическое представление, связывание объектов с уже имеющейся информацией в памяти различных типов для упрощения запоминания.
То, что предлагаете вы:
Заучивание наизусть (также зубрёжка)— метод запоминания, заключающийся в многократном устном повторении текста за небольшой промежуток времени.
Вот только работающие мнемоники у разных людей разные. Ниже уже был пример про «морковный».
Эм, нет.
Я предлагаю понимание основ 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).
Я предлагаю понимание основ 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).
RGB и так все понимают, а вот калькулятор в мозг встроен далеко не у всех.
Оно приходит само с опытом, достаточно года работы на соответствующей должности. Даже заучивать не надо особо. Так что я полностью согласен с Keyten в его высказывании.
Ну, значит я редкостный идиот, раз за 10 лет не научился rgb в hsl в уме переводить :-)
Я не говорил про перевод в hsl, я говорил что можно по rgb значению понять что это примерно за цвет без каких-либо подсказок.
hsl — это и есть описание трёх характеристик цвета, которые различимы человеком.
hue = 285
Какой цвет?
Какой цвет?
Без понятия. Не я тут хвастался, что помню номера цветов по памяти.
Просто hsl вовсе не различимы человеком, в частности, hue. Я хотел сказать именно об этом.
А вообще, если сильно хочется, можно представить цветовой круг, красный, синий и зелёный, между ними — смеси, отмерить на нём 285 градусов и примерно предположить. Но это неочевидно.
А вообще, если сильно хочется, можно представить цветовой круг, красный, синий и зелёный, между ними — смеси, отмерить на нём 285 градусов и примерно предположить. Но это неочевидно.
Я же написал, различимы характеристики друг от друга. Увеличение яркости для человека — это именно увеличение яркости, а не увеличение синего, зелёного и красного каналов.
Ага, ща возьму свой мысленный транспортир и отмерю :-)
Ага, ща возьму свой мысленный транспортир и отмерю :-)
Транспортир гораздо более очевиден :).
Мысленное деление пополам: нижняя точка — 180 градусов, дальше прибавляем четверть: 270, вот у нас и есть примерный цвет. В данном случае: 285 градусов это между красным и синим, причём ближе к синему…
Вот и получили человеческое описание hsl-цвета.
Это не QR-коды вручную расшифровывать, тут и в уме можно.
Мысленное деление пополам: нижняя точка — 180 градусов, дальше прибавляем четверть: 270, вот у нас и есть примерный цвет. В данном случае: 285 градусов это между красным и синим, причём ближе к синему…
Вот и получили человеческое описание hsl-цвета.
Это не QR-коды вручную расшифровывать, тут и в уме можно.
Так в чём проблема так и писать «красно-синий ближе к синему» (RBB), а не устраивать шарады с виртуальным транспортиром?
В том, что получится пара десятков оттенков, и придётся извращаться как в посте.
Да и не совсем очевидно, что краснее — тыквенно-красный или апельсиново-красный, например. А так сразу видно, что к какому цвету ближе. Знающему человеку, естественно.
Так мы снова пришли к понимать vs запоминать, только уже с другой стороны.
Да и не совсем очевидно, что краснее — тыквенно-красный или апельсиново-красный, например. А так сразу видно, что к какому цвету ближе. Знающему человеку, естественно.
Так мы снова пришли к понимать vs запоминать, только уже с другой стороны.
Колесо Ньютона (ну и цветовое подойдет). Да, это он подсуетился.
Инженерам как раз понятнее цифры
Современные редакторы умеют такое:
Достаточно просто навести курсор.
Достаточно просто навести курсор.
Вы хабр через современный редактор читаете? :-)
Вы так часто видите на хабре в текстах постов или комментариев цвета, записанные в одном из форматов CSS?
Я не понимаю ни эти ваши коды, ни LHHHR, ни papaya whip. Но не помню ни одной ситуации до этой, где встречал бы такие цвета вне редактора и хотел бы понять какие они.
Это немного похоже на переизобретение шведской системы NCS
en.wikipedia.org/wiki/Natural_Color_System
P.S. Я пользовался максимум десятком. black, white, grey, silver — такое встречается и на продакшене. Несколько простых и ярких цветов (reg, green, blue, orange) — часто используются для отладки верстки.
en.wikipedia.org/wiki/Natural_Color_System
P.S. Я пользовался максимум десятком. black, white, grey, silver — такое встречается и на продакшене. Несколько простых и ярких цветов (reg, green, blue, orange) — часто используются для отладки верстки.
Ха.
Есть такая тема: культурологические различия в восприятии цветов, названных в честь «общеизвестных» вещей. Например, «морковный» в современном контексте это примерно то же самое, что и «апельсиновый». Но если спросить древнего египтянина, он скажет, что «морковный» — это такой оттенок фиолетового. И будет прав. Потому что оранжевый сорт моркови вывели только в средние века, по приказу герцогов Оранжских, в честь которых во многих европейских языках названы апельсины, а до того морковь была какая угодно — белая, фиолетовая, красная, но только не «морковного» апельсинового цвета…
На скользкую дорожку встали разработчики X11, ой на скользкую… и весь веб за собой утащили.
Есть такая тема: культурологические различия в восприятии цветов, названных в честь «общеизвестных» вещей. Например, «морковный» в современном контексте это примерно то же самое, что и «апельсиновый». Но если спросить древнего египтянина, он скажет, что «морковный» — это такой оттенок фиолетового. И будет прав. Потому что оранжевый сорт моркови вывели только в средние века, по приказу герцогов Оранжских, в честь которых во многих европейских языках названы апельсины, а до того морковь была какая угодно — белая, фиолетовая, красная, но только не «морковного» апельсинового цвета…
На скользкую дорожку встали разработчики X11, ой на скользкую… и весь веб за собой утащили.
Гляжу, у Ализара появились достойные преемники.
А на самом-то деле:
Тут какая-то чистейшая отсебятина. Слова „whip“ нет ни в немецком, ни во французском языке. И при чём тут „fouet“ вообще? Вроде бы, цвета „papaya fouet“ в CSS пока ещё нет.
Данные цвета поддерживались всеми браузерами, следовательно, W3C могли использовать их в тестах совместимости, а включение данных цветов в CSS, по их мнению, должно было препятствовать взлому сайтов.Казалось бы, какое отношение названия цветов имеют ко взлому сайтов?
А на самом-то деле:
Incorporating the colors into CSS, then, would prevent sites from breaking.Включение данных цветов в CSS позволяло бы сайтам корректно отображаться на различных платформах.
(с английского это переводится как взбитые сливки с папайей, но так как в немецком и французском „whip“ имеет однозначное значение, то для Глазмана „вкусняшка“ превратилась в „папайевый кнут“. К слову, в французском языке есть еще и слово „fouet“, которое, в зависимости от контекста, так же обозначает кнут, бич и тому подобное прим.)
Тут какая-то чистейшая отсебятина. Слова „whip“ нет ни в немецком, ни во французском языке. И при чём тут „fouet“ вообще? Вроде бы, цвета „papaya fouet“ в CSS пока ещё нет.
P.S. Если вы обнаружили какие-нибудь неточности или ошибки в переводе, очень прошу вас сообщить о них в ЛС или через Skype, обязательно поправлю.
Я не проф. переводчик, поэтому оставил в конце поста просьбу, процитированную выше. Спасибо, за то что выполнили ее и повели себя согласно тому, как здесь принято исправлять ошибки, т.е. написали в ЛС.
НЛО прилетело и опубликовало эту надпись здесь
Более того, есть даже кроваво-красный #chucknorris http://habrahabr.ru/post/173727/
fouet это аналог whip. Значит две вещи.
В языке их нет, а вот в культурном пространстве есть. Это как слово "копипастить"
Интересно, а такие названия цветов только для CSS или для Python тоже можно использовать? А то недавно над этим билась методом тыка.
НЛО прилетело и опубликовало эту надпись здесь
Ну и мой любимый CSS-класс:
.green
{
color: red;
}
Забавно то, что стандарты стандартами, а поддерживаются так себе. К примеру, в соответствии со спецификацией hsl(120, 100%, 25%) и green должны быть одинаковыми цветами, но в последних Firefox'е и Chrome'е это не так (проверял на Win 10). Удивительно, что правильно мой тест на цвет прошел только EDGE. Если кому-нибудь это интересно, то, вот. Проверял пипеткой стороннего приложения.
Открыл в сафари 9 на OS X 10.11. Забавно, на глаз я вижу, что до разделителя есть переход между двумя разными, но очень похожими цветами. Но pixie (graphics tools for xcode 7), говорит, что это один цвет srgb(0.0, 0.5, 0.0).
Ибо все дело. как я понимаю, в округлении. colorizer.org — единственный конвретер цветов из множества найденных, который учитывает символы после запятой. В итоге в нем получается так, что hsl(120, 100%, 25%) — это rgb(0, 127.5, 0).
По сути на глаз это очень сложно разглядеть, так как разница мизерная. В своей задаче я пришел к этому только ища программно цвет на Canvas'е, где точность цвета была в приоритете.
По сути на глаз это очень сложно разглядеть, так как разница мизерная. В своей задаче я пришел к этому только ища программно цвет на Canvas'е, где точность цвета была в приоритете.
Я бы не сказал, что это сложно разглядеть. Разница видна очень хорошо (между 6 и 7), хотя скорее всего тут монитор играет большую роль. Как то верстал несколько лет назад на очень плохом монике — и то что на нём выглядело хорошо, при просмотре на получше хотелось плакать.
www.xrite.com/online-color-test-challenge — я проходил когда-то этот тест идеально на своем не самом лучшем мониторе. Здесь разница больше чем в единицу и то, заметить ее не то, чтобы просто. 1 — слишком малая погрешность, учитывая, что в примере выше это даже не 1, а .5. Для меня обнаружить сие, разве что знать и специально искать разницу.
Стандартные алгоритмы используют нормирование на 100, 256 и 32к (для 64-битных цветов). Остальное - хитрости, которые оборудованием не воспроизвести
Стандартные алгоритмы используют нормирование на 100, 256 и 32к (для 64-битных цветов). Остальное - хитрости, которые оборудованием не воспроизвести
Для меня, не так давно, было открытием, что значит цвет Navy. Один из любимых, на ровне с Maroon.
А я вот этим пользуюсь для названия переменных цвета в стилях: chir.ag/projects/name-that-color/#DEDEDE
Как же вы напомнили мне своими цветовыми кубами чудный инструмент Colorluck:
В него внесено порядка 2500 художественных названий цветов; и, кстати, согласно нему #FF6347 таки «Tomato».
В него внесено порядка 2500 художественных названий цветов; и, кстати, согласно нему #FF6347 таки «Tomato».
Бело-оранжеый, оранжевый, бело-зеленый, синий, бело-синий, зеленый, бело-коричневый, коричневый…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
«Томат» против #FF6347 — трагикомичная история названий цветов в CSS