Почніть з одного кольору й будуйте комплементарні, аналогові, тріадні та інші гармонії — а потім експортуйте в 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) знімає будь-який піксель вашого монітора, а точки на колі вибору лишаються рухомими за будь-якої яскравості. Цей онлайн-підбирач кольору безкоштовний, а експорти з альфа-каналом покривають кожен 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+ категоріях.
Почніть з одного базового кольору під настрій — теплого й приглушеного, холодного й повітряного або темного й драматичного. Розширте його гармонією, потім перевірте результат так, як його зустрінуть користувачі: контраст основного тексту, акценти кнопок і симуляцію дальтонізму для протанопії, дейтеранопії та тританопії. Якщо переживе всі три — діліться посиланням і публікуйте.