HTML Renk Kodları: Seçici ve Çevirici

HTML renk kodları nedir, bu araç size ne gösterir?

HTML renk kodları, bir rengi tarayıcının anlayacağı biçimde yazmanın standart yollarıdır: #31C48D gibi bir HEX kodu, rgb(49, 196, 141) gibi kanal değerleri, hsl() gösterimi ya da teal gibi hazır bir ad. Ekran her rengi kırmızı, yeşil ve mavi ışığın karışımıyla üretir. Her kanal 0 ile 255 arasında 256 değer alır; dolayısıyla bu üç kanalla toplam 16.777.216 farklı renk yazabilirsiniz.

Bu araç girdiğiniz tek bir değeri aynı anda beş biçime çevirir. Yani müşterinin gönderdiği RGB değerini, Figma'daki HSB değerini ve matbaanın sorduğu CMYK karşılığını tek ekranda görürsünüz. Ayrıca araç şunları yapar:

• rengi en yakın CSS renk adıyla eşleştirir; birebir ad yoksa başına ≈ işareti koyar,
• dört açık ve dört koyu ton ile tamamlayıcı, analog ve üçlü uyum renklerini türetir,
• beyaz ve siyah zemindeki WCAG kontrast oranını hesaplar,
• 40 yaygın HTML rengini tek tıkla seçer ve HEX kodunu panoya kopyalar.

Üstelik bütün hesaplar tarayıcınızda çalışır. Kurumsal kimlik projelerinde ekibimle ilk işimiz renkleri tek bir kod listesine bağlamak oluyor; marka kimliği çalışmasının geri kalanını da bu listenin üstüne kuruyoruz.

HEX kodunu nasıl okursunuz, kısa ve 8 haneli yazım ne işe yarar?

HEX kodu, üç kanalın değerini onaltılık sayı sisteminde yan yana yazar: #RRGGBB. İlk iki hane kırmızıyı, sonraki iki hane yeşili, son iki hane maviyi verir. Yani onaltılık sistemde 00 sıfıra, FF ise 255'e karşılık gelir. Örneğin #DC143C kodunda DC kırmızı kanalda 220, 14 yeşil kanalda 20, 3C ise mavi kanalda 60 demektir; araç bunu rgb(220, 20, 60) olarak gösterir.

CSS dört HEX biçimini kabul eder ve araç dördünü de okur:

• #RGB: üç haneli kısa yazım; tarayıcı her haneyi ikiye katlar, bu yüzden #F60 aslında #FF6600'dür.
• #RRGGBB: en yaygın, altı haneli biçim.
• #RGBA ve #RRGGBBAA: son hane ya da son iki hane saydamlığı (alfa) taşır. 00 tamamen saydam, FF tamamen opaktır; 80 ise yüzde 50'ye yakın opaklık verir.

Harflerin büyük ya da küçük olması sonucu değiştirmez; #dc143c ile #DC143C aynı renktir. Bununla birlikte ekip içinde tek bir yazım seçmenizi öneririm, çünkü tasarım dosyasında arama yaparken aynı rengin iki farklı yazımı gözden kaçar. Araç her sonucu büyük harfle verir, diyez işaretini unutsanız da kodu tanır.

RGB, HSL ve HSB arasındaki fark nedir, hangisini seçmelisiniz?

Üçü de aynı rengi anlatır, ancak her biri farklı bir iş için rahattır. RGB ekranın dilidir: 0 ile 255 arasında üç kanal. Bu yüzden görsel düzenleme programlarında ve kodda en tanıdık biçim budur.

HSL rengi ton (0-360°), doygunluk ve açıklık olarak tanımlar. CSS'te bir rengin açık ve koyu sürümlerini üretmek için en pratik gösterim budur; yalnız L değerini değiştirirsiniz, ton aynı kalır. L değeri 100 olduğunda her renk beyaza, 0 olduğunda siyaha döner.

HSB (bazı programlarda HSV) ise Figma ve Photoshop gibi tasarım araçlarının seçicisinde karşınıza çıkar. Buradaki B parlaklıktır ve 100 değeri beyazı değil, rengin en canlı hâlini verir. Farkı somut görmek için bir örnek: #1F8FFF için araç HSL satırında açıklığı %56, HSB satırında parlaklığı %100 gösterir.

Pratikte şöyle çalışıyorum: tasarım dosyasından HEX ya da HSB alırım, CSS'e HEX veya HSL yazarım, müşteriye rapor verirken RGB kullanırım. Figma ile web arayüz tasarımı yazısında bu akışın tasarım tarafını anlattım. HSB değerini araca hsb(210, 88%, 100%) biçiminde yazarsanız araç onu da HEX koduna çevirir.

CSS renk adları: 148 adın hepsine güvenebilir misiniz?

CSS bugün 148 renk adı tanır. Bunların 16'sı HTML 4.01'den gelen temel renklerdir; yukarıdaki tabloda hepsini kodlarıyla bulabilirsiniz. Kalanların çoğu X11 renk listesinden geldi ve CSS Color Level 3 ile standartlaştı; en yenisi rebeccapurple adıdır. Güncel listeyi W3C CSS Color Module Level 4 belgesinde görebilirsiniz.

Bazı adlar aynı rengin iki yazımıdır: gray ile grey, aqua ile cyan, fuchsia ile magenta aynı değeri verir. Bu yüzden 148 ad aslında 139 farklı renge karşılık gelir. Adlar okunaklıdır, fakat birkaç tuzak içerir:

• darkgray, gray'den açıktır: darkgray #A9A9A9, gray ise #808080 değerini verir.
• Adlar saydamlık taşımaz: her ad opak bir renktir; yalnız transparent anahtar kelimesi tamamen saydamdır.
• Büyük harf fark etmez: DodgerBlue ile dodgerblue aynı rengi verir.

Araç, girdiğiniz rengin birebir adı varsa onu yazar. Aynı rengin birden fazla adı varsa hepsini gösterir, örneğin darkgray / darkgrey. Birebir ad yoksa CIELAB renk uzayında en küçük farkla eşleşen adı ≈ işaretiyle önerir. Bu öneri yakın bir tonu bulmanızı kolaylaştırır; ancak kodun yerine geçmez, CSS'e yine HEX değerini yazın.

CMYK karşılığı baskıda neden birebir çıkmaz?

Ekran ışıkla, baskı ise mürekkeple renk üretir. RGB toplamsal bir sistemdir: üç kanal en yüksek değere çıkınca beyaz elde edersiniz. CMYK ise çıkarımsaldır; camgöbeği, eflatun, sarı ve siyah mürekkep kâğıttaki beyazı azaltarak renk oluşturur. Bu nedenle ekranın gösterebildiği bazı canlı renkler, özellikle parlak yeşil ve mavi tonları, mürekkeple aynı canlılıkta çıkmaz.

Araçtaki CMYK satırı cihazdan bağımsız basit bir formül kullanır. Bu formül kâğıt türünü, mürekkep setini ve matbaanın renk profilini bilmez. Dolayısıyla kurumsal baskı işlerinde şu sırayı izliyorum:

1. Matbaadan kullandığı kâğıda ve makineye uygun renk profilini isteyin.
2. Logonun ana renkleri için Pantone kodlarını ya da bu profile uygun CMYK değerlerini belirleyin.
3. Seri baskıdan önce prova alın ve rengi ekranla değil, provayla karşılaştırın.

Buradaki CMYK değeri yine de işe yarar: sunum dosyası, ofis çıktısı ya da matbaaya ilk brif için iyi bir başlangıç noktasıdır. Basılı bir kimliği dijitale taşırken ters yönü yaşarsınız; basılı kurumsal kimliği dijitale taşıma yazısı bu geçişi adım adım anlatıyor.

Marka renklerinde HTML renk kodlarını nasıl yönetirsiniz?

Bir markanın rengi zamanla çoğalma eğilimindedir. Web sitesinde bir kod, sosyal medya şablonunda başka bir kod, sunumda üçüncü bir kod birikir ve aynı mavi beş farklı sürüme dönüşür. Bunun önüne geçmek için her projede küçük bir renk listesi tutuyorum:

• Ana renk: tek HEX kodu; her kanalda aynı değer.
• Tonlar: buton üstüne gelme (hover), arka plan ve kenarlık için Tonlar şeridinden seçtiğim açık ve koyu sürümler.
• Nötrler: metin, zemin ve çizgi için iki üç gri.
• Durum renkleri: başarı, uyarı ve hata mesajları için ayrı renkler.

Tonlar şeridi rengi beyazla %72, %54, %36 ve %18 oranında, siyahla %16, %32, %48 ve %64 oranında karıştırır. Böylece koyu hover tonu ana renkle aynı aileden kalır. Bu listeyi CSS'te değişken olarak tanımlarsanız, örneğin --marka: #31C48D, bütün sitede rengi tek yerden değiştirebilirsiniz. Daha büyük ekiplerde aynı mantık bir tasarım sistemi içinde yaşar.

QR kod, sosyal medya görseli veya e-posta imzası hazırlarken de aynı kodu kullanın. Örneğin QR kod oluşturucu kod rengi için HEX değeri ister; koyu bir ton ve açık bir zemin seçerseniz telefonlar kodu daha rahat okur.

Uyumlu renkleri ve kontrastı birlikte nasıl kontrol edersiniz?

Uyumlu renkler sekmesi, ton çemberinde matematiksel eşleri bulur. Araç doygunluğu ve açıklığı sabit tutar, yalnız tonu döndürür:

• Tamamlayıcı (180°): en güçlü karşıtlık; vurgu ve çağrı butonları için.
• Analog (-30° ve +30°): komşu tonlar; sakin ve bütünlüklü paletler için.
• Üçlü (+120° ve +240°): dengeli ama canlı üçlüler; illüstrasyon ve grafiklerde işe yarar.

Bu eşler bir başlangıçtır, kesin kural değildir. Deneyimime göre çoğu kurumsal sitede bir ana renk, bir vurgu rengi ve nötrler yeterli oluyor. Üstelik üçlü paletin üç rengini aynı ağırlıkta kullanırsanız sayfa kısa sürede kalabalıklaşır.

Renk seçerken okunabilirliği de hesaba katın. WCAG 2.2 normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast ister. Paneldeki iki kart rengi beyaz ve siyah zeminde ölçer; sonucu AAA, AA, yalnız büyük metin veya yetersiz diye etiketler. Oran simetrik olduğu için beyaz zemin kartındaki değer, bu rengin üstüne yazacağınız beyaz yazı için de geçerlidir. Karta tıklarsanız Renk Kontrast Kontrolü aracını aynı renkle açarsınız; o araç eşiği geçen en yakın tonu önerir.

Konunun genel çerçevesi için web erişilebilirliği ve WCAG yazısına bakabilirsiniz. Sitenizin renk düzenini baştan kurmak isterseniz web tasarım hizmetimizde palet, tipografi ve kontrastı birlikte ele alıyoruz.