Работа с цветом — кто поможет разобраться

Работа с цветом — кто поможет разобраться

Всем привет. Как вы думаете, что должен знать любой из нас о сочетаемости цветов? Что синий с зеленым — никак, а оранжевый рядом с бордовым выглядит просто жутко? И, тем не менее, при подборе цветовой гаммы, например, для дизайна блога, не лучше ли обратиться к помощи профессионала, поскольку любое мнение человека несведущего скорее всего окажется субъективным.

Например, мне кажется, что красное с синим выглядит очень даже ничего, и эти цвета я использовала в дизайне своего блога. А мой знакомый разнес результаты моих стараний в пух и прах, дескать, выглядит кричаще и глаз отнюдь не радует. А потому, тема этой статьи – работа с цветовой гаммой и все, что для этого необходимо: программа для определения цвета, определение цвета по цифровому значению, и сочетаемость цветов не по принципу «мне так кажется», а с использованием очень удобного сервиса.

Работа с цветом — как узнать HTML-код

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

Определение HTML кода по цвету

Зовут данную программку Pixie Nattyware. К слову сказать, в интернете достаточно аналогичных программ, но именно эта показалась мне наиболее удобной, и, как рабочий инструмент, просто незаменимой. При изменении цветовой гаммы блога, когда в стилях необходимо изменять HTML код шрифта, фона и т. д., общение с данной программой становится особенно плотным. Пользоваться ею приходится часто, никаких досадных промахов за нею не наблюдалось.

Определение цвета по HTML-коду

Теперь обратный вариант: есть HTML код, и надо выяснить – какой это цвет? Для этого я всегда пользуюсь услугами одного и того же сервиса – RGB Colors

Определение цвета по коду

Все очень просто – вводите шестизначный HTML код и тут же получаете результат.

Получение результата

Мало того, если вы поставите галочку в чекбоксе Выводить набор стилей, то получите готовое написание некоторых стилей для вставки в код: рамка, тень, фон.

Вывод набора стилей

Сервис не требует регистрации, количество вводимых образцов не ограничено. И что еще очень удобно – результаты не удаляются после введения очередного значения, и вы можете сравнивать полученные цвета между собой.

Сохранение результатов в программе

Черное и белое не предлагать… Сочетаемость цветов

Итак, все это просто замечательно, если вы уже полностью определились с цветовой гаммой, и вас не мучает вопрос: что и с чем совместимо. Причем, в случае с оформлением блога речь идет не о двух, и даже не о трех цветах, которые в идеале не должны между собою конфликтовать. Наверняка ведь вы замечали, что на некоторых блогах использованы 4 – 5 различных цветовых сочетаний, но выглядит все это вполне уместно и очень даже симпатично. Вот для того, чтобы решить эту нелегкую для многих ( и для меня в том числе ) проблему, отправляйтесь на сервис Colors of the Web, где вам предоставят просто немыслимое количество возможных цветовых сочетаний.

Данный сервис носит вполне скромное название – Цветной Волшебник (Color Wizard). Предназначен он для тех, кто «намерен создавать проекты с правильным сочетанием цветов и оттенков». Сервис предоставляет услуги всего в двух, зато исчерпывающих направлениях: вы можете создавать массу вариантов одного и того же цвета, которые будут стопроцентно сочетаться между собой, а так же получите образцы цветовых сочетаний с указанным вами основным цветом. Получилось немного мудрено, но если вникнуть в суть – все очень просто и удобно.

Допустим, вам необходимо выяснить все о синем цвете. Для этого вводите его шестизначный HTML код в строку Enter Hex Code ( дословно – ввести кодекс ведьмы!) и нажимаете SET.

Обозначаем основной цвет

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

В верхней части страницы находятся три ползунка – красный, зеленый и синий. Называется этот раздел – Randomize (производить отбор).

Редактируем основной цвет

Манипулируя ими, вы можете добавить в основной цвет либо красный, либо зеленый, либо еще синий цвет, и тогда в трех колонках образцов получите невероятное количество оттенков, и каждому будет соответствовать шестизначный цифровой HTML код. У каждой из трех колонок своя собственная задача по воздействию на основной цвет –

Hue variation – изменение оттенка;

Saturation variation – изменение насыщенности;

Tint shade variation – придание цвета измененным оттенкам.

Чуть ниже вы найдете цветовые схемы на тему вашего основного аж в шести вариантах:

Возможные цветовые варианты

Monochromatic – однокрасочный;

Analogous – цвета, аналогичные основному;

Triaclic и Tetraclic – здесь мне не помог ни один переводчик, наверное, что-то очень важное;

Complimentary – первоначальный;

Split complimentary – дополнительные к первоначальному.

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

Однажды мне попался в интернете очень удобный и функциональный шаблон Вордпресс абсолютно безобразного серо-похоронного цвета. Все, что от меня требовалось – изменить его до неузнаваемости. Но вот что удивило: вместо видимых глазу двух грязно-скучно непрезентабельных цветов – серого и черного, там было больше десятка оттенков тех же серого и черного. И тогда стало понятно: используй разработчик всего два основных цвета в «первозданном» виде – шаблон, наверняка, выглядел бы еще хуже.

Вот, пожалуй, и все, что может понадобиться для работы с цветом начинающему веб-мастеру: определитель по HTML коду, определитель по цвету, и сервис по подбору родственных оттенков, чтобы, глядя на ваш сайт, посетитель неизменно думал: Да, у этого админа есть вкус!


Карта сайта


Информационный сайт Webavtocat.ru