C& Color & Design
Color & Design

Бесплатные онлайн-инструменты, работающие в браузере

Бесплатные инструменты Color & Design, работающие на 100% в вашем браузере. Без загрузок, без регистрации, без установки — ваши данные никогда не покидают устройство.

🔒 Все инструменты работают полностью в вашем браузере — ничего не загружается, никаких серверов, никаких вызовов API.
Advertisement
🎨

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

Выберите цвет и мгновенно скопируйте значения HEX, RGB и HSL. Создавайте светлые и тёмные оттенки для фонов, рамок и состояний интерфейса.

Color
🔁

Конвертер HEX RGB

Конвертируйте цвета между HEX, RGB(A) и HSL(A) с обновлением вживую, поддержкой альфа-канала и готовыми к копированию значениями CSS.

Color
🧩

Генератор цветовых палитр

Генерируйте гармоничные цветовые палитры из базового цвета, включая комплементарные, аналоговые, триадные и монохромные схемы, прямо в браузере.

Color
🌈

Генератор CSS-градиентов

Создавайте линейные и радиальные CSS-градиенты с несколькими цветовыми точками, живым предпросмотром и готовым к копированию кодом CSS background.

CSS
▣

Генератор Box Shadow

Создавайте CSS-тени box-shadow с помощью ползунков смещения, размытия, растяжения, цвета, прозрачности и режима inset с живым предпросмотром.

CSS
✅

Проверка контраста (Contrast Checker)

Проверьте коэффициент контрастности WCAG между цветом текста и фона: результаты AA и AAA (пройдено/не пройдено) и предпросмотр в реальном времени.

Accessibility
🎚️

Генератор оттенков Tailwind

Создайте 11-ступенчатую шкалу оттенков в стиле Tailwind (50-950) из базового цвета HEX с CSS-переменными и JSON, готовыми к копированию.

Color
🖼️

Генератор CSS-фильтров

Создавайте эффекты CSS filter() визуально с помощью ползунков размытия, яркости, контраста, оттенков серого, поворота оттенка и многого другого.

CSS
◖

Генератор Border Radius

Создавайте стандартные и эллиптические значения CSS border-radius с живым предпросмотром и готовым CSS-кодом для копирования — прямо в браузере.

CSS
🧊

Генератор глассморфизма

Создавайте CSS для карточек с эффектом матового стекла: размытие, прозрачность, оттенок, рамка и радиус — прямо в вашем браузере.

CSS
⬚

Генератор неоморфизма

Генерируйте неоморфный CSS в стиле soft UI с парными тенями, цветом поверхности, радиусом и плоской, вогнутой или выпуклой формой прямо в браузере.

CSS
🌓

Генератор дуотона

Примените двухцветный эффект дуотона к изображению прямо в браузере и экспортируйте результат в PNG — без загрузки чего-либо на сервер.

Images
🧪

Миксер цветов — смешивание двух цветов

Смешивайте два цвета в выбранной пропорции RGB и копируйте готовые значения HEX, RGB и HSL прямо в браузере.

Color
🏷️

Поиск названия цвета — ближайший цвет CSS

Найдите ближайшее название цвета CSS для любого значения HEX по расстоянию RGB, с образцами цвета и кнопками копирования.

Color
🎛️

Генератор CSS-тем

Выберите цвета бренда и сгенерируйте на стороне клиента тему :root с пользовательскими свойствами CSS и производными токенами для hover, границ и поверхностей.

CSS
🌊

Генератор SVG-волн

Создавайте многослойные SVG-волны с настройкой амплитуды, сложности, плавности и цветов. Копируйте SVG или CSS либо скачивайте SVG и PNG.

Images
🫧

Генератор блобов

Генерируйте случайные органические SVG-блобы с настройкой количества точек, случайности, градиентных заливок и контуров. Копируйте SVG или скачивайте PNG.

Images
🕸️

Генератор mesh-градиентов

Создавайте mesh-градиенты из 3–6 перетаскиваемых цветовых точек с размытием и шумом. Копируйте CSS или скачивайте изображение PNG.

CSS
✂️

Генератор CSS clip-path

Редактируйте фигуры CSS clip-path визуально с помощью пресетов, перетаскиваемых точек полигона и ползунков. Копируйте CSS clip-path.

CSS