Комментарии 62
По-моему идеально было бы иметь именования 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 форматы.
+10
Голубой-синий-фиолетовый как-то слабо годятся на роль базовых. Я бы предпочёл такое мнемокодирование:
яркость: 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
+1
Цвет из заголовка таким образом будет так выражаться: 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 — ну хотя бы это?
hwb(100, 50%, 90%) — а это?
rgb(173, 216, 230) — ну а это?
device-cmyk(0, 81%, 81%, 30%) — ну а тут-то?
#FFDAB9 — ну хотя бы это?
0
Я пользуюсь почти всегде hsl-нотацией, так что здесь все просто. По цветовому колесу (увы, не силен в терминологии) быстро запоминаются основные цвета. Сл-но, 120 — зеленый. Далее идет «чистота цвета», которая ведет к «обесцвечиванию», что в примере 100%, то бишь цвет «чистый». Ну и уклон в сторону черного, аль белого в последнем параметре (50% — среднее). Так что hsl из поддерживаемых как раз, по моему мнению, самый удобный, так как читается, в отличие от rgb / hex. hwb — будущее и, как я понимаю, не хуже hsl. Про функцию device-cmyk из спецификации ничего не знаю, так что не могу что-либо ответить. Сейчас многие используют rgb, но многие ли из них смогу его прочесть не прибегая к расчетам — вопрос. :)
+1
С оттенками сложнее. 205 — это какой цвет?
0
Ну, то есть затрудняетесь ответить без шпаргалок.
+1
Чуть-чуть потренировавшись, можно спокойно и RGB / Hex расшифровывать в уме.
Не с точностью до оттенка, конечно же, но достаточно близко.
Не с точностью до оттенка, конечно же, но достаточно близко.
0
То, что предлагаю я:
Мнемо́ника (греч. τὰ μνημονικά — искусство запоминания), мнемоте́хника — совокупность специальных приёмов и способов, облегчающих запоминание нужной информации и увеличивающих объём памяти путём образования ассоциаций (связей). Замена абстрактных объектов и фактов на понятия и представления, имеющие визуальное, аудиальное или кинестетическое представление, связывание объектов с уже имеющейся информацией в памяти различных типов для упрощения запоминания.
То, что предлагаете вы:
Заучивание наизусть (также зубрёжка)— метод запоминания, заключающийся в многократном устном повторении текста за небольшой промежуток времени.
Мнемо́ника (греч. τὰ μνημονικά — искусство запоминания), мнемоте́хника — совокупность специальных приёмов и способов, облегчающих запоминание нужной информации и увеличивающих объём памяти путём образования ассоциаций (связей). Замена абстрактных объектов и фактов на понятия и представления, имеющие визуальное, аудиальное или кинестетическое представление, связывание объектов с уже имеющейся информацией в памяти различных типов для упрощения запоминания.
То, что предлагаете вы:
Заучивание наизусть (также зубрёжка)— метод запоминания, заключающийся в многократном устном повторении текста за небольшой промежуток времени.
-1
Вот только работающие мнемоники у разных людей разные. Ниже уже был пример про «морковный».
0
Эм, нет.
Я предлагаю понимание основ 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).
+1
RGB и так все понимают, а вот калькулятор в мозг встроен далеко не у всех.
0
Оно приходит само с опытом, достаточно года работы на соответствующей должности. Даже заучивать не надо особо. Так что я полностью согласен с Keyten в его высказывании.
+1
Ну, значит я редкостный идиот, раз за 10 лет не научился rgb в hsl в уме переводить :-)
0
Я не говорил про перевод в hsl, я говорил что можно по rgb значению понять что это примерно за цвет без каких-либо подсказок.
0
hsl — это и есть описание трёх характеристик цвета, которые различимы человеком.
-2
hue = 285
Какой цвет?
Какой цвет?
0
Без понятия. Не я тут хвастался, что помню номера цветов по памяти.
0
Просто hsl вовсе не различимы человеком, в частности, hue. Я хотел сказать именно об этом.
А вообще, если сильно хочется, можно представить цветовой круг, красный, синий и зелёный, между ними — смеси, отмерить на нём 285 градусов и примерно предположить. Но это неочевидно.
А вообще, если сильно хочется, можно представить цветовой круг, красный, синий и зелёный, между ними — смеси, отмерить на нём 285 градусов и примерно предположить. Но это неочевидно.
0
Я же написал, различимы характеристики друг от друга. Увеличение яркости для человека — это именно увеличение яркости, а не увеличение синего, зелёного и красного каналов.
Ага, ща возьму свой мысленный транспортир и отмерю :-)
Ага, ща возьму свой мысленный транспортир и отмерю :-)
0
Транспортир гораздо более очевиден :).
Мысленное деление пополам: нижняя точка — 180 градусов, дальше прибавляем четверть: 270, вот у нас и есть примерный цвет. В данном случае: 285 градусов это между красным и синим, причём ближе к синему…
Вот и получили человеческое описание hsl-цвета.
Это не QR-коды вручную расшифровывать, тут и в уме можно.
Мысленное деление пополам: нижняя точка — 180 градусов, дальше прибавляем четверть: 270, вот у нас и есть примерный цвет. В данном случае: 285 градусов это между красным и синим, причём ближе к синему…
Вот и получили человеческое описание hsl-цвета.
Это не QR-коды вручную расшифровывать, тут и в уме можно.
+1
Так в чём проблема так и писать «красно-синий ближе к синему» (RBB), а не устраивать шарады с виртуальным транспортиром?
0
В том, что получится пара десятков оттенков, и придётся извращаться как в посте.
Да и не совсем очевидно, что краснее — тыквенно-красный или апельсиново-красный, например. А так сразу видно, что к какому цвету ближе. Знающему человеку, естественно.
Так мы снова пришли к понимать vs запоминать, только уже с другой стороны.
Да и не совсем очевидно, что краснее — тыквенно-красный или апельсиново-красный, например. А так сразу видно, что к какому цвету ближе. Знающему человеку, естественно.
Так мы снова пришли к понимать vs запоминать, только уже с другой стороны.
0
Колесо Ньютона (ну и цветовое подойдет). Да, это он подсуетился.
0
Современные редакторы умеют такое:
Достаточно просто навести курсор.
Достаточно просто навести курсор.
+6
Вы хабр через современный редактор читаете? :-)
0
Вы так часто видите на хабре в текстах постов или комментариев цвета, записанные в одном из форматов CSS?
+1
Я не понимаю ни эти ваши коды, ни LHHHR, ни papaya whip. Но не помню ни одной ситуации до этой, где встречал бы такие цвета вне редактора и хотел бы понять какие они.
+4
Это немного похоже на переизобретение шведской системы 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) — часто используются для отладки верстки.
+1
Ха.
Есть такая тема: культурологические различия в восприятии цветов, названных в честь «общеизвестных» вещей. Например, «морковный» в современном контексте это примерно то же самое, что и «апельсиновый». Но если спросить древнего египтянина, он скажет, что «морковный» — это такой оттенок фиолетового. И будет прав. Потому что оранжевый сорт моркови вывели только в средние века, по приказу герцогов Оранжских, в честь которых во многих европейских языках названы апельсины, а до того морковь была какая угодно — белая, фиолетовая, красная, но только не «морковного» апельсинового цвета…
На скользкую дорожку встали разработчики X11, ой на скользкую… и весь веб за собой утащили.
Есть такая тема: культурологические различия в восприятии цветов, названных в честь «общеизвестных» вещей. Например, «морковный» в современном контексте это примерно то же самое, что и «апельсиновый». Но если спросить древнего египтянина, он скажет, что «морковный» — это такой оттенок фиолетового. И будет прав. Потому что оранжевый сорт моркови вывели только в средние века, по приказу герцогов Оранжских, в честь которых во многих европейских языках названы апельсины, а до того морковь была какая угодно — белая, фиолетовая, красная, но только не «морковного» апельсинового цвета…
На скользкую дорожку встали разработчики X11, ой на скользкую… и весь веб за собой утащили.
+12
Гляжу, у Ализара появились достойные преемники.
А на самом-то деле:
Тут какая-то чистейшая отсебятина. Слова „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 пока ещё нет.
+15
P.S. Если вы обнаружили какие-нибудь неточности или ошибки в переводе, очень прошу вас сообщить о них в ЛС или через Skype, обязательно поправлю.
Я не проф. переводчик, поэтому оставил в конце поста просьбу, процитированную выше. Спасибо, за то что выполнили ее и повели себя согласно тому, как здесь принято исправлять ошибки, т.е. написали в ЛС.
-11
НЛО прилетело и опубликовало эту надпись здесь
Более того, есть даже кроваво-красный #chucknorris http://habrahabr.ru/post/173727/
+2
Интересно, а такие названия цветов только для CSS или для Python тоже можно использовать? А то недавно над этим билась методом тыка.
0
Я в колор пикере как-то названия цветов локализовывал — чтобы можно было в форму вводить на русском «красный», или например, «чертополох». Говорят, пользователи даже пользовались.
0
Ну и мой любимый CSS-класс:
.green
{
color: red;
}
+13
Забавно то, что стандарты стандартами, а поддерживаются так себе. К примеру, в соответствии со спецификацией hsl(120, 100%, 25%) и green должны быть одинаковыми цветами, но в последних Firefox'е и Chrome'е это не так (проверял на Win 10). Удивительно, что правильно мой тест на цвет прошел только EDGE. Если кому-нибудь это интересно, то, вот. Проверял пипеткой стороннего приложения.
0
Открыл в сафари 9 на OS X 10.11. Забавно, на глаз я вижу, что до разделителя есть переход между двумя разными, но очень похожими цветами. Но pixie (graphics tools for xcode 7), говорит, что это один цвет srgb(0.0, 0.5, 0.0).
+1
Ибо все дело. как я понимаю, в округлении. colorizer.org — единственный конвретер цветов из множества найденных, который учитывает символы после запятой. В итоге в нем получается так, что hsl(120, 100%, 25%) — это rgb(0, 127.5, 0).
По сути на глаз это очень сложно разглядеть, так как разница мизерная. В своей задаче я пришел к этому только ища программно цвет на Canvas'е, где точность цвета была в приоритете.
По сути на глаз это очень сложно разглядеть, так как разница мизерная. В своей задаче я пришел к этому только ища программно цвет на Canvas'е, где точность цвета была в приоритете.
0
Я бы не сказал, что это сложно разглядеть. Разница видна очень хорошо (между 6 и 7), хотя скорее всего тут монитор играет большую роль. Как то верстал несколько лет назад на очень плохом монике — и то что на нём выглядело хорошо, при просмотре на получше хотелось плакать.
0
www.xrite.com/online-color-test-challenge — я проходил когда-то этот тест идеально на своем не самом лучшем мониторе. Здесь разница больше чем в единицу и то, заметить ее не то, чтобы просто. 1 — слишком малая погрешность, учитывая, что в примере выше это даже не 1, а .5. Для меня обнаружить сие, разве что знать и специально искать разницу.
+1
Для меня, не так давно, было открытием, что значит цвет Navy. Один из любимых, на ровне с Maroon.
+1
А я вот этим пользуюсь для названия переменных цвета в стилях: chir.ag/projects/name-that-color/#DEDEDE
0
Как же вы напомнили мне своими цветовыми кубами чудный инструмент Colorluck:
В него внесено порядка 2500 художественных названий цветов; и, кстати, согласно нему #FF6347 таки «Tomato».
В него внесено порядка 2500 художественных названий цветов; и, кстати, согласно нему #FF6347 таки «Tomato».
0
Бело-оранжеый, оранжевый, бело-зеленый, синий, бело-синий, зеленый, бело-коричневый, коричневый…
0
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
«Томат» против #FF6347 — трагикомичная история названий цветов в CSS