Sass функцию lighten. Смешивание цветов для Веб с помощью Sass. Сам себе Color Scheme Designer и Adobe Kuler
Недавно меня спросили о процессе преобразования изображения в черно-белое, а именно, как можно узнать, что изображение подходит для этого. Так что в этой статье я собираюсь рассказать о том, как правильно конвертировать изображение в черно-белое и как это сделать в Photoshop без потери качества.
Когда лучше переводить изображение в черно-белый
Есть три идеи, которые приходят мне на ум, когда я пытаюсь оценить, должен ли я перевести свое изображение в черно-белое (здесь и далее буду называть сокращенно ЧБ):
- В первую очередь, это немного очевидно, но какой вы желаете получить результат? Ваш клиент специально просил сделать фото ЧБ? Вы участвуете в фотоконкурсе в номинации для ЧБ? Вы делаете серию для галереи ЧБ (потому что, вообще-то, это выглядит не слишком хорошо, когда у вас только одно или два фото ЧБ среди цветных, вы ведь хотите иметь удачное сочетание?) Как я уже сказал, это довольно очевидно, что вам необходимо учитывать конечный результат, но это стоило высказать еще раз.
- Во-вторых, необходимо учитывать значение динамического диапазона. В фотографии термин «значение диапазона» говорит о соотношении темных и светлых участков изображения. Поэтому, когда я говорю оценивать диапазон изображения, я говорю о том, есть у вас зоны глубокого черного и яркого белого на фотографии. Какой у вас динамический диапазон? В большинстве своем, «плоские» изображения выглядят не очень хорошо в ЧБ. Традиционные ЧБ имеют хорошую контрастность и достаточно растянутые значения по всей гистограмме. Так что, если ваше изображение имеет эти составляющие, то оно может стать неплохим выбором для конвертации в ЧБ.
- Я напишу когда-нибудь статью на тему теории цвета и цветовых отношений, но если у вас есть странные сочетания цветов, которые не выглядят удовлетворительно вместе, то такой снимок может быть хорошим кандидатом для преобразование в ЧБ. Посмотрим правде в глаза, некоторые цвета не очень хорошо сочетаются с другими. ЧБ может быть прекрасным способом избежать несогласованности и получить отличную фотографию.
Просто совет: если вы прищурите глаза, глядя на изображение, вы увидите меньше цветов и более расширенный диапазон. Это может помочь получить представление, действительно ли ваше изображение имеет подходящий динамический диапазон.
Как преобразовать цветное изображение в черно-белое
Ладно, давайте теперь поговорим о том, как перевести изображение в ЧБ, потому что есть два пути: правильный и неправильный. Вы, конечно, можете получить такой же результат, но если вы делаете это неправильно, вы в действительности будете терять качество (технически, вы приносите в жертву байты информации). В этой статье я буду говорить об использовании Adobe Photoshop. Есть и другие программы для конвертации, которые вы можете купить, но с точки зрения целесообразности, зачем платить дополнительно, когда вы очень легко можете сделать это в Photoshop.
Шаг 1
Если вы нашли изображение, которое вы хотите перевести в ЧБ, то первым шагом будет открытие изображения в Photoshop. В моем примере я использую один из моих свадебных снимков, которые вы можете посмотреть на моем сайте. Он был снят во время первого танца, и я просто очень люблю эту фотографию в ЧБ варианте.
Шаг 2
Не делайте этого!
Короче говоря, вы в самом деле изменяете цветовой профиль, это означает, что вы теряете пиксельную информацию в цветах. Но вы ведь не хотите этого, вы хотите сохранить как можно больше информации в изображении, насколько это возможно.
То, что вы хотите сделать, делается с использованием настроек черно-белого. Вы можете получить доступ к ним либо из верхнего меню Изображение > Режим > Черно-белый (Image > Adjustments > Black&White) или в боковой панели справа нажмите на кнопку настроек (как показано на рисунке), а затем нажмите на ЧБ значок, который обозначен черным прямоугольником, разделенным на черное и белое по диагонали.
Шаг 3
Как только вы нажмете эту пиктограмму, вы увидите настройки значений каждого цвета (см. рисунок). Обратите внимание, что Photoshop сохранил всю информацию о цветах в изображении, просто отображает его как ЧБ, но вся ваша информация о цветах сохранена.
Это также дает вам больший контроль по изменению ЧБ, так как вы можете настроить его по каждому цвету отдельно. Но имейте в виду, что вы не должны выходить за пределы допустимых значений цветов слишком далеко, иначе вы начнете видеть неровности и рваные полоски в градиентных областях, таких как небо. Вы увидите это при просмотре изображения немедленно, если начнете слишком сильно двигать ползунки, так что сразу поймете, о чем я сейчас говорю.
Шаг 4
После этого вы можете использовать другие корректирующие слои (которые действуют как умные слои, если вы понимаете, что это значит, и что является очень хорошим решением), чтобы настроить изображение так, как вам нужно: экспозиция, контраст, уровни, кривые, фильтры и т.д.
Шаг 5
После того как вы провели все редактирующие действия, которые посчитали нужными, надо надеяться, что вы получили изображение, которым вы в результате остались довольны. Теперь от вас потребуется только сохранить его в соответствии с вашими нуждами и в зависимости от желаемого результата.
David Wahlman - свадебный и портретный фотограф из Реддинга, Калифорния. Он работает в окрестностях Калифорнии и стремится расширять географию своих съемок. Вы можете посмотреть его лучшие работы над www.wahlmanphotography.com и следите за его постами на
Оказывается, что многих пользователей в сети интересует информация, как сделать фото черно-белым в программе фотошоп . Почему именно черно-белым?
Ну, во-первых , с помощью черно-белых снимков можно получить интересный художественный эффект, во-вторых , несмотря на то, что человечество научилось делать не просто цветное фото, а даже цифровое, стиль ретро не теряет своей популярности.
Вот это цветное фото я буду превращать в черно-белое:
Способ №1. Самый простой способ, как сделать фото черно-белым в фотошопе .
2. В верхнем меню выберите «Изображение» => «Коррекция» => «Черно-белое…» . Либо воспользуйтесь для быстрого вызова меню «Черно-белое…» (Alt+Shift+Ctrl+B ):
Увеличить изображение?
3. Появится окошко, где вы сможете ползунками выстроить более подходящий вид фотографии. Хотя и по умолчанию, там все настроено достаточно подходяще, чтобы красиво отобразить фото черно-белым. Жмите на кнопку «ОК» :
Способ №2. Простой способ, как сделать черно-белым фото в фотошопе .
1. Откройте фотошоп с фотографией.
2. В верхнем меню выберите «Изображение» => «Коррекция» => «Обесцветить» . Либо воспользуйтесь горячими клавишами для быстрого вызова меню «Обесцветить» (Shift+Ctrl+U ):
Увеличить изображение?
Вот такой результат получился в итоге:
Способ №3 . Комбинированный .
Пожалуй, название вполне подходит, а суть его в том, что не все элементы фото меняем на черно-белые.
Например, девушка стоит с розой. Вы можете все фото сделать черно-белым, а бутон розы оставить красным. Я думаю, вы идею поняли. Давайте я покажу, как это можно реализовать.
1. Откройте фотошоп с фотографией.
2. Выберите быстрая маска:
3. Выберите кисть и зарисовывайте тот элемент, который вы хотите сделать черно-белым. Я зарисую задний фон.
4. Теперь отожмите быструю маску. То, что вы зарисовали, должно выделиться пунктирными линиями:
Если выделилось не то, что вы хотели, вы можете сделать инверсию. Нажмите в меню «Выделение» => «Инверсия» либо сочетание кнопок на клавиатуре Shift+Ctrl+I :
5. Теперь, когда все выделилось правильно, делаем выделенные куски черно-белые.
В меню сверху выберите «Изображение» => «Коррекция» => «Обесцветить»
. Либо воспользуйтесь горячими клавишами для быстрого вызова меню «Обесцветить» - (Shift+Ctrl+U
).
Вот, что получилось:
Более 125 лет назад великий художник-импрессионист Клод Моне изменил наше представление о цвете, рассмотрев такой его элемент, как свет. До сих пор эти его исследования были неприменимы для веб-дизайна. Но такие препроцессоры, как Sass , позволяют по-новому посмотреть на цветовые палитры:
Клод Моне, Стога сена: Влияние снега (1891). Шотландская национальная галерея; изображение для всеобщего обозрения.
Исторически возможности передачи тонких цветов в Сети были ограничены, и в большинстве случаев использовались статически закрепленные коды цветов CSS . В то время как манипуляции с цветами «на лету » оставались недостижимы.
К счастью, новые инструменты дают нам больше возможностей для работы с цветом. Но CSS
все еще остается довольно негибким. Вот где нам могут весьма пригодиться препроцессоры. Давайте рассмотрим некоторые из их возможностей, которые могут существенно улучшить наши стили:
- Псевдонимы помогают лучше понять, какие цвета мы используем;
- Освещение, затемнение и масштабирование позволяют задать гибкость палитр при довольно высоких разрешениях;
- Смешение цветов позволяет открыть новый мир тонких оттенков и полутонов.
Шестизначные коды
Вы должны знать точные значения кодов цветов, чтобы применять их. Это означает, что, если вы не используете предустановленные названия цветов, ваша таблица стилей всегда полна загадочными шестизначными кодами или непонятными числами HSL . Но что, если на самом деле цвет, который мы используем, не имеет названия? Здесь нам на помощь приходит Sass . Другие препроцессоры, скорее всего, имеют аналогичный функционал, но я оставляю за вами право исследовать этот вопрос по своему усмотрению.
Давайте приступим к работе, чтобы вам стало понятно, что я имею в виду.
Мы создадим новый бренд и выберем два цвета для его отображения. Первое, что я собираюсь сделать, это назвать цвета: $toolbox и $ol-blue :
Теперь я использую их, чтобы создать сайт для компании Gullfoss Travel Supply Co . Идея дизайна для этого сайта заключается в ассоциации с багажными бирками. В разных местах сайта встречаются различные варианты (более светлые ) и оттенки (более темные ) этих цветов:
Гипотетический сайт для Gullfoss Travel Supply Co.
Рассмотрим, к примеру, эту кнопку:
Я хотел, чтобы эта кнопка выглядела, как кликабельный элемент, чего можно легко добиться с помощью простого градиента. Основой кнопки является цвет $toolbox . А ее изюминкой стали его более светлые и темные тона.
Традиционно мне бы нужно было задать их в CSS следующим образом:
Button{ background-color: $toolbox; // основной background-image: gradient(hsl(0, 33%, 52%), // светлый $toolbox, hsl(0, 41%, 39%); // темный) }
Основной цвет кнопки - это один из цветов бренда, два других (светлый и темный ) не являются константами Sass . Мне нужно было бы задавать их. Открыть палитру цветов и вручную выбрать образец. Но если я захочу добавить кнопку на этот основе цвета $ol-blue , то мне нужно было бы еще раз возвращаться к палитре и подбирать новые значения.
И для каждой из этих кнопок еще нужно описать состояние для наведения курсора! В этом состоянии светлые и темные тона будут светлее, чем на кнопке в нормальном состоянии, поэтому мне пришлось бы объявлять еще четыре константы. Или просто вводить конкретные значения один раз и надеяться, что эти цвета не понадобятся мне еще где-то.
Но Sass может сделать это за меня. Он содержит встроенные функции для обработки этих цветов без необходимости вручную задавать их различные варианты.
Упаковка палитры цветов для Sass
Один из способов сделать цвет светлее - это использовать функцию lighten :
Lighten($toolbox, 20%);
А чтобы затемнить цвет, мы можем использовать функцию darken :
Darken($ol-blue, 30%);
Рассмотрим следующий случай: если мы осветлим $toolbox на 50 %, мы получим очень светлую версию этого цвета. Но если мы осветлим $ol-blue на 50 %, то получим полностью белый цвет. Потому что $ol-blue гораздо светлее, чем $toolbox .
Чтобы знать, как сильно мы можем осветлить цвет, чтобы он не стал полностью белым, нам нужно заранее знать значение яркости этого цвета. Эта информация удобно закодирована в значениях HSL . Если мы вычтем яркость цвета из 100 %, то в результате получим значение, на которое нужно осветлить цвет, чтобы получить полностью белый:
X = 100% - l
Значение яркости для $ol-blue составляет 60 %, и мы можем осветлять его до 40%, чтобы он не стал полностью белым. Яркость для $toolbox составляет 40%, так что мы можем осветлить его на 60%:
Когда мы осветляем цвета, $ol-blue станет белым быстрее, чем $toolbox, потому что у него более высокое значение базовой яркости.
Когда мы затемняем цвета, $toolbox быстрее станет полностью черным, чем $ol-blue, потому что он имеет более низкое значение базовой яркости.
Для того чтобы освоить эту новую цветовую палитру, нам нужно запомнить значения яркости для каждого из цветов.
Пропорциональные палитры со смещением цветов
Sass включает в себя функцию цветов scale-color() , которая позволяет сдвигать составляющие цветов пропорционально. scale-color() работает с RGB , а также с каналами насыщенности и яркости HSL . Чтобы аналогично настроить оттенок, вам нужно использовать одноименную функцию adjust-hue() .
Как я отмечал ранее, если бы мы осветлили $ol-blue на 50 %, он превратился бы в чистый белый, но если бы мы пропорционально увеличили яркость на 50 % с помощью функции scale-color() :
Scale-color($ol-blue, lightness, 50%);
То получили бы цвет с яркостью средней между оригинальным цветом и чистым белым.
Теперь я точно знаю, насколько нужно сдвинуть любой из моих цветов, чтобы получить чистый белый: это всегда 100 %. Если я пропорционально увеличу яркость $ol-blue на 99 %, это все равно будет на 1 процент $ol-blue. Точно так же вы можете обработать $toolbox или любой другой цвет. За исключением цветов, которые и так уже слишком светлые, и которые могут превращаться в чисто белый намного раньше. Для них начальная яркость будет составлять 100 %.
Вы можете легко понять, что я имею в виду, рассмотрев приведенную ниже таблицу цветов:
При смещении яркости цветов они становятся светлее и более предсказуемыми.
Более темные варианты цветов тоже задаются пропорционально.
С помощью функции scale-color() вы можете задавать в цветовых палитрах ограниченное количество базовых констант, но при этом сохранить гибкость при обработке полутонов и оттенков. Теперь наше объявление градиента можно задать следующим образом:
Button{ background-color: $toolbox; // основной background-image: gradient(scale-color($toolbox, lightness: 50%), $toolbox, scale-color($toolbox, lightness: -30%);) } button: hover, button: focus{ background-color: scale-color($toolbox, lightness: 50%); // основной background-image: gradient(scale-color($toolbox, lightness: 60%), $toolbox scale-color($toolbox, lightness: -20%);) } button.secondary{ background-color: $ol-blue; // основной background-image: gradient(scale-color($ol-blue, lightness: 50%), $ol-blue, scale-color($ol-blue, lightness: -30%);) } button.secondary:hover, button.secondary:focus{ background-color: scale-color($ol-blue, lightness: 50%), // fallback background-image: gradient(scale-color($ol-blue, lightness: 60%), $ol-blue, scale-color($ol-blue, lightness: -20%);) }
В этом примере я использовал только две константы и сместил их по своему желанию. На самом деле они могут использоваться на всей странице. В содержимом домашней страницы Gullfoss Travel Supply Co. используются только два цвета бренда, смещаемые до различных значений яркости. Несмотря на такую простоту палитры, мы можем гибко ее настроить.
Прописываем цвета с помощью примесей
Существует еще один способ, с помощью которого можно создавать подобные пропорциональные палитры - функция mix()
.
Если мы хотим осветлить $ol-blue
на 60 процентов, мы напишем:
Mix(white, $ol-blue, 60%)
Вы можете представить себе это, как если бы мы смешали тюбик с белой краской с тюбиком краски цвета $ol-blue. Если мы хотим затемнить $ol-blue, мы напишем:
Mix(black, $toolbox, 30%)
Получается, что смешивание с белым или черным цветом воспринимается так же, как смещение яркости цвета, но удобнее, потому что нам нужно набирать меньше символов. Также mix() поможет легко создать внешний вид сайта, которые раньше были недоступны.
Рассмотрим рисунки стогов сена Моне . На них замечательно передана игра света. Но с точки зрения дизайна мы можем вынести из них полезный урок. По словам другого французского импрессиониста Пьера Боннара , "Цвет не создает приятное впечатление от картины - он усиливает его ". Вспомните, как цвет света влиял на внешний вид стогов Моне . Что, если бы мы могли взять базовые цвета и легко менять их в проектах, как сделал он в 1890 году?
Функция Sass mix() дает нам такую возможность. Снова возьмем нашу цветовую палитру и добавим в нее всего пару дополнительных цветов: свет и тень. Теперь давайте смешаем наши цвета бренда еще раз, но вместо того, чтобы смешивать их с черным и белым, давайте используем наши новые цвета:
Сразу вся палитра становится теплой и мягкой, а более темные цвета - насыщенными и яркими.
Осветление желтым цветом придает всей палитре солнечные оттенки.
Затемнение с помощью цвета тени делает палитру более естественной.
Если мне не нравится эта схема, я могу выбрать новые значения для этих двух констант, и в следующий раз Sass скомпилирует их в CSS , а дизайн автоматически будет отражать внесенные изменения.
В этой новой схеме я снова начинаю с той же палитры бренда, но теперь для светлых тонов я выбираю цвет ярко-розовый, а для темных темно-зеленый:
Это полностью меняет внешний вид палитры, но в ее основе все также лежат два наших основных цвета бренда.
Изменение светлых и темных тонов автоматически отображается в цветовой палитре, когда Sass компилирует CSS.
Светлые и темные тона могут быть изменены, чтобы создать соответствующее настроение или мотив вашего сайта, при этом нам не нужно производить трудоемкие изменения всех стилей.
Возвращаясь к сайту Gullfoss Travel Supply Co. , на странице каждого из стикеров я продемонстрировал некоторые возможности, которые предоставляет нам подобное смешение цветов. Если мы посмотрим на страницу Олимпии, то ее настроение полностью отличается от домашней страницы, но вся разметка, шрифты и основной макет остаются теми же. Каждый цвет был смешан с желтым светлым тоном или фиолетовым темным, поэтому мы видим страницу (в буквальном смысле ) в новом свете. Фон содержимого приобрел цвет яичной скорлупы, а кнопка "Добавить в корзину " - более естественный живой цвет:
Стикер Линкольна сильно окрашен в полутона и оттенки красного, поэтому я захотел, чтобы это получило отражение во всех элементах страницы. Я выбрал красноватые светлые и темные тона, чтобы дизайн соответствовал иллюстрации:
Если вы посмотрите на страницу для Бартон Спрингс Пул , то увидите, что на ней преобладают тона прохладной воды и зеленых листьев. Разница между оригинальными цветами и новыми довольно тонкая, но различимая. Цвета должны быть объединены единой гаммой, чтобы создать эстетику, которая улучшает дизайн:
Если вам нужна «драма », то вам подойдет страница Грид . Светлые и темные оттенки придают ей вид в стиле фильма "Трон ". Такое яркое изменение достигается всего лишь заменой нескольких констант.
Еще несколько вещей, которые помогут вам в разработке собственных палитр
Почти каждый цвет на этих страницах смешивается со светлыми или темными оттенками, но иногда элементы дизайна могут выглядеть слишком однородными, и поэтому они сливаются. В таких случаях не бойтесь дополнить проекты новым набором цветных смесителей. Это поможет придать вашим страницам выразительности и сделает их более яркими.
Давайте еще раз посмотрим на страницу Линкольна . Помните, я хотел задать для нее красноватый оттенок. Трудно читать текст на ярко-красном фоне, поэтому я по-новому задал светлые тона; почти чисто красные. После этого я установил для фона зеленый цвет. Зеленый в сочетании с красным создает визуальный эффект, при котором светлые тона выглядят более насыщенно красными, сохраняя контрастность. Эти отдельные слои используют разные светлые и темные тона, которые взаимодействуют друг с другом.
При разработке цветовых схем важно обеспечить их четкость и читаемость. Взгляните еще раз на страницу Грид . Если вы считаете, что она не очень читаема, то вы не одиноки в этом. Меню в верхней части страницы имеет низкий коэффициент контрастности. По рекомендациям WCAG , его оптимальное значение 4.5: 1, но не ниже 2.6: 1! Соответствующий коэффициент контраста цвета текста и фона сделает дизайн более приятным.
Прежде чем я завершу, я хотел бы вкратце рассмотреть поддержку браузерами. Вся обработка цветов компилируется в основные объявления цветов CSS , все переводится в статические объявления, которые на сегодняшний день поддерживают все браузеры. Препроцессоры предоставляют нам беспрецедентные возможности для создания оттенков и тонов, которые делают наши палитры более утонченными и позволяют открыть в себе Моне .
Перевод статьи «Mixing Color for the Web with Sass » был подготовлен дружной командой проекта Сайтостроение от А до Я.
Порой при разработке веб-страниц иногда требуется «спрятать» конкретные элементы. Вы, конечно, можете просто удалить эти элементы из HTML-разметки. Но это не выход из положения. Чтобы сохранить элемент, но скрыть его, необходимо использовать CSS или HTML hidden.
Вертикальное выравнивание CSS - не самая простая задача. Осложняет дело и то, что с сегодняшними требованиями к адаптивному дизайну для разных устройств разработчикам приходится создавать элементы с «гибкой» высотой, и вычисление центра по вертикали становится довольно хитрой задачей.
Приступаем к очередной интересной и обширной теме - как с помощью Sass/Compass облегчить себе жизнь при работе с цветами во время верстки.
Каждый верстальщик хорошо знает, как часто ему приходиться при верстке определять и манипулировать цветами в CSS-коде. Препроцессор Sass и его библиотека Compass обладают богатым набором функций, предназначеных для всевозможных операций с цветом в SCSS-коде.
Эта статья посвящена обзору функций Sass и Compass для работы с цветом. Начнем, как обычно, с самой простой функции и будем плавно продвигаться от простого к сложному.
Первоначальная настройка проекта Compass
Для начала создадим пустойй проект Compass и настроим его. Инициализируем несколько переменных
| 1 | $color |
| 1 | $color1 |
Фунции lighten и darken
Начнем с самых простых функций -
осветляет исходный цвет, а функция . Вторым аргументом является значение в процентах, на которое нужно осветлить или затемнить исходный цвет: .lighten { background-color : lighten ($ color , 10% ); } .darken { background-color : darken ($ color , 10% ); }Функции lighten и darken могут использоваться в любом месте SCSS-кода - везде, где применяется цвет. Например, видоизменим показанный выше пример. Применим функции lighten и darken для изменения цвета шрифта, границы и фона:
.mixin { font-size : .95rem ; background-color : lighten ($ color , 20% ); border : 1px solid darken ($ color , 30% ); color : darken ($ color , 60% ); }
Переходим к функциям обратного преобразования цвета. Первая функция
c заданным в ней цветом. Передадим эту переменную функции . На 180 градусов по отношению к исходному цвету расположен . . Она также производит инвертирование цвета от исходного. Но функция тем, что с помощью нее производится инвертирование цветов (красного, зеленого, синего), но прозрачность - она инвертирует исходный цвет. Но в отличие от последней обладает большей гибкостью. Если функция может управлять градусом расположения “выходного цвета.”Другими словами, можно задать угол, отличный от 180 градусов. Кроме того, значение угла может быть как положительным, так и отрицательным:
.adjusthue_plus { background-color : adjust-hue ($ color , 80deg ); } .adjusthue_minus { background-color : adjust-hue ($ color , -80deg ); }
В препроцессоре Sass имеется пара функций для управления насыщеностью цвета.
: .desaturate { background-color : desaturate ($ color , 80% ); }… наоборот, уменьшает насыщенность цвета от исходного.
| 1 | transparentize |
Значение прозрачности может находиться в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный):
.transparentize { background-color : transparentize ($ color , .2 ); } : .fadeout { background-color : fade-out ($ color , .2 ); }
| 1 | fade-out |
Функция преобразования исходного цвета в оттенки серого чрезвычайно проста в использовании. В принципе, тут и рассказывать особенно нечего:
.grayscale { background-color : grayscale ($ color ); }
Если стоит задача преобразования исходного цвета (заданного в виде переменной, в формате HEX или HSLA) в формат RGBA, в этом случае на помощь придет функция
и имеются два аргумента в виде переменных (два цвета). Последний третий аргумент в виде процентов задает пропорцию, в которой один цвет будет смешан с другим. В нашем случае цвет .
Функция adjust-color
Вот мы и подошли к более сложным функциям препроцессора Sass. Первой из таких функций является
также доступно управление альфа-каналом (прозрачностью) цвета. , - значение от 0 до 359 градусов, обозначающих цвет на HSL-диаграме; значение может быть как положительным, так и отрицательным;Хватит теории, давайте рассмотрим работу функции adjust-color на примерах.
- Изменение цвета от исходного ; вторым аргументом задается изменение цвета через переменную
:1 $hue
- Изменение цвета и светлоты одновременно. Первым аргументом $color задается исходный цвет, вторым аргументом устанавливается цвет $hue, третьим аргументом задается изменение светлоты $lightness:
- Изменение двух каналов цвета одновременно для цветовой модели RGB. Функции , канал зеленого цвета
:1 $green
- Смешивание аргументов цветовых моделей RGB и HSL в функции adjust-color. Передадим функции adjust-color аргументы исходного цвета $color, аргумент красного канала $red модели RGB и аргумент $hue модели HSL:
В результате компиляции данного кода в CSS получим такую ошибку:
Syntax error : Cannot specify HSL and RGB values for a color at the same time for ` adjust-color " on line 38 of .../ sass / style .scss… которая говорит о том, что в функции
производила изменение цвета на основе занчений передаваемых ей аргументов. Функция| 1 | scale-color |
В данном примере функция
. Функция . Значение вычисляет светлоту в оказался светлее, чем результат функции и| 1 | tint |
| 1 | $color |
| 1 | 30% |
Заключение
На этом обзор “цветовых” функций препроцессора Sass и библиотеки Compass можно считать завершенным. В качестве вывода можно сказать, что благодаря подобным функциям упрощается и убыстряется работа при верстке дизайна сайта.
Более того, с помощью данных функций, имея в качестве входного значения всего один цвет, можно создать отличный дизайн в профессиональной цветовой палитре. И не прибегнуть ни к одному из графических инструментов.
Помимо использования рассмотренных выше цветовых функций каждой по отдельности, можно комбинировать их в одном выражении, создавая достаточно сложные конструкции.
Данная статья является вольным переводом главы “Manipulate Color with Ease” замечательной книги “Sass and Compass for Designers” автора Ben Frain.
Цвет очень важен в дизайне - он играет визуальную и психологическую роль. Правильно подобранная палитра, соответствующая замыслу вашего дизайна значительно улучшает эстетическое впечатление от вашего сайта.
Вы (или ваш дизайнер) можете подходить к проекту с готовой палитрой. Если нет, настоятельно рекомендую прочитать теорию цвета для дизайнеров и создание собственных палитр . В идеале, хорошая палитра состоит из двух контрастных “брендовых цветов” или двух похожих цветов (из монохромной схемы) плюс нескольких осветленных или затемненных цветов для гибкости.
Если вы уже определились со своей палитрой, встроенные функции Sass помогут вам манипулировать ее цветами.
Ссылки на цветовую палитру
Переменные SASS ($variables) дают отличный способ упорядоченно и многократно ссылаться на цвета. Они ориентированны на семантические именования цветовых палитр, а не на их названия, исходя из внешнего вида. Переменная типа $color-blue имеет немного смысла (кроме того, что она указывает на синий цвет), а вот $color-primary показывает роль этого цвета. Это также дает нам гибкость при темизации или в случае смены брендовых цветов.
Несмотря на то, что $color-variables это неплохое начало, хорошей идеей будет хранить цвета в виде карты SASS (SASS map). Таким образом, цвета будут упорядочены, на них будет проще ссылаться и проходить по ним циклом.
Ниже показана базовая цветовая палитра Scotch.io:
$scotch-colors: ("primary": #8e3329, "accent": #d98328, "secondary": #5a1321, "foreground": #191919, "background": #e9e9e9);
Каждый цвет имеет семантическое значение, описывающее его роль. Можно использовать функцию Sass map-get() или собственную функцию-утилиту (рекомендуется) для ссылок на отдельные цвета:
@function scotch-color($key: "primary") { @return map-get($scotch-colors, $key); } $button-color: scotch-color("primary"); // #8e3329
Цветовую палитру желательно ограничить определенным количеством цветов (4 -7). Остальные цвета создаются как оттенки и тени цветов из палитры.
Оттенки и тени
Добавление оттенков и теней к вашей палитре даст вам большее количество цветов для проекта при сохранении согласованности вашей оригинальной палитры. Для создания теней и оттенков цвета в SASS есть функция mix() , которая смешивает оригинальный цвет с черным или белым:
$color-primary: scotch-color("primary"); // #8e3329 $color-primary-tinted: mix(white, $color-primary, 10%); // #99473e $color-primary-shaded: mix(black, $color-primary, 10%); // #7f2d24
Если установлен интервал осветления/затемнения, служебная функция может возвращать нужный оттенок соответствующей степени затемнения/осветления требуемого цвета (вместо использования магических чисел):
$color-interval: 10% !global; @function scotch-color-level($color-name: "primary", $level: 0) { $color: scotch-color($color-name); $color-base: if($level < 0, black, white); @return mix($color-base, $color, $level * $color-interval); } // Example: .panel { background-color: scotch-color-level("primary", 2); } @function scotch-color-alpha($name: "primary", $opacity: 0) { $color: scotch-color($name); // Get the named opacity level, if it exists @if map-key-exists($scotch-opacity, $opacity) { $opacity: map-get($scotch-opacity, $opacity); } // Use rgba() to manipulate the color"s alpha level @return rgba($color, $opacity); } // Example usage: $button-transparent-color: scotch-color-alpha("primary", "light"); // => rgba(#8e3329, 0.8)
Базовый (дефолтный) цвет определен в $scotch-color-key . Функция scotch-color() модифицирована для извлечения определенного варианта цвет на основе переданного ключа (‘base’, ‘light’, ‘dark’ и т.д.) и переданной степени прозрачности. Это позволяет извлекать нужный цвет одним аргументом, например $color: scotch-color("primary")
Завершение
Цвета это очень важная часть дизайна проекта. Поэтому лучше сразу организовать цвета проекта в отдельной карте SASS, чтобы затем извлекать их через map-get или кастомную функцию. В SASS есть много встроенных функций для работы с цветом и получения оттенков и теней основных цветов. Если оттенки определены заранее, используйте для их упорядочивания многомерные карты SASS.
Общей целью эстетичного цветного дизайна в SASS является возможность:
- предоставлять и изменять цвета в гармонии с выбранной цветовой палитрой
- избегать использования “магических” чисел
В следующей части нашей серии мы рассмотрим типографику и вертикальный ритм.