Разное

Рандом цветов онлайн: Онлайн генератор цветов HTML

24.12.2022

Содержание

Определить сочетания цветов онлайн — Мир графики

Рубрика: ДизайнАвтор: Администратор

Содержание

  1. Русские сервисы сочетания цветов
  2. Colorscheme
  3. In colour balance
  4. Colorup.tikkurila
  5. Color Adobe
  6. Генератор цветовых схем
  7. Англоязычные сайты по подбору цвета
  8. Random Material Generator
  9. Material Mixer
  10. Colorhunter
  11. Palette Generation
  12. Material Palette
  13. Colorotate
  14. Colorblender
  15. Colorspire
  16. Paletton
  17. Colorexplorer

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

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

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

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

В подборке нашего сайта я выделила 2 категории подобных сервисов — русскоязычные и англоязычные.

Русские сервисы сочетания цветов

Среди множества русскоязычных онлайн сервисов можно выделить 5 основных (самых популярных), каждый из которых обладает своими достоинствами и недостатками:

Colorscheme

Цветовой круг онлайн. Это инструмент для подбора и генерации цветовых схем. Вы можете выбрать один и вариантов сочетания цвета. Вы можете посмотреть шаблон дизайна страницы в выбранном сочетании цветов. Интересно также и то, что вы можете «посмотреть» на вашу палитру глазами других людей, имеющих некоторые отклонения в цветовосприятии.
https://colorscheme.ru/

In colour balance

Всевозможные цветовые палитры, выделенные из лучших образцов фото.
https://color.romanuke.com/

Colorup.tikkurila

https://colorup.tikkurila.com/
Помощь в поиске удачной цветовой схеме для интерьера, а также палитры для внешней отделки. Пригодится для работы дизайнерам интерьеров, архитекторам.

Color Adobe

Сайт этот, конечно же не русский, но с поддержкой русского языка, и он будет понятен русскоговорящим, поэтому я и отнесла его в эту группу. Очень удобный подбор цвета. Изменяйте положение указателя на цветовой круге и выбирайте схему по определенной цветовой системе.
https://color.adobe.com/

Генератор цветовых схем

https://colory.ru/colorgenerator/

Англоязычные сайты по подбору цвета

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

Random Material Generator

Название генератора указывает на случайность выбора цветовой палитры. Нажмите на кнопку «Generate different random combination» для генерации цветовой схемы.
https://codecrafted.net/randommaterial/

Material Mixer

Позволяет смешать и посмотреть сочетания двух цветов.
https://sankk.in/material-mixer/

Colorhunter

Готовые цветовые решения.
https://colorhunter.com/

Palette Generation

https://mcg.mbitson.com/
Генерация оттенков цвета.

Material Palette

Выберите 2 цвета, и вы увидите еще цвета, которые подходят для вашего дизайна.
https://www.materialpalette.com/blue/light-green

Colorotate

Воспользуйся конусом для создания собственной цветовой схемы. Чтобы пользоваться сайтом, разрешите загрузку Adobe Flash плеера в вашем браузере.
https://web.colorotate.org/

Colorblender

Вам нужно определить алгоритм сочетания цвета и, перемещая ползунки, выберите сочетания цвета по RGB. Если вы затрудняетесь, то на этой же странице вы найдете ссылку на полную таблицу сочетания цвета.
https://colorblender.com/

Colorspire

Еще один простой цветовой круг, который поможет вам выбрать базовые цветовые сочетания, подобрать светлые, темные оттенки и т.д.
https://colorspire.com/

Paletton

Подбор сочетания цветов в зависимости от разных цветовых систем.
https://paletton.com/

Colorexplorer

Двигайте ползунки и выбирайте схему!
https://colorexplorer.com/

Автоматическое определение цвета — опыт команды «Яндекса» — Офтоп на vc.ru

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

Примеры использования алгоритмов подбора цветов в поиске и в «Яндекс.Музыке»

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

У нас в Yandex Launcher есть промо-карточки приложений: рейтинг, описание и кнопка «Установить». Это контекстные рекомендации — они открываются поверх списка приложений или в папке на рабочем столе.

Первоначальная реализация

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

  • неправильное определение цвета;
  • «грязные» цвета из-за усреднения;
  • тусклые кнопки, скучные карточки.

Примеры проблемных карточек

Чего на самом деле хотелось

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

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

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

Новый алгоритм определения цветов

Шаг 1. Берем иконку. Выкидываем белые, черные и прозрачные пиксели.

Исходная иконка → Квадрат из отфильтрованных пикселей

Шаг 2. Уменьшаем полученное изображение до размера 2 × 2 пикселя (с отключенным антиалиасингом). В результате получим четыре цвета иконки. Если исходная картинка однородная, они могут повторяться — ничего страшного.

Результат после второго шага. Исходная иконка → Цвета

У нас отключен антиалиасинг, чтобы цвета не смешивались, не становились «грязными».

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

Шаг 3. Почти все готово. Осталось совсем чуть-чуть: достаем полученные цвета, переводим в HSL, сортируем по светлоте (L). Красим карточку.

Светлая схема:

  • фон — самый светлый цвет;
  • кнопка — ближайший к светлому;
  • текст — самый темный.

Темная схема (если два и более цветов темные):

  • фон — самый темный цвет;
  • кнопка — ближайший к темному;
  • текст — самый светлый.

Применяя цвета, проверяем контрастность: разница Lightness между фоном и кнопкой ≥ 20; между фоном и текстом ≥ 60. Если не соответствует, корректируем.

Получившиеся карточки. Исходная иконка → Цвета → Карточка

И еще немного карточек для примера:

Результат

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

И самое главное: через два дня после предложения нового алгоритма первая реализация уже была доступна в dev-сборке. Опробовали внутри команды, настроили пороги для фильтра на первом шаге, предусмотрели особые случаи:

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

Доработанный алгоритм вошел в ближайший релиз. Отдельное спасибо руководителю группы разработки Yandex Launcher Диме Овчарову — за интерес, желание и терпение. Напоследок — больше примеров.

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

Популярные

Новые

Избранные

Частные

Назад

Далее

:

Размер пикселя (1)

Х:0, Y: 0

Ширина: 256px
Высота: 144px

Ширина: 0, Высота: 0

Загрузка..

слоев Текущий Все
Draw.modal.download.frames Текущий Все
GIF Скачать