Генератор цветовых палитр
Генерирует гармоничные цветовые палитры на основе любого базового цвета. Поддерживает комплементарные, аналоговые, триадические и монохроматические схемы.
Complementary
#6366F1#F1EE63Analogous
#63ADF1#6366F1#A763F1Triadic
#6366F1#F16366#66F163Split Complement
#6366F1#F1A763#ADF163Tetradic
#6366F1#F163AD#F1EE63#63F1A7Monochromatic
#0F13AC#1D21EB#6366F1#A1A3F7#D0D1FBКак пользоваться этим инструментом
- 1
Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.
- 2
Watch the six scheme rows update instantly as you change the base color.
- 3
Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.
Что такое генератор цветовых палитр?
Теория цвета определяет гармоничные соотношения в зависимости от положения на цветовом круге. Комплементарные цвета располагаются на противоположных позициях (180°). Аналоговые — соседние (30°). Триадические схемы используют три равноудалённых цвета (120°). Этот инструмент рассчитывает каждую из них на основе выбранного вами базового цвета, давая отправную палитру, основанную на проверенной теории цвета.
Типичные сценарии использования
Picking a primary plus accent color for a website by reading the complementary pair off your brand color.
Building a calm, unified UI background-and-card scheme from the analogous row.
Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.
Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.
Exploring logo or illustration color combinations before committing in Figma or Illustrator.
Quickly grabbing hex codes for a CSS variable set without leaving the browser.
Часто задаваемые вопросы
Какая схема лучше всего подходит для веб-сайтов?▼
Похожие инструменты
Конвертер цвета (HEX/RGB/HSL)
Преобразует цвета между форматами HEX, RGB и HSL. Выберите цвет визуально или введите значения вручную.
Генератор CSS box-shadow
Визуально создавайте значения box-shadow в CSS. Предпросмотр в реальном времени и копирование сгенерированного CSS.
Генератор CSS-градиентов
Создавайте линейные и радиальные CSS-градиенты. Выбирайте цвета визуально и копируйте сгенерированный CSS.
Генератор кривых ускорения cubic-bezier
Создаёт кривые ускорения cubic-bezier для CSS. Включает стандартные предустановки.
Генератор CSS border-radius
Визуально создавайте сложные значения border-radius в CSS. Независимое управление каждым углом.
Генератор CSS clamp()
Генерирует плавные адаптивные значения CSS с помощью clamp(). Плавно масштабируется между минимальным и максимальным размерами в пределах диапазонов области просмотра.