Генератор цветовых палитр
Работает на устройстве. Ничего не отправляется.Всё происходит в браузере - ничего не загружается.
Цветов5
Совет: нажмите пробел, чтобы получить новую палитру.Гармония
Экспорт
:root {
--color-1: #264653;
--color-2: #2a9d8f;
--color-3: #e9c46a;
--color-4: #f4a261;
--color-5: #e76f51;
}Создавайте палитры по гармониям цветового круга или случайно, закрепляйте понравившиеся цвета и копируйте их как CSS-переменные, цвета Tailwind или JSON.
Нажмите «Сгенерировать» (или пробел), чтобы получить новую палитру. Закрепите цвета, которые хотите оставить, - остальные перестроятся вокруг них по гармонии цветового круга: соседние аналоговые, монохромная растяжка, комплементарные или раздельно-комплементарные противоположности, триады и тетрады - или полный случай с равномерно разнесёнными оттенками. Нажмите на hex-код, чтобы скопировать, или на цвет, чтобы выбрать свой. Экспортируйте как CSS-переменные, шкалу Tailwind или JSON, сохраните PNG или скопируйте ссылку на ту же палитру.
Частые вопросы
Что означают гармонии?
Это позиции на цветовом круге. Аналоговые цвета стоят рядом (спокойно), комплементарные - напротив (сильный контраст), раздельно-комплементарная берёт двух соседей противоположного цвета, триада - три цвета через 120°, тетрада - четыре через 90°. Монохромная держит один оттенок и меняет светлоту.
Как собрать палитру вокруг фирменного цвета?
Нажмите на первый цвет, выберите свой, закрепите и нажмите «Сгенерировать». Свободные ячейки заполнятся по выбранной гармонии, начиная с вашего цвета.
Хорошо ли читается текст на цветах?
Hex-подпись переключается между чёрным и белым - что контрастнее. Для основного текста проверьте точную пару в проверке контраста WCAG в наших инструментах для цвета.
Что-то сохраняется?
Текущая палитра запоминается на этом устройстве. Ссылка передаёт цвета после # в адресе - эта часть не отправляется на наш сервер.