Погляд усередину
Цей безпечний перегляд показує, для чого потрібен інструмент, не виконуючи дій, що потребують акаунта.
Що вміє Інструмент для кольорів
Кольори живуть у багатьох записах. Дизайнер надсилає тобі HEX, таблиця стилів хоче RGB, друкарня питає про CMYK, а анімації потрібен HSL, бо там так зручно крутити відтінок. Farbwerkzeug тримає всі чотири подання синхронними: ти змінюєш одне, решта підтягуються наживо. Він розуміє й 140 іменованих кольорів CSS, тож можна просто ввести «rebeccapurple» або «tomato».
З єдиного основного кольору інструмент будує готові колірні гармонії. Комплементарну, аналогову, тріадну, спліт-комплементарну, тетрадну або монохроматичну: кожна палітра слідує класичним правилам теорії кольору і відразу дає кілька узгоджених тонів, які працюють разом. Ідеально для брендингу, сайту чи діаграми, де кольори не мають різати око.
Перевірка контрасту обчислює коефіцієнт контрасту двох кольорів і одразу каже, чи досягає він рівнів AA та AAA за WCAG для звичайного й великого тексту. Доступність це не приємний бонус, а для багатьох сайтів обов'язок: тут одразу видно, чи текст на фоні лишається читабельним.
Симуляція порушень кольоросприйняття це чесна перевірка реальністю. Приблизно кожен дванадцятий чоловік бачить кольори інакше. Інструмент показує твої кольори такими, якими вони доходять при протанопії, дейтеранопії, тританопії або повній колірній сліпоті. Так ти рано помічаєш, що твій червоно-зелений статус на кшталт світлофора для частини користувачів стає непомітним.
Крім того, є генератор градієнтів для лінійних і радіальних градієнтів із кількома точками, піпетка для взяття кольору з екрана (де це підтримує браузер) і можливість діставати кольори із завантаженого зображення. Власні палітри можна називати й зберігати локально.
Усе працює в браузері, без акаунта і без того, щоб зображення чи значення кольору йшло на сервер. Твої начерки лишаються твоїми. Результати копіюються одним кліком, чи то код HEX, чи правило градієнта CSS, чи вся палітра.
Функції
HEX, RGB, HSL і CMYK
Усі чотири формати синхронні наживо. Змінюєш один, решта одразу підтягуються. Також назви кольорів CSS.
Гармонійні палітри
Комплементарна, аналогова, тріадна, тетрадна й монохроматична з основного кольору за теорією кольору.
Перевірка контрасту WCAG
Коефіцієнт контрасту двох кольорів з оцінкою AA та AAA для звичайного й великого тексту.
Симуляція порушень кольоросприйняття
Подивись свої кольори при протанопії, дейтеранопії, тританопії та ахроматопсії: чесна перевірка.
Будувати градієнти
Лінійні й радіальні градієнти з кількома точками, одразу як готове до копіювання правило CSS.
Піпетка і кольори із зображення
Візьми колір з екрана або дістань домінантні тони із завантаженого зображення.
Працює локально, без акаунта
Жодне зображення і жодне значення кольору не залишає твій пристрій. Власні палітри ти зберігаєш локально в браузері.
Як це працює
- 1
Обрати основний колір
Обери колір у пікері, введи код HEX або надрукуй назву кольору CSS.
- 2
Вибрати вкладку
Конвертація, палітра, градієнт, контраст чи порушення кольоросприйняття: залежно від того, що тобі потрібно.
- 3
Налаштувати й перевірити
Перемкни тип палітри, задай другий колір для контрасту або перегляни симуляцію.
- 4
Копіювати або зберегти
Скопіюй HEX, правило CSS або всю палітру й збережи іменовані палітри на потім.
Кому це потрібно
Поширені запитання
Що означає коефіцієнт контрасту в WCAG?
Він описує різницю яскравості двох кольорів. Для звичайного тексту WCAG вимагає щонайменше 4,5:1 (рівень AA) або 7:1 (AAA), а для великого тексту вистачає 3:1 або 4,5:1. Інструмент показує, якого рівня досягає твоя комбінація.
Навіщо симуляція колірної сліпоти?
Приблизно 8 % чоловіків і 0,5 % жінок бачать певні кольори інакше. Симуляція показує, як твої кольори доходять при найпоширеніших формах, щоб важливі відмінності, наприклад червоний і зелений у статусі, лишалися помітними для всіх.
Чому мій CMYK відрізняється від друку?
Перерахунок це математичне наближення без колірного профілю. Справжній друк залежить від паперу, машини й профілю ICC. Використовуй значення CMYK як орієнтир, а для виробництва, де колір критичний, завжди роби пробний відбиток (proof).
Чи можна вводити назви кольорів CSS?
Так. Усі 140 іменованих кольорів CSS розпізнаються, від «aliceblue» до «yellowgreen». Надрукуй назву, і інструмент покаже відповідні значення HEX, RGB, HSL і CMYK.
Чи завантажуються мої зображення кудись?
Ні. Коли ти дістаєш кольори із зображення, воно обробляється виключно локально в твоєму браузері. Воно не залишає твій пристрій і не зберігається.
Схожі інструменти
Перевірка контрасту CSS
Перевіряй контраст кольорів за WCAG 2.1 AA/AAA і APCA. Симуляція дальтонізму, пропозиції, ауд…
Витягування палітри кольорів
Витягуй домінантні кольори із зображень. Копіюй HEX, RGB, HSL, OKLCH. Експорт у CSS, Tailwind…
Перефарбування SVG
Заміняй кольори заливки й обведення в іконках SVG. Перегляд, шаблони палітр, пакетна обробка,…
Генератор favicon
Створи повний набір favicon з ICO, Apple Touch Icon, Android Chrome, маніфестом PWA і фрагмен…
Конвертер зображень
Конвертуй зображення між JPG, PNG, WebP, AVIF, GIF і BMP. Пакетна конвертація з налаштуванням…
Доступність
Підлаштуй Werkzeu.ge під свої потреби: розмір тексту, контрастність, анімації та шрифт для ди…
Починаємо з Інструмент для кольорів?
Без встановлення. Входить від Plus. Відкривається прямо в браузері.
Відкрити зараз