Utilore

Renk dönüştürücü

Rengi alışılmış herhangi bir yazımla girin: #1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214). Diğer bütün biçimler aynı anda belirir, okunur bir metin için gereken kontrast değerleriyle birlikte.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

Kontrast:

Nasıl kullanılır

  1. Rengi yazın ya da yapıştırın, veya renk seçiciyle belirleyin.
  2. HEX, RGB ve HSL değerlerini yan yana okuyun.
  3. Dosyanızın ihtiyaç duyduğu yazımı kopyalayın.

Bilmekte fayda var

Aynı renk için üç yazım

HEX derli topludur ve CSS’te her yerde geçer. RGB kanalları açıkça adlandırır; bir değer elle yazılmak yerine hesaplandığında bu önem kazanır. HSL ise renk tonunu, doygunluğu ve açıklığı anlatır: aynı rengin bir ton açığını istediğinizde başvuracağınız biçim budur, çünkü üç sayıyı tahmin etmek yerine tek sayıyı değiştirirsiniz.

Kontrast süs değildir

WCAG’a göre gövde metninin arka planına karşı en az 4,5:1, büyük punto metnin ise en az 3:1 oranına ihtiyacı vardır. Burada gösterilen iki değer, bu rengin beyaz metni mi, siyah metni mi yoksa hiçbirini mi taşıyabileceğini tasarım geliştiriciye gitmeden önce söyler.

Kaynaklar

Sık sorulan sorular

Hangi biçimler kabul ediliyor?

Üç, dört, altı ve sekiz basamaklı HEX, diyez işaretiyle ya da işaretsiz, ayrıca virgüllü veya boşluklu rgb() ve rgba(). Alfa kanalı korunur ve HEX değerinde gösterilir.

HSL neden bazen biraz farklı bir renk gösteriyor?

HSL değerleri okunaklı olsun diye tam sayıya yuvarlanır, bu yüzden gidiş dönüşte bir kanalda bir birimlik kayma olabilir. HEX ve RGB değerleri tamdır.

Sunucuya bir şey gönderiliyor mu?

Hayır. Her şey sayfanın içinde hesaplanır: henüz yayımlanmamış bir tasarımın marka renkleri makinenizde kalır.

İlgili araçlar