Color Picker

Выбирайте цвета и сразу к делу — без лишней возни

Мы создали Color Picker в 2025 году — устали от громоздких приложений и чрезмерно сложных цветовых инструментов. Как фронтенд-разработчикам и иллюстраторам нам нужен был способ быстро узнать код цвета, чуть подправить и двигаться дальше. Всё началось как внутренний инструмент, он стал любимцем коллег; мы его отполировали и выложили в веб для всех. Никаких аккаунтов и кривой обучения — откройте страницу, выберите тон и скопируйте коды HEX, RGB, HSL или HSV.

Почему наш колор пикер нравится пользователям

Если вы смотрели на макет и думали: «как попасть ровно в этот тон?», вам понравится простота Color Picker. Мы намеренно сделали интерфейс минималистичным:

• Один клик — и цвет ваш — нажмите в любом месте палитры, и нужные значения появятся сразу. Нужен образец из фото или скриншота? Перетащите файл на страницу и пользуйтесь пипеткой.
• Градиенты без усилий — добавляйте и двигайте точки на полосе, чтобы получить плавный переходы. Переключайте линейный/радиальный режим, тонко настройте угол и непрозрачность и копируйте CSS.
• Без ограничений и без затрат — Color Picker работает в любом современном браузере на компьютере, планшете и телефоне. Ничего устанавливать и никаких платежей.
• Расширения, когда нужно — наши опциональные расширения для Chrome и Edge приносят пипетку прямо в браузер, чтобы брать образцы с любой страницы и сохранять историю.

Для чего

Color Picker используют по-разному:

• Дизайнеры и продуктовые команды применяют его при наброске интерфейсов или палитр бренда. Исследовать комбинации и копировать CSS для градиентов — быстро и удобно.
• Иллюстраторы и художники используют пипетку, вдохновляясь фотографиями и живописью. Инструмент градиента помогает планировать мягкие тени и цветовые переходы.
• Фронтенд-разработчики полагаются на него, чтобы получать согласованные значения цвета в проектах. Расширение упрощает выбор образцов с существующих сайтов.
• Все, кто проверяет доступность могут смотреть цвета в разных моделях и настраивать непрозрачность, пока не будут выполнены требования по контрасту.

Начало работы

Никакой инструкции не нужно — вот краткий обзор:

• Выберите цвет — кликните в любом месте палитры. Сразу увидите значения HEX, RGB и HSV. Тон, насыщенность, яркость и непрозрачность настраиваются ползунками.
• Возьмите образец из изображения — перетащите файл изображения на страницу или выберите его. Нажмите на нужный пиксель — и появятся коды цвета.
• Создайте градиент — нажмите на полосу градиента, чтобы добавить точки, и перетаскивайте их; переключайтесь между линейным и радиальным стилем. Настройте угол и непрозрачность до идеала.
• Копируйте и переиспользуйте — ваши цвета и градиенты сохраняются автоматически. Копируйте коды или CSS и вставляйте в проект, делитесь с командой.