Color Picker Pro
Advanced color picker with multiple format support
Color Formats
Color Harmony
Color Picker Pro
Advanced color picker with multiple format support
Features
- Вибирайте кольори через повзунки тону/насиченості/яскравості або вставте HEX, RGB чи HSL значення, щоб одразу синхронізувати всі канали
- Шість форматів виводу одночасно: HEX, RGB, RGBA, HSL, HSLA та CMYK (готовий до друку, без вбудовування профілю)
- Коефіцієнт контрастності WCAG 2.1 проти будь-якого тестового кольору тексту, зі значками AA (4.5:1) і AAA (7:1) через формулу відносної яскравості W3C
- Генератор кольорової гармонії продукує комплементарні, тріадні, аналогові та монохромні варіанти з поточного тону
- Курована палітра, що включає Material Design, Tailwind CSS та контрастний набір, орієнтований на доступність
- Локальна історія кольорів до 20 нещодавніх виборів у localStorage (очищується за запитом, ніколи не синхронізується)
- Підтримка альфа-каналу для виводу RGBA та HSLA, готового до CSS custom properties
- Випадкові зразкові кольори та копіювання одним кліком для будь-якого рядка формату
How to use
- Перетягуйте повзунки тону/насиченості/яскравості або вставте відомий HEX, щоб керувати вибором з визначеної стартової точки.
- Налаштуйте альфа-повзунок, якщо потрібна прозорість для накладання, ефекту скла чи дизайн-токена.
- Відкрийте панель «Формати», щоб побачити HEX, RGB(A), HSL(A) та CMYK поруч і скопіювати той, що очікує ваш стек.
- Активуйте панель «Доступність» і задайте тестовий колір тексту, щоб перевірити, що WCAG-контраст відповідає AA або AAA перед поставкою.
- Відкрийте «Кольорову гармонію», щоб отримати комплементарних, тріадних або аналогових супутників для збалансованої палітри.
- Додавайте вибори до «Історії» під час експериментів; натисніть будь-який зразок, щоб згадати пізніше в сесії.
Tips & Best Practices
- Переглядайте зміни в реальному часі під час налаштування параметрів.
- Копіюйте згенерований код прямо у вашу таблицю стилів CSS.
- Тестуйте свої дизайни у світлому та темному режимах для доступності.
- Використовуйте інструменти розробника браузера разом із цим інструментом для тестування наживо.
- Зберігайте свої улюблені конфігурації для швидкого доступу пізніше.
FAQ
Чому той самий HEX показує різні RGB значення в інших інструментах?
Значення кольору можуть бути вказані в sRGB або display-P3, і браузери можуть рендерити їх по-різному залежно від калібрування монітора та ICC-профілів. Цей вибір використовує sRGB (за замовчуванням CSS Color Module Level 3) і округлює до 8-бітних каналів (0–255). Для wide-gamut дизайн-токенів використовуйте P3-інструмент і конвертуйте через color() з CSS Color Level 4.
Як обчислюється коефіцієнт контрастності WCAG?
Коефіцієнт використовує формулу відносної яскравості W3C: кожен sRGB-канал лінеаризується (sRGB-у-лінійна гамма), зважується 0.2126R + 0.7152G + 0.0722B, потім світліша і темніша яскравості комбінуються як (L1 + 0.05) / (L2 + 0.05). AA проходить при 4.5:1 для звичайного тексту і 3:1 для великого; AAA при 7:1. Математика працює у вашому браузері на поточній парі передній план/фон.
Чи відправляється щось на сервер при виборі кольору?
Ні. Конвертації кольору, пошук палітр, обчислення контрасту та історія працюють на стороні клієнта в JavaScript. Єдине постійне сховище — localStorage для історії, який живе на вашому пристрої і ніколи не покидає його. Ви можете використовувати інструмент офлайн після кешування сторінки.
Чому CMYK-вивід не точно відповідає моїм значенням Pantone або Adobe?
CMYK залежить від пристрою і потребує ICC-профілю для точності друку. Браузерні інструменти не можуть вбудувати CMYK-профіль, тож вивід тут — наївна конвертація sRGB-у-CMYK, корисна тільки для швидкого довідника. Для виробничого друку генеруйте CMYK у Photoshop або Illustrator з профілем вашого принтера.
Як генератор гармонії вибирає свої кольори?
Генератор обертає поточний HSL-тон: комплементарний — +180 градусів, тріадний додає два кольори на +120 і +240, аналоговий додає сусідів на +30 і +330, монохромний зсуває насиченість і яскравість. Це механічний підхід кольорового кола: дає стартову точку, але не враховує перцептивну однорідність, яка потребувала б Oklch або Lab.
Чи можу я використовувати ці значення напряму як CSS custom properties?
Так. HSL-вивід напряму підходить у сучасний CSS як `--brand: hsl(217 100% 60%)` або з альфа `hsla(217, 100%, 60%, 0.8)`. HSL зазвичай надається перевага для дизайн-токенів, бо робить рампи яскравості тривіальними — підвищення третього значення дає миттєві стани hover та active без перерахунку RGB.
Чи підтримує вибір display-P3 чи wide-gamut вивід?
Наразі ні. Вибір припускає sRGB і виводить HEX/RGB по 8 біт на канал. Якщо потрібен P3 або Rec.2020, використовуйте інструмент, що випромінює синтаксис CSS Color Level 4 на кшталт `color(display-p3 0.4 0.5 0.9)`. Можливо, додамо це, коли підтримка браузерів стабілізується на всіх цілях.
Чому моя збережена історія кольорів зникла?
Історія зберігається в localStorage, привʼязаному до цього домену. Очищення даних браузера, використання приватного/інкогніто-режиму або зміна браузера скидає її. Ліміт — 20 записів, щоб уникнути проблем з квотою — старіші вибори витісняються при додаванні нових.