Renk Kodu Dönüştürücü
Herhangi bir rengi seçin ya da HEX, RGB, HSL veya HSB olarak bir değer girin — tüm formatlar anında güncellenir. Tamamlayıcı rengi ve yapıştırmaya hazır CSS snippet'ini alın. Tamamen tarayıcınızda çalışır, sunucuya hiçbir şey gönderilmez.
widget.pickAColor
widget.orEditAnyField
widget.complementaryColor
#F6AF3C
widget.complementaryDesc
widget.cssSnippet
color: #3B82F6;
background-color: #3B82F6;Renk Dönüştürücü Nasıl Kullanılır
Aktif rengi belirlemenin üç yolu vardır. İş akışınıza en uygun olanı kullanın — aracın geri kalanı otomatik olarak güncellenir.
Renk Girmenin Üç Yolu
Tarayıcınızın yerel renk seçicisini açmak için renkli kareye tıklayın, dört format alanından (HEX, RGB, HSL veya HSB) herhangi birine doğrudan bir değer yazın ya da Figma, Photoshop veya tarayıcı DevTools'unuzdan kopyaladığınız bir rengi yapıştırın. Herhangi bir alan değiştiğinde tüm formatlar anında eşitleniyor.
Tamamlayıcı Rengi Kullanmak
Tamamlayıcı renk, aynı doygunluk ve açıklığı koruyarak HSL renk çemberinde tonu 180° döndürerek hesaplanır. Marka renginize karşı öne çıkan yüksek kontrastlı buton ve bağlantı renkleri oluşturmak, bölünmüş tamamlayıcı veya üçlü paletler geliştirmek ya da CTA'lar için en fazla görsel gerilimi yaratacak aksent rengini belirlemek için kullanabilirsiniz.
Erişilebilirlik İpucu: Renk Kontrastı
WCAG 2.1 AA, arka planına karşı normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı gerektirir. HSL'den açıklık değerini kullanırken açık arka planlarda L ≤ %40, koyu arka planlarda L ≥ %60 olan metni tercih edin. Kesin WCAG uyumluluğu için her zaman özel bir kontrast denetleyici ile doğrulayın.
Sık Sorulan Sorular
HEX, RGB, HSL ve HSB renk formatları arasındaki fark nedir?
HEX (#RRGGBB), bir rengin kırmızı, yeşil ve mavi kanallarının altı basamaklı onaltılık gösterimidir ve web CSS'inde yaygın olarak kullanılır. RGB (Kırmızı, Yeşil, Mavi) aynı üç kanalı 0–255 arasında tam sayılar olarak ifade eder. HSL (Ton, Doygunluk, Açıklık), rengi renk çemberindeki konumu (ton, 0–360°), yoğunluğu (doygunluk, %0–100) ve siyahtan beyaza parlaklığı (açıklık, %0–100) ile tanımlar. HSB/HSV (Ton, Doygunluk, Parlaklık/Değer), benzer ancak Açıklık yerine Parlaklık kullanır — B=%100'de tamamen doygun bir HSB rengi canlıdır, HSL'de ise eşdeğeri L=%50'dir.
CSS'de hangi renk formatını kullanmalıyım?
Dört format da modern CSS'de geçerlidir. HEX, kompakt olduğu için statik değerler için en yaygın olanıdır. RGB ve HSL, değerleri programatik olarak değiştirmeniz gerektiğinde tercih edilir — örneğin, daha açık veya koyu tonlar türetmek için CSS özel özelliklerini kullanmak gibi. HSL, L (açıklık) değerini ayarlamak sezgisel sonuçlar ürettiğinden özellikle tasarımcı dostudur. HSB, CSS'de yerel olarak desteklenmez ancak Figma ve Adobe Photoshop gibi tasarım araçlarında kullanılır.
Tamamlayıcı renk nedir?
Tamamlayıcı renk, 12 adımlık veya 360° renk çemberinde doğrudan karşıda yer alan renktir; yani tonda 180° uzakta. Tamamlayıcı çiftler yan yana geldiğinde maksimum kontrast ve görsel canlılık yaratır — örneğin mavi ve turuncu, ya da kırmızı ve yeşil. Tasarımcılar harekete geçirici mesaj düğmeleri, vurgular veya kontrastın gerekli olduğu her yer için tamamlayıcı renkleri kullanır.
Bu araç renk verilerimi bir sunucuya gönderiyor mu?
Hayır. Tüm renk dönüştürme hesaplamaları JavaScript'te tamamen tarayıcınızda gerçekleşir. Herhangi bir renk değeri, seçici seçimi veya başka veri hiçbir sunucuya iletilmez. Sayfa yüklendikten sonra araç çevrimdışı çalışır.
Bir web sitesinde gördüğüm bir rengi HEX veya RGB'ye nasıl dönüştürürüm?
Tarayıcı DevTools'u açın (F12 veya sağ tıkla → İncele), istediğiniz renkteki öğeyi seçin ve Stiller panelinde CSS'sine bakın. HEX ve RGB değerlerini gösteren yerleşik seçiciyi açmak için herhangi bir renk değerinin yanındaki renkli örneğe tıklayın. Alternatif olarak, ekrandaki herhangi bir pikseli damlalık yapıp anında HEX/RGB kodu almak için ColorZilla gibi bir tarayıcı uzantısı kullanın.
İlgili Araçlar
Kapsamlı Teknik SEO Denetimine mi İhtiyacınız Var?
SEO uzmanlarımız sitenizin teknik sağlığını — taranabilirlik, Core Web Vitals, yapılandırılmış veriler ve daha fazlasını — denetleyebilir ve sürdürülebilir organik büyüme için özel bir eylem planı sunabilir.
Get a Free SEO Audit