81

Генератор градиентов, палитр, оттенков, сочетаний цветов и ещё

Серия Gradients.app

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

Расскажу, что нового появилось на моём проекте Gradients.app. Он про работу с цветом, палитрами и градиентами. 1 пост и 2 пост по проекту.

Color picker или инструмент пипетка

Вы можете загрузить изображение и наведением курсора определить цвета на ней. Выбранные цвета можно объединяются в палитру. Нажав на выбранный цвет вы получаете его код в HEX и RGB, а по нажатию на код, значение копируется в буфер. Можно удалить лишний цвет двойным кликом по кругу на картинке.

https://gradients.app/ru/colorpicker

Средний цвет изображения

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

https://gradients.app/ru/averagecolor

Конвертер цветов

Выбираете нужный цвет на панели цветов и он сразу меняется в форматах HEX, RGB, CMYK, HLS и HSV. Но можно и поменять значения цвета в любой его системе и он тоже поменяется везде. Можно подобрать случайный цвет нажав на кнопку.


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

https://gradients.app/ru/converter

Краткая информация о цвете

https://gradients.app/ru/color/4929b4  в конце ссылки стоит hex код, можно сразу вписывать ссылку в адресную троку или менять на страницу. Ниже скриншоты страницы.

В первой части разные системы цветов и температура цвета.

Небольшое количество оттенков выбранного цвета. Светлые, тёмные и серые.

Цветовые сочетания (цветовой круг) и контрасты с разными цветам

Из новинок это всё.

Очень хочется узнать ваше мнение, что хорошо, а что неудобно и плохо.

Если будет интересно, сделаю пост про внутрянку проекта, разные статисти и метрики, как развивался и т.д.


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


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

Графический и Веб-дизайн

1.1K постов12.5K подписчика

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

Можно:


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


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


Нельзя:


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

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

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


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


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

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

А как сгенерировать контрастный заголовок?

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

https://gradients.app/ru/newlegibility

Тут можно это сделать. Снизу будет параметр оценки контраста между цветом текста и фона. Можно случайно подбирать цвета.

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

Пожалуйста!) Пишите, если что) Но тестирование ещё в работе. Я вам тогда скину файл отчёта на почту, которая в футере на сайте. Чтобы уж в открытую не писать тут.

раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Круто, спасибо ещё раз. Сайт не тестировал до этого.
показать ответы
0
DELETED
Автор поста оценил этот комментарий

1. Версия v0.21.1 скрипта axios.min.js уязвима. https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-3749
2. Missing Anti-clickjacking Header

3. Absence of Anti-CSRF Tokens

4. Content Security Policy (CSP) Header Not Set


В принципе, ничего такого, но вот первый пункт лучше исправить.

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

Пентест - это тестирование на проникновение) С работой палитры и преобразований цветов это никак не связано.

раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Уже загуглил. И редактировал комментарий)
показать ответы
1
DELETED
Автор поста оценил этот комментарий

Я ваш сайт проверил пентестом)) Нашел парочку некритичных моментов, но в целом всё норм)
А сам функционал чуть-чуть попозже посмотрю, пока нет таких задач в работе)

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

https://colorscheme.ru/
Постоянно этим инструментом пользуюсь

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

Платформа подбора цвета. Все тоже самое кроме пипетки. Ценность в обширной библиотеке подобранных стилей. А еще удобно.

раскрыть ветку (1)
1
Автор поста оценил этот комментарий
Спасибо за ваш ответ. Совершенно верно ответил(а) @zhiga90,.
Изначально проект делал для тренировки в php и js. И предполагался он как библиотека готовых градиентов. Сейчас я его развиваю и улучшаю. Конечно, есть подобные сайты, но и ВК с FB есть и другие похожие вещи, но немного разные.

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

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

Отправил на почту

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

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

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

Спасибо за оценку.
Для таких моментов есть сортировка по просмотрам и скачиваниям, сразу понятно, что нравится большинству или как минимум заинтересовало.


В скрине градиенты отсортированы по скачиваниям

Иллюстрация к комментарию
показать ответы

Темы

Политика

Теги

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

Сообщества

18+

Теги

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

Сообщества

Игры

Теги

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

Сообщества

Юмор

Теги

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

Сообщества

Отношения

Теги

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

Сообщества

Здоровье

Теги

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

Сообщества

Путешествия

Теги

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

Сообщества

Спорт

Теги

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

Сообщества

Хобби

Теги

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

Сообщества

Сервис

Теги

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

Сообщества

Природа

Теги

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

Сообщества

Бизнес

Теги

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

Сообщества

Транспорт

Теги

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

Сообщества

Общение

Теги

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

Сообщества

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

Теги

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

Сообщества

Наука

Теги

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

Сообщества

IT

Теги

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

Сообщества

Животные

Теги

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

Сообщества

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

Теги

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

Сообщества

Экономика

Теги

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

Сообщества

Кулинария

Теги

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

Сообщества

История

Теги

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

Сообщества