Інструменти кольору FREE
Обирайте, перетворюйте та створюйте кольори, палітри, шкали й градієнти - з контрастом за WCAG, доступними пропозиціями та симуляцією дальтонізму. Усе обчислюється у вашому браузері.
Вибір і перетворення
Усі записи
Технічні відомості
Контраст
APCA (чернетка, додаткова інформація)
APCA - це перцептивна модель контрасту, укладена для WCAG 3. Сьогодні вона не є вимогою відповідності й розходиться з WCAG 2 в обидва боки, тож показана як додаткова інформація і ніколи як зараховано чи незараховано.
Як це виглядає
Палітри
Які пари читабельні
Кожен колір як текст на кожному іншому. Число - це коефіцієнт контрасту за WCAG; AA - це 4,5:1 для звичайного тексту і 3:1 для великого тексту та елементів інтерфейсу.
Скопіювати палітру
Шкали
Одинадцять щаблів, побудованих в OKLCH, щоб стрибки виглядали рівномірно, а не просто були рівномірними числами. Результат має форму, яку утилітарний фреймворк очікує на місці шкали; це ряд цього інструмента, а не палітра якогось фреймворку.
Налаштувати ряд
Градієнти
Із зображення
Перетягніть сюди зображення або виберіть якесь
Воно читається в цій вкладці й ніколи не надсилається на сервер. Після виходу зі сторінки нічого не лишається.
Сприйняття кольору
Модель того, що втрачає пара кольорів за поширених форм дальтонізму, обчислена проєкцією Вієно, Бреттеля й Моллона. Це симуляція, а не фотографія того, що бачить конкретна людина.
Пари, які перестають розрізнятися
Узято з палітри. Перелічуються лише пари, помітно різні в нормальному зорі - два кольори, які й так схожі, є рішенням дизайну, а не знахідкою.
Кожне перетворення, кожна палітра й кожне значення контрасту на цій сторінці обчислюються у вашому браузері. Зображення, яке ви сюди перетягнете, читається на полотні в цій вкладці й ніколи не надсилається на сервер.
Що ці числа означають, а що ні
Обчислено тут, за опублікованими формулами
Перетворення відповідають CSS Color Level 4, включно зі справжньою передавальною кривою sRGB, а не її наближенням, а контраст - визначенню WCAG 2.2. Пара кольорів, що задовольняє вимогу контрасту, не робить сторінку доступною: контраст - один критерій успіху з багатьох, і саме його вимірює цей інструмент. Усе працює у вашому браузері, і нічого нікуди не надсилається.
FAQ
Чи надсилаються мої кольори або зображення кудись?
Ні. Кожне перетворення, кожна палітра, кожна шкала й кожне значення контрасту обчислюються у цій вкладці. Зображення читається тут на полотні й ніколи не завантажується на сервер; недавні кольори та ваша палітра лежать у власному сховищі цього браузера, і те й інше можна очистити.
Чому OKLCH, а не HSL?
Тому що світлість у HSL - це середнє каналів, а не те, що вимірює око. Поверніть відтінок у HSL на 120 градусів, і один із трьох результатів вийде помітно темнішим за інші; зробіть те саме в OKLCH, і всі три читатимуться як одна родина. Те саме стосується ряду відтінків: однакові кроки світлості HSL скупчуються на кінцях. HSL усе одно показано, бо в ньому написано дуже багато коду.
Чи означає пройдена перевірка контрасту, що сторінка доступна?
Ні, і формулювання тут обережні саме через це. Пара кольорів задовольняє вимогу до контрасту. Контраст - це один критерій успіху з багатьох: порядок фокуса, підписи, шляхи з клавіатури, рух і структура є окремими, і сторінка з бездоганним контрастом усе одно може бути непридатною. Використовуйте це, щоб закрити питання кольору, а не питання загалом.
Що таке APCA і чому він в окремій панелі?
Це перцептивна модель контрасту, укладена для WCAG 3. Вона моделює, як контраст справді читається за певного розміру й насиченості шрифту, чого WCAG 2 не робить, але це чернетка, і сьогодні за нею нічого не оцінюють. Поставити її поруч із висновками WCAG як рівну означало б спотворити обидві, тож вона схована за розкриттям і прямо каже, чим є.
Наскільки точна симуляція дальтонізму?
Це проєкція Вієно, Бреттеля й Моллона, застосована в лінійному світлі, - звичний спосіб моделювати дихромазію. Вона показує, що втрачає ПАРА кольорів, і саме це питання має значення: чи можна ще розрізнити дві речі. Це модель однієї форми стану, а не фотографія того, що бачить конкретна людина, і панель про це каже.
Чи можна вставити згенеровану шкалу в конфігурацію мого фреймворку?
Так - експорт містить форму, яка лягає туди, де утилітарний фреймворк очікує кольорову шкалу, поряд із власними властивостями CSS, змінними SCSS і JSON. Ряд належить цьому інструменту й побудований в OKLCH із заданого вами кольору; це не палітра жодного фреймворку і так вона не подається.
Аудит сайту у 2026 році: повний чекліст SEO, Core Web Vitals, доступності та безпеки
Якісний аудит сайту - це не одна оцінка Lighthouse і не список із десятків автоматичних попереджень. Він має відповісти на чотири запитання: чи може пошукова система правильно знайти й зрозуміти сайт, чи може користувач без перешкод виконати своє завдання, чи достатньо швидко працює сайт і чи не створює він зайвих ризиків для власника або відвідувачів?
Chrome vs Firefox vs Edge vs Safari: чого ми навчилися, випустивши 9 розширень для браузерів
Дев'ять розширень, чотири браузери й значно більше, ніж один файл `manifest.json`. Ми показуємо, де насправді закінчується спільний код, чому Safari потребує окремого процесу та які помилки виявляють лише Firefox і магазини розширень.
Claude Code проти OpenAI Codex проти Gemini CLI: найкращий ШІ-агент для програмування у 2026 році
Claude Code, OpenAI Codex і Gemini CLI можуть читати репозиторії, редагувати файли та запускати тести, але їх створено для різних стилів роботи. Ми порівнюємо якість, бенчмарки, безпеку, паралельну роботу, розширення, ціни та приватність.
Створюйте кращий вебпростір, швидше.
Ми створюємо індивідуальне програмне забезпечення та рішення, адаптовані до ваших потреб.