Пипетка цвета (Color Picker)

Выбирайте цвета и копируйте готовые значения

Надёжная пипетка цвета должна уметь больше, чем показывать красивый квадрат. Дизайнерам, разработчикам и создателям контента часто нужен один и тот же цвет в нескольких форматах в зависимости от назначения. CSS принимает HEX, RGB и HSL, дизайн-системы могут документировать токены как HEX, а быстрые правки прототипов часто проще в HSL, потому что оттенок, насыщенность и светлоту можно менять независимо. Этот инструмент показывает форматы рядом: вы выбираете цвет один раз и копируете значение, подходящее для вашей работы.

Всё происходит локально в браузере. Выбор цвета, расчёты преобразования и кнопки копирования работают на клиентском JavaScript, поэтому не нужны ни аккаунт, ни загрузка, ни удалённая обработка. Это делает инструмент удобным для частных палитр бренда, ещё не выпущенных тем продуктов, работы для клиентов и быстрых экспериментов с интерфейсом, которые не должны покидать ваш компьютер.

Использование светлых и тёмных оттенков в интерфейсах

Светлые и тёмные оттенки помогают одному цвету бренда поддерживать весь интерфейс. Светлые оттенки подходят для неброских фонов, состояний наведения, панелей уведомлений и выбранных строк. Тёмные оттенки могут служить рамками, состояниями нажатия, акцентами тёмного режима или сильно выделенным текстом, когда исходный цвет слишком яркий. Образцы здесь сохраняют неизменными оттенок и насыщенность, меняя только светлоту, что создаёт простую шкалу, связанную с базовым цветом.

Воспринимайте созданную шкалу как отправную точку, а не как готовую дизайн-систему. Человеческое восприятие не идеально линейно, и некоторым оттенкам нужна ручная корректировка, чтобы они выглядели равномерно распределёнными. Синие и фиолетовые обычно выдерживают широкий диапазон светлоты, а жёлтым могут понадобиться более тёмные оттенки для читаемого текста. Скопируйте значения, проверьте их в реальном компоненте и доработайте самые важные шаги.

Выбор между HEX, RGB и HSL

HEX компактен и распространён при передаче дизайна, поэтому это хороший вариант по умолчанию для документации. RGB полезен, когда инструмент просит числовые каналы красного, зелёного и синего или когда вы мыслите непосредственно светом экрана. HSL обычно удобнее всего для небольших правок: меняйте оттенок, чтобы двигаться по цветовому кругу, уменьшайте насыщенность для более спокойного тона или меняйте светлоту, чтобы получить светлый или тёмный оттенок. Когда все три формата перед глазами, меньше ошибок при переходе между дизайн-инструментами, CSS-файлами и библиотеками компонентов.