Теория цвета в цифрах

[Stdit]

Как насчет использования hsl цветов в цветовых константах? Ими управлять еще проще и интуитивно понятнее.

[kyrie]

Спасибо за материал, познавательно получилось. Наверное более честно было бы пометить ее как перевод, ну да ладно, вам виднее.

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

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

[rozhik]

Таки да, 10 лет назад любой хороший полиграфист . Жизнь требовала в то время. Сейчас и мониторчики, и освещение умеют делать правильной температуры и спектра. Так что с пипеткой по зонам бегать уже не обязательно. По этому нету такой необходимости.

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

[jojo97]

При верстке css постоянно пишу цвет по hex-кодам, так намного удобнее чем через колорпикер моей IDE.

[Mithgol]

На второй картинке слева написано «#d03010», а фактически нарисовано «#d03020».

Затем (справа) написано «#c0d050», а фактически нарисовано «#c0f0d0».

[d1Mm]

Это из-за сжатия в PNG с 8-битной палитрой. Наверное использовался оптимизатор картинок.

[BaNru]

Поддержу. Заметил на другой картинке

картинка под спойлером

Очень пастельные красный, зеленый и синий цвета. Приближенный к CMYK палитре, а не RGB. И это не «из-за сжатия в PNG»
Не хорошо обманывать в статье про цвета.

[Alexufo]

Возможно сохранили с цветовым профилем в метаданных. Хотя… нет.

[BaNru]

PNG не поддерживает цветовые профили. Конечно не исключено, что сначала картинки сохранялись в JPEG, что глупо, или TIFF, что маловероятно…

[BubaVV]

Автор очень гордится тем, что разобрался с позиционными системами счисления

[Yan169]

Скорее заметил свойства записи шестнадцатиричной, но к сути систем счисления пока не приступил.

[maximw]

После фразы «Вторая цифра каждой пары уточняет оттенок», я не уверен, что таки разобрался.

[Pozadi]

Когда-то делал мини-игру на эту тему «угадай цвет» (ползунок регулирует сложность). И еще ссылка в углу квадрата с цветом ведет на довольно интересный сайт.

[barker]

Вторая цифра каждой пары уточняет оттенок

Что это означает? Никакой оттенок она не уточняет, она совершенно равноправна с первой цифрой пары.

[spacediver]

«Цена деления» старшей цифры — 16, младшей — 1, поэтому можно сказать что младшая уточняет.

Это напоминает мне UI настройки на одном советском осциллографе, где для регулировки положения «картинки» вертикального усиления были две ручки: «грубо», «плавно». Их значения суммировались с разными весами.

[belkin_ai]

Да это же просто двузначное число.
Как тогда десятичная rgb-запись 255 будет трактоваться? Первая цифра определяет, вторая — уточняет, а третья — перепроверяет?:)

[spacediver]

что я знаю о кругах?

[Moskus]

Пора вводить на хабре флажок «К.О.», дополнительно к tutorial и прочему.

[Alexufo]

Вот на самом деле… статья найдет читателя. Я тож так раньше… а потом… все таки это психология потребления. Дайте мне не КО.)

[rozhik]

Не помешало бы в статье упомянуть о короткой форме записи цветов и web-safe цветах.
Короткая запись #123 то-же самое что и #112233.
Web-safe цвета — 12битная палитра состоящая из цветов, которые могут быть записаны в короткой форме. Её особенность — минимальные искажения на мониторах любой глубины цвета. Ко всему прочему, на ней тестированы алгоритмы сглаживания шрифтов. По этому желательно для текста использовать web-safe цвета.

[Alexufo]

Понимание цвета по hex-коду позволяет веб-дизайнеру быстрее ориентироваться в коде страницы

Да дело не в том что дизайнеры виноваты что не учат hex коды. Зачем? Я глубого убежден, что это всего лишь историческая концепция интерфейса представления информации. Так оно сложилось, как раньше 8 символов на имя и 3 на расширение, что мы все таки решили в текстовых редакторах показывать не двоичный код, а текст. Почему мы не верстаем в 16 ричном редакторе? Потому что это глупо. Глупо тратить время на ненужные операции.

Ровно так же с представлением цвета в тексте. Так оно сложилось, что никто, кроме веб IDE для вестки и веб разработки не счел нужным рядом с кодом цвета выводить этот самый цвет рядом. Для того чтобы не напрягать мозг на мелочевку. Оличный пример phpstorm. Кто в курсе, тот понял про что я.

Мы продожаем бороться с теми технологиями, которые почти невозможно изменить в силу «так оно вааще все появилось». Мы порой даже не замечам, что можно как то где то упростить.

Зачем развивать способности к чтению матрицы? В качестве справочника да, но не в качестве призыва.

[belkin_ai]

Вот, согласен. Phpstorm, пипетки на любой вкус, куча сервисов по подбору палитры. Этого всего должно хватать, чтобы абстрагироваться от хексов. Тем более, этим вообще дизайнер долже заниматься, по-идее. А верстальщик только копипастить цвет из шаблона.

[BaNru]

Я надеялся, что прочитав статью, я смогу на глаз, посмотрев значения цвета, прикидывать цвет.

Так же тут уже упоминалось

о короткой форме записи цветов и web-safe цветах

Ещё о буквенном написание названия цветов и об RGB(A) можно было бы рассказать.

Можете минусить, но статья ни о чем, ибо не полная. Кто сверстал хотя бы пару сайтов — это всё прекрасно знает.

[EndUser]

В первом примере ниже одна из пар меняется с шагом в 10%

А что за шкала HSB, которую автор, незаметив мимоходом, подкинул-то?
Она к RGB не имеет никакого отношения (на данном уровне подробности статьи).

[DeuS7]

Всегда трепещу, когда встречаю в различных статьях культурные отсылки. А если эта статья еще и полезная, как эта…
P.S. Это я об FAE.