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

Renk Kodu Nedir? HTML Renk Kodları Nasıl Çalışır?

Renk kodu, dijital ortamlarda renkleri sayısal olarak tanımlamak için kullanılan standart bir gösterimdir. Web tasarımında HTML renk kodları olarak da bilinen bu değerler; CSS, HTML, grafik programları ve mobil uygulamalarda renkleri tutarlı biçimde ifade etmek için kullanılır.

En yaygın üç renk kodu formatı şunlardır:

• HEX (Hexadecimal): #RRGGBB biçiminde yazılır. Her çift onaltılık rakam 0–255 arasındaki bir renk bileşenini temsil eder. Örneğin #d63428 kırmızı bir tondur.
• RGB (Red, Green, Blue): Üç ayrı değer olarak 0–255 aralığında tanımlanır. Şeffaflık için rgba() kullanılır.
• HSL (Hue, Saturation, Lightness): Ton, doygunluk ve parlaklık bileşenlerine ayrılır. Renk paleti oluşturma ve dark mode tasarımı için idealdir.

Renk Kodları Karşılaştırma Tablosu

Aşağıdaki tablo yaygın renk kodları ve bunların HEX, RGB, HSL karşılıklarını göstermektedir:

Renk Kodu Bulma — Hex Kodu Nasıl Bulunur?

Renk kodu bulma için bu araçta üç farklı yöntem kullanabilirsiniz:

• Renk seçici (picker): Renk paletinde istediğiniz renge tıklayın; HEX, RGB ve HSL değerleri otomatik güncellenir.
• HEX değeri girin: Bildiğiniz hex kodunu (#RRGGBB) doğrudan yazın.
• RGB veya HSL girin: Sayısal değerleri girerek diğer formatları anında dönüştürün.
• Hazır renkler: Araçtaki hazır renk paletinden sık kullanılan renkleri seçin.

Hex kodu bulma işlemi için ayrıca tarayıcı geliştirici araçlarını (F12 → Elements → Styles) veya Figma, Photoshop gibi tasarım programlarının renk panelini kullanabilirsiniz.

HTML Renk Kodu CSS'te Nasıl Kullanılır?

HTML renk kodları, CSS stil tanımlamalarında çeşitli özelliklerle kullanılır. Üç formatın da tam tarayıcı desteği mevcuttur:

• HEX ile: color: #d63428; veya background-color: #6366f1;
• RGB ile: color: rgb(214, 52, 40); — şeffaflık için rgba(214, 52, 40, 0.5)
• HSL ile: color: hsl(3, 69%, 50%); — şeffaflık için hsla(3, 69%, 50%, 0.8)
• CSS değişkenleri: --primary: hsl(3, 69%, 50%); şeklinde tanımlayıp color: var(--primary); olarak kullanın.

Renk Kodu Bulucu — Doğru Rengi Seçme Rehberi

Web sitesi veya mobil uygulama tasarlarken doğru renk kodlarını seçmek marka kimliği açısından kritiktir. İşte dikkat edilmesi gereken başlıca noktalar:

• Kontrast oranı: WCAG erişilebilirlik standartlarına göre metin ve arka plan arasındaki kontrast oranı en az 4.5:1 olmalıdır.
• Renk sistemi: Primary, secondary ve accent renklerini HEX veya HSL olarak tanımlayıp CSS değişkenlerine atayın.
• Dark mode: HSL formatında aynı ton (H) değerini koruyarak yalnızca parlaklık (L) değerini değiştirin; açık/koyu varyantlar kolayca üretilir.
• Marka renk kılavuzu: Kullanacağınız HTML renk kodlarını dökümante edin; farklı platformlarda tutarsız renkler marka algısını zayıflatır.

Renk Formatları Arasındaki Fark: HEX, RGB, HSL

Web Tasarımında Renk Teorisi: Renk Uyumu ve Palet Oluşturma

Doğru renk kodlarını seçmek teknik bir iş olduğu kadar estetik bir süreçtir. Renk teorisinin temel kavramlarını anlamak, markanıza veya projenize uygun bir palet oluşturmanıza yardımcı olur.

• Tamamlayıcı renkler (Complementary): Renk çemberinde birbirine zıt konumdaki renkler güçlü kontrast sağlar. Örneğin mavi (#0000ff) ile turuncu (#ffa500).
• Analogous renkler: Renk çemberinde yan yana konumdaki renkler uyumlu ve sakin bir görünüm yaratır. Mavi, mavi-yeşil ve yeşil kombinasyonu buna örnektir.
• Triadik renkler: Renk çemberini eşit üçe bölen üç renk — kırmızı, sarı ve mavi gibi — canlı ve dengeli bir palet oluşturur.
• Monokromatik palet: Aynı tonun farklı doygunluk ve parlaklık değerleri kullanılır. HSL formatında H sabit tutularak S ve L değiştirilerek kolayca üretilir.
• Nötr renkler: Siyah, beyaz ve gri tonlar diğer renklerle kolayca uyum sağlar; tipografi ve arka plan için yaygın tercih edilir.

Renk Erişilebilirliği: WCAG Kontrast Standartları

Web erişilebilirliği standartları (WCAG 2.1), metin rengi ile arka plan rengi arasındaki minimum kontrast oranlarını belirler. Bu standartlara uymak hem kullanıcı deneyimini iyileştirir hem de yasal gerekliliklerdir.

• AA seviyesi (normal metin): Kontrast oranı en az 4.5:1 olmalıdır. Beyaz (#ffffff) üzerine koyu gri (#767676) bu sınırı tam karşılar.
• AA seviyesi (büyük metin): 18pt veya üzeri yazı tipi için en az 3:1 kontrast yeterlidir.
• AAA seviyesi: En yüksek erişilebilirlik standardı için 7:1 kontrast oranı gerekir. Görme güçlüğü olan kullanıcılar için önerilir.
• Renk körü uyumu: Bilgiyi yalnızca renkle iletmekten kaçının; ikon, şekil veya metin desteği ekleyin. Kırmızı-yeşil renk körlüğü en yaygın türdür.

Renk seçimlerinizi yaparken bu renk kodu dönüştürücü ile hex değerlerini bulup kontrast araçlarında test edebilirsiniz.

Tasarım Araçlarında Renk Kodu Bulma

Profesyonel tasarım araçları, her renk için otomatik olarak hex kodu ve RGB değerleri üretir. Bu değerleri kolayca bu araca aktararak HSL karşılığını öğrenebilirsiniz.

• Figma: Renk seçicide HEX, RGB ve HSL formatları arasında geçiş yapılabilir. Sağ paneldeki renk kutusuna tıklanarak değer kopyalanır.
• Adobe Photoshop: Renk seçici penceresinde HEX değeri altında gösterilir. "Color Picker" diyaloğunda tüm formatlar görülür.
• Chrome DevTools: Elements → Styles panelinde herhangi bir renk değerine tıklanarak format değiştirilebilir; renk seçici açılır.
• VS Code: CSS dosyalarında renk değerinin üzerine gelindiğinde otomatik renk önizlemesi ve seçici gösterilir.

Bu Renk Kodu Dönüştürücü Nasıl Kullanılır?

Renk seçiciden bir renk seçin ya da HEX, RGB veya HSL kutularından birini doldurun. Araç diğer tüm formatları anında hesaplar. İstediğiniz formatı kopyalama butonuyla panonuza alabilirsiniz. Sıkça sorulan sorular bölümünde renk kodu nedir, renk kodu bulma ve HTML renk kodları hakkında daha fazla bilgiye ulaşabilirsiniz.