HEX'i RGB'ye Çevirme ve Metin Kontrastını Çevrimiçi Ücretsiz Kontrol Etme

Web siten için bir renk seçtin ve şimdi tasarım HEX diyor ama kodun RGB istiyor. Ya da güzel bir düğme yaptın ve üzerindeki metni kimsenin okuyup okuyamayacağından emin değilsin. GetPlugzz CSS ve Renk Araçları ikisini de yapar, üstüne iki iş daha: gradyan oluşturur ve box-shadow ile border-radius CSS'i üretir. Her şey tek sayfada, yazdıkça anında güncellenir ve tarayıcında çalışır; yani hesap yok ve hiçbir şey yüklenmez.

Dört araç, bir dakikada

CSS ve Renk Araçları'nı aç ve bir sekme seç:

• Renk Dönüştürücü. Bir rengi HEX, RGB ya da HSL olarak yaz, diğer ikisi hemen güncellenir. Renk seçmek için renk kutusuna da tıklayabilirsin.
• Gradyan. Renklerini seç (daha fazla ekleyebilirsin), doğrusal ya da dairesel olsun, açıyı ayarla, sonra CSS'i kopyala'ya bas.
• Kontrast Kontrolü. Bir metin rengi ve bir arka plan rengi seç, görme zorluğu olan insanların okuyup okuyamayacağını gör, WCAG AA ve AAA sonucuyla birlikte.
• Gölge ve Köşe Yuvarlama. Bir box-shadow oluşturmak için kayma, bulanıklık ve yayılmayı kaydır, köşeleri border-radius ile yuvarla. Güzel görününce CSS'i kopyala.

HEX, RGB ve HSL: bir renk, söylemenin üç yolu

Aynı boya rengini üç farklı etikete yazılmış hâlde düşün. Boya aynı, sadece tarif başka türlü yazılmış:

• HEX kısa koddur: # ve ardından altı harf ya da rakam, #2563EB gibi.
• RGB tariftir: ne kadar kırmızı, yeşil ve mavi karıştırılacağını söyleyen üç sayı.
• HSL ayar düğmeleridir: ton, doygunluk ve açıklık. Elle ayarlaması en kolay olanıdır. Aynı rengi biraz daha açık mı istiyorsun? Bir düğmeyi çevirmen yeter.

Tasarımlar genelde bunlardan birini verir ve kodun bir başkasına ihtiyaç duyar; bir dönüştürücünün sana birkaç dakika kazandırdığı an tam olarak budur.

HEX'i RGB'ye nasıl çevirirsin

1. Renk Dönüştürücü'yü aç. İlk sekmedir.
2. HEX kodunu yaz ya da yapıştır, HEX kutusuna.
3. Sonucu oku. RGB ve HSL değerleri, renk kutusuyla birlikte kendiliğinden dolar.

Ters yönde de çalışır. Üç alandan birine yaz, diğer ikisi ardından gelir.

Metnin gerçekten okunuyor mu? (fısıltı sorunu)

Beyaz zemin üzerinde açık gri metin ekranında zarif görünür. Görme zorluğu olan biri için ya da güneşin altındaki bir telefonda, gürültülü bir odada fısıltı gibidir. Kontrast Kontrolü metin ve arka plan renginin ne kadar farklı olduğunu ölçer ve geçip geçmediğini söyler.

WCAG'i kullanır, yani Web Content Accessibility Guidelines; bu kurallar görme zorluğu olan kişiler için metnin okunabilir kalması adına en düşük kontrastı belirler. İki düzey var: AA çoğu sitenin hedeflediği standarttır, AAA daha katıdır. İhtiyacın olan:

• Normal metin: AA için en az 4,5:1, AAA için 7:1.
• Büyük metin: AA için 3:1 yeter. Büyük, 18pt ya da daha büyük, ya da kalın yazıda 14pt ya da daha büyük demektir.

Araç oranı ve iki düzeyde normal ve büyük metin için bir sonuç gösterir, yani hiç hesap yapman gerekmez.

CSS'i elle yazmadan gradyan ve gölge

Gradyan için renklerini seç, doğrusal ya da dairesel olsun, açıyı ayarla ve CSS'i kopyala'ya bas. İşin tamamı bu.

Gölge için bir kutunun üstündeki lambayı düşün. Kayma gölgenin nereye düşeceğini değiştirir, daha fazla bulanıklık onu yumuşatır, yayılma ise büyütür. Gölgenin rengini ve saydamlığını ayarlayabilir ya da iç gölge yapabilirsin. Sonra köşeleri border-radius ile, hepsini birden yuvarla ve güzel görününce CSS'i kopyala.

Bunu gerçekten ne zaman kullanırsın

• Bir tasarım sana HEX kodu verir ve kodun RGB ya da HSL ister.
• Bir düğme ya da başlık, metnin okunup okunmadığını kontrol etmek istediğin.
• Güzel bir gradyana ihtiyacı olan bir sayfa ya da kart arka planı.
• Sayfadan yumuşak bir gölge ve yuvarlak köşelerle ayrışması gereken bir kart.
• Bir müşteri, okul projesi ya da kendi siten için erişilebilirlik kontrolü.

Başlamadan önce bilmekte fayda var

Sık sorulan sorular