Підбирач кольорів
Вибирайте кольори, витягуйте з зображень, створюйте палітри та перевіряйте контрастність. Підтримка HEX, RGB, HSL, HSV та CMYK.
Витягування кольорів з зображення
Перетягніть зображення або натисніть для завантаження
Домінуючі кольори
Додайте кольори до палітри
Зразок тексту звичайного розміру (14px)
Зразок великого тексту
Коефіцієнт контрастності
21:1
AA Звичайний
Пройдено
AA Великий
Пройдено
AAA Звичайний
Пройдено
AAA Великий
Пройдено
90°
Коли використовувати цей підбирач кольорів
Наш безкоштовний підбирач кольорів допомагає дизайнерам та розробникам працювати з кольорами:
-
Веб-дизайн
Вибирайте ідеальні кольори для сайтів і перевіряйте контрастність для відповідності вимогам доступності.
-
Фірмовий стиль
Створюйте гармонійні колірні палітри для логотипів, маркетингових матеріалів та брендбуків.
-
Підбір кольорів зображення
Витягуйте кольори з фотографій для узгодження елементів дизайну з існуючими зображеннями.
-
CSS-розробка
Генеруйте CSS-градієнти та експортуйте палітри як власні властивості CSS.
-
Тестування доступності
Перевіряйте відповідність комбінацій кольорів тексту та фону стандартам WCAG AA та AAA.
Як користуватися підбирачем кольорів
Початок роботи
- Натисніть і перетягніть у квадраті кольору для вибору насиченості та яскравості
- Використовуйте повзунок відтінку для зміни базового кольору
- За потреби налаштуйте прозорість повзунком альфа
- Скопіюйте будь-який формат кольору, натиснувши кнопку копіювання поряд з ним
Функції
- Інтерактивний підбирач кольорів з попереднім переглядом у реальному часі
- Витягування кольорів з будь-якого зображення за допомогою піпетки
- Автоматичне створення гармонійних колірних комбінацій
- Створення власних палітр та експорт у CSS або JSON
- Перевірка контрастності кольорів WCAG для доступності
- Створення CSS-градієнтів з візуальним редактором
Гарячі клавіші
- Ctrl+C: Копіювати поточний HEX-колір
- Ctrl+V: Вставити та застосувати колір з буфера обміну
- 1-4: Перемикання між вкладками функцій
Поради
- Завантажте зображення для автоматичного витягування домінуючих кольорів
- Використовуйте перевірку контрастності для забезпечення читабельності тексту
- Експортуйте палітру в CSS-змінні для зручного використання в проєктах