Комплексный коммерческий дизайн — соц. сети, маркетплейсы, портфолио
Полное руководство по Color Script
Это подробный разбор всех функций инструмента «Цвета из изображения». Здесь объясняется не только что нажимать, но и почему результат выглядит именно так — какие пороги заложены в алгоритм, где он силён и где ошибается.
Руководство по Color Script построено по порядку работы: загрузка → настройки → чтение результата → промпт → серия → экспорт. В конце — практические сценарии под разные задачи, разбор частых ошибок и словарь терминов.
Быстрый старт
Быстро получить результат:
- Перетащите изображение в окно кадра. Извлечение цветов из кадра происходит автоматически.
- Посмотрите на палитру и строку «Цветовая схема»
- Перейдите на вкладку Промпт и нажмите «Копировать»
- Используйте данный промпт для своих генерациях в любом ИИ и получайте результат с похожими цветами.
Подробнее ниже в этом руководстве по Color Script — про то, как получить результат точнее.
Часть 1. Загрузка изображения
Три способа загрузить кадр
- Кнопка «Загрузить своё изображение». Открывает системный диалог выбора файла. Принимает JPG, PNG, WEBP, GIF, BMP — всё, что умеет отображать браузер.
- Перетаскивание — Drag-and-drop. Схватите файл мышью и бросьте в область кадра. Рамка подсветится янтарным, когда файл над зоной приёма. Работает и из проводника, и из папки на рабочем столе.
- Вставка из буфера — Ctrl + V. Самый быстрый путь для скриншотов. Сделайте снимок экрана любым способом, кликните один раз по области инструмента и нажмите Ctrl + V.
Важная деталь про вставку. Инструмент реагирует на Ctrl + V только после того, как вы кликнули внутрь него. Это сделано намеренно: иначе виджет перехватывал бы вставку на всей странице, мешая копировать текст в других местах. Если вставка не сработала — кликните по кадру и повторите.
Что происходит с файлом
Ничего не отправляется на сервер. Браузер читает файл в память, рисует его на скрытом холсте и считает статистику прямо на вашем компьютере.
- Извлечение цветов работает без интернета после загрузки страницы
- Материал под NDA* можно анализировать спокойно
- Нет очереди, лимитов и ожидания ответа сервера
- Закрыли вкладку — данных не осталось нигде
* NDA (non-disclosure agreement) — договор о неразглашении: стороны обязуются не раскрывать конфиденциальные сведения, полученные в ходе сотрудничества.
Ограничения по размеру
Загружать файлы можно любого размера. Изображение автоматически уменьшается до 2200 пикселей по длинной стороне для отображения и до 220 пикселей для расчёта.
Статистика цвета не требует полного разрешения. Кадр 4K содержит 8 миллионов пикселей, но распределение оттенков в нём практически идентично тому, что даёт уменьшенная копия. При этом расчёт идёт за доли секунды вместо нескольких секунд.
Файлы больше 20 МБ браузер может читать заметно дольше — это ограничение самого браузера, а не инструмента.
Демонстрационный кадр
При открытии страницы автоматически загружается пример с меткой «Пример» в левом верхнем углу. На нём удобно понять логику, не тратя время на поиск своего материала.
Кнопка «Вернуть пример» возвращает демо в любой момент — полезно, когда нужно сравнить своё изображение с эталонным (условно) разбором.
Если демо не загрузилось (проблемы с сетью), инструмент рисует резервный градиентный кадр. Это не ошибка, а защита: виджет никогда не выглядит сломанным.
Часть 2. Настройки. Интерфейс
Ползунок «Цветов в палитре»
Диапазон от 3 до 8, по умолчанию 6.
Это количество кластеров, на которые алгоритм делит все цветные пиксели кадра. Не «сколько цветов взять», а «на сколько групп разбить» — разница существенная.
Рекомендации как выбирать:
- Кадр из фильма — рекомендуется 5–6 цветов. Этого достаточно для основной палитры и акцентов.
- Логотип, иконка — рекомендуется 3–4 цвета. Большее количество начнёт дробить один цвет на лишние кластеры.
- Фотография природы — рекомендуется 6–7 цветов. Это связано с большим количеством естественных цветовых переходов.
- Сложная сцена, витрина, толпа — рекомендуется 7–8 цветов. Здесь много независимых цветовых объектов.
- Минималистичный постер — рекомендуется 3 цвета. Такое количество честнее показывает замысел.
Признак того, что цветов слишком много: в палитре появляется плашка с долей 0% или 1%. Алгоритм был вынужден создать кластер там, где реального цветового объекта нет. Уменьшите значение на единицу.
Признак того, что цветов мало: два визуально разных оттенка слились в один усреднённый, которого в кадре не видно. Увеличьте значение.
Чекбокс «Обрезать чёрные полосы»
Включена по умолчанию. Убирает леттербокс — чёрные поля сверху и снизу у широкоформатных кадров, а также боковые поля у вертикальных изображений.
Зачем это нужно. Чёрная полоса — это чистый нейтральный цвет с нулевой насыщенностью. Если её не убрать, она:
- Раздувает долю нейтралей в блоке «База»
- Занижает среднюю светлоту кадра
- Портит определение теней — они становятся «нейтральными», хотя реальные тени в кадре цветные
- Завышает контраст, потому что абсолютный чёрный тянет минимум вниз
Как работает алгоритм. Проверяет строки сверху и снизу, столбцы слева и справа. Строка считается тёмной, если средняя яркость по ней ниже 16 из 255. Обрезка идёт до тех пор, пока строки тёмные, но не более 32% от высоты или ширины — чтобы не срезать половину тёмной сцены.
Дополнительная защита: если после обрезки осталось меньше четверти исходного размера, обрезка отменяется целиком.
Когда выключать. Если чёрный фон — часть замысла. Например, объект на чёрном для каталога, тёмная сцена в театре, ночной кадр с большими областями теней. В этих случаях чёрный не мусор, а полноценный участник палитры.
Чекбокс «Учитывать телесные тона в схеме»
Выключена по умолчанию. Это самая неочевидная настройка, поэтому объясню развёрнуто.
Что проверяет алгоритм. Три условия одновременно, в координатах OKLCH:
Оттенок: от 30° до 78°
Насыщенность: от 0.035 до 0.145
Светлота: от 0.32 до 0.88
Никакого распознавания лиц здесь нет. Это прямоугольная область в цветовом пространстве. В неё попадают: кожа, дерево, песок, кирпич, терракота, светлые волосы, бежевая одежда, кофе с молоком, осенняя листва, тёплый свет от лампы накаливания.
Почему по умолчанию выключено. На портрете крупным планом лицо занимает значительную часть кадра. Тёплый телесный тон становится доминирующим цветом, и практически любой портрет определяется как Teal & Orange — независимо от того, какой грейд применён на самом деле. Выключение убирает эти пиксели из расчёта схемы и показывает, что происходит с цветом вокруг человека.
Когда включать:
- Человек в кадре, и цвет кожи важен для палитры
- Вы собираете палитру для бьюти-съёмки или портретной ретуши
- Кадр состоит преимущественно из дерева, песка, кирпича — и вы хотите, чтобы они были в палитре
Когда оставить выключенным:
- Портрет крупным планом, интересует грейд фона
- Пейзаж без людей, но с большим количеством тёплых природных объектов
- Нужно понять холодную составляющую кадра, которую перебивает тёплое
Честное ограничение. Верхняя граница по светлоте — 0.88, нижняя — 0.32. Очень тёмная кожа при значении светлоты около 0.30 в диапазон не попадает. То есть на портрете светлокожего человека фильтр сработает, а на портрете темнокожего может не сработать. Это следствие того, как заданы пороги, и мы это знаем. Обходной путь: если фильтр не даёт нужного эффекта, уменьшите количество цветов в палитре — телесный кластер сольётся с соседним.
Часть 3. Чтение результата
Палитра — плашки цветов
Каждая плашка содержит три строки:
- HEX-код — точное значение центра кластера. Клик по плашке цвета (снизу) копирует его в буфер.
- Название цвета — ближайшее из справочника на 150 оттенков. Подробнее о том, как оно подбирается, ниже.
- Доля в кадре — процент от всех цветных пикселей, не от всего кадра. Нейтрали считаются отдельно.
Почему сумма долей равна 100%, хотя нейтралей в кадре половина. Доли внутри палитры нормализованы между собой. Если кадр на 60% состоит из серого, эти 60% ушли в блок «База», а оставшиеся 40% цветных пикселей распределились между плашками так, что в сумме дают 100%. Так удобнее сравнивать цвета между собой.
Обновление для версии 2.2.0 (скриншот незначительно может не совпадать). Абсолютное соотношение показывает строка под лентой пропорций: «Цветные пиксели: 2% кадра · нейтрали: 98%». Держите её в поле зрения — без неё проценты на плашках легко прочитать неверно. Цвет с долей 100% в палитре может занимать пару процентов изображения.
В промпт подставляются именно абсолютные значения, а не проценты с плашек.
Наведение курсора делает две вещи одновременно: подсвечивает точки на кадре, где этот цвет встречается, и обводит соответствующую точку на цветовом круге. Это самый быстрый способ понять, откуда цвет.
На сенсорных экранах подсветка недоступна — там нет наведения. Клик по-прежнему копирует HEX.
Лента пропорций цвета
Горизонтальная полоса над плашками. Показывает то же самое, что доли в процентах, но визуально — сразу видно, доминирует один цвет или палитра сбалансирована.
Подписи с процентами появляются только на сегментах шире 8%, чтобы мелкие не превращались в кашу.
Как читать. Один сегмент на две трети ленты означает монохромный по сути кадр, даже если формально в палитре шесть цветов. Три-четыре сегмента примерно равной ширины — сбалансированная палитра, характерная для дизайна и графики.
Порядок сортировки
Выпадающий список над лентой предлагает три режима:
- По доле в кадре (по умолчанию) — от самого массового цвета к редкому.
- По светлоте — от светлого к тёмному. Полезно, когда собираете градиент или шкалу оттенков для дизайн-системы.
- По цветовому кругу — по возрастанию угла оттенка. Показывает палитру как последовательность на спектре, помогает увидеть пропуски.
Сортировка меняет только порядок отображения плашек. Лента пропорций и промпт всегда идут по доле.
База — нейтрали
Отдельный блок под палитрой. Сюда попадают пиксели с насыщенностью ниже 0.035 — то есть визуально серые, чёрные и белые.
Нейтрали группируются не кластеризацией, а по пяти диапазонам светлоты: глубокие тени, тени, средние тона, света, яркие света. Диапазон показывается, если содержит хотя бы 2% всех нейтральных пикселей.
Зачем это отдельно. Нейтрали не участвуют в определении цветовой схемы — иначе любой кадр с большим количеством серого определялся бы как монохромный. Но они задают характер: тёплая база и холодная база создают совершенно разное ощущение при одинаковых акцентах.
Как читать. Обратите внимание на названия. «Тёмный тёплый серый» и «тёмный сине-серый» — это разница между уютной сценой и отчуждённой. Часто именно нейтрали, а не акценты, определяют настроение кадра.
Если блок не появился — в кадре почти нет нейтральных пикселей. Это нормально для насыщенной графики и постеров.
Цветной отлив на границах серого
На чёрно-белых изображениях палитра часто содержит оттенки вроде «тёмно-бирюзовый» или «стальной синий», которых глазом не видно. Это не ошибка — это реальный цвет пикселей.
Откуда он берётся. Антиалиасинг на границах объектов, компрессия JPEG, лёгкий тонирующий сдвиг при обработке. Насыщенность таких пикселей едва превышает порог нейтральности, но их много по площади, поэтому кластеризация выделяет их в отдельные группы.
Почему они не попадают в промпт. Отбор акцентов на почти ЧБ-кадре идёт не по площади, а по заметности: насыщенность умножается на корень из доли. Кластеры с хромой ниже 0.045 отсекаются целиком — визуально они читаются как серые и уже описаны в блоке нейтралей.
Без этого фильтра происходило следующее: серый с отливом занимал больше пикселей, чем настоящий цветной акцент, и вытеснял его из промпта. Нейросеть получала описание «бирюзовые тона» вместо «красный акцент на чёрно-белом».
Что это значит на практике. В палитре вы видите всё, включая отлив — это честная картина данных. В промпт идут только те цвета, которые действительно формируют образ.
Названия цветов — как они подбираются
Инструмент содержит справочник из 150 якорных цветов с названиями на русском и английском. Для каждого цвета палитры находится ближайший якорь в пространстве OKLab, и его название подставляется.
Почему не формула. В первых версиях название собиралось по схеме «насыщенность + светлота + оттенок»: получалось «приглушённый тёмный оранжевый». Формально верно, практически бесполезно. Хуже того — такой подход физически не может назвать коричневый, бордовый, оливковый, сливовый или navy. Этих цветов не существует как угла на цветовом круге; они возникают только из сочетания всех трёх координат сразу.
Показательный пример: цвет #402832 формула называла «почти серый тёмный розовый». По справочнику он находит ближайшим якорь «сливовый» — то, что человек и увидит.
Названия цветов — ограничения
Названия цветов не стандартизированы. Pantone закрыт и платен. Научный стандарт ISCC-NBS существует, он в общественном достоянии, но выдаёт формулировки вроде «тёмный серовато-красноватый пурпурный» — то есть ровно то, от чего мы ушли. CSS-названия покрывают спектр неравномерно: девять оттенков розового и почти ни одного коричневого, плюс имена вроде PapayaWhip, непригодные для промпта.
Поэтому справочник курируемый. Названия общепринятые среди дизайнеров, но другой источник может назвать тот же оттенок иначе.
Два близких цвета могут получить одно название. Если оттенки лежат рядом, оба найдут ближайшим один якорь. HEX-коды при этом остаются разными и точными — на работу это не влияет, но в палитре выглядит как повтор.
Часть 4. Цветовой круг
Что на нём изображено
Круг содержит четыре слоя информации одновременно.
- Внешнее кольцо — гистограмма оттенков по всему кадру. Чем ярче и выше сегмент, тем больше пикселей этого оттенка. Показывает полную картину, включая цвета, не попавшие в палитру.
- Центральный диск — нейтрали из блока «База», разложенные секторами. Позволяет одним взглядом оценить, тёплая база или холодная.
- Точки — цвета палитры. Размер точки пропорционален доле в кадре.
- Пунктирная фигура — идеальная геометрия найденной схемы. Если алгоритм определил триадную схему, пунктиром рисуется равносторонний треугольник от базового оттенка.
- Белая линия — фактическая геометрия вашей палитры, соединяющая точки по порядку оттенка.
Два режима отображения
Hue × Насыщенность (по умолчанию). Угол — оттенок, расстояние от центра — насыщенность. Цвета у края круга яркие и чистые, ближе к центру — приглушённые.
Используйте, когда нужно оценить, насколько кадр насыщенный, и какие цвета в нём звучат громче остальных.
Hue × Светлота. Угол тот же, расстояние от центра — светлота. У края светлые цвета, в центре тёмные.
Используйте, когда нужно понять тональное распределение: собраны ли цвета в тенях, разбросаны ли по всему диапазону.
Аналогия в фотошопе: В Photoshop (диалог Image → Adjustments → Hue/Saturation) используются термины:
— Насыщенность → Saturation
— Светлота → Lightness
Так что связка «Hue × Saturation» и «Hue × Lightness» — это отсылка к стандартной модели HSL (Hue, Saturation, Lightness), которая и лежит в основе этого инструмента в Photoshop.
Переключение не меняет расчёт — только отображение тех же данных.
Как читать геометрию
Точки собраны в одном секторе → монохромная или аналоговая схема. Кадр держится на одном оттенке.
Две группы точек напротив друг друга → комплементарная. Классическое противопоставление тёплого и холодного.
Точки равномерно по кругу → тетрадная или отсутствие системы. Второе встречается чаще: реальные фотографии часто не укладываются ни в одну схему.
Белая линия сильно расходится с пунктиром → палитра отклоняется от идеальной модели. Это не ошибка кадра, а информация: процент уверенности схемы будет невысоким.
Часть 5. Цветовая схема
Семь гипотез
Алгоритм проверяет все семь и выбирает наиболее вероятную.
Монохромная. Один оттенок в разной светлоте и насыщенности. Разброс по кругу меньше 38°.
Аналоговая. Соседние оттенки, мягкие переходы. Разброс около 48°.
Комплементарная. Два противоположных оттенка, тёплый против холодного.
Сплит-комплементарная. База плюс два оттенка по бокам от противоположного — примерно 150° и 210° от базы.
Триадная. Три оттенка через 120°.
Тетрадная. Четыре оттенка, две комплементарные пары.
Доминанта плюс нейтрали. Один цветовой акцент на преимущественно нейтральной базе. Побеждает, когда цветных пикселей в кадре меньше 20%.
Процент уверенности
Показывает, насколько палитра близка к идеальной модели схемы.
- выше 75% — Уверенное попадание, схема явная
- 55–75% — Тенденция есть, но с отклонениями
- ниже 55% — Палитра не укладывается в классические схемы
Низкий процент — не дефект инструмента и не дефект кадра. Большинство фотографий и кадров из фильмов построены интуитивно, а не по учебнику теории цвета.
Альтернативная схема
Если вторая по вероятности гипотеза отстаёт меньше чем на 12 процентных пунктов, она показывается тоже: «Близко к сплит-комплементарной (68%)».
Это честнее, чем выдавать один вариант. Комплементарная и сплит-комплементарная схемы часто различаются на грани — и обе интерпретации имеют право на существование.
Одна техническая тонкость
В OKLab оттенки распределены неравномерно относительно привычного цветового круга. Настоящие комплементарные пары лежат не строго на 180°: красный и циан разведены примерно на 166°, оранжевый и синий — на 209°.
Знаменитая пара teal & orange геометрически разведена примерно на 140°, то есть формально это ближе к сплит-комплементарной схеме. Но в киноязыке её называют комплементарной — за счёт противопоставления температур.
Поэтому алгоритм учитывает не только угол, но и противоположность тёплого и холодного. Если два главных оттенка противоположны по температуре, оценка комплементарности повышается.
Часть 6. Тональность и грейд
Как считаются тональные зоны
Кадр делится на три равные по количеству пикселей части: тени, полутона, света. По перцентилям, а не по фиксированным порогам яркости.
Разница принципиальная. При фиксированном пороге «тени = светлота ниже 0.33» на кадре в высоком ключе теней не окажется вовсе, а на тёмном кадре в тени попадёт почти всё. Перцентили дают осмысленный результат на любом материале: тени — это самая тёмная треть данного кадра.
Дополнительно исключаются крайние значения: выбитый в ноль чёрный и клиппинг в белое. Обычно это леттербокс и пересветы, а не тональная информация.
Как читать строку тональности
Формат: «Тени — петролевый, света — карамельный. Классический сплит-тонинг».
Названия зон берутся из того же справочника, что и палитра. Приставок «тёплый» и «холодный» нет — они уже заложены в сами названия.
Фраза «Классический сплит-тонинг» добавляется, когда тени и света противоположны по температуре. Это признак осознанной цветокоррекции: в природе такое сочетание встречается редко, обычно его создают намеренно.
Если тени или света нейтральны, так и написано — «нейтральные». Это тоже информация: грейд не трогал эту зону.
Раздел «Похоже на грейд» — что распознаётся
Чёрно-белый. Цветных пикселей меньше 2%. Кадр ахроматический по сути.
ЧБ с цветным акцентом. Цветных пикселей меньше 12%, но среди них есть по-настоящему насыщенный кластер — хрома выше 0.09. Классический приём: нейтральное изображение с одним ярким пятном.
Teal & Orange. Самая узнаваемая схема современного кино. Определяется двумя независимыми путями: либо палитра содержит крупный тёплый и крупный бирюзовый блок, либо тени холодные, а света тёплые. Два пути нужны, потому что бирюза может жить и в тенях, и в полутонах.
Неон / киберпанк. Пурпурный плюс бирюзовый на тёмном фоне при высокой насыщенности.
Bleach bypass. Почти обесцвеченный кадр с очень высоким контрастом. Имитация плёночного процесса с пропуском отбеливания.
Обесцвеченный, почти монохром. Низкая насыщенность, тёмный кадр.
Day for night. Тёмный кадр с синим сдвигом — приём съёмки ночи днём.
Золотой час. Светлый кадр с тёплыми оттенками и без холодных.
Пастель, высокий ключ. Светло и малонасыщенно.
Сепия / винтаж. Тёплые оттенки, приглушённая насыщенность, без холодных.
Земляные тона. Жёлто-зелёный диапазон, низкая насыщенность.
Сплит-тонинг. Тени и света противоположны, но не подходят под Teal & Orange.
Сдержанный, малонасыщенный и Натуралистичный — варианты по умолчанию, когда специфических признаков нет.
Что это не значит
Это не готовый LUT-файл. Инструмент называет тип грейда по цветовым признакам, но не генерирует .cube и не воспроизводит кривые.
Ценность в другом: вы получаете название направления. Дальше можно искать пресеты по этому названию, настраивать вручную в видеопрограмме или использовать его в промпте для нейросети.
Проверки идут по порядку, и срабатывает первая подошедшая. Поэтому кадр может подходить под два типа, но показан будет один — более специфичный.
Часть 7. Промпт для нейросети
Из чего собирается
Промпт строится из пяти блоков:
- Сцена — то, что вы вписали (или не вписали) в поле «Что генерировать»
- Палитра — доминанта, акценты, дополнения с названиями, HEX и долей
- База — диапазон нейтральных тонов от светлого к тёмному
- Схема и LUT — тип цветовой схемы и распознанный грейд
- Характеристики — ключ, контраст, насыщенность, тональность
Пример готового результата:
Портрет женщины фотография. Цветовая палитра: преобладает угольный (#040312) — 11%, с акцентами тёмно-синий (#242946) — 9% и петролевый (#2F6078) — 7%; дополняют лососевый (#E3788C) — 5%, пыльный синий (#59969D) — 4%, песочный (#E2CBBF) — 3%, пыльная роза (#A13E6C) — 3%, светло-жёлтый (#FBD219) — 2%. Нейтральная база от серебристый (#9AA19C) до угольный (#03030D), 54%. Из них чёрный — 48%. Тетрадная цветовая схема. LUT: Day for night. Низкий ключ, высокий контраст, умеренная насыщенность. Тени — угольный, света — серо-бежевый.
К этому промпту ещё вернёмся ниже (Часть 10. Практические сценарии). Этот промпт будет работать на реальной задаче в качестве примера.
Три режима промпта
Формулировка перестраивается в зависимости от того, сколько в изображении цвета. Решает доля цветных пикселей от всего изображения.
Цветной режим — больше 40% цветных пикселей. Стандартный формат:
«Цветовая палитра: преобладает петролевый (#175C63) — 34%, с акцентами терракотовый (#C1652F) — 18%...»
Проценты абсолютные — доля от всего изображения, а не от палитры.
Смешанный режим — от 12% до 40%. Описание начинается с нейтральной базы, потому что именно она задаёт характер:
«Цветовая палитра: преимущественно нейтральная, 74% — нейтральные тона, от светло-серого (#C4C4CA) до угольного (#121214). Цветные акценты занимают 26%: ...»
Почти чёрно-белый режим — меньше 12%. Нейтрали описываются первыми и подробно, цветной акцент называется отдельно с указанием реальной доли:
«Цветовая палитра: почти чёрно-белая, 99% — нейтральные тона, от почти белого (#EFEFEF) до чёрного (#000000). Единственный цветной акцент — красный (#E8312A), около 1%.»
Все три режима начинаются одинаково — со слов «Цветовая палитра».
Как описываются нейтрали
В цветном режиме нейтрали упоминаются одной строкой с указанием доли — «Нейтральная база от серо-бежевого (#8C837A) до угольного (#121214), 22%». Если нейтралей меньше 5%, строка не выводится вовсе.
В смешанном и чёрно-белом режимах нейтрали идут первыми и описываются диапазоном: от самого светлого значимого тона к самому тёмному. Для чёрно-белого изображения это принципиально — пара «белый — чёрный» и есть его палитра, одним цветом она не передаётся.
Отдельно выводятся доли белого и чёрного, если они занимают заметную часть изображения: «Из них белый — 34%, чёрный — 12%». Диапазон «от белого до чёрного» говорит только о крайних точках, но не о том, что треть изображения — пустой белый фон. Генератору эта разница важна.
Учитываются только диапазоны с долей от 2%. Случайные единичные пиксели в описание не попадают.
Гибридный формат
Цвета указаны и названием, и HEX-кодом. Это сделано намеренно.
Модели, работающие с текстом, понимают «петролевый» лучше, чем #175C63 — название несёт смысл, код не несёт ничего. Но некоторые системы умеют читать коды и воспроизводят оттенок точнее. Гибридный формат покрывает оба случая.
Поле «Что генерировать»
Необязательное. Оставьте пустым — промпт начнётся сразу с «Цветовая палитра:», и вы допишете сцену сами.
Пять фраз под полем подставляют типовые сцены. Они не привязаны к содержимому изображения — это просто заготовки, чтобы не печатать вручную.
Переключатель RU / EN
Меняет язык всего промпта: названия цветов, схему, характеристики и название грейда. Английская версия использует общепринятые термины — complementary warm—cool color scheme, low-key lighting, high contrast.
Переключение мгновенно перестраивает текст. Промпт серии тоже обновляется.
Сколько цветов попадает в промпт
В промпт попадают все цвета палитры — ровно столько, сколько выставлено ползунком «Цветов в палитре» (от 3 до 8).
Исключение — почти чёрно-белый режим. Там из промпта убираются кластеры с очень низкой насыщенностью: это не цвет, а серый с лёгким отливом от антиалиасинга. Он уже описан в блоке нейтралей и только зашумил бы описание.
Как адаптировать под разные генераторы
Для чат-моделей промпт подходит целиком. Развёрнутое описание воспринимается корректно (тестировано для Seedream, ChatGPT Image, NanoBanana, Qwen, Muse, Wan).
Для генераторов с коротким промптом сократите: оставьте описание палитры и строку схемы с LUT, уберите тональность и характеристики. Либо уменьшите число цветов ползунком до 4–5 — промпт станет короче сам.
Для дорисовки и редактирования используйте только блок палитры — остальное будет конфликтовать с существующим изображением. Для усиления эффекта можете экспортировать палитру и закинуть в ИИ (опционально).
Но есть нюанс
Промпт задаёт цветовое направление, а не копирует изображение. Композиция, свет, ракурс и точные оттенки не воспроизводятся. Нейросеть создаёт новое изображение в похожей цветовой логике. Используйте этот инструмент и руководство по Color Script как помощник.
Если нужна точная копия цвета — используйте экспорт палитры и корректируйте цвета в ручную в Photoshop.
Часть 8. Колор-скрипт для серии
Что такое колор-скрипт
Приём из анимации. В Pixar и студии Ghibli колор-скрипт рисуют до начала производства: последовательность миниатюр, где каждая передаёт цветовое настроение сцены. Задача — выстроить эмоциональную кривую фильма через цвет, а не через сюжет.
Здесь вы получаете колор-скрипт обратной разработкой — из готового материала.
Как загрузить серию изображений
Вкладка «Колор-скрипт» → кнопка «Добавить кадры». Можно выбрать несколько файлов сразу или добавлять по одному.
Ограничение — от 2 до 6 кадров. Меньше двух не даёт последовательности, больше шести превращает линию в неразличимую полоску.
Каждый кадр можно удалить крестиком. Кнопка «Очистить» убирает всё.
Три результата
Линия колор-скрипта. Вертикальные полосы по одной на кадр, слева направо. Высота каждого цвета в полосе — его доля. Цвета внутри полосы упорядочены по светлоте: светлое сверху, тёмное снизу.
Читается как график: видно, нарастает ли холод к финалу, вспыхивает ли акцент в середине, держится ли тон ровно.
Общая палитра серии. Не среднее арифметическое, а повторная кластеризация: центры всех кадров взвешиваются по долям и кластеризуются заново. Результат — цвета, которые действительно держат сцену вместе.
Промпт для серии. Без привязки к конкретному кадру и без поля сцены — чтобы генерировать несколько изображений в едином ключе.
Всё это можно скачать на одном листе кликнув внизу на кнопку «Скачать колор-скрипт PNG».
Отличия расчёта от одиночного кадра
Для серии параметры фиксированы: 5 цветов на кадр, обрезка полос включена, телесные тона не учитываются. Настройки со вкладки «Анализ» на серию не влияют.
Это сделано для сопоставимости: кадры должны разбираться по одинаковым правилам, иначе линия колор-скрипта покажет разницу в настройках, а не разницу в цвете.
Что грузить в серию
Работает хорошо: кадры одной сцены, кадры одного эпизода, серия фотографий с одной съёмки, раскадровка проекта.
Работает плохо: случайные картинки без связи. Общая палитра получится, но смысла в ней не будет — это усреднение несвязанных данных. Если, конечно, не преследуете иную цель.
Часть 9. Экспорт
Карточка разбора PNG
Ширина 2400 px. Содержит кадр, цветовой круг, вердикт по схеме, грейд, тональность, ленту пропорций, плашки палитры и промпт.
Готовый слайд для презентации или пост для соцсетей — всё в одном файле.
Круг в карточке рисуется в том режиме, который выбран в интерфейсе. Промпт — в выбранном языке.
Палитра PNG
Ширина 2800 px. Только плашки с HEX, названиями и долями. Без кадра и без круга.
Удобно приложить к техническому заданию или отправить клиенту на согласование.
Колор-скрипт PNG
Ширина 3200 px. Все кадры серии, лента пропорций под каждым, линия колор-скрипта и общая палитра.
Промпт в этот файл не выводится намеренно — он остаётся в интерфейсе с кнопкой копирования. Причина в том, что длина промпта непредсказуема, и вёрстка файла ломалась бы на длинных вариантах.
Код палитры — четыре формата
Список HEX — просто коды по одному в строке. Для вставки куда угодно.
CSS-переменные — готовый блок :root с —color-1 до —color-N. Копируется в проект как есть.
SCSS-мапа — структура $palette с ключами c1, c2. Для препроцессорных проектов.
JSON — полные данные: HEX, доля, координаты OKLCH, названия на двух языках, схема с процентом уверенности, грейд, нейтрали. Формат для передачи в другие инструменты или для архива проекта.
Ограничение CORS
Если изображение загружено по прямой ссылке с другого домена, браузер может заблокировать чтение пикселей из соображений безопасности. Инструмент это обрабатывает и показывает сообщение.
Часть 10. Практические сценарии
Генерация изображений в заданной палитре
Задача: получить серию картинок в едином цветовом ключе.
- Загрузите референс
- Переходите во вкладку Промпт. Впишите свою сцену в поле «Что генерировать» — или оставьте пустым
- Скопируйте промпт
Для второй и последующих генераций меняйте только описание сцены, цветовую часть оставляйте без изменений
Для целой серии используйте вкладку «Колор-скрипт»: загрузите 3–4 референса, получите общий промпт без привязки к конкретному кадру.
Если ИИ генератор игнорирует цвета — используйте другую нейронку или сократите промпт до палитры и схемы. Длинные описания некоторые модели обрабатывают выборочно, и цветовая часть может потеряться.
Вот такие примеры можно получать из одного изображения:
Это загруженное изображение. Переходим в вкладку Промпт и копируем содержимое. Дальше подставляем в начало промпта то, что хотим. Используем этот промпт в любой нейронке. И получаем результаты.
Промпт: Цветовая палитра: преобладает угольный (#040312) — 11%, с акцентами тёмно-синий (#242946) — 9% и петролевый (#2F6078) — 7%; дополняют лососевый (#E3788C) — 5%, пыльный синий (#59969D) — 4%, песочный (#E2CBBF) — 3%, пыльная роза (#A13E6C) — 3%, светло-жёлтый (#FBD219) — 2%. Нейтральная база от серебристый (#9AA19C) до угольный (#03030D), 54%. Из них чёрный — 48%. Тетрадная цветовая схема. LUT: Day for night. Низкий ключ, высокий контраст, умеренная насыщенность. Тени — угольный, света — серо-бежевый.
Портрет женщины фотография
Сделай этот натюрморт в этих цветах (в инпут картина Сальвадора Дали)
Аниме молодая женщина на пляже
Векторная иллюстрация белого медведя
Гипертрофированная эмоция молодой женщины с экстрим ракурсом
Эпичный постер в стиле игры Escape from Tarkov
Эпичная битва трансформеров
Персонаж в стиле Mortal kombat 3 ultimate
Разбор референса для цветокоррекции
Задача: понять, как устроен грейд в понравившемся кадре.
- Загрузите кадр, оставьте обрезку полос включённой
- Если в кадре человек крупным планом — не включайте телесные тона: интересует грейд, а не цвет кожи
- Поставьте 5–6 цветов
- Смотрите в первую очередь на тональность, а не на палитру: она показывает направление сдвига в тенях и светах
- Раздел «Похоже на грейд» даёт название приёма
- Переключите круг в режим Hue × Светлота — станет видно, в каких тонах живёт каждый цвет
Что делать дальше. Название грейда — поисковый запрос для готовых LUT. Тональность — конкретная инструкция для колор-вилс.
Сборка палитры для дизайн-системы
Задача: получить работающий набор цветов из мудборда.
- Загрузите ключевое изображение
- Поставьте 4–5 цветов — для интерфейса больше не нужно
- Обратите внимание на блок «База — нейтрали»: это ваши фоны и подложки
- Цвета из основной палитры — акценты и кнопки
- Смотрите на схему: она подскажет, как расширять палитру дальше
- Экспортируйте в CSS-переменные
Как расширять осмысленно. Если определена комплементарная схема, третий цвет берите рядом с одним из двух главных, а не в произвольном месте круга. Если триадная — у вас уже есть три опорные точки, добавляйте оттенки внутри них.
Анализ собственного портфолио
Задача: понять, есть ли у ваших работ узнаваемый цветовой почерк.
- Отберите 5–6 своих лучших работ
- Загрузите во вкладку «Колор-скрипт»
- Посмотрите на общую палитру серии и линию
Как интерпретировать. Если общая палитра собранная — у вас есть стиль, и его стоит осознать и усилить. Если это мешанина несвязанных оттенков — работы не читаются как серия. Для портфолио это минус: клиент не понимает, что получит.
Проверка соответствия брендбуку
Задача: убедиться, что макет держится в фирменных цветах.
- Загрузите макет
- Поставьте количество цветов равным количеству цветов в брендбуке
- Сравните HEX из палитры с эталонными
На что смотреть. Точного совпадения не будет — алгоритм даёт центр кластера, а не пипетку. Но если фирменный синий вышел заметно другим, значит в макете он смешался с чем-то ещё или прозрачность съела чистоту.
Полезнее смотреть на доли: если акцентный цвет занимает 40% вместо запланированных 10%, макет перегружен.
Часть 11. Частые ошибки
«Палитра не похожа на то, что я вижу»
Вероятная причина: в кадре доминирует область, которую вы не замечаете. Большое небо, стена, пол.
Решение: наведите курсор на непонятную плашку — подсветка покажет, где этот цвет. Часто оказывается, что он действительно занимает половину кадра.
«Схема определилась с низкой уверенностью»
Это нормально. Большинство реальных изображений не построены по теории цвета. Низкий процент — информация о том, что кадр не укладывается в классическую модель, а не ошибка.
Если нужна более чёткая схема: уменьшите количество цветов до 3–4. Мелкие кластеры перестанут размывать картину.
«В палитре цвет с долей 0%»
Причина: цветов больше, чем реальных цветовых объектов в кадре. Алгоритм создал кластер там, где ничего нет.
Решение: уменьшите значение ползунка.
«Тени определились как нейтральные, хотя они цветные»
Проверьте обрезку полос. Если галка снята, а в кадре есть леттербокс, чёрные поля попадают в тени и делают их нейтральными.
«При наведении подсвечиваются волосы вместо лица»
Так и должно быть. Инструмент не распознаёт объекты. Светлые волосы, тёплый свет и кожа могут иметь практически одинаковый цвет — алгоритм объединяет их в один кластер, потому что в цветовом пространстве они рядом.
«В палитре есть цвет, но в промпт он не попал»
Проверьте строку соотношения под лентой пропорций. Если кадр почти чёрно-белый, в промпт идут только по-настоящему насыщенные акценты — не более двух. Слабонасыщенные оттенки считаются вариациями серого и описываются в блоке нейтралей.
Это сделано намеренно: без фильтра цветной отлив от антиалиасинга вытеснял бы настоящий акцент.
Если фильтр отсёк нужный цвет — например, у вас выцветшая пастель на сером фоне и она действительно важна — уменьшите количество цветов в палитре до 3–4. Кластеры укрупнятся, и насыщенность оставшихся вырастет.
«Промпт называет кадр чёрно-белым, хотя цвет есть»
Значит, цветных пикселей меньше 12% от кадра. Посмотрите на строку соотношения — она покажет точную цифру.
Формулировка корректна: если 95% изображения нейтрально, для генерации это чёрно-белый кадр с акцентом, а не цветной кадр. Промпт описывает то, что увидит зритель.
«Два цвета называются одинаково»
Справочник содержит 150 якорей. Если два оттенка палитры лежат близко, оба находят ближайшим один якорь. HEX-коды при этом разные и точные — на работу это не влияет.
Обходной путь: уменьшите количество цветов, чтобы близкие оттенки слились в один кластер.
«Не работает Ctrl + V»
Кликните один раз внутрь области инструмента и повторите. Виджет реагирует на вставку только когда фокус внутри него — иначе он перехватывал бы вставку на всей странице.
«Экспорт не скачивается»
Если изображение загружено по прямой ссылке с другого домена, браузер блокирует чтение пикселей. Скачайте изображение на компьютер и загрузите файлом.
Часть 12. Словарь терминов
OKLab — цветовое пространство, разработанное в 2020 году. Перцептивно равномерное: равные расстояния в нём означают равную видимую разницу. Используется в CSS Color Level 4.
OKLCH — то же пространство в полярных координатах: светлота, насыщенность, оттенок. Удобнее для человека.
Светлота (L) — от 0 до 1. Не то же самое, что яркость в RGB: учитывает особенности восприятия.
Насыщенность, хрома © — насколько цвет далёк от серого. В OKLab обычно от 0 до 0.3.
Оттенок (H) — угол на цветовом круге от 0 до 360°.
Кластеризация, k-means — метод группировки. Все пиксели разбиваются на группы так, чтобы внутри группы цвета были похожи, а между группами различались.
Нейтрали — цвета с насыщенностью ниже порога 0.035. Визуально серые, чёрные, белые.
Доля цветных пикселей — какую часть кадра занимают ненейтральные цвета. Показана в строке под лентой пропорций, определяет режим построения промпта.
Цветной отлив — слабая насыщенность на границах серого от антиалиасинга или компрессии. В палитре виден, в промпт не попадает.
Леттербокс — чёрные полосы по краям кадра при несовпадении пропорций.
Грейд — результат цветокоррекции, цветовое решение материала.
LUT — таблица преобразования цвета, файл с готовым грейдом.
Сплит-тонинг — приём, при котором тени и света окрашиваются в противоположные по температуре оттенки.
Низкий ключ / высокий ключ — преобладание тёмных или светлых тонов.
Teal & Orange — доминирующая схема современного кино: холодный фон, тёплая кожа.
Комплементарные цвета — противоположные на цветовом круге.
Колор-скрипт — последовательность цветовых миниатюр, задающая эмоциональную кривую произведения.
Часть 13. Заключение — полное руководство по Color Script
Руководство описывает всё, что инструмент умеет на версии 2.3.1. Функциональность развивается — следите за номером версии в правом верхнем углу виджета и списком обновлений.
О сайте
Индивидуальный коммерческий дизайн «под ключ» — соц, сети, уникальные обложки, маркетплейсы и портфолио.
© Copyrights, 2026. Все права защищены