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 teması

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ü

Görseller

Görsel tuval ayarlayıcı

Bir görselin tuval boyutunu, görselin kendisini yeniden boyutlandırmadan değiştirin. Ölçüleri, genişletme yönünü, saydamlığı ayarlayın ve yerel olarak indirin.

Aç Görsel tuvali

Asset'ler