Comments 23
По сути статьи, для написания зависимостей цветовой схемы от одного базового цвета, HSL выглядит сильно удобнее, да. Спасибо!
Что ещё за «цветовое колесо», например? Намного проще же держать в голове три RGB цвета и «смешивать» их (хотя бы примерно будет понятно, что за цвет).
Например, мы сразу понимаем, что цвет кнопки — это повёрнутый на цветовом колесе на 17 градусов и слегка осветлённый базовый цвет.Возможно, я буду одинок в этом, но для меня намного более «человекочитаемыми» выглядят HEX-коды цветов, чем вот это непонятное HSL-отображение.
Что ещё за «цветовое колесо», например? Намного проще же держать в голове три RGB цвета и «смешивать» их (хотя бы примерно будет понятно, что за цвет).
Только дизайнер, вероятнее всего, работал не в HSL, а в HSB (если называть в терминологии Adobe; в LESS используется более стандартное обозначение HSV). Так более вероятно получить красивую систему дельт/поправок.
Но вообще лучше не гадать, а спросить у дизайнера непосредственно. И ему будет приятно иметь дело с ответственным верстальщиком, и вы никакой отсебятины не сочините. Кто может гарантировать, что между теми цветами действительно задумана логическая связь, а не это мы её из пальца высосали?
Но вообще лучше не гадать, а спросить у дизайнера непосредственно. И ему будет приятно иметь дело с ответственным верстальщиком, и вы никакой отсебятины не сочините. Кто может гарантировать, что между теми цветами действительно задумана логическая связь, а не это мы её из пальца высосали?
Может все-таки LESS / SASS?
UFO just landed and posted this here
Мы недавно сделали сайт-билдер как раз с автоматической генерацией палитры, там по цветовому кругу собирается палитра, складывается в пачку less-переменных вместе с шрифтами и прочим, less (по факту — сильно почиканный bootstrap) пересобирается и применяется тут же на клиенте. Так как из бутстрапа вырезаны многие неиспользуемые фишки, пересборка работает достаточно быстро.
З.Ы. Есть еще более продвинутый, но скорее исследовательский проект, чуть позже выложу его в паблик и тоже покажу.
З.Ы. Есть еще более продвинутый, но скорее исследовательский проект, чуть позже выложу его в паблик и тоже покажу.
Вот второй visigene.com/ — там темы только с colourLOVERS и голый Bootstrap, зато есть ручные настройки и более умный выбор цветов из палитры.
Тоже самое для SASS ethanmuller.github.io/sass-color-function-generator-thing/
О! Вот это красиво. Единственно, что только для двух цветов. Как бы также придумать для колонок?
Доброго дня, (garex, и Metaller)
Низкий поклон от меня лично и от коллег! Сэкономили время многих и многих!
Однако хотелось бы обратить внимание всех заинтересованных Lessoводов на одну особенность — как оказалось в природе существуют цвето-зависимости, выходящие за рамки описания Less-переменными. Некие исключения, в рамках которых невозможно имея базовый цвет найти второй.
В качестве примера (чтобы было более понятно о чем речь) приведу 2 стандартных цвета bootstrap — brand-primary: #428bca; и brand-success: #5cb85c; Давайте возьмем первый за базовый, а второй попробуем описать при помощи Less.
Что получилось у меня в итоге (1) с использованием утилиты и (2) без нее:
Низкий поклон от меня лично и от коллег! Сэкономили время многих и многих!
Однако хотелось бы обратить внимание всех заинтересованных Lessoводов на одну особенность — как оказалось в природе существуют цвето-зависимости, выходящие за рамки описания Less-переменными. Некие исключения, в рамках которых невозможно имея базовый цвет найти второй.
В качестве примера (чтобы было более понятно о чем речь) приведу 2 стандартных цвета bootstrap — brand-primary: #428bca; и brand-success: #5cb85c; Давайте возьмем первый за базовый, а второй попробуем описать при помощи Less.
Что получилось у меня в итоге (1) с использованием утилиты и (2) без нее:
- Утилитой — @brand-success!: spin(desaturate(lighten @brand-primary 1%), 17%), -88); В итоге утилитой мы получаем цвет, сдвинутый на 1% по тоновой шкале и на 1% темнее, чем нужно.
- Метод подбора с использованием фотошопа тоже не дал 100%-но нужно цвета, но уже лучше — удалось подобрать цвет ближе к оригинальному — 100% соответствие по тоновой шкале (на мой взгляд, самый критичный параметр), расхождение только в насыщенности — она больше на 1%.
Погрешность минимальна и вряд ли приведет к каким-то артефактам (разве что если вам необходимо будет прилепить картинку однотонную с цветом фона, например), но факт остается фактом — получаемый цвет не на 100% соответствует нужному. Подозреваю, что дело в большом Less-шаге (%) saturate/desaturate, darken/lighten. Тут, возможно, автор более подкован и прояснит ситуацию с математической точки зрения?
На здоровье, переадресую свою часть благодарности автору скрипта Ethan Muller.
А лично для меня арактика прошедшего года показала, что цвета в переменных лучше указывать явно, без подобной магии. При использовании формулы преобразования для двух заранее известных цветов на других цветах, не всегда дает ожидаемый и приемлемый результат.
А лично для меня арактика прошедшего года показала, что цвета в переменных лучше указывать явно, без подобной магии. При использовании формулы преобразования для двух заранее известных цветов на других цветах, не всегда дает ожидаемый и приемлемый результат.
Прошу прощения за выведенные HSB-ошибки. Спешу исправить:
Должен получится такой цвет:
Получили и в первом и во втором случае самый близкий цвет, стремящийся к #5cb85c:
@brand-primary: #428bca; // имеем базовый
@brand-success: spin(desaturate(lighten(@brand-primary, 1%), 17%), -88); // 1 вариант (автоматически)
@brand-success: spin(desaturate(lighten(@brand-primary, 1%), 17%), -88); // 2 вариант (ручной подбор)
Должен получится такой цвет:
@brand-success: #5cb85c; // HSB: 120, 50, 72Получили и в первом и во втором случае самый близкий цвет, стремящийся к #5cb85c:
#5ab75a; // HSB: 120, 51, 72255 — 255 единиц чего-то. Это просто больше чем процентов в 100%. А это получается баг — создайте на ГХ issue pls.
Приветствую, уважаемый garex!
Плавающая точка нормально интерпретируется Less для процентных значений, для сдвига по шкале, видимо, дробить нет необходимости… что, в общем, очевидно.
Положил в issue подтверждение
Всех благ!
С нетерпением ждем новой версии вашей замечательной утилиты!
Плавающая точка нормально интерпретируется Less для процентных значений, для сдвига по шкале, видимо, дробить нет необходимости… что, в общем, очевидно.
Положил в issue подтверждение
Всех благ!
С нетерпением ждем новой версии вашей замечательной утилиты!
Спасибо за статью. Как раз размышлял внедрить что-то подобное у себя, особенно привлекает возможность использовать базовый цвет.
> Допустим, что дизайнер скинул нам 5 цветов и скорее всего в HEX-формате: #FF0000, #E82C0C, #FF530D, #E80C7A, #FF0DFF. Что говорят нам эти буквы и цифры? Да ничего — это больше понятно монитору, нежели человеку.
Ну кому как). Первый — красный, понятно, это основы. Остальные… на глаз:
E82D0C — красный, но чуть другой оттенок
FF530D — оранжевый, как-то так. Или красный с оранжевым оттенком.
E80C7A — фиолетовый, причём красного больше чем синего.
FF0DFF — розовый.
Ну кому как). Первый — красный, понятно, это основы. Остальные… на глаз:
E82D0C — красный, но чуть другой оттенок
FF530D — оранжевый, как-то так. Или красный с оранжевым оттенком.
E80C7A — фиолетовый, причём красного больше чем синего.
FF0DFF — розовый.
Вы случаем не поклонник en.wikipedia.org/wiki/Brainfuck? :))
Лично я предпочитаю readable форматы для человека, а-ля HSL, а RGB да ещё и в HEX`е пусть монитор читает. Также как компутер должен понимать двоичность, а человек читать/писать на человеческом языке.
Лично я предпочитаю readable форматы для человека, а-ля HSL, а RGB да ещё и в HEX`е пусть монитор читает. Также как компутер должен понимать двоичность, а человек читать/писать на человеческом языке.
Просто вполне разбираюсь в подобных вещах, а однажды даже подбирал цвета в hex для сайта сам, в уме, т.к. фотошоп / любой colorpicker было лень открывать, а про rgba почему-то забыл :). Это был незабываемый опыт)).
А я не разбираюсь и лень даже напрягать нейроны. Что мне делать? :))
Ну если вам это не нужно, то действительно, смысл это изучать?)).
Но если вдруг интересно, могу вкратце объяснить. Это модель RGB, т.е. три компонента — красный, зелёный, синий (Red, Green, Blue).
Каждый имеет значение от 0 до 255, а в HEX — это от 00 до FF.
Соответственно:
255,255,255 = FF FF FF (белый)
0,0,0 = 00 00 00 (чёрный)
Вот как-то так. Основные цвета понятны: ff0000 — красный; 00ff00 — зелёный, 0000ff — синий, также полезно знать их смеси: ffff00 — жёлтый (отсутствие синего), ff00ff — розовый (красный + синий; отсутствие зелёного), 00ffff — ярко-голубой (зелёный + синий; отсутствие красного).
Да, собственно, это вся теория. Надеюсь, шестнадцатиричные числа объяснять не нужно :D
Остальные цвета — это их смеси.
К примеру, E8 2D 0C — много красного, почти нет зелёного, ещё меньше синего => это красный, но немного другого оттенка.
Ну и можно ещё засветлять-затемнять.
К FF0000 прибавим немножко чёрного — будет EE0000 (более тёмный красный) или, например, AA0000 (ещё более).
Немножко белого — будет FF1111, например, или FF5555.
Да вот и всё).
Но если вдруг интересно, могу вкратце объяснить. Это модель RGB, т.е. три компонента — красный, зелёный, синий (Red, Green, Blue).
Каждый имеет значение от 0 до 255, а в HEX — это от 00 до FF.
Соответственно:
255,255,255 = FF FF FF (белый)
0,0,0 = 00 00 00 (чёрный)
Вот как-то так. Основные цвета понятны: ff0000 — красный; 00ff00 — зелёный, 0000ff — синий, также полезно знать их смеси: ffff00 — жёлтый (отсутствие синего), ff00ff — розовый (красный + синий; отсутствие зелёного), 00ffff — ярко-голубой (зелёный + синий; отсутствие красного).
Да, собственно, это вся теория. Надеюсь, шестнадцатиричные числа объяснять не нужно :D
Остальные цвета — это их смеси.
К примеру, E8 2D 0C — много красного, почти нет зелёного, ещё меньше синего => это красный, но немного другого оттенка.
Ну и можно ещё засветлять-затемнять.
К FF0000 прибавим немножко чёрного — будет EE0000 (более тёмный красный) или, например, AA0000 (ещё более).
Немножко белого — будет FF1111, например, или FF5555.
Да вот и всё).
Sign up to leave a comment.
Цвета и разница между ними в LESS / Sass