Начните с одного цвета и стройте комплементарные, аналоговые, триадные и другие гармонии — затем экспортируйте в CSS, Tailwind v4, SVG или PNG.
Гид по теории цвета
Круг располагает оттенки по окружности, и отношения становятся пространственными. Дистанция — это контраст, соседство — спокойствие. Всё ниже интерактивно: покрутите круг выше, и идеи усвоятся быстрее.
Совет: делитесь любым результатом — URL всегда хранит базу, гармонию и яркость.
Одного тона интерфейсам всегда мало. Мешайте с чёрным ради теней (заголовки, ховеры), с белым — ради светлых тонов (фоны, модалки), а с серым — ради полутонов (приглушённый текст, рамки).
Индиго от тени к свету. Та же логика движет каждой палитрой выше.
В классическом круге RYB красный, жёлтый и синий — первичные; их смесь даёт оранжевый, зелёный и фиолетовый. На экране мы смешиваем свет (RGB), поэтому инструмент считает в HSL/HSV — тот же круг, настроенный под пиксели.
Twelve stops around the disc; every other color contains a trace of a primary.
Ease Colors — бесплатный цветовой круг онлайн для дизайнеров и разработчиков, которым нужен надёжный цвет без выхода из браузера. Выберите базовый цвет на интерактивном круге-подборщике, просмотрите шесть гармоний сразу и скопируйте готовые к продакшену коды HEX, RGB, HSL или OKLCH. Ничего никуда не загружается, регистрироваться не нужно, а каждый результат получает ссылку, которая точно восстанавливает ваш базовый цвет, гармонию и яркость. Встроенная шкала растягивает каждый базовый цвет от светлого оттенка к тёмному, а вся страница управляется с клавиатуры — с видимым фокусом на каждом шаге.
Цветовой круг — это круговая диаграмма оттенков, где цвета расположены так, что отношения становятся пространственными: соседние цвета успокаивают, противоположные создают напряжение. Классический круг основных цветов с уроков рисования смешивает красную, жёлтую и синюю краски, а RGB-круг на вашем экране смешивает свет. Этот инструмент считает каждую гармонию в пространстве HSV/HSL, настроенном на пиксели, а не на пигмент. Тяните точку по диску, чтобы задать тон, к краю — для насыщенности, и вращайте внешнее кольцо яркости, чтобы провести один тон от светлого фона к тёмному тексту. Поскольку диск всегда рисуется на полной яркости, маркеры остаются распределёнными, и их можно перетаскивать даже при почти чёрных или почти белых палитрах — геометрия никогда не схлопывается на краях.
Этот цветовой круг онлайн — одновременно полноценный онлайн-подборщик цвета и цветовой инструмент:
Ищете направление? Нажмите Shuffle в галерее цветовых палитр для случайного выбора из 400+ отобранных наборов.
Перед публикацией запустите симуляцию дальтонизма, чтобы увидеть протанопию, дейтеранопию, тританопию и ахроматопсию, и держите текст читаемым благодаря подписям с автоподбором контраста на каждой полосе.
Каждый подборщик цвета на этой странице говорит на четырёх форматах. Поле HEX принимает любой код вроде #EDEA37, RGB-подборщик читает тройки вида rgb(99, 102, 241), а HSL плюс OKLCH покрывают перцепционную равномерность, недоступную одному RGB. Фронтенд-команды получают готовый HTML-подборщик- и CSS-подборщик-процесс: экспортируйте CSS-переменные, токены темы Tailwind v4, объект конфигурации Tailwind v3, JSON для Figma или просто коды. Встроенная экранная пипетка (EyeDropper) снимает любой пиксель вашего монитора, а точки на круге выбора остаются draggable при любой яркости. Этот онлайн-подборщик цвета бесплатен, а экспорты с альфа-каналом покрывают каждый RGBA-сценарий. Пользовательский режим замораживает любой сгенерированный набор в редактируемый вручную список: осветлите или затемните свотч, перетащите для переупорядочивания, вставьте смешанную середину или растяните любой край — каждое изменение мгновенно отражается в ссылке.
Фотографы и бренд-дизайнеры обращаются к подборщику цвета из изображения, чтобы заимствовать палитры из реального мира. Загрузите фото — или вставьте URL картинки — и подборщик из изображения покажет лупу с пиксельной сеткой и прицелом, чтобы считать ровно тот пиксель, на который вы указываете, даже при зуме 800%. Зафиксируйте цвет, скопируйте его как HEX, RGB, HSL или OKLCH и отправьте на круг одним кликом. Настройте размер извлекаемой палитры от двух до десяти цветов, скачайте полосу как PNG или сохраните в хранилище браузера, чтобы открыть позже. Каждое изображение, которое вы открываете, остаётся на вашем устройстве — ничего никуда не загружается.
Когда одного свотча мало, генератор цветовых палитр за секунды строит готовую палитру из изображения. Он оценивает пиксели по частоте и насыщенности, отфильтровывает почти-дубликаты и упорядочивает победителей по тону — от двух до десяти цветов, которые можно переупорядочивать, расширять и удалять. Ретушёры портретов оценят отдельные наборы тонов кожи рядом с пастельными, синими и зелёными коллекциями. Сохраняйте избранное в хранилище браузера, скачивайте любую цветовую палитру как PNG или SVG и экспортируйте токены для передачи. Перетаскиваемые ручки едут по изображению в своих точках съёма — повторный забор цвета становится перетаскиванием, а не гаданием.
Комплементарный цветовой круг спаривает тона через 180° для максимального напряжения — оранжевый против синего, фиолетовый против жёлтого. Полоса комплементарных цветов помечает ваш базовый цвет чёрной точкой, чтобы было точно видно, какой свотч оставить кнопкам и ссылкам, пока доминирующий тон ведёт макет. Разделённые, триадные, тетрадные и квадратные повороты стоят рядом на панели гармоний как более мягкие или смелые альтернативы.
Двенадцать систем сезонного цветоанализа живут в галерее — по семнадцать палитр в каждой. Тёплые приглушённые брифы начинаются с палитры «Мягкая осень», а холодные приглушённые тянутся к палитре «Мягкое лето». Наборы «Осень» высокой теплоты служат осенним кампаниям и фуд-брендам, а палитра «Глубокая зима» даёт сияние драгоценных камней на почти чёрном для люкса и вечера. Светлые тёплые дизайны берут из палитры «Светлая весна», воздушный минимализм — из палитры «Холодное лето», а роскошную темноту — из палитры «Тёмная осень». Ледяной контраст принадлежит палитре «Холодная зима», яркое тепло — палитре «Тёплая весна», мягкие середины — палитре «Настоящее лето», а тихая роскошь — нейтральной палитре. Более широкие настроения лета, зимы, весны и осени дополняют 400+ наборов — каждый с копированием HEX, RGB, HSL и OKLCH в один клик.
Если вы пришли по запросу Adobe color wheel, Adobe color picker, Canva color wheel или Google color picker, вы уже знаете задачу: превратить один фирменный цвет в сбалансированный набор. Ease Colors покрывает то же поле — гармонии, коды HEX/RGB/HSL/OKLCH, съёмка из изображений и экспорт палитр — бесплатно в браузере, со ссылками, которыми можно делиться, и без аккаунта между вами и свотчами. Управление с клавиатуры в первую очередь, метки для скринридеров и режим уменьшения движения включены.
Откройте цветовой круг, попробуйте подборщик из изображения или пролистайте 400+ цветовых палитр. Ваша следующая палитра — в одном перетаскивании.
Кликните по любому свотчу. Перед копированием переключите формат HEX, RGB, HSL или OKLCH.
Нажмите «Скопировать ссылку». URL кодирует базовый цвет, гармонию и яркость.
Да. Каждый HEX, токен и экспорт — ваши, без указания авторства.
Цветовой круг — это круговая диаграмма, где оттенки расположены так, что отношения становятся пространственными: соседние цвета успокаивают, а противоположные создают напряжение. На уроках рисования учат красно-жёлто-синий круг для смешивания красок; экраны используют RGB-круг, смешивающий свет. Дизайнеры используют его, чтобы выбирать базовые цвета, строить гармонии и проверять контраст до того, как палитра попадёт в макет.
Начните с одного базового цвета — введите HEX-код, откройте системную палитру или снимите свой экран. Выберите гармонию — аналоговую, комплементарную или триадную, — затем подстройте яркость внешним кольцом, пока не сложатся тона фона, текста и акцентов. Скопируйте каждый свотч как HEX, RGB, HSL или OKLCH и вставьте коды в CSS, Tailwind или Figma.
Его главная цель — убрать гадание из сочетания цветов. Вместо подбора пар на глаз вы читаете геометрию: расстояние означает контраст, а соседство — спокойствие. Это даёт каждому интерфейсу ясную иерархию — один доминирующий тон, несколько поддерживающих и зарезервированный акцент, — чтобы кнопки, ссылки и заголовки оказывались там, где их ждёт глаз.
Дизайн-литература обычно перечисляет восемь: монохроматическая (один тон, много яркостей), аналоговая (соседи), комплементарная (противоположности), разделённо-комплементарная (база плюс два соседа её противоположности), триадная (треугольник), тетрадная или прямоугольная (две комплементарные пары), квадратная (четыре угла) и ахроматическая или нейтральная (чёрные, белые и серые). Этот инструмент покрывает шесть напрямую, плюс пользовательский режим для редактируемых вручную списков из двух–восьми цветов.
Тяните точку по диску: угол задаёт тон, а расстояние от центра — насыщенность. Тяните внешнее кольцо, чтобы задать яркость, не трогая тон и насыщенность. Можно также ввести точное HEX-значение, открыть системную коробку цветов или выбрать любой пиксель монитора экранной пипеткой — все пути ведут к одному расшариваемому базовому цвету.
Подборщик цвета превращает визуальный выбор в точное многоразовое значение. Он читает любой цвет как коды HEX, RGB, HSL или OKLCH, чтобы дизайнеры и разработчики говорили на одном языке: то, что вы кликаете, побитово идентично тому, что попадёт в CSS, Tailwind-токены или стили Figma, — без пристрелки оттенков на глаз.
Основные типы — круговые или дисковые подборщики (тон плюс насыщенность одним взглядом), слайдерные (каналы RGB или HSL), HEX-поля (прямые значения), пипетки или экранные подборщики (снимают ваш монитор), подборщики из изображений (лупа поверх фото) и библиотеки палитр (отобранные наборы вроде галереи 400+ здесь). Этот сайт объединяет все шесть в одном потоке.
Код цвета — это текстовое значение, описывающее ровно один цвет. HEX пишет его шестью шестнадцатеричными цифрами (#EDEA37); RGB перечисляет красный, зелёный и синий каналы; HSL — тон, насыщенность и яркость; OKLCH — более новый перцепционный формат, где равные числовые шаги выглядят одинаково разными. Все четыре описывают один свотч — формат меняет лишь то, как вы его читаете и правите.
Выберите цвет кругом, слайдером, HEX-полем или экранной пипеткой и скопируйте в формате, нужном проекту, — HEX для веба, RGB или RGBA для кода приложений, HSL для быстрых правок, OKLCH для перцепционной равномерности. Вставьте значение в таблицу стилей, конфиг Tailwind или дизайн-инструмент и сохраните ссылку, чтобы точный цвет позже был в одном клике.
Цветовая палитра держит все поверхности продукта в одном визуальном языке. Она раздаёт роли — фон, текст, акценты, состояния, — чтобы интерфейсы ощущались цельными, а не собранными из случайных свотчей. Хорошая палитра закладывает контраст и иерархию заранее, а значит — меньше правок читаемости и более сильный узнаваемый бренд.
Распространённые типы — монохроматические, аналоговые и комплементарные палитры, построенные геометрией круга; пастельные и неоновые, заданные энергией; сезонные под подтон кожи (от мягкой осени до нейтральных); брендовые, зафиксированные на фирменных цветах; и извлечённые, снятые с фотографий. Галерея здесь содержит их все — 400+ наборов в 60+ категориях.
Начните с одного базового цвета под настроение — тёплого и приглушённого, холодного и воздушного либо тёмного и драматичного. Расширьте его гармонией, затем проверьте результат так, как его встретят пользователи: контраст основного текста, акценты кнопок и симуляция дальтонизма для протанопии, дейтеранопии и тританопии. Если переживёт все три — делитесь ссылкой и публикуйте.