Renk Kodu Dönüştürücü

HEX, RGB ve HSL nedir?

Renk kodu dönüştürücü, bir rengi HEX, RGB ve HSL biçimleri arasında çeviren ücretsiz bir araçtır. Bu üç biçim, aynı rengin farklı yazım şekilleridir: HEX onaltılık bir metin kodu, RGB kırmızı-yeşil-mavi sayı üçlüsü, HSL ise ton-doygunluk-açıklık değerleridir. Yani #FFFFFF, rgb(255, 255, 255) ve hsl(0, 0%, 100%) hepsi aynı beyaz rengi ifade eder.

Dijital ekranlar renkleri kırmızı, yeşil ve mavi ışığı karıştırarak üretir. Her renk sistemi bu karışımı farklı bir yolla tanımlar. Bir tasarım aracında beğendiğin rengin HEX kodunu alıp CSS'e RGB olarak yazman gerektiğinde ya da tam tersini yaptığında, doğru değerleri elle hesaplamak zordur. Bu hex rgb çevirici, seçtiğin veya yapıştırdığın rengi anında üç biçime birden çevirir; renk seçiciyle görsel olarak da renk belirleyebilirsin.

HEX kodu nedir ve nasıl okunur?

Hex kodu nedir sorusunun kısa yanıtı: HEX, bir rengi #RRGGBB biçiminde altı haneyle gösteren onaltılık (hexadecimal) bir koddur. Baştaki diyez işaretinden sonra gelen altı karakter iki'şerli üç gruba ayrılır: ilk iki hane kırmızı (RR), ortadaki iki hane yeşil (GG), son iki hane mavi (BB) yoğunluğunu belirtir.

Her grup, 00 ile FF arasında bir değer alır. Onaltılık sayı sisteminde rakamlar 0-9'dan sonra A, B, C, D, E, F harfleriyle devam eder; yani FF, ondalık sistemdeki 255'e karşılık gelir. Örneğin #FF0000 tam kırmızıdır: kırmızı en yüksek (FF), yeşil ve mavi sıfırdır (00). #000000 siyah, #FFFFFF beyazdır. Üç hanelik kısa yazım da (#F00 gibi) geçerlidir; tarayıcı bunu #FF0000 olarak genişletir. Renk kodu hex biçimi, web tasarımında ve CSS'te en yaygın kullanılan gösterimdir çünkü kısa, kopyalanması kolay ve her tarayıcı tarafından desteklenir.

RGB hesaplama: kırmızı, yeşil, mavi

RGB hesaplama, rengi üç ışık bileşeninin şiddetiyle tanımlar: R (Red/kırmızı), G (Green/yeşil) ve B (Blue/mavi). Her bileşen 0 ile 255 arasında bir değer alır. 0 o rengin hiç olmadığını, 255 ise tam yoğunlukta olduğunu gösterir. rgb(0, 0, 0) siyah, rgb(255, 255, 255) beyazdır.

HEX'ten RGB'ye geçmek aslında onaltılık her hane çiftini ondalığa çevirmektir. Örneğin #7C3AED kodunda 7C onaltılık değeri ondalık 124, 3A değeri 58, ED değeri 237'dir; yani rgb(124, 58, 237). Ters yönde, her RGB bileşenini iki haneli onaltılığa çevirip birleştirerek HEX elde edilir. Modern CSS ayrıca saydamlık için dördüncü bir kanal (alfa) ekleyen rgba() biçimini de destekler; rgba(124, 58, 237, 0.5) aynı moru %50 saydamlıkla gösterir. Bu araç RGB alanına doğrudan üç sayı yazmana veya renk seçiciden değeri çekmene izin verir, böylece renk kodu bulma işlemi elle hesap yapmadan tamamlanır.

HSL nedir ve neden kullanışlıdır?

HSL, rengi Ton (Hue), Doygunluk (Saturation) ve Açıklık (Lightness) olarak tanımlar. Ton 0-360 derecelik bir renk çemberidir: 0° kırmızı, 120° yeşil, 240° mavidir. Doygunluk %0 (gri) ile %100 (canlı) arasında rengin canlılığını, açıklık ise %0 (siyah) ile %100 (beyaz) arasında parlaklığı belirtir.

HSL'in en büyük avantajı sezgiselliğidir. Bir rengi biraz daha açık yapmak istediğinde sadece açıklık değerini artırırsın; daha soluk istiyorsan doygunluğu düşürürsün. Aynı işi HEX veya RGB üzerinde yapmak çok daha zordur çünkü üç sayının nasıl değişeceği belirsizdir. Bu yüzden tasarımcılar bir ana renkten açık/koyu tonlar türetirken sıklıkla HSL kullanır. Örneğin hsl(262, 83%, 58%) bir mordur; açıklığı %70'e çıkardığında aynı tonun daha açık bir versiyonunu elde edersin. Bu renk kodu dönüştürücü HSL değerlerini de anında hesaplar, böylece ton çemberi üzerinde düşünerek renk ayarlayabilirsin.

Yaygın renklerin kod tablosu

Aşağıdaki tabloda sık kullanılan bazı renklerin HEX ve RGB karşılıkları verilmiştir. Bu değerler standarttır ve doğrulanabilir; aracımıza bir HEX kodu yapıştırarak aynı sonuçları görebilirsin.

Beyaz — #FFFFFF — rgb(255, 255, 255)
Siyah — #000000 — rgb(0, 0, 0)
Kırmızı — #FF0000 — rgb(255, 0, 0)
Yeşil — #00FF00 — rgb(0, 255, 0)
Mavi — #0000FF — rgb(0, 0, 255)
Sarı — #FFFF00 — rgb(255, 255, 0)
Turkuaz (Cyan) — #00FFFF — rgb(0, 255, 255)
Macenta — #FF00FF — rgb(255, 0, 255)
Turuncu — #FFA500 — rgb(255, 165, 0)
Gri — #808080 — rgb(128, 128, 128)

Renk kodları nerelerde kullanılır?

Renk kodları, dijital tasarımın her alanında karşımıza çıkar. En sık kullanıldığı yerler web ve CSS kodlaması, grafik tasarımı, sosyal medya görselleri ve marka kimliği çalışmalarıdır. Bir tasarım programında (Figma, Photoshop, Canva) seçtiğin rengin kodunu, siteyi kodlarken CSS dosyasına aktarman gerekir.

Sosyal medya için içerik üreten kişiler ve markalar, gönderilerinde tutarlı bir renk paleti kullanmak ister. Instagram şablonları, YouTube kapak görselleri, hikâye tasarımları ve reklam görsellerinde marka renklerinin her platformda aynı görünmesi gerekir; bunun için renk kodlarını doğru biçimde saklamak ve paylaşmak şarttır. Ekip içinde renk paylaşırken HEX kodu vermek en pratik yoldur çünkü tek bir kısa metinle renk net biçimde iletilir. Hex kodu nedir ve nasıl kullanılır bilmek, tasarımcılarla iletişimi de kolaylaştırır.

Renk paleti nasıl oluşturulur?

İyi bir renk paleti genellikle bir ana renk, birkaç yardımcı renk ve nötr tonlardan (açık gri, koyu gri, beyaz) oluşur. Başlamak için markanı veya projeni temsil eden bir ana renk belirle ve HEX kodunu not al. Ardından HSL kullanarak bu rengin daha açık ve daha koyu varyantlarını üret: açıklık değerini artırarak açık tonlar, azaltarak koyu tonlar elde edersin.

Uyumlu ikinci renkler bulmak için ton (Hue) çemberinden faydalanabilirsin. Ana rengin tonuna 180° eklersen tamamlayıcı (zıt) rengi, 30-60° eklersen benzeşik (yan yana, uyumlu) renkleri bulursun. Vurgu (accent) rengi olarak canlı, doygunluğu yüksek bir renk seçmek çağrı-butonlarını öne çıkarır. Paletini oluştururken her rengin HEX kodunu bir yere kaydet; bu araçla RGB ve HSL karşılıklarını da alarak CSS, tasarım aracı ve dokümanların hepsinde aynı rengi tutarlı biçimde kullanabilirsin.

Renk kodu kullanımında ipuçları

Renklerle çalışırken birkaç pratik nokta işini kolaylaştırır. Öncelikle metin ile arka plan arasındaki kontrastı gözet: açık zeminde koyu metin, koyu zeminde açık metin okunabilirliği yükseltir ve erişilebilirlik açısından önemlidir. İkincisi, projede kullandığın renk sayısını sınırlı tut; iki-üç ana renk artı nötr tonlar çoğu tasarım için yeterlidir ve daha profesyonel görünür.

HEX kodlarını her zaman büyük harfle ve tam altı hane olarak yazmak (örneğin #1A2B3C) tutarlılık sağlar; büyük-küçük harf rengi değiştirmez ama okunurluğu artırır. Renk kodlarını bir yerde saklarken renk adıyla birlikte not almak (ör. "marka moru — #7C3AED") daha sonra hatırlamayı kolaylaştırır. Son olarak, seçtiğin rengi hem açık hem koyu arka planda test et; bazı renkler farklı zeminlerde beklediğinden farklı görünebilir. Bu renk kodu hex aracıyla değerleri anında çevirip kopyalayarak bu adımları saniyeler içinde tamamlayabilirsin.

Diğer ücretsiz araçlar