Пять бесплатных инструментов для выбора цветовой схемы сайта

http://www.techiemania.com/5-awesome-free-tools-to-help-you-choose-your-website-color-scheme.html
  • Перевод
Один из самых важных факторов при создании уникального и узнаваемого дизайна — цвет. Грамотный выбор цветовой схемы может определить успех или провал сайта. Когда посетитель бросает первый взгляд на веб-страницу, то выбранные вами цвета посылают ему мгновенное сообщение об этой странице. К счастью, существует много инструментов, которые помогут выбрать правильную цветовую схему. Вот пять лучших из них.

1. Kuler



Kuler от компании Adobe давно признан лучшим помощником профессионального веб-дизайнера. В отличие от конкурентов, здесь есть обширное коммьюнити и можно делиться созданными палитрами или брать чужие цветовые схемы и модифицировать под свои нужды. Для общения в сообществе нужно зарегистрироваться и получить Adobe ID. Цвета в Kuler представляются в различных форматах, включая RGB, CMYK, LAB и HSV.

2. Color Palette Generator



Вдохновение может возникнуть под влиянием самого неожиданного повода. Например, вы можете наткнуться на красивую фотографию с привлекательной цветовой гаммой. Этот генератор цветовой палитры создан как раз для обработки таких фотографий. Загружаете файлы в форматах JPG или PNG — и получаете подробную раскладку по ключевым цветам. Независимо от того, какую реакцию вы пытаетесь вызвать у ваших посетителей, генератор цветовой палитры поможет создать уникальный внешний вид для любого веб-сайта.

3. Contrast-A



Отдельные цвета никогда не висят в вакууме, и каждый оттенок воздействует на окружающие. Инструмент Contrast-A применяет сугубо технический подход к конфигурации палитры, предоставляя подробную информацию о соотношение канала яркости (Luminance Ratio) и отличиях в яркости и цвете. Это идеальный инструмент, если нужно создать минималистский сайт с небольшим количеством цветов, которые дополняют друг друга.

4. ColorZilla



Этот популярный плагин для Firefox позволяет прямо в браузере определить значения отдельных цветов и измерить разницу между ними. Есть «браузер цветовых схем» для выбора отдельных цветов из заранее подобранных наборов. Простой в использовании и чрезвычайно многофункциональный, плагин ColorZilla — словно швейцарский армейский нож среди расширений браузера для веб-дизайнеров и художников.

5. Colorotate



В отличие от большинства других генераторов цветовых схем типа «цветового колеса», Colorotate показывает палитру на трёхмерном конусе. Как и Kuler, пользователи могут сохранять и редактировать свои цветовые схемы, а также просматривать палитры, сделанные другими дизайнерами. Инструмент интегрирован с популярными дизайнерскими программами Adobe Fireworks и Photoshop.

____________

Когда речь идёт об эффективном веб-дизайне, то говорят об интуитивном пользовательском интерфейсе и макетах, однако цветовые схемы имеют такое же большое значение, а то и бóльшее. Перечисленные здесь инструменты должны направить вас в верном направлении, чтобы выбрать отличную цветовую палитру для сайта с первой попытки. В интернете можно найти и другие полезные инструменты, но именно с этих вы можете начать подбор идеального арсенала, который соответствует вашему персональному стилю. Удачи и счастливого дизайна!
Метки:
Поделиться публикацией
Похожие публикации
Комментарии 41
  • 0
    Как раз искал нечто подобное. Особенно поноавилась идея Color Palette Generator.
    • 0
      Согласен, Color Palette Generator интересная идея для подбора цветов. Также понравился Contrast-A из-за мгновенного отображения цвета текста и фона.
    • 0
      оно же и в кулере есть
  • +7
    на мой взгляд, лучше поступать проще:
    выбираем сайт который по производимым впечатлениям близок к тому что мы хотим (или, если это заказ, просим прислать список нравящихся сайтов), применяем его палитру, примерно соблюдая цвета и их соотношения, ну и в итоге думаем как еще улучшить, чтото подчеркнуть. Обычно то что получается и близко не похоже на оригинал.
    А впечатления от подобных сервисов остались не самые лучшие, вечно выходило совсем не то :)
  • +10
    colorschemedesigner.com
  • 0
    Color Palette Generator — реально круть. Информационная шапка сайта, которая восновном состоит из большого изображения, по-моему скромному мнению, как раз и должна задавать цветовые тона для всего шаблона.
  • +1
    Недавно заметил у Яндекса название цветов. Оказывается есть цвет «Медвежье ушко».
    • +1
      за эту фичу яндексу огромное спасибо, иногда в ТЗ встречаются цвета названия которых мне вообще ничего не говорят, а тут вбил в яндекс и показал заказчику, что бы уточнить то ли имел ввиду.
    • +1
      а мне больше нравится «цвет бедра испуганной нимфы».
      • 0
        Не испуганной, в смысле просто цвет бедра нимфы, и цвет взволнованной тоже есть, но яндекс по-моему о нем не знает, только испуганную видел.
  • +1
    Мешап хороший – www.colorapi.com/ Сделан наподобие Color Palette Generator, но фотки можно во фликре искать.
  • –1
    Спасибо за подборку, пригодится!
  • 0
    Отличные сервисы, но иногда их недостаточно. Я еще пользуюсь pictaculous (распознавание цветов на картинке) и copaso (создание цветовых палирт). А тут можно найти еще несколько полезных приблуд.

  • 0
    В Colorotate тоже можно получать цвета с фото — загрузить файл или искать в пикассе — через кнопку input/output images. Прикольно, что сейчас их панель для ФШ стоит $9, полтора года назад они начинали с $70 :) но пользоваться ей невозможно совершенно
  • 0
    Colorotate — мощь. Разобраться правда почти нереально было (для меня).
  • 0
    А как же colorlovers.com?
    • +2
      Прошу прощения. Конечно же colourlovers.com
      • 0
        Поддерживаю, но хочу добавить, что, совсем недавно пользуясь этим инструментом, подметил, что палитры, которые эффектно смотрятся в виде палитр, при натягивании на реальный сайт не всегда остаются такими же выигрышными.
        В этом плане очень понравилась приведенная ниже ссылка: webcolorizer.com/
      • 0
        Давно им пользуюсь. Оч нравится. А те что в списке почти все знаю но зачем если есть colourlovers =)
        Вот кстати что-то типа Color Palette Generator — 10k.aneventapart.com/Uploads/395/
  • 0
    В 99-ти случаях из 100 подбираю цветовую гамму на глаз. Но, все равно спасибо за подборку.
    • +1
      Вот я тоже всегда делаю это интуитивно. Никогда не понимал сакрального смысла этих сервисов… Для меня, подбор цветовой гаммы, это нечто большее чем просто довериться какому-нибудь «помошнику». Возможно конечно, что этот вопрос несколько глубже чем мне кажется, но на мой взгляд эти сервисы скорее нужны начинающим, нежели профессионалам.

      Возвращаясь к ассоциациям. Мне кажется немного странным, что почти любой человек может неплохо (объективно неплохо) подобрать цвет обоев, занавесок и обивки мебели для комнаты. А дизайнеры выдумывают себе какие-то сервисы, плагины, помошников… для таких вещей, которые, казалось бы, должны как орешки щелкать (попутно опираясь на навыки и контекст, а не скидывать это на бездушную автоматику)
      • 0
        Далеко не все люди доверяют своему чувству прекрасного. Я, например, на опыте своем убеждался, что то, что мне кажется красивым — кажется лишь одному мне :)
        А так как я делаю сайты для людей, то лучше уж доверяться вот такому автоматизированному советчику.
        • +1
          Ооо… а это хорошая тема для разговора :) Если мы сейчас говорим о людях творческих, и в частности о дизайнерах, то грош цена тому из них, кто не доверяет своему чувству прекрасного. На мой взгляд, профессионализм дизайнера как раз и определяется умением сделать всё так, чтобы угодить большинству.

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

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

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

          Следующие строки вообще повергают меня в ужас:
          Инструмент Contrast-A применяет сугубо технический подход к конфигурации палитры, предоставляя подробную информацию о соотношение канала яркости (Luminance Ratio) и отличиях в яркости и цвете.
          Это вообще для кого и зачем? Возводить подбор цветов, до уровня математических формул, это по моему сравнимо с тем, как добавлять определенное количество соли на каждый грамм крупы, при готовке еды. Есть желающие так попитаться? А найдутся ли девушки, которые захотят так готовить? :))) Ответы на эти вопросы почему-то кажутся достаточно очевидными…

          Ох… что-то меня понесло))) так, глядишь, и до целой статьи недалеко. Да наверно и наскучил я всем порядком :)
          • 0
            >грош цена тому из них, кто не доверяет своему чувству прекрасного. На мой взгляд, профессионализм дизайнера как раз и определяется умением сделать всё так, чтобы угодить большинству

            Вы тут себе противоречите. Если задача дизайнера сделать так, чтоб угодить большинству, то не всё ли равно какой инструментарий он будет использовать?
            Или, быть может, вы предложите выбросить фотошоп, и использовать «живые акриловые краски»?

            В одном соглашусь: если дизайнер доверяет только своему инструментарию, и бездумно клепает что-то, то творчества тут нет, и вряд ли такой дизайнер достигнет какого-либо профессионального успеха.
      • +1
        Согласен с вами. Более того, прочитав не одну [не один десяток] книг по теории цвета и цветовым схемам, точно так-же не пришёл ни к какому [сакральному] пониманию смысла формирования цветовой схемы. Была статья хорошая на хабре, что цвета обобщать надо (наложив поверх цветной слой в режиме soft-light). В этом есть что-то, но как мне кажется, мы просто пытаемся привести цвета к монохромной схеме.
        Изучив множество работ с дриббла, понял, что хорошая схема чаще всего и правда монохромная, возможно с одним цветом из ряда вон. Чёрный и белый только подходят везде, они вне схем.
        В обоях, что вы привели в пример, несколько иначе: варианты ограничены, более того, над ними уже поработал дизайнер. Плюс обои имеют естественные градиенты, фактуру и разномасштабные текстуры. Это намного легче, чем тыкать пальцем в небо и выбирать цвет из вещественного множества.
        Многие пишут, что цветовая схема несёт собой характер, настроение (как и шрифт). Но в этом случае лучше нейтральной чб схемы ничего быть не может,: посмотрим на www.lookatme.ru/ — контент задаёт цвет, а сам сайт не несёт никакой нагрузки.

        В любом случае, польза от этих сервисов очень и очень сомнительная: вгоняют в искусственные рамки, приманивая ложным предложением сделать гармоничную цветовую схему по всем правилам.
        • 0
          Да, пример с обоями был конечно очень поверхностный, но идея думаю в целом понятна :)
          В остальном, пожалуй, со всем согласен.
        • 0
          Градация чёрного и белого — это та же цветовая схема(палитра). Просто она наиболее простая, от того наиболее популярная.
    • 0
      Правильно, так и делайте.
      Потому что всё это, как помощник, а не как наставление.
      Цвет воспринимается не только как яркость, контрастность и цветовой оттенок, но и как результат влияния на него формы объекта и близлежащих объектов и их цветов.

      Почему зелёный текст на красном фоне смотрится очень плохо, а клубника на грядке просто замечательно? )
  • +1
    Мне больше нравится с этим играться — colorschemedesigner.com/

    Тем более что там «экспорт» удобный
  • +1
    Пробуйте этот http://colorscheme.ru/
    • 0
      Спасибо, очень понравилась!
  • 0
    Еще есть GoldSection. Подбирает палитру по заданнаму базовому цвету методом золотого сечения.
  • +1
    webcolorizer.com — удобный инструмент, если нужно поменять цвета уже готового шаблона.
    Генерирует *.html, *.css и даже картинки. Рекомендую.
  • 0
    www.pictaculous.com/ — Аналог представленного Color Palette Generator, только на выходе вы еще получите цветовую палитру для Adobe.
  • 0
    md5colors.com — идея обсуждалась на хабре
  • 0
    С одной стороны инструменты безумно нужные, т.к. постоянно хочется делать новые цветовые решения, но стоит описать и теорию цвета и возможные схемы подбора цветовых сочетаний. Полезно изначально осмыслить инструменты, которые помогут достичь большего. Успехов.
  • 0
    Всегда хотелось узнать, что дизайнеры потом делают со сгенерированными цветовыми схемами. В иллюстрации я еще как-то могу раскидать на тепло-холодно, для фона, для объекта. Но все это очень примерно и все равно потом сильно «дотачивается» в конкретной работе. А вот как это работает для сайтов для меня загадка.

    Вот, кстати, еще, только уже оффлайновый цветовой круг) Вдруг кому-нибудь пригодится
    Color Wheel


  • 0
    я всегда пользовалась кулером, но на самом деле иногда подобные «игрушки» просто сбивают с толку и начинаешь созданный образ переосмысливать и компоновать цвета так, как выдала программа
    но как помощники — да, несомненно отличные

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.