Как подобрать хороший цвет, если ты не дизайнер

Алексей Смагин (@BlackPineapple) — о том, как делать ваши графики понятными и красивыми. А в деталях учу этому искусству на курсе «Эстетика в графиках»

цветпалитрадизайн

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

На последнем потоке сразу несколько моих студентов в своих дипломных работах экспериментировали с цветом. И подсказать им хорошее решение мне помог... ChatGPT!

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

Но! Жёлтый тут, на самом деле, немного ядовитый. Он слишком контрастирует с фоном и создаёт немного неуютное ощущение.

Подобрать несколько хороших вариантов помог очень простой промпт:

Какой жёлтый будет хорошо смотреться на фоне 1E3A55?

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

Пользуйтесь!

Два варианта инфографики на тёмно-синем фоне: жёлтые и синие маркеры (снежинки) показывают влияние цвета на контраст и ощущение визуальной комфортности.
Визуализация сравнивает «ядовитый» жёлтый и более спокойный синий на фоне #1E3A55.

Дискуссия

Алексей Смагин
Ivan Uspenskiy
А можно по старинке: https://paletton.com/ Главное, выбрать базовый цвет, от которого строятся заведомо гармоничные сочетания
Я использую обычно https://colordesigner.io/ Но и там и там придётся помучаться, чтобы выжать конкретный оттенок жёлтого, который хорошо будет смотреться в тексте
Ivan Uspenskiy
Алексей Смагин
Я использую обычно https://colordesigner.io/ Но и там и там придётся помучаться, чтобы выжать конкретный оттенок жёлтого, который хорошо будет смотреться в тексте
А тут еще важно объективность проявить. То есть не на глазок проверять читаемость текста на фоне, а - по W3C-алгоритму. Рандомный сервис для проверки - https://imagecolorpicker.com/color-contrast-checker/fffd00-236076, я их не запоминаю, просто гуглю каждый раз. Но делал в т.ч. в Excel такую штуку чтобы получить матрицу рекомендаций по применению цветов из определенной палитры
Алексей Смагин
Ivan Uspenskiy
А тут еще важно объективность проявить. То есть не на глазок проверять читаемость текста на фоне, а - по W3C-алгоритму. Рандомный сервис для проверки - https://imagecolorpicker.com/color-contrast-checker/fffd00-236076, я их не запоминаю, просто гуглю каждый…
О да, хорошее замечание! У меня этот что-то заглючил, но я таким пользуюсь
Andrey Demidov
Иишки такие разборы и проверки делают быстро. Даже в специализированные сервисы не нужно ходить. Дожили.
Ame
Вот почему существование дизайнеров — единственная (ну почти :) причина, по которой допустимо точечное применение ядерного оружия. Заботятся, как будет выглядеть, а не как будут пользоваться. Надписи серым по "синему" (на самом деле, ближе к грязно серому) нечитаемы. Все оттенки сине-зеленых снежинок в разы ближе друг к другу, чем к жёлтому. По сути, на обоих вариантах картинки жёлтое бросается в глаза, а остальное — серая муть депрессивных оттенков, убивающая всякое желание узнать, что там она скрывает.
Алексей Смагин
Ame
Вот почему существование дизайнеров — единственная (ну почти :) причина, по которой допустимо точечное применение ядерного оружия. Заботятся, как будет выглядеть, а не как будут пользоваться. Надписи серым по "синему" (на самом деле, ближе к грязно серому)…
Эстетика и функциональность — это не антонимы Я показал пример исключительно на жёлтом, с серым тут тоже надо работать. > Все оттенки сине-зеленых снежинок в разы ближе друг к другу, чем к жёлтому. А в чём проблема?) Жёлтый — это акцент, а остальные должны считываться на уровне больше-меньше
Ame
Алексей Смагин
Эстетика и функциональность — это не антонимы
Да. Но если про функциональность не забывают, чем грешат (сплошь и рядом) "отдельные" эстетствующие дизайнеры. "с серым тут тоже надо работать." 👍 🤝
Ame
Алексей Смагин
А в чём проблема?
Они хорошо считываются, когда стоят рядом и по порядку, условно, 1-2-3-4... А если они вразброс (особенно, по карте, но не только), то, например, понять сходу, это 1-2-4 или 1-3-4, нелегко, тем более, цветовые расстояния часто не выровнены (взяты из учебников по эстетике дизайна, а не вычислены арифметическим расчётом диапазона).
Алексей Смагин
Ame
Они хорошо считываются, когда стоят рядом и по порядку, условно, 1-2-3-4... А если они вразброс (особенно, по карте, но не только), то, например, понять сходу, это 1-2-4 или 1-3-4, нелегко, тем более, цветовые расстояния часто не выровнены (взяты из учебников…
С этим соглашусь. Но тут как раз рядом и по порядку
Ame
Алексей Смагин
С этим соглашусь. Но тут как раз рядом и по порядку
А, тада норм. Прост не смог себя заставить вглядеться и понять это. ;)
Присоединиться к обсуждению →