Інструменти для роботи з кольором від ToolDeck дозволяють конвертувати між форматами кольорів, перевіряти коефіцієнти контрастності для доступності, генерувати палітри, створювати CSS-градієнти та шукати назви кольорів або класи Tailwind безпосередньо у браузері. Color Converter обробляє HEX, RGB, HSL та HSV в обох напрямках. Contrast Checker перевіряє відповідність стандартам WCAG 2.1 AA та AAA. Palette Generator створює комплементарні, аналогічні, тріадні та тетрадні схеми з будь-якого базового кольору. CSS Gradient Generator виводить готовий до копіювання код лінійних і радіальних градієнтів. Color Name Finder знаходить найближчу CSS-назву кольору для будь-якого значення, а Tailwind Color Finder зіставляє довільні кольори з утилітарними класами Tailwind. Всі інструменти працюють на стороні клієнта — жодні дані не надсилаються на сервер.
Що таке інструменти для роботи з кольором?
Інструменти для роботи з кольором — це утиліти, що допомагають розробникам і дизайнерам працювати з цифровими значеннями кольорів. Кожен колір на екрані зберігається у вигляді чисел: три канали для RGB (червоний, зелений, синій), шістнадцятковий триплет для CSS-скорочення або кутовий відтінок разом із насиченістю та яскравістю для HSL. Перетворення між цими представленнями вручну — повільний і схильний до помилок процес, особливо якщо потрібно також враховувати прозорість або новіші моделі на кшталт OKLCH.
Окрім конвертації форматів, робота з кольором включає тестування доступності, створення палітр і розробку градієнтів. WCAG 2.1 визначає мінімальні коефіцієнти контрастності (4.5:1 для звичайного тексту на рівні AA, 7:1 для AAA), які важко перевірити на око. Генерація гармонійних кольорових схем потребує точних розрахунків кутів на колірному колі HSL. CSS-градієнти вимагають правильного синтаксису для напрямку, зупинок кольору та резервних значень. Виконувати все це вручну в дизайн-системі з десятками токенів швидко стає виснажливим.
Інструменти для роботи з кольором автоматизують ці завдання. Вони приймають колір в одному форматі, виконують математичні обчислення та повертають потрібний результат — будь то конвертоване значення, вердикт про відповідність або невідповідність вимогам доступності, набір гармонійних зразків або CSS-фрагмент коду. Коли інструмент працює у браузері, ви також уникаєте завантаження конфіденційних токенів дизайну до сторонніх сервісів.
Чому варто використовувати інструменти для кольору на ToolDeck?
Інструменти для роботи з кольором від ToolDeck працюють повністю у вашому браузері. Жодні значення кольорів не покидають ваш пристрій, обліковий запис не потрібен, і кожен інструмент завантажується миттєво без встановлення розширень або десктопного програмного забезпечення.
🎨Конвертуйте формати за один крок
Вставте HEX-код і отримайте значення RGB, HSL та HSV одночасно. Не потрібно об'єднувати кілька конвертерів або пам'ятати формули перетворення.
🔒Зберігайте токени дизайну в приватності
Вся обробка відбувається на стороні клієнта. Кольори вашого бренду, нерозкриті рішення щодо палітри та значення внутрішньої дизайн-системи залишаються на вашому пристрої.
♿Перевіряйте доступність миттєво
Перевірте будь-яку пару кольорів переднього плану та фону за порогами WCAG 2.1 AA та AAA для звичайного та великого тексту. Отримайте точний коефіцієнт контрастності, а не лише мітку про відповідність або невідповідність.
⚡Копіюйте готові до використання результати
Кожен інструмент виводить значення, які можна вставити безпосередньо в CSS, конфігурацію Tailwind або поля введення інструментів дизайну. Переформатування не потрібне.
Сценарії використання інструментів для кольору
Ось шість поширених ситуацій, де інструменти для кольору від ToolDeck заощаджують час.
Підтримка дизайн-системи
При оновленні дизайн-системи ви часто отримуєте кольори у форматі HEX від дизайнера, але вам потрібен HSL для CSS-кастомних властивостей.
Color Converter перекладає між форматами, щоб ви могли заповнювати файли токенів без ручних обчислень.
Аудит доступності
Під час аудиту відповідності WCAG кожна комбінація тексту та фону повинна відповідати мінімальним коефіцієнтам контрастності.
Color Contrast Checker показує точний коефіцієнт та статус відповідності AA/AAA для звичайного та великого розмірів тексту.
Дослідження палітри бренду
Починаючи з одного кольору бренду, вам потрібні акцентні та нейтральні варіанти.
Color Palette Generator обчислює комплементарні, аналогічні, тріадні та тетрадні гармонії, щоб ви могли оцінити варіанти перед затвердженням палітри.
Стилізація фону CSS
Створення секції-герою або фону картки з градієнтом вимагає правильного CSS-синтаксису для кутів, зупинок кольору та префіксів вендорів.
CSS Gradient Generator дозволяє будувати градієнт візуально та копіювати код.
Міграція на Tailwind
При міграції проєкту на Tailwind CSS вам потрібно зіставити наявні значення HEX або RGB з найближчим утилітарним класом Tailwind.
Tailwind Color Finder знаходить найближчий збіг і показує відхилення, щоб ви могли вирішити, чи є наближення прийнятним.
Перевірка коду та документація
Під час перевірки коду сире HEX-значення на кшталт #708090 нічого не говорить на перший погляд.
Color Name Finder ідентифікує його як SlateGray, роблячи перевірки та документацію зрозумілішими.
Довідник по кольорових моделях CSS
CSS підтримує кілька кольорових моделей. Таблиця нижче містить зведену інформацію про шість найпоширеніших форматів, їх синтаксис та типові сценарії використання. Всі вони підтримуються Color Converter від ToolDeck.
| Модель | CSS-синтаксис | Канали | Діапазон значень | Типове використання |
|---|
| HEX | #rrggbb | Червоний, Зелений, Синій | 00–ff на канал | Найпоширеніший у CSS, передачі макетів дизайну, брендбуках |
| RGB | rgb(r, g, b) | Червоний, Зелений, Синій | 0–255 на канал | JavaScript canvas API, обчислені стилі, обробка зображень |
| HSL | hsl(h, s%, l%) | Відтінок, Насиченість, Яскравість | 0–360 / 0–100% / 0–100% | Токени дизайну, генерація тем, програмні відтінкові варіанти |
| HSV | N/A (не в CSS) | Відтінок, Насиченість, Значення | 0–360 / 0–100% / 0–100% | Вибір кольорів (Photoshop, Figma), апаратне калібрування кольору |
| OKLCH | oklch(L C H) | Яскравість, Хрома, Відтінок | 0–1 / 0–0.4 / 0–360 | Перцептуально рівномірні палітри (специфікація CSS Color Level 4) |
| Named | напр. slategray | Відображається на RGB внутрішньо | 148 попередньо визначених назв | Прототипування, читабельний код, швидкі демонстрації |
CSS Color Level 4 (W3C) також визначає функції lab(), lch() та color(). HEX та RGB залишаються найширше підтримуваними у браузерах та інструментах дизайну.
Як вибрати правильний інструмент для кольору
Кожен інструмент для кольору вирішує різну задачу. Скористайтеся посібником нижче, щоб знайти потрібний для вашого завдання.
- 1
Якщо вам потрібно конвертувати колір між форматами HEX, RGB, HSL або HSV → Color Converter - 2
Якщо вам потрібно перевірити, чи відповідає пара кольорів тексту та фону стандартам доступності WCAG → Color Contrast Checker - 3
Якщо вам потрібно згенерувати набір гармонійних кольорів з одного базового кольору → Color Palette Generator - 4
Якщо вам потрібно побудувати лінійний або радіальний CSS-градієнт та отримати код → CSS Gradient Generator - 5
Якщо вам потрібно знайти зрозумілу CSS-назву, найближчу до заданого значення кольору → Color Name Finder - 6
Якщо вам потрібно зіставити довільний колір з найближчим утилітарним класом Tailwind CSS → Tailwind Color Finder
Всі шість інструментів приймають введення у кількох форматах. Якщо ви не впевнені, в якому форматі ваш колір, почніть з Color Converter, який автоматично розпізнає нотації HEX, RGB, HSL та HSV.
Поширені запитання
У чому різниця між форматами кольорів HEX та RGB?
HEX і RGB представляють один і той самий колірний простір. HEX-код на кшталт #ff6600 — це шістнадцяткове кодування трьох каналів RGB: ff = 255 (червоний), 66 = 102 (зелений), 00 = 0 (синій). Різниця лише в нотації. HEX компактніший у CSS-таблицях стилів, тоді як RGB зручніший для програмного маніпулювання, оскільки кожен канал вже є десятковим цілим числом.
Коли слід використовувати HSL замість HEX або RGB?
HSL відокремлює відтінок (сам колір) від насиченості та яскравості. Це спрощує створення відтінкових варіантів: зафіксуйте відтінок, зменшіть яскравість для темнішого відтінку, збільшіть для світлішого. Дизайн-системи, що генерують світлі та темні теми з одного базового кольору, часто зберігають токени в HSL з цієї причини. CSS-кастомні властивості також добре поєднуються з HSL, оскільки дозволяють перевизначати окремі канали.
Який коефіцієнт контрастності вимагає WCAG 2.1 для тексту?
WCAG 2.1 рівень AA вимагає мінімального коефіцієнта контрастності 4.5:1 для звичайного тексту (нижче 18pt або 14pt жирного) та 3:1 для великого тексту (18pt+ або 14pt+ жирного). Рівень AAA підвищує ці пороги до 7:1 та 4.5:1 відповідно. Ці коефіцієнти розраховуються з відносної яскравості кольорів переднього плану та фону за формулою, визначеною в критерії успіху WCAG 2.1 1.4.3.
Скільки іменованих кольорів підтримує CSS?
CSS визначає 148 іменованих кольорів, успадкованих зі специфікацій SVG 1.1 та CSS3. Вони варіюються від поширених назв на кшталт red, blue та white до специфічних назв на кшталт MediumSlateBlue, PapayaWhip та LavenderBlush. Іменовані кольори відображаються на фіксовані значення RGB. Специфікація CSS Color Level 4 зберігає ті самі 148 назв і не додає нових. Браузери також розпізнають ключове слово transparent (еквівалент rgba(0,0,0,0)).
Чи можна використовувати кольори OKLCH у CSS сьогодні?
Так. Функція oklch() підтримується в Chrome 111+, Firefox 113+ та Safari 15.4+. OKLCH є частиною специфікації CSS Color Level 4, опублікованої W3C. Її головна перевага перед HSL — перцептуальна рівномірність: два кольори з однаковим значенням яскравості в OKLCH насправді виглядають однаково яскравими для людського ока, що не є правдою для HSL. Це робить OKLCH кращим вибором для генерації доступних палітр із рівномірною сприйманою яскравістю.
У чому різниця між HSL та HSV?
HSL та HSV обидва використовують циліндричне представлення з відтінком як кутом, але визначають яскравість по-різному. У HSL яскравість 50% — це чистий колір; 0% — чорний, 100% — білий. У HSV значення 100% — це чистий колір; 0% — чорний. HSV не має вбудованого способу досягти білого без зменшення насиченості. Дизайнери та вибірники кольорів (Photoshop, Figma) зазвичай використовують HSV, тоді як CSS використовує HSL нативно.
Як знайти клас Tailwind для довільного HEX-кольору?
Tailwind CSS поставляється з фіксованою палітрою приблизно з 220 класів кольорів (22 відтінки по 10 відтінків кожен, плюс чорний, білий та прозорий). Щоб знайти найближчий клас для заданого HEX-значення, потрібно обчислити евклідову відстань у перцептуальному колірному просторі (наприклад, CIELAB або OKLCH) між вашим кольором та кожним зразком Tailwind. Tailwind Color Finder на ToolDeck робить це автоматично та показує найближчий збіг разом із різницею кольорів, щоб ви могли оцінити прийнятність наближення.
Чи безпечно вставляти конфіденційні кольори бренду в онлайн-інструмент?
Це залежить від інструменту. Будь-який інструмент, що надсилає ваше введення на сервер, відкриває ці значення в мережевому трафіку та серверних журналах. Інструменти для кольору від ToolDeck працюють повністю у вашому браузері з використанням JavaScript на стороні клієнта. Жодні HTTP-запити не передають дані вашого кольору на жоден сервер. Ви можете перевірити це, відкривши вкладку «Мережа» у браузері під час використання інструменту. Для максимальної обережності ви також можете використовувати інструменти офлайн після початкового завантаження сторінки.