Быстрый подбор цветовой гаммы для сайта

Привет друзья! Сегодняшний пост будет совсем коротким. Случайно нашла в сети интересную забаву и просто не могу ею с вами не поделиться. Тем, кто хочет сделать свой уникальный дизайн для своего сайта или блога, она очень пригодится.

Самый простой способ, которым, наверное, хоть раз пользовались все новички — уникализация готового шаблона. Если нет ни опыта создания дизайна, ни денег на услуги профессионала, многие находят бесплатный шаблон, который в целом подходит по стилю и функционалу и начинают изменять его до неузнаваемости: рисуют логотип, меняют иконки, фон и основные цвета.

Результат будет зависеть от того, насколько крепко в человеке спит дизайнер. Иногда в итоге таких вот исправлений на свет появляется очередное «кислотное» чудо, от которого у пользователей слезятся глаза.

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

Как пользоваться этой штукой?
Выбираем в круге цвет, который понравился, жмем на него и получаем основные оттенки, которые можно использовать в дизайне. Если ни один из цветов в палитре вам не подходит, можно указать код любого оттенка в поле и нажать Update.

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

Это сочетание цветов называется комплиментарным, есть и другие, но это уже дебри теории цвета, и я не уверена, что смогу правильно ее объяснить :) Поэтому просто покажу вам еще один сервис по подбору цветов — colorschemedesigner.com Функционал его настолько удобен, что этим инструментом пользуются даже профессиональные дизайнеры.

colorsсhame

1. Выбираем тип сочетания
2. Устанавливаем основной цвет
3. Двигая этот ползунок, можно подобрать дополнительные цвета на свой вкус.

Переходим на вкладку Color List и вот вам готовая палитра.
палитра цветов для сайта

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

  • http://pasagir.ru Pasagir

    Отличный практический пост! Надеюсь это меня подтолкнет хоть немного порыться в дизайне своего блога…

    • Ольга

      Удачи :) будет интересно посмотреть на обновленный дизайн.

  • http://i-shipilov.ru Иван Шипилов

    Статья афигенная, спасибо!!

  • http://i-shipilov.ru Иван Шипилов

    хотя я раньше думал, что цвета нужно выбирать контрастные, а оказывается нет…

    • Ольга

      Иван, если выбирать противоположные секторы цветового круга, то цвета как раз и будут контрастные.

  • http://ideafox.ru Дмитрий

    Круто. Иногда смотрю на иностранные сайты и поражаюсь гаомоничности их цветового решения. Вроде все просто, а смотрится круто. Оказывается вон ОНО ЧТО :)

    • Ольга

      Что ты, там целая наука, оказывается))

  • http://myrassilka.ru Галина Нагорная

    Спасибо! Полезная для меня информация.
    Ольга, возможно у Вас есть урок, как поменять форму комментария в Вордпрессе — исчезают первые буквы и я постоянно добавляю смайлики перед каждой новой строчкой. Я понимаю, что где-то не вписали отступ, но я не сильна в HTML настолько, чтобы решить самой.
    Простите за то, что озаботила! БЛАГОдарю!

  • http://mir-domohozyaiki.ru Галина

    Ольга, спасибо! Меня моя цветовая гамма устраивает, но после того, как у меня стырили шаблон и растиражировали его на клоны, понимаю, что нужно что-то менять. А менять сам шаблон не хочу. Попробую с цветами поиграть. :)

    • Ольга

      Галина, как я поняла, у вас не просто шаблон скопировали, а весь сайт. Если после каждого такого воровства менять дизайн, с ума сойти можно))) Не переживайте, и если дизайн вас устраивает, оставьте все как есть.

    • http://xn----8sbaoda1bzanhz9b3d1b.xn--p1ai Тамарина И.

      Меня цветовая гамма моего сайта вполне устраивает, сейчас работаю над шапкой, ну и футер захвачу. А так вроде бы все окей. Сервис на заметку возьму, т.к. попутно приходится разные баннеры делать, их тоже как-то нужно в шаблон гармонично вписывать.
      Ольга, простите, может не совсем в тему, но!
      Буквально сегодня была в гостях у Галины и читала жуткие истории про баны, сворованный контент и шаблон. Кому это нужно все?? Заранее благодарю за ответ.

    • http://artabr.ru Артем

      Если позволите, Галина. У вас шаблон уж больно распространенный, вон у Фила такой же. Тут простая замена цветов не поможет, хотя если градиенты использовать…

      • http://mir-domohozyaiki.ru Галина

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

        Я говорила о том, что есть 24 клона с моим названием блога, моим логотипом, страницы, как у меня, даже моя аватарка в фавиконе, только статьи другие, и все эти клоны ссылками ведут на мой сайт. И выглядит все так, как-будто это я их наштамповала. При чем тут сайт Фила?!

  • http://fishkalife.ru/ Fil

    Не поспорить — удобно, даже такому ламеру в дизайне, как я.
    Сохранил…

  • http://ruskweb.ru/ Сергей

    Вот второй сервис особенно крутой) Я помню ты уже о нем где-то говорила, сразу в закладки его забил)

    • Ольга

      Сережа, а я еще и третий нашла, но по нему отдельную статью надо будет сделать)))

  • http://blog-artema.ru/ Артём

    Ольга, вы же себе делали самостоятельно дизайн?
    Скажите а как вообще это делается, я вот пытался хотя бы просто поменять цвет некоторых элементов, так оно выглядело как-то убого и оставил стандартные.

    • http://artabr.ru Артем

      Убого выглядел сам цвет или то что получилось?
      А вообще, файрбаг тебе в помощь… Находишь нужный селектор, смотришь какой цвет стоит и если не нравиться меняешь

      • http://blog-artema.ru/ Артём

        Убого выглядел цвет, так как в красивом дизайне цвет не однослойный в большинстве случаев.
        Код цвета немного меняется на каждом миллиметре =)

        • http://artabr.ru Артем

          Три раза прочитал пока понял о чем речь, ты (ничего что я на «ты»?) говоришь о градиентах, когда один цвет перетекает в другой?

          • http://blog-artema.ru/ Артём

            Да, да, именно =)
            Я забыл просто это написать, ведь не все думают как я =)
            Да ничего, мне 17 ;)

            • http://artabr.ru Артем

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

              background: #8F0E1A; /* Old browsers */
              background: -moz-linear-gradient(top, #E13B50 0%, #8F0E1A 100%); /* FF3.6+ */
              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E13B50), color-stop(100%,#8F0E1A)); /*Chrome,Safari4+ */
              background: -webkit-linear-gradient(top, #E13B50 0%,#8F0E1A 100%); /* Chrome10+,Safari5.1+ */
              background: -o-linear-gradient(top, #E13B50 0%,#8F0E1A 100%); /* Opera 11.10+ */
              background: -ms-linear-gradient(top, #E13B50 0%,#8F0E1A 100%); /* IE10+ */
              background: linear-gradient(top, #E13B50 0%,#8F0E1A 100%); /* W3C */

              Так много свойств, чтобы во всех браузерах отображалось.

              А вообще, советую тебе найти книгу Дэн Сидерхолм CSS3 для веб-дизайнеров. Сам по ней учился градиенты делать.

              • http://blog-artema.ru/ Артём

                Займусь на досуге, спасибо за наводку.

          • http://blog-artema.ru/ Артём

            У вас кстати дизайн тоже классный.
            Ничего, что я на вы, просто мы не в одной возрастной категории =)

            • http://artabr.ru Артем

              Ничего, можно на вы, хотя я еще молодой и красивый)))
              А дизайн сам пилил, да и до сих пор подпиливаю…

  • http://artabr.ru Артем

    Привет, Ольга! Отличный обзор, сам пользуюсь такими инструментами, а то у меня вечно проблемы с подбором цветов.
    Кстати, второй сервис есть на русском. Адрес тот же, только в зоне ru

    • Ольга

      Тот же домен в зоне ру не открывается, можешь кинуть ссылку на русскоязычный вариант сервиса?

      • http://artabr.ru Артем

        Извиняюсь, соврал маненько, домен не тот же. Вот ссылка http://colorscheme.ru/

        • Ольга

          Спасибо, на русском гораздо удобнее)))

          • http://artabr.ru Артем

            Всегда пожалуйста, а на русском действительно удобнее, вон сейчас нашел, что это сервис можно подстраивать под различное зрение, а у меня с этим не все в поряде

  • http://makoveckij.ru/ Никита

    Я вот тоже скачал шаблон для блога и переделал его до неузнаваемости.
    Кстати, есть один прекрасный сервис ColorZilla. Он помимо цветов умеет генерировать кроссбраузерные грдиенты! Недавно писал о нём. Рекомендую!

    • Ольга

      Никита, действительно полезная штука, спасибо!

  • http://blog-kuleshova.ru Татьяна

    Ох, какая интересная и полезная штука! Ольга, огромное спасибо!

  • http://blog-kuleshova.ru Татьяна

    Оля, а как называется эта забава? Где ее можно скачать?

    • Ольга

      Татьяна, это цветовой круг. Где скачать — честно не знаю, я скопировала исходный код с одного из блогов на английском))

  • http://surzis.ru Surzis

    ха) Крутая штука!

    Кстати подбор гаммы для сайта — одна из самых сложных вещей для меня.

    • Ольга

      А вы почаще смотрите демки «буржуйских» шаблонов. Лично меня это очень вдохновляет)))

  • http://zapiski-na-kolenkah.ru/ Автор Неизвестен

    Не могу не взять на заметку! Спасибо!

  • http://folkextreme.ru Соловьев Михаил

    Ольга, спасибо за рекомендации. В свое время очень не хватало такого сервиса, занес в закладочки на будущее

    • Ольга

      Пожалуйста, Михаил :)

  • http://look-software.ru/ Александр

    По поводу изменения шаблона до неузнаваемости Вы абсолютно правы. Сам также поступил со своим блогом. Первым делом поменял шаблон. А вот использовать такой подход по подбору цветов на сайте не пробовал. Большое Вам спасибо! Я обязательно опробую данные сервисы.