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

HEX, RGB, HSL ve HSV renk değerlerini dönüştür

HEX, RGB, HSL ve HSV renk değerlerini dönüştür
Renk girişi
Renk önizlemesi
Formatlar
HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
HSV
hsv(243, 69%, 90%)

Araç rehberi

Renk dönüştürücü hakkında

Renk Dönüştürücü HEX, RGB, HSL ve HSV arasında renk değerlerini dönüştürür; arayüz CSS’i, tasarım teslimi ve tema tokenı temizliği için uygundur.

#4f46e5, rgb(...) veya hsl(...) girerek rengi kolayca kopyalanabilen biçimlere dönüştürün.

Renk Dönüştürücü nasıl kullanılır

  1. HEX, RGB, RGBA, HSL veya HSLA color değer yapıştırın.
  2. Convert edip HEX, RGB, HSL ve HSV outputs kontrol edin.
  3. Swatch preview ile rengi doğrulayın, tek format veya all formats kopyalayın.

Ne zaman kullanılır

  • Tasarımdaki HEX değerini CSS rgb() veya hsl() biçimine çevirmek.
  • HSL içinde lightness ve saturation ayarlayarak hover states denemek.
  • Tema temizliği sırasında renk belirteci değerlerini standartlaştırın.

Color formats ve dikkat noktaları

HEX, RGB, HSL ve HSV aynı rengi farklı koordinatlarla anlatır. Bu dönüştürücü RGB renginin kendisini korur; RGBA veya HSLA girdisindeki alfa kabul edilir ama çıktıda korunmaz.

  • 3-digit HEX, 6-digit HEX haline genişletilir.
  • RGB channels 0 ile 255 arasında olmalıdır.
  • HSL, S/L için percentages kullanır ve hue 0-360 degrees içinde döner.
  • HSV pickerlarda yaygındır; HSL CSS theme tuning için daha pratiktir.

Renk dönüştürücü hakkında sık sorulan sorular

HEX to RGB ve RGB to HEX yapar mı?
Evet. HEX girdi RGB/HSL/HSV üretir, RGB girdi da HEX/HSL/HSV üretir.
Alpha neden sonuçta yok?
Araç opaque color conversion odaklıdır; RGBA/HSLA alpha ignored edilir.
Colors upload edilir mi?
Hayır. Parsing, conversion, preview ve copy tarayıcıda lokal çalışır.

Color conversion ve readability

Format değiştirmek contrast garantisi vermez. Text, buttons veya links için kullanmadan önce gerçek background üzerinde WCAG contrast, brand fit ve UI states kontrol edin.

CSS color format nasıl seçilir

Aynı color HEX, RGB, HSL veya HSV olarak yazılabilir; fakat her format farklı bakım işi için daha uygundur.

  • Compact tasarım teslimi values ve kararlı tema tokenları için HEX kullanın.
  • Saydamlık, değişkenler veya dinamik bileşim gerekiyorsa CSS rgb() ya da hsl() kullanın.
  • Hover, active, daha açık veya daha koyu varyantlar üretirken HSL kullanın; hue, saturation ve lightness ham RGB değerinden daha anlaşılırdır.

Renkleri ship etmeden accessibility checks

Color conversion değerleri equivalent tutar, fakat metin readability, state clarity veya contrast compliance kanıtlamaz.

  • Body metin ve button metin değerlerini gerçek background üzerinde WCAG contrast rules ile kontrol edin.
  • Hata, başarı veya devre dışı durumları yalnız color ile anlatılmamalı; metin, icons veya şekil değişiklikleri ekleyin.
  • Brand colors links veya focus rings için kullanılıyorsa hover, active, disabled ve selected states de doğrulanmalıdır.

İlgili araçlar