: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. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Используйте палитру цветов или введите шестнадцатеричное значение, чтобы задать цвет, вокруг которого построена ваша палитра.
Переключитесь между оттенками и оттенками, монохроматические, комплементарные, аналогичные, триадные и тетрадные, чтобы увидеть различные скоординированные схемы.
Каждый образец показывает свое шестнадцатеричное, RGB и значение HSL. Щелкните образец, чтобы скопировать его, или скопируйте всю палитру в качестве пользовательских свойств CSS.
Используйте сгенерированные цвета для фонов, акцентов и текста в своем дизайне или таблице стилей, сохраняя гармонию в вашем пользовательском интерфейсе.
Оттенки и оттенки, монохроматические, дополняющие, аналогичные, триадные и тетрадные схемы охватывают все общие цветовые отношения
Каждый образец показывает все три формата, поэтому вы можете опустить правильное значение прямо в CSS, инструменты дизайна или код.
Экспортируйте всю палитру как :root пользовательские свойства, готовые вставить в таблицу стилей в виде маркера дизайна
Гармонии вычисляются в HSL, чтобы оттенки оставались равномерно расположенными, а шаги легкости выглядят сбалансированными, а не грязными
Pick colors and convert between HEX, RGB, and HSL formats
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.
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!