Color converter (HEX, RGB, HSL)
Convert colors between HEX (#RRGGBB), RGB (0–255), and HSL (hue, saturation, lightness) in real time. Adjust the picker or type values to see all formats update together — ideal for CSS, Figma handoff, and brand guidelines. HSL makes intuitive tweaks (lighter/darker without hue shift) easier than editing hex digits.
Renk
Sonuç
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
How to convert colors
1. Pick a color visually or enter HEX, RGB, or HSL values.
2. See equivalent values in all supported formats instantly.
3. Tweak HSL lightness for hover states while keeping brand hue.
4. Copy the format your stack needs (#hex for CSS, rgb() for modern browsers).
Renk dönüşümü örnekleri
Marka mavi #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Vurguyu karart: hsl(217, 84%, 45%) onaltılıyı tahmin etmeden.
CSS rgb'den HEX'e, SVG için
rgb(255, 87, 51) → #FF5733, SVG dolgu ve Android XML renk kaynakları için.
Kenarlıklar için nötr gri
hsl(220, 10%, 90%) → çok açık soğuk gri; Renkli kullanıcı arayüzü arka planları için doygunluğu biraz artırın.
Ne zaman kullanılmalı
• Tasarım belirteçlerini Figma'daki HEX ile CSS değişkenlerindeki HSL arasında çevirdiğinizde.
• HSL açıklığını değiştirerek tutarlı açık/koyu temalar oluşturduğunuzda.
• Geliştiriciler ve pazarlamacılar için marka paletlerini belgelediğinizde.
Ne zaman başka bir şey seçmeli
• WCAG kontrastını doğrulamanız gerektiğinde kontrast denetleyiciyi kullanın.
• Baskı için CMYK veya Pantone'ye ihtiyacınız olduğunda baskıya özel araçları kullanın.
• Tam degradeler oluşturduğunuzda — CSS degrade oluşturucuyu kullanın.
Kullanıcı arayüzü çalışması için renk teorisi
Tamamlayıcı renkler, renk tekerleğinin karşısında yer alır (180° ayrı) — yüksek kontrast, CTA'lar için dikkatli kullanın. Benzer tonlar (±30°) gösterge panelleri için uyumlu bir his uyandırıyor. Nötr UI kromu, farklı ekranlar altında sıcak/soğuk görünebilen saf #EEE yerine genellikle düşük doygunluğa sahip maviler veya griler (hsl 220, %10, %96) kullanır. Marka paletini bir ana renk tonu, 2-3 nötr renk ve durum için anlamsal yeşiller/kırmızılarla sınırlandırın.
Erişilebilirlik dönüşümle başlar
Beyaz üzerine güzel bir #7C3AED moru, küçük metinlerde kontrastı bozabilir. Burada renkleri seçtikten sonra kontrast denetleyicide ön plan/arka plan çiftlerini çalıştırın. Hataları düzeltmek için HSL ince ayarlarını tercih edin: renk tonunu korurken metni koyulaştırın veya arka planı aydınlatın. Hatalar için yalnızca renge güvenmeyin; simgeler ve etiketlerle eşleştirin (WCAG 1.4.1).
Sık sorulan sorular
HSL ne işe yarar?
Renk tonunu sabit tutarken açıklığı ve doygunluğu ayarlama — ör. bir renk tonu değerinden birincil, birincil vurgulu, birincil sessiz.
HEX kısaltması #RGB?
#F53, #FF5533'ye genişler. 3 veya 6 haneli onaltılık sayıyı (isteğe bağlı #) kabul ediyoruz.
sRGB mi ekran-P3 mü?
Bu araç, web CSS standardı olan sRGB'yi kullanır. Geniş gamlı ekranlar biraz farklı görüntülenebilir.
Alfa / şeffaflık?
Aracın alfa — kullanıcı arayüzü alanlarını kontrol ettiği yerlerde 8 basamaklı HEX (#RRGGBBAA) ve rgba() desteklenebilir.
RGB toplamlarım neden hex'te yanlış görünüyor?
Her kanal 0–255 → iki onaltılık basamaktan oluşur. 255 = FF, “255” birleştirilmiş değil.
Verilerim bir sunucuya mı gönderiliyor?
HAYIR.
Bu araç ücretsiz mi?
Evet.