Перейти до основного вмісту
Converty

Конвертер кольорів

Конвертуйте між hex, RGB, HSL, OKLCH і OKLAB, перевіряючи контраст і експортуючи CSS-ready токени.

Підтримує hex, rgb(), hsl(), oklch(), oklab() та іменовані кольори CSS.

Поточний колір

#953769

Рекомендований foreground

#FFFFFF

Комплементарний колір

#007653

Hex
RGB(A)
HSL(A)
OKLCH
OKLAB
Alpha
Tailwind theme
Згенеруйте повну бренд-палітру для Tailwind CSS 4 або 3 з поточного кольору.
50
oklch(94.5% 0.0212 350.46)
100
oklch(89.49% 0.0339 350.46)
200
oklch(81.48% 0.0542 350.46)
300
oklch(72.47% 0.0771 350.46)
400
oklch(61.46% 0.105 350.46)
500
oklch(48.44% 0.138 350.46)
600
oklch(43.57% 0.1236 350.46)
700
oklch(38.7% 0.1093 350.46)
800
oklch(33.22% 0.0932 350.46)
900
oklch(27.74% 0.077 350.46)
950
oklch(23.48% 0.0644 350.46)
CSS variables

Про конвертацію кольорів CSS

Конвертери кольорів допомагають переносити один колір між HEX, RGB, HSL, OKLCH і OKLAB. Вони найкорисніші, коли потрібен читабельний вивід, контекст контрасту та значення, готові для CSS або Tailwind.

Кольори HEX, RGB, HSL і CSS

HEX, RGB і HSL покривають більшість щоденних робочих процесів у браузері, дизайні та frontend-розробці.

Швидка конвертація дає змогу вставити одне значення й повторно використати його будь-де без ручного переписування синтаксису.

Чому OKLCH і OKLAB важливі

OKLCH і OKLAB краще підходять для створення плавних шкал і передбачуваних змін світлоти.

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

Перевірки контрасту й вивід для Tailwind

Перевірки контрасту й готовий для фреймворків вивід перетворюють конвертер на практичний UI-інструмент.

Ви швидше переходите від одного вхідного кольору до доступних варіантів тексту й токенів, зручних для Tailwind.

Поширені запитання

Відповіді про підтримувані формати кольорів, коли використовувати перцептивні простори на кшталт OKLCH, і як тлумачити контраст та виводи Tailwind.

Інші інструменти

Перегляньте всі окремі сторінки інструментів із головного центру або центрального селектора в заголовку.

Зображення

Конвертер WebP

Конвертуйте до 10 зображень JPEG, PNG або WebP у WebP з пресетами якості та ZIP-завантаженнями.

Відкрити Конвертер WebP

Assets

Генератор favicon / App Icon

Завантажте одне квадратне вихідне зображення й згенеруйте пакет favicon з app icons і стартовим web manifest.

Відкрити Генератор favicon

Формати даних

Конвертер JSON / YAML / TOML

Валідуйте, prettify, minify і конвертуйте JSON, YAML і TOML із чіткими попередженнями сумісності.

Відкрити JSON / YAML / TOML

Формати даних

Валідатор CSV

Валідуйте CSV-файли й вставлені рядки з виявленням роздільника, перевірками заголовків, списками проблем і розібраними попередніми переглядами.

Відкрити Валідатор CSV

Текст

Регістр / Slug / Escape

Конвертуйте текст у camelCase, snake_case, kebab-case, PascalCase, slug і поширені екрановані форми.

Відкрити Регістр / Slug / Escape

Текст

Валідатор Markdown і попередній перегляд

Валідуйте структуру Markdown, переглядайте відрендерений вивід і знаходьте типові авторські проблеми перед публікацією.

Відкрити Валідатор Markdown