Наш дизайнер предоставил нам несколько хороших кнопок web 2.0 и т. д. Я перевел их в красивый CSS3. Теперь я хочу выйти за рамки и обобщить цветовую схему, используя манипуляции с цветом Sass.
Учитывая базовый фирменный цвет в дизайне (#7e1a00) и набор производных цветов, используемых для кнопок, ссылок, градиентов и т. д. (#D05B3D,#973D24,#7E1900), как я могу определить, какое преобразование должно быть применено к фирменный цвет, чтобы получить производный цвет?
Я могу угадать и проверить или написать программу грубой силы, чтобы попробовать все комбинации - кажется, что это может быть что-то, что можно определить умным и простым способом.
есть идеи?
Не уверен, что вы спрашиваете здесь. Используя цветовую модель HSL , все производные цвета кажутся почти одного оттенка с разной насыщенностью и яркостью — два производных цвета обесцвечены в одинаковой степени, один немного светлее другого. Итак, я предполагаю, что вы ищете производные градиентные цвета одного и того же оттенка.
Если это то, что вы ищете, нет необходимости что-либо перебирать. Просто подключите новый оттенок к цветовому пространству HSL. Естественно, MSIE опаздывает на вечеринку и не поддерживает HSLa , поэтому, если вы действительно хотите получить удовольствие, вам придется программно вычислять их самостоятельно .
См.: http://hslpicker.com/#7e1a00 .
РЕДАКТИРОВАТЬ
Только что заметил этот комментарий к статье, которую я связал:
SASS — это препроцессор CSS на стороне сервера, который также поддерживает HSLA, математику, вложение и миксины. Однако SASS выводит цвета HSLA в шестнадцатеричном формате, поэтому он работает в IE.
Похоже, что SASS преобразует цвета в шестнадцатеричный формат при компиляции в CSS, так что все готово.
Это поможет, если у вас есть какое-то базовое представление о цветовой гармонии и о том, как ее можно рассчитать.
Есть много способов получить гармоничную цветовую схему из основного цвета. Один из них монохроматический , как в вашем примере. Значение H (оттенок) — это то, что мы воспринимаем как «цвет». Возможно, проще всего думать об этом так: это то, чего нет на черно-белой фотографии листа. Уберите оттенок, и вы получите «цвет» в градациях серого. Измените насыщенность (чистоту), добавляя или вычитая черный или белый цвет к любому заданному оттенку, и вы получите «разные цвета», являющиеся вариациями одного и того же оттенка. Уменьшение или увеличение значения (яркости или темноты) также не меняет оттенок.
Инструмент Adobe Kuler безболезненно познакомит вас с цветовой гармонией. Введите базовый цвет (базовый цвет бренда) и выберите различные параметры в разделе «Выбрать правило», чтобы увидеть результаты. Результирующие цвета отображаются с их шестнадцатеричными значениями, hsv (такими же, как hsl), RGB, CMYK и Lab, и вы можете работать с ними.
В качестве грубого руководства:
Со всем этим довольно безопасно работать, если вы не очень хорошо разбираетесь в цветовой гармонии, и их довольно легко подключить к SASS, но ничто не заменит (и не повредит) знания в этой области. Погуглите «Цветовой круг» и «Цветовая гармония» и немного покопайтесь. СХОДИТЕ в местный художественный магазин и купите цветовой круг, прочтите его инструкции и немного поиграйте с ним.
РСГ
гоппе