Renk Adları ve Hex Kodları

Herhangi bir renk adının hex, RGB ve HSL değerlerini bulun ya da bir koda en yakın adlandırılmış rengi görün. 148 CSS renginin tonları ve WCAG kontrast oranları.


Bir renk adı yazın ya da hex, RGB veya HSL değeri yapıştırın. Dört biçim de çalışır.
Temizle

Adlandırılmış tüm CSS renkleri

CSS içinde tanımlı 148 renk adının tamamı, hex ve RGB değerleriyle birlikte. Yukarıda açmak için herhangi bir satıra tıklayın.

Hex renk kodları nasıl çalışır

Bir hex kodu, 16 tabanında yazılmış üç sayıdan ibarettir: ne kadar kırmızı, ne kadar yeşil ve ne kadar mavi, her biri 00 ile FF arasında. Yani #FFD700 tam güçte kırmızı, 255 üzerinden 215 yeşil ve hiç mavi olmaması demektir; göz bunu altın olarak okur. Yalnızca iki basamaklı çiftler önemlidir, bu yüzden #FFF ve #FFFFFF ikisi de beyazdır.

Hex, RGB ve HSL karşılaştırması

Üçü de aynı renkleri tarif eder, sadece farklı bilgi taşırlar. Hex derli topludur ve CSS te alışılmış tercihtir. RGB aynı sayıları ondalık olarak verir, hesaplaması daha kolaydır. HSL ise renk tonunu doygunluk ve açıklıktan ayırır, böylece elle palet kurmak çok daha kolaylaşır: tonu koruyun, açıklığı değiştirin, uyumlu bir ara ton elde edin.

Kontrast neden önemli

Metnin, az gören kişiler veya loş bir ekran için arka planından yeterince ayrışması gerekir. Erişilebilirlik kılavuzları normal metin için 4,5 e 1 (AA), daha katı AAA düzeyi için 7 ye 1 oran belirler. Büyük metne 3 e 1 izin verilir. Bu araç oranı hem beyaza hem siyaha karşı hesaplar, böylece üste hangisini koyacağınızı hemen görürsünüz.

Bilmekte fayda var

  • CSS in 148 adlandırılmış rengi vardır ve birkaçı tekrardır: grey ile gray, aqua ile cyan aynıdır.
  • Kısa hex yazımı yalnızca her çift tekrar ettiğinde işe yarar; #FFCC00 yerine #FC0 yazılabilir ama #FFD700 kısaltılamaz.
  • İki hex basamağı daha eklemek saydamlığı belirler, dolayısıyla #FFD70080 yaklaşık yarı örtücülükte altındır.
  • Palet kurmak için HSL de tonu sabit tutun ve yalnızca açıklığı değiştirin. Renkler her zaman akraba görünür.

Sıkça sorulan sorular

gold adlı CSS rengi #FFD700, yani rgb(255, 215, 0) dir. Metalik bir tondan çok parlak bir sarı altındır, çünkü düz bir renk gerçek altının parıltısını veremez. Daha metalik bir görünüm için tasarımcılar genellikle onu CSS in darkgoldenrod dediği #B8860B gibi koyu altın tonlarıyla birlikte kullanır.

Adı yukarıdaki kutuya yazın, hex, RGB ve HSL değerlerini bir arada alın. Bu, 148 adlandırılmış CSS renginin tamamı için geçerlidir ve tersi de çalışır: bir hex kodu yapıştırın, araç en yakın adlandırılmış rengi tam uzaklığıyla birlikte söylesin.

İkisi de tamamen aynı bilgiyi farklı gösterimle taşır. Hex, üç kanalın her birini 16 tabanında iki basamakla yazar; yani #FF7F50 kırmızı 255, yeşil 127, mavi 80 demektir. RGB aynı sayıları ondalık olarak rgb(255, 127, 80) biçiminde yazar. Hiçbiri daha kesin değildir; hex yalnızca CSS te daha kısa yazılır.

Renk tonu, doygunluk ve açıklık. Ton, renk çemberinde 0 ile 360 derece arasındaki konumdur; doygunluk rengin ne kadar canlı olduğunu; açıklık ise 0% siyahtan 100% beyaza kadar uzanır. Tasarım için en kullanışlı biçimdir, çünkü tonu koruyup yalnızca açıklığı değiştirmek, açıkça birbirine ait bir ara ton dizisi üretir.

CSS belirtiminde transparent dahil 148 adlandırılmış renk bulunur. Birkaç ad aynı değerlere karşılık gelir; özellikle grey ile gray, aqua ile cyan ve magenta ile fuchsia. Hex ve RGB değerlerini içeren tam liste bu sayfadadır.

Erişilebilirlik kılavuzları normal gövde metni için en az 4,5 e 1, büyük metin için 3 e 1 ister; bu AA düzeyidir. Daha katı olan AAA düzeyi 7 ye 1 ister. Bu araç renginizin beyaza ve siyaha karşı oranını hesaplar ve hangisinin geçtiğini söyler, böylece okunabilir seçeneği hemen belirlersiniz.

Evet. Sekiz basamaklı bir hex kodu sona iki alfa basamağı ekler; 00 tamamen saydam, FF tamamen örtücüdür. Böylece #FF000080 yaklaşık %50 örtücülükte kırmızıdır. Güncel tüm tarayıcılar destekler, gerçi eski rgba() gösterimi hâlâ çok yaygındır.

Çünkü 148 adlandırılmış renk, bir ekranın gösterebildiği yaklaşık 16,7 milyon rengin çok küçük bir örneğidir. Değeriniz bu kesin noktalardan biri değilse, bu araç ikisi arasındaki uzaklığı RGB uzayında ölçerek en yakın adlandırılmış rengi bulur ve bunun bir eşleşme değil yaklaşıklık olduğunu belirtir.

Bir rengin hex kodu nedir?

Bir renk adı yazın ve hex, RGB ve HSL değerlerini bir arada alın, ya da herhangi bir kodu yapıştırıp en yakın adlandırılmış CSS rengini bulun. Gold #FFD700, coral #FF7F50 ve teal #008080 dir. Her sonuç ayrıca koyu ve açık tonları ve siyah ile beyaza karşı kontrast oranını gösterir.