Nano Banana 2.1 ДОСТУПНА — Новинка от Google | Попробовать →
Войти
WAVESPEED AI ПАЛИТРА ЦВЕТОВ Работает в браузере
100% БЕСПЛАТНО

Палитра цветов онлайнВыбирайте, конвертируйте, проверяйте и экспортируйте цвета.

Выберите цвет на круге, с экрана или из любой картинки и скопируйте его в HEX, RGB, HSL, HSV, OKLCH или CMYK.
Создавайте гармонии и шкалы оттенков, проверяйте контраст текста, смотрите на цвета глазами людей с дальтонизмом и экспортируйте готовый к вставке код.

Пипетка для любого изображенияВстроенная проверка контрастаКод для CSS, Tailwind, Swift и Android
Без регистрации Без загрузки на сервер Без водяных знаков

Загрузка палитры цветов…

Цвета и изображения остаются на вашем устройстве.
ТРИ ПРОСТЫХ ШАГА

Как пользоваться палитрой цветов

01

Выберите цвет

Ведите по цветовому кругу, введите или вставьте любой код цвета, воспользуйтесь пипеткой или откройте фото и нажмите на пиксель.

02

Настройте и скопируйте

Подстройте цвет ползунками RGB, HSL, HSV, OKLCH или CMYK и скопируйте нужное значение одним нажатием.

03

Создайте и экспортируйте

Составьте гармонии или шкалу оттенков, проверьте контраст и восприятие при дальтонизме, а затем скопируйте или скачайте код для своего проекта.

ПОЛЕЗНО ЗНАТЬ

Советы по выбору цветов

Несколько привычек, которые делают палитры удобнее в использовании и легче для восприятия.

Проверяйте контраст текста заранее

Основному тексту нужен контраст не менее 4.5:1 с фоном для WCAG AA, крупному тексту — 3:1. Проверка предложит ближайший цвет, который проходит.

Используйте OKLCH для ровных шкал

Светлота в OKLCH соответствует тому, что видит глаз, поэтому шкала, построенная в OKLCH, равномерно переходит от светлого к тёмному без грязных середин.

Не полагайтесь только на цвет

Многие люди не различают красный и зелёный. Проверьте палитру на вкладке дальтонизма и добавьте подписи или значки там, где важен смысл.

Усредняйте при выборе из фото

Вблизи фотографии шумные. Выборка 3×3 или 5×5 даёт цвет, который вы видите, а не случайный отдельный пиксель.

Начните палитру с изображения

Откройте понравившееся фото и извлеките от 5 до 8 цветов. K-средние находят основные цвета, а медианное сечение сохраняет мелкие акценты.

CMYK здесь — приблизительный

Цвета в печати зависят от бумаги и оборудования. Используйте значение CMYK как отправную точку и проверьте его с профилем вашей типографии.

WaveSpeed AI

Превратите палитру в изображения

Генерируйте изображения и видео в цветах вашего бренда по текстовому запросу с WaveSpeed AI.

Начать создавать Изучите 1000+ ИИ-моделей
  • Более 1000 ИИ-моделей
  • Изображения, видео и 3D
  • Оплата по факту

$1 бесплатных кредитов для подходящих новых аккаунтов. Карта не нужна. Для генераторов нужны отдельный аккаунт и кредиты. Инструмент «палитра цветов» бесплатный.

Вопросы о палитре цветов

Как взять цвет с изображения?

Откройте вкладку «Изображение», выберите фото или скриншот (или вставьте его) и нажмите на любой пиксель. Лупа показывает, на каком именно пикселе вы находитесь, а усреднять можно область от 3×3 до 11×11. Изображение читается в браузере и остаётся на вашем устройстве.

Можно ли взять цвет из любого места на экране?

Да, в браузерах с поддержкой пипетки (Chrome, Edge и другие браузеры на Chromium на компьютере). Нажмите «Пипетка», а затем на любой пиксель экрана, даже за пределами окна браузера. В других браузерах сделайте скриншот и вставьте его на вкладку «Изображение».

Как перевести HEX в RGB?

Введите или вставьте код HEX в поле цвета, и значение RGB появится ниже, готовое к копированию. Чтобы конвертировать много цветов сразу, вставьте их по одному в строке на вкладке «Конвертация» и выберите выходной формат.

Какие форматы цвета поддерживаются?

HEX (3, 4, 6 и 8 цифр), RGB, HSL, HSV/HSB, HWB, OKLCH, OKLab и CMYK, а также все названия цветов CSS. Значения можно вставлять с названием функции или без него, например «255, 87, 51».

Что такое OKLCH и зачем его использовать?

OKLCH описывает цвет через воспринимаемую светлоту, хрому (насыщенность) и оттенок. Равные шаги выглядят одинаково, поэтому он идеален для шкал оттенков и согласованных палитр и поддерживается в современном CSS как oklch().

Как работает проверка контраста?

Она вычисляет коэффициент контраста WCAG 2 между текстом и фоном и показывает, проходит ли он уровни AA и AAA для обычного и крупного текста и для элементов интерфейса. Также показывается контраст светлоты APCA (Lc) из черновика WCAG 3 и предлагается ближайший проходящий цвет.

Как создать палитру цветов?

Выберите базовый цвет, затем используйте «Гармонии» для комплементарных, триадных и других схем или «Оттенки» для светлых и тёмных оттенков и шкалы 50–950. Палитру можно также извлечь из фото. Сохраняйте избранное и экспортируйте его в виде кода.

Можно ли экспортировать цвета для Tailwind, SwiftUI или Android?

Да. Вкладка «Экспорт» записывает палитру в виде CSS-переменных, SCSS, Tailwind v4 @theme или конфигурации v3, SwiftUI, UIKit, Android colors.xml, Jetpack Compose, JSON, палитры GIMP или простого списка hex-кодов. Скопируйте код или скачайте файл.

Эта палитра цветов бесплатная?

Да. Бесплатно, без регистрации, без ограничений и без водяного знака, и всё работает в вашем браузере.

Другие бесплатные инструменты

Все бесплатные инструменты

Выберите свой следующий цвет

Бесплатно, приватно и уже готово в вашем браузере.

Открыть палитру цветов