:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}Что такое генератор цветовой палитры?
Генератор цветовой палитры превращает один базовый цвет в скоординированный набор цветов, используя правила гармонии цвета и колеса. Выберите начальный цвет и выберите режим - оттенки и оттенки, монохроматические, дополнительные, аналогичные, триадные или тетрадные - и инструмент вычисляет сбалансированную палитру со значением HEX, RGB и HSL для каждого пакета.
Хорошие цветовые комбинации следуют предсказуемым отношениям на цветном колесе HSL: дополнительные цвета расположены друг напротив друга, аналогичные цвета расположены рядом друг с другом, а триадные цвета равномерно расположены. Выработка этих вручную означает жонглирование углами оттенка и значениями легкости. Этот инструмент делает математику мгновенно и показывает результат, чтобы вы могли выбрать схему, которая работает.
Все работает в вашем браузере. Настройте базовый цвет, режимы переключения, щелкните любой образец, чтобы скопировать его значение, или экспортируйте всю палитру в качестве пользовательских свойств CSS. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Режимы гармонии происходят из соотношений цвет-колесо, вращающийся оттенок на фиксированные величины по кругу: 180 градусов для комплементарного, 120 для триадного и маленькие шаги для аналогичного. Эта математика выполняется в HSL, что удобно и не единообразно для восприятия. Легкость HSL обрабатывает желтый и синий цвета с одинаковым значением, как и свет, а для глаз - нет, поэтому триадный набор может выглядеть сбалансированным на бумаге и несбалансированным на экране. Проверьте любую палитру, которую вы планируете использовать для текста, на соответствие контроллеру контраста, а не доверяйте числам. Оттенки и оттенки создаются движущейся легкостью, сохраняя при этом оттенок и насыщенность, что поддерживает узнаваемую связь между семьей и делает их полезными в качестве набора переменных CSS.
Как использовать генератор цветовой палитры?
Выберите базовый цвет
Используйте палитру цветов или введите шестнадцатеричное значение, чтобы задать цвет, вокруг которого построена ваша палитра.
Выберите режим гармонии
Переключитесь между оттенками и оттенками, монохроматические, комплементарные, аналогичные, триадные и тетрадные, чтобы увидеть различные скоординированные схемы.
Скопируйте нужные цвета
Каждый образец показывает свое шестнадцатеричное, RGB и значение HSL. Щелкните образец, чтобы скопировать его, или скопируйте всю палитру в качестве пользовательских свойств CSS.
Применить палитру
Используйте сгенерированные цвета для фонов, акцентов и текста в своем дизайне или таблице стилей, сохраняя гармонию в вашем пользовательском интерфейсе.
Основные характеристики
Шесть режимов гармонии
Оттенки и оттенки, монохроматические, дополняющие, аналогичные, триадные и тетрадные схемы охватывают все общие цветовые отношения
HEX, RGB и HSL
Каждый образец показывает все три формата, поэтому вы можете опустить правильное значение прямо в CSS, инструменты дизайна или код.
Экспорт переменных CSS
Экспортируйте всю палитру как :root пользовательские свойства, готовые вставить в таблицу стилей в виде маркера дизайна
Точная цветовая шкала
Гармонии вычисляются в HSL, чтобы оттенки оставались равномерно расположенными, а шаги легкости выглядят сбалансированными, а не грязными
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
Comments
0 comments
No comments yet. Be the first to share your thoughts!