На главную

Дизайн и CSS

Работа с цветом

Все цветовые инструменты во вкладках: 16 штук — от лаборатории цвета с гармониями и тональностями до градиентов, палитр и проверки доступности.

Лаборатория цвета

Один цвет на входе — противоположный и гармоничные, все коды, светлее/темнее, прозрачность, тональности, шкала 50–900, переходы и смешивание. Кликните по любому образцу, чтобы скопировать код.

#4f46e5

Ближайший именованный: blue (#0000ff)

Контраст с белым: 6.29 — AA

Контраст с чёрным: 3.34 — AA (крупный текст)

Противоположный и гармоничные

Цвета, стоящие в цветовом круге на определённом расстоянии от исходного — базовые схемы дизайнера.

Противоположный (комплементарный)

Комплементарная (противоположный цвет)

Раздельно-комплементарная

Аналогичная (соседние)

Триада

Тетрада (прямоугольник)

Квадрат

Монохромная (один тон, разная светлота)

Светлее, темнее и тональности

Tints — примесь белого, shades — чёрного, tones — серого. Шкала 50–900 годится как готовые токены дизайн-системы.

Tints — светлее (примесь белого)

Shades — темнее (примесь чёрного)

Tones — приглушённее (примесь серого)

Шкала 50–900

Прозрачность

Шаг 10%: HEX с альфа-каналом и rgba() — образцы показаны на шахматной подложке.

Смешивание и переход

Второй цвет для смешивания и плавного градиента между двумя оттенками.

Смешивание — доля второго цвета

Переход (12 шагов)

CSS-градиент

Быстрые варианты

Отдельная страница инструмента: /color-lab