458

Генератор градиентов и палитры по картинкам1

Серия Gradients.app

Привет, пикабу!

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

Набор градиентов

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

Можно провалиться внутрь карточки градиента, там будет больше информации и разные размеры для скачивания. Для веб-дизайнера есть CSS-код градиента, а для иллюстраторов — цвета в RGB, CMYK, HEX и HSL.

Генератор градиентов

Можно делать градиенты самим: подбирать цвета, смотреть разные сочетания. Есть возможность выбрать от 1 до 5 цветов, скачивать в FHD, копировать CSS-код и рандомно менять цвета всего градиента или по отдельности.

Наборы палитр

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

Схемы можно отфильтровать по цветам и скопировать HEX-код каждого цвета палитры. На подробной странице схемы цвета применяются к небольшому web-шаблону: блоки, кнопки и другие элементы раскрашиваются под выбранную палитру.

Генератор палитры по фото

Ещё можно загрузить любую картинку или фотографию и определить палитру на ней. Изображение разбивается на 10 основных цветов. Есть подробные блоки с яркими, приглушенными, темными, светлыми и противоположными цветами. У всех цветов можно скопировать HEX-код.

Проект переведен на английский и частично на китайский язык.


Буду рад критике и идеям, может что-то вышло неудобно и непонятно.

Ссылка на сайт — https://gradients.app/ru


Спасибо, всем!

Правила сообщества

Можно:


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


Вставить свои 5 копеек. Если будет своя альтернативная точка зрения или совет по какой-то теме, то это приветствуется.


Нельзя:


1. Публиковать сообщения, картинки, не соответствующие тематике;

2. Размещать ссылки рекламного характера;

3. Перегибать палку;


Если оступился:


в случае нарушений, доступ в группу будет закрыт, а пользователь занесен в бан-лист;

212
Автор поста оценил этот комментарий
ответный пост

Привет, пикабу!

Прошло 3 месяца с первого поста про мой проект — Gradients.app, он про цвета и градиенты.

Расскажу про изменения и обновления за это время.

Вращение градиента

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

Новый вид страницы градиента

Пользователь может задать размер градиента самостоятельно или выбрать уже готовые размеры. Максимальный размер градиента — 2000 на 2000 px. Изображение градиента скачивается если на него нажать.

Добавление градиента в общую ленту

Зарегистрированные пользователи могут добавить свои градиенты в общую ленту.


Сгенерируйте градиент → сохраните в профиль → перейдите в мои градиенты → отправьте в общую ленту.

Пользователю придёт письмо о добавлении в общую ленту и ссылка на градиент.

Генерация градиентов без грязных переходов

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

Появился инструмент смешивания цветов

Можно выбрать до 4х цветов и два режима смешивания RGB и HSL.

Просто про режимы RGB и HSL:

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

Появился генератор оттенков

Выбирайте цвет и количество оттенков от 3 до 36. Оттенки генерируются в сторону белого, серого и черного цвета.

Набор сочетаний цвета текста и фона

На мини-карточках есть цвет фона, текста и их контраст, чем он выше тем читаемость лучше.

Можно отсортировать наборы по контрасту, времени и просмотрам.

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

Генерация сочетаний цвета текста и фона

К наборам добавил генерацию и для пользователей.

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

Огромное спасибо за комментарии в предыдущем посте, я всё записал и уже что-то добавил.

Буду рад критике и советам.


Ссылка на сайт — https://gradients.app/ru


Спасибо, всем!

Показать полностью 11
комментарии (21)
5
Автор поста оценил этот комментарий

@nazarpunk, @GiorgioArt, @Cronk, @Creamybunny, @010101010, записал все ваши предложения и замечания. Буду потихоньку воплощать их в жизнь, спасибо за отклик!

показать ответы
11
Автор поста оценил этот комментарий

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

раскрыть ветку (1)
5
Автор поста оценил этот комментарий
Спасибо, пользуйтесь!
2
Автор поста оценил этот комментарий

А вы планируете дать возможность демонстрировать и просматривать градиенты посетителей? Не будете же вы самостоятельно всегда их делать.


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

раскрыть ветку (1)
4
Автор поста оценил этот комментарий
Я думал над этим. Нужно систему модерации добавлять.
Сделал градиент – отправь на модерацию в общую ленту.

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

Ещё при нажатии на главной на "создать градиент" этот градиент получается некрасивый. Я попробовала трижды и трижды он был грязный. Видимо, берутся рандомные цвета. Мне кажется, нужно, чтобы этот градиент сразу был красивый. То есть либо должно быть запрорамировано использование комплементарных цветов, что сложно, наверное, организовать. Либо может рандомно использоваться один из залайканных градиентов.

раскрыть ветку (1)
3
Автор поста оценил этот комментарий

Привет, @Creamybunny,

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


Сижу и залипаю теперь)))


https://gradients.app/ru/new

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

Вы правы, надо первый делать не случайным. А чтоб красиво было, а потом уже рендом.
раскрыть ветку (1)
3
Автор поста оценил этот комментарий

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

Такие идеи очень нужны! Огромное спасибо!

показать ответы
1
Автор поста оценил этот комментарий

Задумайтесь 😁 можно уже прикрепить ту самую кнопочку "buy me a beer"

раскрыть ветку (1)
3
Автор поста оценил этот комментарий
Я форму прикрепил два дня назад с вопросом к пользователям – что улучшить, чего добавить. Ответов не поступило, думаю «купите мне пива» будет тоже мимо, но есть не просит.

Может домен отобью)

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

Круто! На первый взгляд выглядит хорошо и работает.


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

Иллюстрация к комментарию
раскрыть ветку (1)
3
Автор поста оценил этот комментарий
Это можно! Спасибо большое за идею.
показать ответы
1
Автор поста оценил этот комментарий

Круто! Тоже сохранил себе.

А можно для любителя пояснить, в чем суть палитр из фото и зачем они нужны?

раскрыть ветку (1)
3
Автор поста оценил этот комментарий
Для дизайна интерьера, подбор мебели в цвет и типо того. Сфоткал обои в доме и получил палитру цветов.

Применений много
3
Автор поста оценил этот комментарий

Тёмная тема просто огонь.

Иллюстрация к комментарию
раскрыть ветку (1)
3
Автор поста оценил этот комментарий
Поправил, спасибо ещё раз.
показать ответы
2
Автор поста оценил этот комментарий
@Creamybunny, привет!
Через пару дней будет большое обновление проекта по твоей идее. Пользователи смогу сами добавлять градиенты в основную ленту, а большое т.к. пришлось очень сильно переписать логику всего процесса.
Про всё помню, но пока не все успел.
показать ответы
2
Автор поста оценил этот комментарий

Ещё при нажатии на главной на "создать градиент" этот градиент получается некрасивый. Я попробовала трижды и трижды он был грязный. Видимо, берутся рандомные цвета. Мне кажется, нужно, чтобы этот градиент сразу был красивый. То есть либо должно быть запрорамировано использование комплементарных цветов, что сложно, наверное, организовать. Либо может рандомно использоваться один из залайканных градиентов.

раскрыть ветку (1)
2
Автор поста оценил этот комментарий
При создании градиента генерируются случайные цвета. Иногда ужасные, а иногда очень удачные.

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

Круто! Тоже сохранил себе.

А можно для любителя пояснить, в чем суть палитр из фото и зачем они нужны?

раскрыть ветку (1)
2
Автор поста оценил этот комментарий
Самое первое, что приходит в голову – есть логотип компании, ты можешь его разбить на цвета и оттенки. Я про лого с множеством цветов.

Раскрасить что-то под цвет фотографии или картинки.

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

Я часто использую так – нравится какой-то сайт или шаблон, делаю скрин и сразу получаю его цвета.

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

Файл из пользовательского кэша выбить забыли.

Иллюстрация к комментарию
раскрыть ветку (1)
2
Автор поста оценил этот комментарий
Выбил, должно быть хорошо
показать ответы
2
Автор поста оценил этот комментарий

Ещё раз не за что)

Иллюстрация к комментарию
раскрыть ветку (1)
2
Автор поста оценил этот комментарий
Раздел юзера, эх так и не понял для чего я его сделал.
показать ответы
0
Автор поста оценил этот комментарий
Подписался на тебя. Как для фигмы появится, то маякни. Помогу распространить в профильных чатиках.
раскрыть ветку (1)
1
Автор поста оценил этот комментарий

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

показать ответы
0
Автор поста оценил этот комментарий

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

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

А можете подробней про панель для adobe? Не совсем понял

показать ответы
1
Автор поста оценил этот комментарий

Пожалуйста! Раз здесь исполняют желания, то я ещё накидаю во время использования.


А как вы будете это монетизировать?

раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Буду благодарен.

Не задумался над монетизацией.
показать ответы
0
Автор поста оценил этот комментарий

Спасибло огромное! буду юзать в работе и для души)

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Спасибо вам. Если придет идея как улучшить сайт — поделитесь.

0
Автор поста оценил этот комментарий

При ширине 1200 - красиво.
При 1199 - нет

Иллюстрация к комментарию
Иллюстрация к комментарию
раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Спасибо за баг. Буду править стили.
0
Автор поста оценил этот комментарий

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

Иллюстрация к комментарию
раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Соотношение цветов имеете в виду? Сейчас цвета градиентов в равных долях.

Надо подумать как это реализовать.

Спасибо за идею!
показать ответы
0
Автор поста оценил этот комментарий

На чем пилите? И почему не SPA? страницы уж очень долго переключаются.

раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Php, SQL, Vue.js. Проект для тренировки скилов.
0
Автор поста оценил этот комментарий

На компе хорошо, только мобилки не очень любят выбивание чере GET параметры и достают старую версию.


А вы почему dev на prod выкладываете?

Иллюстрация к комментарию
раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Допиливаю периодически, надо поставить обычный
показать ответы
0
Автор поста оценил этот комментарий

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

Иллюстрация к комментарию
раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Записал в задачи

0
Автор поста оценил этот комментарий

Имеется ввиду без интернета.

раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Нет, не работает
показать ответы
0
Автор поста оценил этот комментарий

В оффлайне работает?

раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Что имеете ввиду?
показать ответы
3
Автор поста оценил этот комментарий

Тёмная тема просто огонь.

Иллюстрация к комментарию
раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Спасибо за баг!
показать ответы
1
Автор поста оценил этот комментарий

Супер! Спасибо за вашу работу!

раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Рад, что зашло!

показать ответы
3
Автор поста оценил этот комментарий
Отличный функционал и очень удобный для работы
раскрыть ветку (1)
1
Автор поста оценил этот комментарий

Спасибо большое!

1
Автор поста оценил этот комментарий
Как долго я тебя искала)))
раскрыть ветку (1)
0
Автор поста оценил этот комментарий
;)
1
Автор поста оценил этот комментарий

Там еще теперь можно создавать градиенты из более чем 3 цвета. Здорово)

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
5 можно было добавлять)) это появилось до поста на Пикабу.
0
Автор поста оценил этот комментарий

Круто! Спасибо

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Надеюсь на помощь по заполнению)
показать ответы
0
Автор поста оценил этот комментарий

@Frutellis, на случай, если редко проверяете ту почту: отправил вам э-мейл (:

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Улетело в спам, не было отбивки. Ответил вам.
0
Автор поста оценил этот комментарий

Для продуктов Adobe сейчас можно писать собственные панели на html и JavaScript например, можно интегрировать ваш сайт напрямую в иллюстратор.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Хера!
показать ответы
1
Автор поста оценил этот комментарий

Не забудьте о радиальных градиентах. https://cssgradient.io/

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
С радиальными сложнее чутка, все градиенты можно скачать, а их генерит php, а не канва. Это сделано чтоб можно было по ссылке перейти на любой градиент через URL.

Пример:
https://gradients.app/color/b11ae8/4fae8f/c6d33c

https://gradients.app/color/b11ae8/4fae8f

Эти ссылки можно вставлять в тег IMG и будет градиент у вас.
показать ответы
2
Автор поста оценил этот комментарий
И если идеи будут – поделитесь.

Запилите color wheel, чтоб дизайнерам не пришлось на другие сервисы переходить.


https://www.canva.com/colors/color-wheel/

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Думал ещё над сложением цветов.
показать ответы
3
Автор поста оценил этот комментарий

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


Проект хорош, хочу помочь посильным вкладом.

раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Спасибо, напишу. И если идеи будут – поделитесь.
показать ответы
1
Автор поста оценил этот комментарий

Да незачто.

Иллюстрация к комментарию
раскрыть ветку (1)
0
Автор поста оценил этот комментарий
Поправил
показать ответы

Темы

Политика

Теги

Популярные авторы

Сообщества

18+

Теги

Популярные авторы

Сообщества

Игры

Теги

Популярные авторы

Сообщества

Юмор

Теги

Популярные авторы

Сообщества

Отношения

Теги

Популярные авторы

Сообщества

Здоровье

Теги

Популярные авторы

Сообщества

Путешествия

Теги

Популярные авторы

Сообщества

Спорт

Теги

Популярные авторы

Сообщества

Хобби

Теги

Популярные авторы

Сообщества

Сервис

Теги

Популярные авторы

Сообщества

Природа

Теги

Популярные авторы

Сообщества

Бизнес

Теги

Популярные авторы

Сообщества

Транспорт

Теги

Популярные авторы

Сообщества

Общение

Теги

Популярные авторы

Сообщества

Юриспруденция

Теги

Популярные авторы

Сообщества

Наука

Теги

Популярные авторы

Сообщества

IT

Теги

Популярные авторы

Сообщества

Животные

Теги

Популярные авторы

Сообщества

Кино и сериалы

Теги

Популярные авторы

Сообщества

Экономика

Теги

Популярные авторы

Сообщества

Кулинария

Теги

Популярные авторы

Сообщества

История

Теги

Популярные авторы

Сообщества