Utilore

Генератор палитры цветов

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

Схема

Нажмите на образец, чтобы скопировать код

    Палитра по фотографии

    Фотография никуда не уходит — её читает сам браузер.

      Как пользоваться

      1. Введите код цвета или откройте выбор — палитра перерисовывается сразу.
      2. Переключайте схемы: дополнительный стоит напротив по кругу, триада делит его на три.
      3. Нажмите на образец, чтобы скопировать код, или скопируйте весь набор CSS-переменными.
      4. Чтобы взять цвета с фотографии, выберите картинку — её читает ваше же устройство.

      Полезно знать

      Откуда взялись углы

      Схема сочетания — не вопрос вкуса, а геометрия на цветовом круге. Дополнительный цвет стоит ровно напротив, на 180°; триада делит круг на три равные доли по 120°; аналогичные — соседи в пределах тридцати градусов. Тулза поворачивает оттенок, оставляя насыщенность и светлоту прежними, поэтому спутники выходят такими же яркими и такими же глубокими, как исходный цвет.

      Почему с фотографии берутся настоящие цвета, а не грязь

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

      Частые вопросы

      Какую схему брать для сайта?

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

      Как перенести палитру в код?

      Скопируйте блок CSS-переменных под образцами и вставьте в свои стили. Имена выходят вида --color-1 … --color-6 — в чужом проекте это читается лучше, чем ряд шестнадцатеричных чисел.

      Моя фотография куда-то отправляется?

      Нет. Картинка раскодируется на странице и перед подсчётом уменьшается до 160 пикселей — ничего не уходит с устройства, а ответ появляется сразу.

      Почему ряд тёмных оттенков не заканчивается чёрным?

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

      Похожие инструменты