Renk Formatı Dönüştürücü; HEX, RGB, HSL, HSV ve OKLCH arasındaki tüm renkleri birbirine çevirir. Yerel renk seçiciyi kullanın, bir hex değeri yazın, herhangi bir CSS renk dizisini yapıştırın veya RGB sürgülerini ayarlayın; her format canlı olarak güncellenir ve her birinin kendi kopyalama butonu vardır.
Modern CSS, aynı rengi yazmanız için size bir düzine yol sunar: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293) ve her birinin alfa (şeffaflık) varyantları. Genellikle bunlar arasında dönüşüm yapmanız gerekir; Figma tasarımı size bir OKLCH değeri verirken, kod tabanınız HEX kullanıyor olabilir veya tema değişkenleriniz hover efektleri için HSL formatını tercih ediyor olabilir. Renk Formatı Dönüştürücü, tüm dönüşümleri tek bir panelde yapar. Yerel renk seçiciden bir renk belirleyin, mevcut bir rengi herhangi bir söz diziminde yapıştırın veya hassas ayar için RGB sürgülerini sürükleyin. Yaygın tüm formatlar eş zamanlı olarak oluşturulur: HEX (alfa dahil), rgb()/rgba(), hsl()/hsla(), hsv() ve oklch(). Ayrıca hızlı kontrast hesaplamaları için bir CSS değişken parçacığı ve hesaplanmış parlaklık (luminance) değeri de sunulur. Alfa kanalı uçtan uca desteklenir. Her formatın tek tıkla kullanım için kendi kopyalama butonu vardır ve ayrıştırıcı, yerel renk adlarını ve CSS'in desteklediği her şeyi kabul eder.
HEX, RGB/RGBA, HSL/HSLA, HSV ve OKLCH formatlarını aynı anda gösterir; her seferinde yeniden dönüştürme yapmadan hedef kodunuzun beklediği formatı seçin.
HEX (#abc, #aabbcc veya #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() ve yerel renk adlarını kabul eder. CSS'in desteklediği her şeyi yapıştırabilirsiniz.
Modern CSS'te kullanılan yeni OKLCH formatını destekler; algısal olarak tekdüze olan bu renk uzayı, yeni tasarım sistemlerinin varsayılanı haline gelmektedir.
Her çıktının kendi kopyalama butonu vardır. Manuel seçim yapmanıza gerek kalmadan kodunuz için ihtiyacınız olan formatı tek tıkla alın.
İnce ayar için Kırmızı/Yeşil/Mavi/Alfa sürgülerini kullanın. Siz sürükledikçe her format gerçek zamanlı olarak güncellenir.
Şeffaflık her formatta işlenir: #RRGGBBAA, rgba(...), hsla(...). Bir kez ayarlayın, her yerde dönüştürülsün.
Figma size bir OKLCH veya HSL değeri mi verdi? Yapıştırın, tarayıcıdan ayrılmadan Tailwind konfigürasyonunuz veya CSS değişkenleriniz için HEX karşılığını kopyalayın.
Tonları keşfetmek için sürgüleri sürükleyin ve sistematik bir tasarım sistemi paleti için OKLCH değerlerini not edin.
Bir marka rengini HSL formuna dönüştürün; böylece hover durumları için hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) gibi dinamik yapılar kullanabilirsiniz.
Parlaklık alanı, WCAG kontrast hesaplamalarında kullanılan ham değeri verir; erişilebilirlik (a11y) hesaplamaları için kullanışlıdır.
Okuduğunuz bir CSS dosyasındaki oklch(...) değerini yapıştırın ve gerçekte hangi rengi ürettiğini anında görün.
DevSuite Pro dock'undaki Renk Formatları simgesine tıklayın. Renk seçici, hex girişi ve RGB sürgüleri içeren bir panel açılır.
Renk seçiciyi kullanın, bir hex değeri yazın veya herhangi bir CSS renk dizisini (rgb(...), oklch(...) vb.) yapıştırın. Renk anında önizlenir.
Tüm formatlar aşağıda listelenir: HEX, RGB, HSL, HSV, OKLCH, CSS değişkeni ve parlaklık. Siz ayar yaptıkça hepsi senkronize kalır.
Hassas ayarlamalar için R/G/B/A sürgülerini sürükleyin. Bir tasarım spesifikasyonuna uyan belirli bir tonu yakalamak için idealdir.
İstediğiniz format satırındaki Kopyala butonuna tıklayın; değer, doğru söz dizimiyle panonuza kopyalanır.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 64'dan fazla geliştirici aracının kilidini açın.
