Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 23
По сути статьи, для написания зависимостей цветовой схемы от одного базового цвета, HSL выглядит сильно удобнее, да. Спасибо!
Что ещё за «цветовое колесо», например? Намного проще же держать в голове три RGB цвета и «смешивать» их (хотя бы примерно будет понятно, что за цвет).
Например, мы сразу понимаем, что цвет кнопки — это повёрнутый на цветовом колесе на 17 градусов и слегка осветлённый базовый цвет.Возможно, я буду одинок в этом, но для меня намного более «человекочитаемыми» выглядят HEX-коды цветов, чем вот это непонятное HSL-отображение.
Что ещё за «цветовое колесо», например? Намного проще же держать в голове три RGB цвета и «смешивать» их (хотя бы примерно будет понятно, что за цвет).
Только дизайнер, вероятнее всего, работал не в HSL, а в HSB (если называть в терминологии Adobe; в LESS используется более стандартное обозначение HSV). Так более вероятно получить красивую систему дельт/поправок.
Но вообще лучше не гадать, а спросить у дизайнера непосредственно. И ему будет приятно иметь дело с ответственным верстальщиком, и вы никакой отсебятины не сочините. Кто может гарантировать, что между теми цветами действительно задумана логическая связь, а не это мы её из пальца высосали?
Но вообще лучше не гадать, а спросить у дизайнера непосредственно. И ему будет приятно иметь дело с ответственным верстальщиком, и вы никакой отсебятины не сочините. Кто может гарантировать, что между теми цветами действительно задумана логическая связь, а не это мы её из пальца высосали?
Может все-таки LESS / SASS?
Мы недавно сделали сайт-билдер как раз с автоматической генерацией палитры, там по цветовому кругу собирается палитра, складывается в пачку 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.
Да вот и всё).
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Цвета и разница между ними в LESS / Sass