Пропуснете към основното съдържание

Конвертор на цветове

Конвертирайте между hex, RGB, HSL, OKLCH и OKLAB, като проверявате контраста и експортирате готови за CSS токени.

Поддържа hex, rgb(), hsl(), oklch(), oklab() и именувани CSS цветове.

Текущ цвят

#953769

Препоръчан цвят за преден план

#FFFFFF

Комплементарен цвят

#007653

Hex
RGB(A)
HSL(A)
OKLCH
OKLAB
Алфа
Tailwind тема
Генерирайте пълна бранд палитра за 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 променливи

За конвертирането на CSS цветове

Конверторите на цветове ви помагат да прехвърляте един и същ цвят между HEX, RGB, HSL, OKLCH и OKLAB. Те са най-полезни, когато ви трябват четим изход, контекст за контраст и стойности, готови за CSS или Tailwind.

HEX, RGB, HSL и CSS цветове

HEX, RGB и HSL покриват повечето ежедневни браузърни, дизайнерски и frontend работни процеси.

Бързото конвертиране ви позволява да поставите една стойност и да я използвате навсякъде, без да пренаписвате синтаксиса на ръка.

Защо OKLCH и OKLAB са важни

OKLCH и OKLAB са по-подходящи за изграждане на плавни скали и предвидими промени в светлотата.

Те улесняват работата по палитрата, когато държите на балансирани стъпки и надежден контраст.

Проверки за контраст и Tailwind изход

Проверките за контраст и готовият за framework изход превръщат конвертора в практичен UI инструмент.

Можете по-бързо да преминете от един входен цвят към достъпни текстови избори и Tailwind-приятелски токени.

Често задавани въпроси

Отговори за поддържаните цветови формати, кога да използвате перцептуални пространства като OKLCH и как да тълкувате изходите за контраст и Tailwind.

Други инструменти

Разгледайте всяка отделна страница с инструмент от началния хъб или от центрирания селектор в заглавната част.

Изображения

WebP конвертор

Конвертирайте до 10 JPEG, PNG или WebP изображения в WebP с preset-и за качество и ZIP изтегляния.

Отвори WebP конвертор

Ресурси

Генератор на favicon / икони за приложение

Качете едно квадратно изходно изображение и генерирайте пакет с favicon, икони за приложение и начален web manifest.

Отвори Генератор на favicon

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

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

Валидирайте, форматирайте, минифицирайте и конвертирайте JSON, YAML и TOML с ясни предупреждения за съвместимост.

Отвори JSON / YAML / TOML

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

CSV валидатор

Валидирайте CSV файлове и поставени редове с откриване на разделители, проверки на заглавки, списъци с проблеми и парсирани прегледи.

Отвори CSV валидатор

Текст

Case / Slug / Escape

Преобразувайте текст в camelCase, snake_case, kebab-case, PascalCase, slug-ове и често използвани escape форми.

Отвори Case / Slug / Escape

Текст

Markdown валидатор и преглед

Валидирайте структурата на Markdown, преглеждайте рендерирания изход и улавяйте често срещани авторски проблеми преди публикуване.

Отвори Markdown валидатор