Інструменти кольорів

Піпетка: великий квадрат — це карта насиченості та яскравості при поточному відтінку: зліва направо зростає насиченість, згори донизу зменшується яскравість. Клацніть будь-де на ньому, щоб обрати колір. Тонка вертикальна смуга праворуч — це повзунок відтінку (від 0° до 360°) — посуньте його, щоб змінити базовий відтінок, і квадрат перемалюється відповідно. Праворуч обраний колір показано у форматах HEX, RGB і HSL — клацніть будь-яке значення, щоб його скопіювати.

Палітра: ліва піпетка і праве поле редагування зберігають той самий базовий колір — вони синхронізовані в обидва боки (оберіть колір або введіть hex-значення, обидва оновлюються). П'ять рядків палітри нижче виводяться з цього базового кольору поворотом його відтінку на колірному колі: Комплементарна (відтінок +180°, найсильніший контраст), Тріадна (+120° / +240°, збалансована тріада), Тетрадна (+90° / +180° / +270°, прямокутна чотириколірна), Аналогова (-30° / база / +30° / +60°, гармонійні сусіди) і Розщеплена комплементарна (+150° / +210°, м'якша за чисту комплементарну). Перший зразок кожного рядка завжди є самим базовим кольором, а решта — його варіанти з поворотом відтінку.

Конвертація: введіть будь-який коректний колір — HEX (#3b82f6), функцію CSS (rgb(59,130,246) / hsl(217,90%,60%)) або іменований колір (dodgerblue) — і миттєво отримайте перетворення в усі основні формати. Випадаючий список формату за бажанням підказує парсеру, якщо автовизначення обирає хибний формат. Вивід показує HEX, RGB (0-255), HSL (градуси, %, %), HSV і CMYK. Клацніть будь-яке значення, щоб його скопіювати.

Сліпота: завантажте зображення і оберіть тип порушення сприйняття кольору для симуляції. Інструмент застосовує матричне перетворення відгуку колбочок до кожного пікселя, переназначаючи значення RGB, щоб наблизити, як люди з різними формами дальтонізму сприймають зображення. Ліве полотно показує оригінал, праве — симульований вигляд. Випадаючий список охоплює три типи дихроматії (відсутність одного пігмента колбочок: протанопія, дейтеранопія, тританопія), повну ахроматопсію (відсутність колірного зору) і три типи аномальної трихроматії (слабкий відгук колбочок). Зображення меншої роздільності завантажуються швидше.

Градієнт: це візуальний конструктор градієнтів CSS. Оберіть лінійний (спрямований) або радіальний (від центру назовні), задайте кут (0° = знизу вгору, 90° = зліва направо) і визначте опорні кольори. Кожна опорна точка має вибирач кольору і рівномірно розподілена (0%, 50%, 100% для трьох точок). Натисніть + Стоп, щоб додати проміжні кольорові точки для складніших градієнтів. Перегляд оновлюється в реальному часі, а згенерований CSS можна скопіювати нижче.

Контраст: обчислює коефіцієнт контрасту WCAG 2.1 між кольором тексту та фону за формулою відносної яскравості зі значень sRGB (з гамма-корекцією). Коефіцієнт змінюється від 1:1 (однакові кольори) до 21:1 (чорне на білому). Результати показують проходження/непроходження на трьох рівнях відповідності: AA звичайний текст (коефіцієнт ≥ 4,5:1), AAA великий текст (коефіцієнт ≥ 4,5:1 для тексту від 18 pt або жирного від 14 pt) і AAA звичайний текст (коефіцієнт ≥ 7:1). Зразок тексту оновлюється в реальному часі під час зміни кольорів.

Витягування: завантажте будь-яке зображення, і інструмент визначить його домінантну палітру кольорів квантуванням кольорів. Зображення зменшується до 100×100 px, після чого кожен піксель розподіляється в гістограму 4 біти на канал (16 рівнів на R/G/B = 4096 кошиків). Прозорі пікселі пропускаються. Найчастіші кошики сортуються за кількістю пікселів, і центральний колір кожного кошика стає зразком. Кожен зразок показує своє значення HEX і відсоток пікселів зображення, який він представляє. Налаштуйте повзунок кількості (2–12), щоб визначити, скільки домінантних кольорів витягувати.

Мікшер: змішує два кольори в просторі кольорів RGB лінійною інтерполяцією. Повзунок співвідношення визначає суміш: 0% — чистий Колір 1, 100% — чистий Колір 2, а 50% — рівномірне змішування. Кожен канал R, G, B інтерполюється незалежно (напр., червоний + синій при 50% дає фіолетовий). Результат і значення HEX/RGB оновлюються в реальному часі під час перетягування повзунка або зміни будь-якого кольору.

Температура: перетворює колірну температуру абсолютно чорного тіла в Кельвінах на відповідний видимий колір за алгоритмом наближення Таннера Гелланда. Низькі температури (1000–3000 K) дають теплі помаранчеві та червоні тони, як свічка та лампа розжарювання; середній діапазон (4000–6500 K) — від нейтрального білого до денного світла; вищі температури (8000–40000 K) переходять до холодного блакитного, як хмарне небо та глибока вода. Підпис нижче визначає найближче реальне джерело світла для кожної температури.

Іменовані: перегляньте об'єднану колекцію з 80 традиційних китайських кольорів (胭脂, 朱砂, 黛蓝 тощо — назви взяті з класичної китайської літератури, живопису та традицій фарбування) і понад 140 іменованих кольорів CSS (стандартна веб-палітра). Використовуйте поле пошуку, щоб фільтрувати за назвою або значенням HEX, або перемикайтеся між категоріями за допомогою випадаючого списку. Клацніть будь-який кольоровий елемент, щоб побачити велике подання з назвою і кодом HEX — клацніть код, щоб його скопіювати.