Renk Dönüştürücü

Kontrastı kontrol ederek ve CSS'e hazır token'lar dışa aktararak hex, RGB, HSL, OKLCH ve OKLAB arasında dönüştürün.

Geçerli renk

#953769

Önerilen ön plan

#FFFFFF

Tamamlayıcı renk

#007653

Hex

RGB(A)

HSL(A)

OKLCH

OKLAB

Alfa

Tailwind theme

Geçerli renkten Tailwind CSS 4 veya 3 için tam bir marka paleti oluşturun.

@theme {
  --color-brand-50: oklch(94.5% 0.0212 350.46);
  --color-brand-100: oklch(89.49% 0.0339 350.46);
  --color-brand-200: oklch(81.48% 0.0542 350.46);
  --color-brand-300: oklch(72.47% 0.0771 350.46);
  --color-brand-400: oklch(61.46% 0.105 350.46);
  --color-brand-500: oklch(48.44% 0.138 350.46);
  --color-brand-600: oklch(43.57% 0.1236 350.46);
  --color-brand-700: oklch(38.7% 0.1093 350.46);
  --color-brand-800: oklch(33.22% 0.0932 350.46);
  --color-brand-900: oklch(27.74% 0.077 350.46);
  --color-brand-950: oklch(23.48% 0.0644 350.46);
}

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 değişkenleri

:root {
  --brand: oklch(48.44% 0.138 350.46);
  --brand-rgb: rgb(149, 55, 105);
  --brand-foreground: #ffffff;
}

CSS renk dönüştürme hakkında

Renk dönüştürücüler aynı rengi HEX, RGB, HSL, OKLCH ve OKLAB arasında taşımanıza yardımcı olur. Okunabilir çıktı, kontrast bağlamı ve CSS ya da Tailwind için hazır değerler gerektiğinde en kullanışlı halini alır.

HEX, RGB, HSL ve CSS renkleri

HEX, RGB ve HSL çoğu günlük tarayıcı, tasarım ve frontend iş akışını kapsar.

Hızlı dönüştürme, tek bir değeri yapıştırıp sözdizimini elle yeniden yazmadan her yerde kullanmanızı sağlar.

OKLCH ve OKLAB neden önemlidir

OKLCH ve OKLAB, yumuşak skalalar ve öngörülebilir açıklık değişimleri oluşturmak için daha uygundur.

Dengeli rampalar ve güvenilir kontrast sizin için önemliyse palet çalışmasını kolaylaştırır.

Kontrast kontrolleri ve Tailwind çıktısı

Kontrast kontrolleri ve framework'e hazır çıktı, dönüştürücüyü pratik bir UI aracına dönüştürür.

Tek bir giriş renginden erişilebilir metin seçeneklerine ve Tailwind uyumlu token'lara daha hızlı geçebilirsiniz.

Sık sorulan sorular

Desteklenen renk formatları, OKLCH gibi algısal uzayların ne zaman kullanılacağı ve kontrast ile Tailwind çıktılarının nasıl yorumlanacağı hakkında yanıtlar.

Diğer araçlar

Tüm özel araç sayfalarına ana sayfa merkezinden veya ortalanmış başlık seçicisinden göz atın.

Görseller

WebP Dönüştürücü

En fazla 10 JPEG, PNG veya WebP görseli kalite preset'leri ve ZIP indirmeleriyle WebP'ye dönüştürün.

Aç WebP Dönüştürücü

Asset'ler

Favicon / App Icon Oluşturucu

Tek bir kare kaynak görsel yükleyin ve app icon'lar ile başlangıç web manifest'i içeren bir favicon paketi oluşturun.

Aç Favicon Oluşturucu

Veri Formatları

JSON / YAML / TOML Dönüştürücü

JSON, YAML ve TOML'i net uyumluluk uyarılarıyla doğrulayın, biçimlendirin, küçültün ve dönüştürün.

Aç JSON / YAML / TOML

Veri Formatları

CSV Doğrulayıcı

Delimiter algılama, başlık kontrolleri, sorun listeleri ve ayrıştırılmış önizlemelerle CSV dosyalarını ve yapıştırılan satırları doğrulayın.

Aç CSV Doğrulayıcı

Metin

Case / Slug / Escape

Metni camelCase, snake_case, kebab-case, PascalCase, slug ve yaygın escape formlarına dönüştürün.

Aç Case / Slug / Escape

Metin

Markdown Doğrulayıcı ve Önizleme

Markdown yapısını doğrulayın, render edilmiş çıktıyı önizleyin ve yayınlamadan önce yaygın yazım sorunlarını yakalayın.

Aç Markdown Doğrulayıcı

HEX, RGB, HSL ve CSS renkleri

OKLCH ve OKLAB neden önemlidir

Kontrast kontrolleri ve Tailwind çıktısı