Renk Dönüştürücü nedir?
Bir Renk Dönüştürücü, web geliştiricileri, grafik tasarımcılar ve dijital renklerle çalışan herkes için vazgeçilmez bir araçtır. HEX (on altılık), RGB (kırmızı-yeşil-mavi) ve HSL (ton-doygunluk-açıklık) olmak üzere en yaygın kullanılan üç renk formatı arasında anlık ve hassas dönüşüm sağlar. HEX gösterimi, #FF5733 gibi # işareti ardından altı on altılık rakamla yazılır ve CSS ile web tasarımında standart formattır. RGB formatı, rgb(255, 87, 51) olarak ifade edilir ve her bir kanalın intensitesini belirterek renkleri tanımlar. HSL formatı, hsl(11, 100%, 60%) olarak yazılır ve renkleri ton, doygunluk ve açıklık açısından tanımlar.
Bu Hesap Makinesi Ne Zaman Kullanılmalı
- Tasarımcının renk özelliklerini CSS uyumlu değerlere dönüştürürken.
- Tasarım sistemi oluştururken.
- HSL kullanarak renk paletleri oluştururken.
- WCAG uyumluluğu için renk kontrastını kontrol ederken.
- Mevcut kodda eski renk değerlerini dönüştürürken.
- CSS renk sorunlarını hata ayıklarken.
Adımlar:
- Herhangi bir formatta renk değeri girin.
- Giriş formatını seçin.
- Üç formatta dönüştürülmüş değerleri görüntüleyin.
- Sonucu kopyalayın.
- WCAG kontrast rozetlerini kontrol edin.
Formül
HEX → RGB: #RRGGBB değerlerini ondalık sayılara bölün
RGB → HSL: RGB değerlerini normalize edin → renk tonu/doygunluk/aydınlık bulun
HSL → RGB: krom formülleriyle dönüştürün
HEX: #RRGGBB (her biri 0-255)
RGB: rgb(R, G, B) (0-255)
HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)
Kullanım Alanları
- CSS renk değerlerini dönüştürme
- Temel renklerden renk şemaları oluşturma
- Tasarım sistemi renklerini eşleştirme
- HSL aracılığıyla renk ilişkilerini anlama
Temel Faydalar
- HEX, RGB ve HSL formatları arasında anında renk dönüştürme
- Yazarken güncellenen canlı renk önizlemesi görüntüleme
- WCAG kontrast oranını otomatik AA ve AAA rozetleriyle kontrol etme
- Dönüşüm geçmişine erişim
- Tek tıklamayla herhangi bir formatı kopyalama
- Tarayıcıda tamamen çalışır, veri göndermez
Uzman İpuçları
- Renk çeşitlemeleri oluşturmak için HSL kullanın.
- CSS ve HTML için her zaman HEX kullanın.
- Renk seçimlerinizi WCAG kontrat gereksinimlerine göre doğrulayın.
- Taban paletinizi HSL'de tanımlayın.
- HEX değerleri büyük/küçük harf duyarsızdır.
Kaçınılması Gereken Yaygın Hatalar
- HEX renkleri girerken # ön ekini unutmak.
- 255'in üzerinde veya 0'ın altında RGB değerleri kullanmak.
- HSL ton aralığını (0-360) RGB (0-255) ile karıştırmak.
- HSL açıklığı ile RGB parlaklığının eşdeğer olduğunu varsaymak.
Anahtar Terimler Açıklandı
- HEX: CSS ve web tasarımında kullanılan on altılık renk gösterimi.
- RGB: Kırmızı-yeşil-mavi renk modeli.
- HSL: Ton-doygunluk-açıklık renk modeli.
- Renk uzayı: Renkleri düzenlemek ve temsil etmek için matematiksel model.
- WCAG kontrast oranı: Metin ve arka plan arasındaki parlaklık farkının sayısal ölçümü.
İlgili Kavramlar
- CSS Birim Dönüştürücü: px, rem, em, vw ve diğer CSS birimleri arasında dönüştürme
- Base64 Kodlayıcı/Çözücü: Base64 dizelerini kodlama ve çözme
- JSON Biçimlendirici: JSON verilerini biçimlendirme ve doğrulama
- Regex Test Cihazı: Örnek metne karşı düzenli ifadeleri test etme
- URL Kodlayıcı/Çözücü: URL güvenli dizeleri kodlama ve çözme
Örnek
Giriş: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Giriş: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Sonuçlarınızı Yorumlama
Dönüştürücü renginizi üç formatta aynı anda görüntüler. HEX, web geliştirmede en yaygın formattır. RGB, tekil renk kanalları üzerinde doğrudan kontrol sağlar. HSL, insan anlayışı için en sezgisel formattır.