Колірне коло, палітри й перевірка контрасту
Добирайте гармонії на колірному колі, перетворюйте HEX, RGB, HSL і OKLCH, створюйте палітри й шкали відтінків, перевіряйте контраст за WCAG і вигляд кольорів за дальтонізму, будуйте градієнти й беріть кольори з екрана, фото чи камери. Усе лишається на вашому пристрої.
Поточний колір
Гармонія
Кольори
Тягніть будь-який маркер — решта рухається за правилом. З клавіатури: Tab до маркера, стрілки повертають тон і змінюють насиченість, із Shift — більшими кроками.
Про цей колір
Усі формати
Введіть або вставте будь-що з цього в поле вгорі: hex, rgb(), hsl(), hwb(), oklch(), oklab(), lab(), lch(), color(display-p3 …), назву CSS чи три числа.
Палітра з фото
Шкала 50–950
Світлота спадає рівними кроками OKLCH, тож 400 і 600 виглядають однаково далекими від 500; поточний колір стає на найближчий крок, а насиченість згасає до країв, як у шкалах, зроблених вручну. Кожен крок — у межах sRGB.
Тінти, тони й тіні
Змішування в OKLab з білим (тінти), сірим (тони) і чорним (тіні): рівні кроки без брудної середини.
Нейтральні з відтінком кольору
Код
Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Основний текст, 16 px.
Великий текст, 24 px
Великий жирний текст, 18,7 px
APCA (довідково)
Найближчий колір, що проходить
Контраст усієї палітри
Рядки — текст, стовпці — тло. AA: від 4,5; AA для великого тексту: від 3, цього ж досить для іконок, рамок та іншої графіки; AAA: від 7. Торкніться клітинки, щоб перевірити цю пару вгорі.
Ваша палітра
Кольори, що зливаються
Зображення
Точки
Інтерполяція
CSS
Зображення з камери читається лише на цьому пристрої, кілька разів на секунду, і ніде не записується. Колір із камери залежить від освітлення й балансу білого: годиться, щоб приблизно підібрати фарбу чи тканину, але не для точних значень.
Ведіть по зображенню (чи пальцем), щоб побачити пікселі; клацніть або відпустіть палець, щоб узяти колір.