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

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

Хорошие цветовые комбинации следуют предсказуемым отношениям на цветном колесе HSL: дополнительные цвета расположены друг напротив друга, аналогичные цвета расположены рядом друг с другом, а триадные цвета равномерно расположены. Выработка этих вручную означает жонглирование углами оттенка и значениями легкости. Этот инструмент делает математику мгновенно и показывает результат, чтобы вы могли выбрать схему, которая работает.

Все работает на стороне клиента. Настройте базовый цвет, переключайте режимы, щелкните любую точку обзора, чтобы скопировать его HEX-код, или используйте Cosy CSS для экспорта всей палитры в качестве пользовательских свойств CSS. Нет учетной записи, нет загрузок, и он продолжает работать в автономном режиме после загрузки страницы.

Работающий пример показывает, как он работает как свадебный генератор цветовой палитры, с одним условием: нет свадебных предустановок, поэтому вы приносите цвет. Введите шалфейный зеленый, #9caf88, как базовый цвет и выберите Дополнительно. Четыре образца #c2ceb6, #9caf88, пыльная лаванда #9b88af и более глубокий #755e8d, и Copy CSS возвращает их как --color-100 к --color-400. для получения результата генератора пастельных цветовых палитр начните с бледной основы, такой как #a7c7e7: Аналоговый, Триадический и Тетрадический сохраняют свою легкость и насыщенность, поэтому каждый образец остается мягким.

Режимы гармонии происходят из соотношений цвет-колесо, вращающийся оттенок на фиксированные величины по кругу: 180 градусов для комплементарного, 120 для триадного и маленькие шаги для аналогичного. Эта математика выполняется в HSL, что удобно и не единообразно для восприятия. Легкость HSL обрабатывает желтый и синий цвета с одинаковым значением, как и свет, а для глаз - нет, поэтому триадный набор может выглядеть сбалансированным на бумаге и несбалансированным на экране. Проверьте любую палитру, которую вы планируете использовать для текста, на соответствие контроллеру контраста, а не доверяйте числам. Оттенки и оттенки создаются движущейся легкостью, сохраняя при этом оттенок и насыщенность, что поддерживает узнаваемую связь между семьей и делает их полезными в качестве набора переменных CSS.