Веб палитра: «Безопасные» или Web Safe цвета для веб-дизайна

Панель «Цвет» в Animate

Цветовые модели используются для описания отображаемых в цифровой графике цветов, с которыми можно работать. Каждая цветовая модель, такая как RGB, HSB или CMYK, представляет отдельный метод описания и классификации цвета. В цветовых моделях используются числовые значения для представления видимых цветов спектра. Цветовое пространство является вариантом цветовой модели и характеризуется определенным охватом (диапазоном) цветов. Например, в цветовой модели RGB есть ряд цветовых пространств: Adobe® RGB, sRGB и Apple® RGB. В каждом из этих цветовых пространств цвет определяется с использованием одних и тех же трех осей (R, G и B), но предусмотренные в них цветовые охваты разные.

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

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

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

Adobe Animate позволяет применять, создавать и модифицировать цвета с помощью цветовых моделей RGB или HSB. С помощью палитры по умолчанию или созданной пользователем палитры можно выбирать цвета, которые применяются к обводке или заливке создаваемого или уже созданного объекта.

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

• Применить сплошной тон, градиент или растровое изображение к заливке фигуры. Чтобы применить растровую заливку к фигуре, необходимо импортировать растровое изображение в текущий файл. Выбрать любой сплошной тон, градиент, стиль и толщину обводки.

• Создать контур фигуры без заливки, используя значение параметра заливки «Нет цвета».

• Создать фигуру с заливкой без контура, используя значение параметра обводки «Нет цвета».

• Применить сплошной тон заливки к тексту.

С помощью панели «Цвет» можно создавать и редактировать сплошные тона и заливки градиентом в режимах RGB и HSB.

Для получения доступа к палитре цветов системы выберите значок палитры цветов  в элементе управления «Цвет обводки» или «Цвет заливки» на панели «Цвет», панели «Инструменты» или в инспекторе свойств фигуры.

Панель «Цвета» позволяет модифицировать цветовую палитру FLA, а также цвет обводки и заливки, включая следующие действия.

• Импорт, экспорт, удаление или другие изменения цветовой палитры для FLA-файла с помощью панели «Образцы».

• выбирать цвета в шестнадцатеричном формате.

• создавать многоцветные градиенты.

• Использовать градиенты, чтобы сформировать широкий диапазон эффектов, например эффект глубины двумерного объекта.

Панель «Цвет» содержит следующие элементы управления:

Цвет обводки

Изменяет цвет обводки или границы графического объекта.

Цвет заливки

Изменяет цвет заливки. Заливка — это область цвета, который заполняет фигуру.

Меню «Тип цвета»

Изменяет стиль заливки:

Не задано

Удаляет заливку.

Чистый цвет

Обеспечивает сплошной единый цвет заливки.

Линейный градиент

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

Радиальный градиент

Создает градиент, который меняется от центральной фокальной точки в круговом контуре к краям.

Растровая заливка

Заполняет выбранную область заливки мозаикой из растрового изображения, которое можно выбрать. Если выбрать «Растровое изображение», диалоговое окно позволит выбрать растровое изображение на локальном компьютере и добавить его в библиотеку. Можно применить растровое изображение в качестве заливки; внешний вид похож на мозаику, в которой изображение повторяется внутри фигуры.

HSB

Позволяет изменить цветовой тон, насыщенность и яркость цвета заливки.

RGB

Позволяет изменить плотность красного, зеленого и синего (RGB) цветов в заливке.

Альфа-канал

Устанавливает прозрачность для сплошной заливки или устанавливает текущий выбранный ползунок для заливки градиентом. Значение альфа-канала, равное 0 %, задает невидимую (прозрачную) заливку. Значение альфа-канала, равное 100 %, задает непрозрачную заливку.

Текущий образец цвета

Отображает текущий выбранный цвет. Если в меню «Тип заливки» выбрать тип заливки градиентом (линейный или радиальный), то текущий образец цвета отображает переходы цвета внутри создаваемого градиента.

Системная палитра цветов

Позволяет визуально выбрать цвет. Щелкните системную палитру цветов и перемещайте указатель-перекрестие до тех пор, пока не найдется необходимый цвет.

Шестнадцатеричное значение

Отображает шестнадцатеричное значение текущего цвета. Чтобы изменить цвет с помощью шестнадцатеричного значения, введите новое значение. Шестнадцатеричные значения цвета — это шестизначные буквенно-цифровые сочетания, которые представляют цвет.

Нажим

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

Расширить цвет

Применяет указанные цвета до конца градиента (по умолчанию).

Отразить цвет

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

Повторить цвет

Повторяет градиент от начала градиента к концу до тех пор, пока выбранная фигура не заполнится.

 Режимы переполнения поддерживаются только в Adobe Flash Player 8 и более поздней версии.

Линейный RGB

Создает SVG-совместимый (SVG — формат масштабируемой векторной графики) линейный или радиальный градиент.

С помощью образцов можно без труда повторно использовать и обновлять цвета во всем документе. Теперь можно создавать образцы с тегами, выбирая цвет из своей коллекции образцов. Когда вы создаете образец с тегами и применяете его к фигурам и контурам в содержимом Animate, то при изменении цвета в образце с тегами автоматически обновится все содержимое, для которого этот образец используется.  

1. Выберите пункт Окно > Цвет.

2. На вкладке Образцы панели Цвета выберите цвет, который требуется преобразовать в образец с тегами, затем нажмите кнопку Преобразовать в образец с тегами в нижней части панели.

3. В диалоговом окне Определение цвета с тегами задайте следующие параметры:

   • Имя нового образца
   • Тип образцы: сплошной цвет, линейный градиент или радиальный градиент
   • Цвет в виде значения HSB (цветовой тон, насыщенность и яркость) или RGB (красный, зеленый и синий)
   Диалоговое окно «Определение цвета с тегами»

   Новый образец с тегами отображается на вкладках Цвета и Образцы панели Цвета и на панели Инструменты.

   Вновь созданный образец с тегами на панелях «Цвета», «Образцы» и «Инструменты»

4. Когда вы открываете панель «Цвет» после выбора объекта, который использует образец с тегами, отображаются параметры для редактирования свойств цвета. Если вы вносите изменения в свойства цвета, они автоматически отражаются во всех элементах на рабочей области, которые используют образец с тегами.

5. Дважды щелкните образец или выделите его и нажмите кнопку Изменить, чтобы открыть диалоговое окно Определение цвета с тегами и внести изменения в цвет образца.

6. Чтобы отвязать фигуру, использующую образец, от цвета образца, выберите ее, а затем нажмите кнопку Отменить связь. Для фигуры можно выбрать новый цвет в палитре цветов.
   

   Параметр «Отменить связь» Выбор другого цвета в палитре цветов для фигуры

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

1. В окне «Свойства» щелкните панель «Цвет».

2. Выберите необходимый цвет обводки и цвет заливки.

3. Выберите «Добавить в образцы» и щелкните панель «Образцы».

Как добавить цвет на снимки в Animate

Посмотрите видео, чтобы узнать, как создавать и использовать цвета во внешних приложениях, таких как Adobe Capture CC, и совместно использовать цвета посредством библиотек CC.

Каждый файл Animate содержит свою собственную цветовую палитру, хранимую в документе Animate. Animate отображает палитру файла в виде цветовых образцов в элементах «Цвет заливки» и «Цвет обводки» и на панели «Образцы». Палитра цветов по умолчанию — это палитра, состоящая из 216 безопасных цветов Web. Для добавления цветов в текущую цветовую палитру используйте панель «Цвет». Также возможен импорт и экспорт как сплошной, так и градиентной цветовой палитры между файлами Animate, а также между Animate и другими приложениями.

Палитра по умолчанию и палитра веб-совместимых цветов

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

• Чтобы загрузить или сохранить палитру по умолчанию, на панели «Образцы» выберите в меню в правом верхнем углу одну из следующих команд.

  Загрузить цвета по умолчанию:

  замещает текущую палитру палитрой по умолчанию.

  Сохранить как значение по умолчанию:

  сохраняет текущую палитру цветов в качестве палитры по умолчанию. При создании новых файлов используется новая палитра по умолчанию.

• Чтобы сохранить палитру из 216 веб-совместимых цветов, на панели «Образцы» в меню в верхнем правом углу выберите «Веб 216».

1. На панели «Образцы» выберите в меню в правом верхнем углу «Сортировать по цвету».

Организация и повторное использование цветов

На панели «Образцы» предусмотрена организация цветов в иерархическую структуру при помощи папок и цветовых палитр.

Создание папки

По умолчанию все цвета располагаются в папке «Образцы по умолчанию». Существующие цвета можно перемещать между папками на панели «Образцы». Для создания новой папки выполните следующие действия.

1. В Animate выберите «Окно» > «Образцы»

2. На панели «Образцы» нажмите кнопку .

3. Введите описательное имя для папки цветовых образцов.

Кроме того, папку можно создать, выбрав какую-либо папку, цветовую палитру или образец и щелкнув пункт «Дублировать в виде папки» из контекстного меню.

Создание цветовой палитры (группы образцов)

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

1. В Animate выберите «Окно» > «Образцы».

2. На панели «Образцы» выберите любую папку и нажмите кнопку для создания пустой палитры.

3. В эту цветовую палитру можно перетащить существующие образцы или добавить новые с помощью кнопки .

Кроме того, цветовую палитру можно создать, выбрав какую-либо папку, цветовую палитру или образец и щелкнув пункт «Дублировать в виде палитры» из контекстного меню.

Создание или добавление цветов в цветовую палитру

Для цветовой палитры можно создать новые образцы или добавить существующие. Для создания образца выполните следующие действия.

1. В Animate выберите «Окно» > «Образцы».

2. На панели «Образцы» выберите любую цветовую палитру в одной из папок и нажмите кнопку для создания цветового образца. Новый образец будет соответствовать цвету заливки, выбранному на данный момент на панели «Цвет». Также можно выбрать существующий образец и нажать кнопку для дублирования этого образца внутри данной палитры.

Кроме того, образец можно создать, выбрав какую-либо папку, цветовую палитру или образец и щелкнув пункт Дублировать в виде образца из контекстного меню.

1. На панели «Образцы» выберите в меню в правом верхнем углу одну из следующих команд:

   • Чтобы добавить импортируемые цвета в текущую палитру, выберите «Добавить цвета».

   • Чтобы заменить текущую палитру импортируемыми цветами, выберите «Заменить цвета».

2. Перейдите к нужному файлу, выберите его и нажмите ОК.

1. На панели «Образцы» выберите в меню в правом верхнем углу «Сохранить цвета» и введите имя цветовой палитры.

2. Для параметра «Сохранить как» (Windows) или «Format» (Macintosh) выберите значение «Палитра Animate» или «Таблица цветов». Нажмите кнопку «Сохранить».

С помощью панели «Цвет» можно создать любой цвет. Если в рабочей области выбран объект, то изменения цвета, сделанные на панели «Цвет», будут применены к выделению. Можно выбрать цвета в режимах RGB или HSB либо расширить панель и использовать шестнадцатеричный режим. Можно также указать альфа-значение, чтобы определить степень прозрачности цвета. Кроме того, можно выбрать цвет в существующей палитре цветов.

Панель «Цвет» можно развернуть, так что на ней будут отображаться большее цветовое пространство на месте цветовой шкалы, отдельный образец цвета, показывающий текущий и предыдущие цвета, и ползунок «Яркость», позволяющий модифицировать яркость цвета во всех цветовых режимах.

1. Чтобы применить цвет к существующей иллюстрации, выберите объект в рабочей области и выберите пункт «Окно» > «Цвет».

2. Щелкните значок «Обводка» или «Заливка», чтобы указать, какой атрибут необходимо модифицировать.

    Щелкните значок, а не элемент цвета, иначе откроется палитра цветов.
   

3. Если на шаге 3 был выбран значок «Заливка», проверьте, что в меню «Тип» выбрано значение «Сплошная».

4. Если в рабочей области выбран объект, то изменения цвета, сделанные на панели «Цвет», будут применены к выделению. Выполните одно из следующих действий.

   • Чтобы выбрать цвет, щелкните мышью цветовое пространство на панели «Цвет». Чтобы настроить яркость цветов, перетащите ползунок «Яркость».

      Чтобы создать цвет, отличный от черного или белого, убедитесь, что ползунок «Яркость» не установлен в какое-либо из крайних положений.

   • Введите значения в поля значений цветов: значения красного, зеленого и синего канала для отображения RGB, значения цветового тона, насыщенности и яркости для отображения HSB либо шестнадцатеричные значения для шестнадцатеричного отображения. Введите значение альфа-канала, чтобы указать степень прозрачности: от 0 для полной прозрачности до 100 для полной непрозрачности.

   • Для возвращения параметров цвета по умолчанию (черная обводка и белая заливка) нажмите на кнопку «Черно-белый» .

   • Чтобы поменять местами цвета обводки и заливки, нажмите кнопку «Поменять местами цвета» .

   • Чтобы не применять цвет к обводке или заливке, нажмите кнопку «Нет цвета» .

      Невозможно применить настройку заливки или обводки «Нет цвета» к существующему объекту. Вместо этого выберите существующую обводку или заливку и удалите ее.

   • Нажмите элемент «Цвет обводки» или «Цвет заливки» и выберите цвет.

5. Чтобы добавить новый цвет к списку образцов цвета для текущего документа, выберите в меню в правом верхнем углу «Добавить образец».

Дублирование цветов в палитре, удаление отдельных цветов и очистка всех цветов в палитре.

• Чтобы дублировать или удалить цвет, выберите пункт «Окно» > «Образцы», щелкните дублируемый или удаляемый цвет и в меню панели выберите пункт «Дублировать образец» или «Удалить образец». При дублировании образца появляется символ заливки. Щелкните мышью пустую область панели «Образцы» символом заливки, чтобы сделать копию выбранного цвета.

• Чтобы удалить все цвета на цветовой палитре, на панели «Образцы» выберите «Удалить цвета» в меню панели. Все цвета, кроме черного и белого, будут удалены из палитры.

12. Палитры

Палитра это набор определённых цветов. Палитры в GIMP используются в основном в двух случаях:

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

• Они образуют цветовые карты индексированных изображений. Индексированное изображение может содержать максимум 256 различных цветов. В GIMP цветовая карта индексированного изображения называется «индексированная палитра».

Фактически ни одна из этих функций не используется интенсивно при работе с GIMP: можно делать довольно сложные вещи вообще без операций с палитрами. Однако опытный пользователь должен понимать что они из себя представляют, даже и менее опытный пользователь в определённых ситуациях должен подумать об их использовании, например, при работе с файлами формата GIF.

Рисунок 7.29. Диалог палитр

Во время инсталяции GIMP происходит установка нескольких дюжин предопределённых палитр, и вы также можете создать новые. Некоторые из предопределённых палитр полезны, например, палитра «Web», содержащая набор цветов, рассматриваемых как «безопасные для web». Большинство палитр выглядят более или менее причудливо. Вы можете получить доступ ко всем имеющимся палитрам с помощью Диалога палитр. Это также отправная точка для создания новой палитры.

Рисунок 7.30. Редактор палитры

Двойной щелчок по палитре в диалоге палитр вызывает Редактор палитры, отображающий цвета из палитры, по которой вы щёлкнули. Вы можете использовать эту палитру для рисования: щелчок по цвету устанавливает цвет переднего плана таким цветом, как показано в области цвета панели инструментов. Удерживание клавиши Ctrl во время щелчка устанавливает цвет фона такого цвета, по которому вы щёлкнули.

Вы также можете использовать (что следует из названия) редактор палитры для изменения цветов в созданной вами палитре. Вы не можете изменить установленные вместе с GIMPпалитры; однако вы можете дублировать их и затем редактировать копии.

Когда вы создаёте палитры с помощью редактора палитр, как только вы выходите из GIMP они автоматически сохраняются в папку palettes, в вашей персональной папке GIMP. Любые файлы палитр в этой папке, или в системной palettes, созданные во время установки GIMP, автоматически загружаются и отображаются в диалоге палитр при следующем запуске GIMP. Вы также можете с помощью страницы Каталогов палитр диалога настроек добавить другие папки в поисковый путь палитр.

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

12.1. Цветовая карта

GIMP запутывает использованием двух типов палитр. Более приметный тип отображается в диалоге палитр: существующие независимо ни от какого изображения палитры. Второй тип, Индексированные палитры, формирует цветовые карты индексированных изображений. Каждое индексированное изображение имеет свою собственную палитру, определяющую набор доступных в изображении цветов: максимальное количество доступных цветов в индексированной палитре равно 256. Эти палитры называются «индексированными», поскольку каждый цвет имеет свой порядковый номер. (В действительности, цвета в обычной палитре также пронумерованы, но нумерация не несёт никакого функционального смысла)

Рисунок 7.31. Диалог цветовой карты

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

Вы можете создать обычную палитру из цветов любого изображения. Для этого выберите «Импортировать палитру» из всплывающего меню в диалоге палитр, вызываемого щелчком правой кнопкой мыши: в этом всплывающем меню содержится несколько параметров, включая параметр импорта палитры из изображения. (Вы также можете импортировать любой из градиентов GIMP как палитру.) Эта возможность становится важной, когда вы хотите создать набор индексированных изображений, которые используют одинаковый набор цветов.

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

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

Рисунок 7.32. Диалог цветовой карты (1) и палитр (2)

Студия дизайна и web-разработки Palitra

Студия дизайна и web-разработки

(063) 672-03-90

(066) 450-03-49

Акции и предложения

• Landing Page

  При заказе лендинг пейдж HTML5-баннер 300 х 250 для контекстно-медийной рекламы в подарок! Раскрутка Вашего сайта станет намного эффективнее с ярким анимированным баннером вместо обычного текста.

• Создание Интернет-магазина

  При заказе услуги поддержка и сопровождение целый месяц — бесплатно! Первый месяц работы для интернет-магазина может показаться мукой для новичков. Как добавить товар? Как создать новую акцию? Именно поэтому мы готовы помочь Вам со всем разобраться!

• Стильная полиграфия

  Летняя акция! Скидка на полиграфию -15%!

О нас

Нужен официальный сайт в Интернете? Нравится яркий запоминающийся дизайн? Или у Вас уже есть свой сайт, но Вы желаете его оптимизировать?

Добро пожаловать и давайте знакомится! Web-студия «Palitra» занимается разработкой новых, а также модернизацией существующих сайтов. Нужен лендинг-пейдж, корпоративный сайт, Интернет-магазин (узнать цены), сайт-каталог или новостной портал — оставьте заявку, и мы свяжемся с Вами для обсуждения деталей и предоставления подробной информации.

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

Web-студия «Palitra» имеет большой опыт создания как полиграфической рекламной продукции (флаеры, листовки, лайтбоксы цена), так и Интренет-рекламы (Интернет-баннеры html5, gif-баннеры, баннеры для рекламы в соцсетях и многое другое).

Принципы нашей работы

Уникальный Дизайн

Создание неповторимого запоминающегося фирменного стиля.

Валидный Код

Наши сайты оптимизированы для продвижения в поисковых системах.

Адаптивная Верстка

Наши разработки идеально выглядят на телефоне, планшете и компьютере.

Современные Технологии

Мы учитываем тренды в web-разработке и всегда идем в ногу со временем.

Клиенто

ориентированность

Работа с нами принесет Вам наилучший результат.

Сопровождение

Специальные условия обслуживания и бесплатная консультация.

Анализ Стратегия Реализация

Аналитический подход позволяет создать оптимальную структуру, а тонкий художественный вкус помогает самым красивым образом реализовать поставленные задачи. Мы следуем принципу — «Думай, а затем делай!»

20

Довольных клиентов

700

PSD-макетов

5 млн

Строк кода

∞

Чашек кофе

Наши услуги

Разработка сайтов

Создание современных сайтов, модернизация и продвижение

Интернет магазин

Разработка и наполнение магазинов и каталогов

Дизайн и Брендинг

Разработка фирменного стиля, полиграфической продукции и интернет-баннеров

Интернет маркетинг

Создание, анализ и оптимизация рекламы в Интернете

Портфолио

Мы не только разрабатываем красивые высокотехнологичные сайты и делаем хороший дизайн,

мы развиваем и поддерживаем Ваш бизнес

Stroy Service

Разработка корпоративного сайта предприятия, специализирующегося на ремонте помещений

Подробнее

Тудым-Сюдым

Разработка логотипа для кальянного кейтеринга

Подробнее

Family

Разработка полиграфической продукции для семейного ресторана

Подробнее

Вишневе Мiстечко

Разработка полиграфических материалов, html5 и gif баннеров для медийной рекламы

Подробнее

Salone di Arte

Брендинг. Сайт-визитка ресторана итальянской кухни

Подробнее

ProMICE

Информационный сайт для компании по профессиональной организации мероприятий

Подробнее

StarEng

Разработка рекламных материалов для сайта английских курсов

Подробнее

Irena Buccini

Интернет-магазин дизайнерской одежды

Смотреть сайт

OK Wine

Создание рекламных постеров для виномаркета

Подробнее

Посмотреть больше

Нам доверяют

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

Мы составили список из 19 удобных генераторов цветовых палитр (все бесплатно), которые помогут вам создать идеальную цветовую схему для вашего веб-сайта.

19 генераторов цветовых палитр, упрощающих веб-дизайн

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

1. Охладители

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

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

2. Поддон

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

Одна из самых полезных функций Paletton – живые образцы создаваемых вами цветовых схем. Одним щелчком мыши инструмент может открыть образец дизайна веб-сайта на основе вашей палитры, дополненный иллюстрациями и анимацией. Вы даже можете проверить, как каждая цветовая схема будет выглядеть для зрителей с различными типами дальтонизма. После того, как вы закончите настройку, вы можете экспортировать свою палитру в несколько различных форматов, включая код CSS и образец цвета PNG.

3. Adobe Color CC

Adobe Color CC (ранее Adobe Kuler) дает вам возможность начать с нуля, загрузить изображение для вдохновения или выбрать цветовую палитру из сообщества Adobe CC. Когда у вас есть начальная точка, вы можете либо применить алгоритмические правила к своей палитре, либо внести изменения вручную. Если вы используете изображение для вдохновения, у вас есть несколько вариантов эффектов для настройки цветовой схемы.

Плата за возможность настройки Adobe Color CC — это его кривая обучения. Интерфейс относительно интуитивно понятен, но для его освоения потребуется немного больше времени, чем для некоторых других, более простых генераторов цветовых палитр.

4. Колоротате

Если вы чувствуете потребность в трех измерениях, не смотрите дальше: ColoRotate — это то, что вам нужно. Этот продвинутый инструмент позволяет создавать палитры на трехмерном цветовом круге. Вы можете начать с нуля, загрузить изображение или использовать палитру из сообщества для вдохновения.

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

5. Цветная сфера Mudcube

Цветовая сфера Mudcube предоставляет десять различных вариантов автоматического создания цветовой палитры, от нейтральных до дополнительных и конфликтующих цветов. Просто выберите базовый цвет, выберите правило генерации и настраивайте, пока не будете довольны. Как и Paletton, Mudcube позволяет вам увидеть ваши цветовые схемы с точки зрения дальтоника. Несмотря на некоторую пугающую терминологию, пользовательский интерфейс довольно прост в использовании.

Когда вы будете довольны своей цветовой палитрой, сохраните ее как файл Adobe Illustrator или Photoshop или сохраните уникальный URL-адрес цветовой палитры, чтобы вернуться к нему позже.

6. Цвет

ColRD — это интуитивно понятный генератор цветовых палитр с рядом параметров. Одна из его лучших функций – сетка из 140 похожих цветов, отображаемая рядом с тем, над которым вы сейчас работаете, что ограничивает необходимость настраивать несколько панелей управления, пытаясь найти идеальную палитру.

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

7. ColorHexa

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

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

8. COLORlovers

Немного отличаясь от других инструментов в этом списке, COLORlovers — это, прежде всего, веб-сайт сообщества, где приоритетом является предоставление вам возможности поделиться своей цветовой схемой или черпать вдохновение из библиотеки. Их инструмент работает лучше всего, если у вас уже есть хорошее представление о цветовой палитре, которую вы хотите создать, и вы просто хотите увидеть свои цвета рядом. В нем нет предустановленных параметров для управления генерацией цвета, но он предлагает 12 похожих цветов рядом с тем, над которым вы сейчас работаете.

На веб-сайте COLORlovers также есть более продвинутый генератор цветовых палитр под названием COPASO (см. ниже).

9.

КОПАСО

COPASO — это более продвинутое предложение COLORlovers. Он предоставляет гораздо больше возможностей для создания вашей цветовой палитры в виде общих предустановок, таких как дополнительные, триадные и тетрадные цвета. Однако, хотя COPASO может быть более продвинутым, чем базовый инструмент, он все же не идет ни в какое сравнение с некоторыми из еще более продвинутых доступных опций. Более того, пользовательский интерфейс сложнее, чем можно было бы ожидать от довольно простого инструмента.

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

10. Цветная точка

Уникальная особенность

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

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

11. Цветовой код

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

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

12. Поддон

Еще один инструмент для создания минимальной цветовой палитры. Пользовательский интерфейс Palettable напоминает Colordot, хотя работает по-другому. Palettable предлагает варианты цветов, которые вам могут понравиться, не понравиться или настроить с помощью цветового блока.

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

13. Палитра материалов

Палитра материалов

от UpLabs вдохновлена ​​Google Material Design. Этот простой инструмент предлагает вам выбрать два цвета из 19 вариантов. Затем он создает палитру из восьми цветов по вашему выбору, включая два выбранных вами цвета или их вариации. Несмотря на то, что других параметров настройки нет, Material Palette все же удается создавать привлекательные цветовые схемы.

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

14. ФОТОКОПА

PHOTOCOPA – это усовершенствованный генератор цветовых палитр на основе изображений, также созданный хорошими людьми из COLORlovers. После выбора базового изображения (загрузите свое собственное или выберите из огромной галереи) вам будет предложено 48 вариантов цвета. Вы также получаете шесть различных цветовых палитр на выбор с такими эффектами, как яркий, приглушенный, аналогичный и случайный.

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

15. Colorfavs

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

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

16. Живописный

Мы все знаем MailChimp из-за его популярного инструмента автоответчика, но одним из менее известных его инструментов является Pictaculous. Еще один генератор изображений Pictaculous создает палитру из пяти цветов после загрузки изображения. Его самая изящная особенность заключается в том, что он также получает предложения по палитре от сообществ Adobe Color CC (перечисленных как Kuler) и COLORLovers — по пять от каждого.

Хотя в Pictaculous отсутствуют параметры настройки, его удобное сочетание предложений от Adobe и COLOURLovers делает его достойным внимания. В качестве дополнительного бонуса вы можете экспортировать палитры в файл Adobe.

17. Поддон

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

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

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

18. Смеситель цветов

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

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

19. Сплошные цвета

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

Вы можете начать со своего собственного набора цветов или выбрать случайный из COLORlovers. Затем выберите цвет наложения и отрегулируйте интенсивность. Этот инструмент предоставляет вам связную цветовую схему, но не позволяет точно настраивать отдельные цвета.

Заключение

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

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

Один из наших личных фаворитов — Coolors, фантастический инструмент, который сочетает в себе множество функций и очень удобный интерфейс. Если вы ищете что-то еще более продвинутое, то Paletton с его значительными возможностями настройки и множеством примеров – еще один отличный выбор.

Более простой вариант, Colourcode имеет очень простой интерфейс с достаточным количеством параметров настройки для создания красивой палитры. Для палитр, вдохновленных изображениями, мы бы выбрали PHOTOCOPA; он интуитивно понятен и предлагает отличные варианты палитры.

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

Как вы выбираете цветовые схемы для своих проектов? Дайте нам знать в разделе комментариев ниже, и не забудьте подписаться, чтобы следить за разговором!

Миниатюра статьи отeatcute/shutterstock. com

10 полезных советов по выбору цветовой палитры для веб-сайта

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

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

Веб-дизайнеры могут использовать так много «правил», чтобы максимально использовать свои таланты, престиж и опыт веб-дизайнеров. Теперь пришло время изучить и понять важность цветовых палитр для дизайна веб-сайта и некоторые рекомендации, которые вы можете использовать, чтобы сделать свой веб-сайт лучшим. Итак, давайте узнаем в этой статье.

Создайте веб-сайт Magento с помощью Magezon Page Builder

Содержание

• Что такое цветовая палитра?
• Почему цветовая палитра веб-дизайна важна?
• 10 полезных советов по выбору цветовой палитры для веб-сайта
• Подведение итогов

Что такое цветовая палитра?

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

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

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

1. Представьте свой визуальный брендинг

Ваш веб-сайт — это онлайн-дом вашего бизнеса. Он должен точно отражать ваш бренд и быть достаточно запоминающимся, чтобы люди вернулись после первого посещения.

Согласно исследованию Нила Пателя, цвет повышает узнаваемость бренда на 80%. Вот почему ваш критический выбор цветовой схемы становится вашей визуальной идентификацией. Он определяет, как ваш бренд будет звучать в мозгах ваших посетителей и потенциальных потребителей, и этот процесс называется узнаваемостью бренда. Поскольку разные персонажи пользователей могут тяготеть к разным цветовым палитрам, эта визуальная идентичность служит средством общения между вашей целевой аудиторией и вами. Цветовая палитра для веб-сайта также служит визуальным представлением сообщения вашего бренда, поэтому они значительно влияют на взаимодействие с пользователем.

2. Произведите первое впечатление

Работая веб-дизайнерами, мы всегда думаем о том, как наши проекты повлияют на первоначальное впечатление посетителей о нашей работе, даже если мы не думаем об этом сознательно. Создание положительного первого впечатления — одна из важнейших целей цветовых схем веб-сайта. Исследование 2018 года показало, что 94% респондентов заявили, что на их первые впечатления от веб-сайта влияет его дизайн.

3. Воздействие на эмоции зрителя

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

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

10 полезных советов по выбору цветовой палитры для веб-сайта

1. Обратитесь к цветовому кругу

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

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

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

2. Понимание трех основных типов сочетаний цветов

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

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

Бок о бок – Аналоговые цвета

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

Противоположности притягиваются – дополнительные цвета

Дополнительные цвета расположены на противоположных сторонах цветового круга; как правило, один цвет является основным, а другой — вторичным. Например, оранжевый и синий являются основными дополнительными оттенками, за которыми следуют зеленый, красный, фиолетовый и желтый.

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

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

Равномерно расположенные — триадные цвета

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

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

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

3. Познакомьтесь с основами психологии цвета

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

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

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

4. Учитывайте свою общую демографию

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

Вы можете определить демографические данные своих клиентов и выбрать цветовую палитру для своего веб-сайта по:

• Возраст: Здесь не нужно слишком много описывать. Сосредоточьтесь на определении десятилетия или поколения, к которому принадлежит ваша аудитория в социальных сетях.
• Интересы: какие действия нравятся вашей целевой аудитории? Какие телесериалы они смотрят? С какими еще компаниями они работают?
• Трудности: какие боли испытывает ваша аудитория в социальных сетях?
• Стадия жизни: вашей аудиторией в социальных сетях могут быть студенты. Вы новый родитель? Родитель подростка? Пенсионеры?

• Пол: используйте цвета, которые нравятся женщинам, если ваша целевая аудитория в основном женщины. По данным Kissmetrics, согласно исследованию Джо Хэллока, три самых популярных оттенка, выбранных женщинами в качестве своих предпочтений, были синим, фиолетовым и зеленым. Итак, какие цвета лучше всего подходят мужчинам? Синий, зеленый, красный и черный – основные цвета. Оказывается, оба пола предпочитают синий, но между мужчинами и женщинами существует большой разрыв, когда дело доходит до фиолетового. Так что вы должны быть внимательны при выборе цветовой палитры для веб-сайта.

5. Сосредоточьтесь на согласованности

Любой веб-дизайнер должен следовать правилу, что последовательный дизайн важен. Цветовая палитра веб-сайта является еще одним важным фактором, влияющим на то, как веб-сайт будет выглядеть на ПК, ноутбуке и мобильном устройстве.

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

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

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

6. Сделайте его простым и отзывчивым

Сохранение цветовой палитры веб-сайта адаптивной и простой имеет два существенных преимущества.

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

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

7. Не выбирайте цветовую схему на основе ваших предубеждений

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

8. Решите, сколько цветов использовать

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

Хотя формулы для определения подходящего количества цвета для проекта не существует, существует разумное эмпирическое правило и теория цвета: рекомендация 60-30-10.

• Основной цвет: 60%
• Вторичный цвет: 30%
• Акцентный цвет: 10%

а цвет акцента должен покрывать 10%.

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

9. Используйте инструменты для помощи

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

10. Ознакомьтесь с конкурентами 

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

С другой стороны, если вы хотите выделиться из толпы, используйте для сайта другую цветовую палитру.

Подведение итогов

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

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

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

Следуйте за нами на Facebook , Twitter , Instagram и LinkedIn , чтобы быть в курсе последних новостей и информации о Magento и расширениях Magento.

Разработка доступной цветовой палитры для веб-дизайнеров

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

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

1. Понимание уровней соответствия ADA

Уровни доступности

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

Существует три основных уровня соответствия требованиям ADA — AAA, AA и A. Каждый уровень регулируется списком спецификаций, которым должны соответствовать дизайнеры и разработчики.

• Уровень AAA — это самый высокий и строгий уровень соответствия. Уровень AAA используется государственными веб-сайтами, веб-сайтами здравоохранения и организациями, получающими государственное финансирование.
• Уровень AA — это средний уровень соответствия, именно так мы создаем наши веб-сайты в Tower. Мы считаем, что уровень AA обеспечивает хороший баланс между удобством использования и свободой дизайна.
• Уровень А — это начальный уровень соответствия. Это может быть хорошим первым шагом для компаний с небольшим бюджетом, но ни в коем случае не должно быть конечной точкой.

Соответствие стандартам

Одним из наиболее сложных аспектов создания соответствующего веб-сайта является обеспечение полной доступности цветовой палитры. Согласно WCAG 2.0, для соответствия уровню AA требуется коэффициент контрастности не менее 4,5:1 для обычного текста (совместимость с AA) и 3:1 для текста размером более 18 пунктов и компонентов пользовательского интерфейса, таких как поля формы (совместимость с AA18).

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

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

2. Оцените свои потребности в доступной цветовой палитре

Работа с существующей цветовой палитрой

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

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

Недавно мы завершили проект редизайна веб-сайта, и в процессе этого мы изменили существующий бренд, чтобы сделать его доступным. Незначительные корректировки красных и черных тонов дали нам вдвое больше совместимых с AA и AAA комбинаций цветов фона и текста.

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

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

Создание новой доступной цветовой палитры

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

• Один или два основных цвета
• Яркий цвет призыва к действию
• Несколько нейтральных цветов

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

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

3. Найдите анализатор цветового контраста или диаграмму цветового контраста, которые вам нравятся

Если вы работаете над новым веб-сайтом или редизайном веб-сайта, вы потратите много времени на инструмент цветового контраста. Итак, потратьте немного времени и найдите тот, который работает для вас. Вот несколько рекомендаций!

• Контрастная сетка от EightShapes — это наш самый любимый элемент в Tower. Это позволяет вам исследовать не только один цвет, но и все ваши цвета в контексте друг с другом. Он также генерирует уникальную ссылку для каждой цветовой палитры, что позволяет легко делиться ею с клиентами, другими дизайнерами и разработчиками.
• Toolness — аналогичный инструмент, который делает недоступные сочетания цветов фона и текста серыми. Это может быть особенно полезно для визуализации и объяснения соблюдения рекомендаций тем, кто плохо знаком с рекомендациями. Поскольку несовместимых комбинаций не показано, они не будут отвлекать от полностью доступных опций.
• Цвета — мы любим этот инструмент за его чистое вдохновение и десятки ярких, захватывающих доступных цветовых палитр. Это может быть отличным местом для начала и вдохновения, если вы чувствуете себя подавленным.
• Color Safe — это еще один отличный вариант, так как он также учитывает конкретную гарнитуру и вес шрифта, который вы используете.

Как только вы найдете инструмент, который вам нравится, добавьте его в закладки, освойтесь с ним и используйте его рано и часто!

4. Настройка и повторение

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

Играйте с цветами в зависимости от контекста в программе дизайна. Если вы вносите незначительные изменения в существующую цветовую палитру, проверьте новые цвета вместе со старыми дополнительными. Заметна ли разница? Это проблема? Если вы начинаете использовать новую цветовую палитру, рассмотрите также приложения для печати. Цвета могут отлично выглядеть в Интернете, но ужасно на бумаге, и наоборот.

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

Stark — отличный анализатор цветового контраста, который работает прямо внутри вашего файла дизайна. Он также обладает уникальной способностью имитировать различные типы дальтонизма, от самых распространенных до очень редких. Это особенно важно при разработке инфографики и диаграмм, где различение цветов имеет решающее значение для понимания контента. Хотя цвета могут казаться вам совершенно разными, если они слишком похожи по яркости или оттенку, они могут быть неразличимы для человека с частичной или полной цветовой слепотой.

5. Вдохновляйтесь и творите

Не существует «правильного способа» создания доступной цветовой палитры. Красивые дизайны часто рождаются из-за ограничений, и каждый день создаются невероятные доступные дизайны. Мы внимательно следим за творческими решениями, которые используют доступность в качестве источника вдохновения, и регулярно делимся ими в нашем дизайнерском канале Slack.

Один из наших недавних фаворитов — Dunkin’, у которого возникла интересная проблема, связанная с редизайном их веб-сайта. У них была чрезвычайно узнаваемая цветовая схема, которая в значительной степени стала частью их бренда, но она обеспечивала очень ограниченные комбинации цветов фона и текста.

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