Выберите цвет, скопируйте код и работайте дальше
Палитра, конструктор градиентов и пипетка для изображений на одной странице. Без аккаунта, без установки и без ожидания: выберите оттенок и скопируйте его как HEX, RGB, HSL или HSV.
Коды цвета
#0F37FFrgb(15, 55, 255)hsl(230°, 100%, 52.94%)hsv(230°, 94.12%, 100%)cmyk(94.12%, 78.43%, 0%, 0%)xyz(19.61, 10.05, 95.5)lab(37.93, 62.96, -98.45)lch(37.93, 116.86, 302.6°)Популярные цвета
Смотреть все популярные цветаЧто внутри
Пипетка
Берите цвета из загруженного изображения или с любого места экрана, где это поддерживает браузер. Перетащите файл на страницу и нажмите на пиксель.
Перевод форматов
Мгновенно переключайтесь между HEX, RGB, HSL, HSV, CMYK, XYZ, LAB и LCH и копируйте любое значение прямо в CSS или в графический редактор.
Конструктор градиентов
Добавляйте и перетаскивайте точки по полосе, переключайте линейный и радиальный режим, задавайте угол и прозрачность и копируйте готовый CSS.
История цветов
Каждый цвет и градиент остаётся в вашем браузере, чтобы вернуться к нему позже или использовать в другом проекте.
Гармонии и вариации
На странице каждого цвета есть осветления, затемнения и шесть схем гармонии, и любую из них можно превратить в градиент одним нажатием.
Бесплатно и приватно
Ни платного доступа, ни слежки за тем, что вы выбираете. Загруженные изображения читаются в браузере и никуда не уходят.
Для кого это
- Дизайнеры и продуктовые команды
- Когда набрасываете интерфейс или палитру бренда, перебираете сочетания и копируете точный CSS для градиента.
- Иллюстрация и живопись
- Чтобы брать цвета с фотографий и картин пипеткой и планировать мягкие переходы.
- Фронтенд-разработка
- Чтобы получать согласованные значения цвета в проекте и считывать их из готового макета.
- Проверка доступности
- Чтобы сравнить цвет в разных моделях и править его, пока контраст не превысит нужный порог.
Как пользоваться
- 1
Выберите цвет
Нажмите в любом месте поля насыщенности, затем уточните ползунками тона и прозрачности. HEX, RGB и HSV обновляются на ходу.
- 2
Возьмите цвет с изображения
Перетащите изображение на страницу или выберите файл, затем нажмите на нужный пиксель. Коды появятся сразу.
- 3
Соберите градиент
Нажмите на полосу, чтобы добавить точку, и перетащите её на место. Переключите линейный или радиальный режим и задайте угол.
- 4
Скопируйте и используйте
Копируйте значение или целиком CSS-объявление. Всё выбранное сохраняется в историю автоматически.
Частые вопросы
Небольшой инструмент, который не мешает
Всё началось как внутренняя утилита: мы хотели взять цвет, поправить его и идти дальше, не открывая тяжёлый графический редактор. Это сознательно одна страница, сознательно быстрая, и она останется бесплатной.
Расширения для браузера
Хотите брать цвета прямо со страниц, которые открываете? Расширения для Chrome и Edge добавляют пипетку на панель, ведут собственную историю и открывают этот инструмент одним щелчком.