HTML Renk Kodu Hesaplama

RGB, HEX, HSL renk kodlarını kolayca dönüştürün ve hesaplayın

HEX Değeri:

Hesaplama Sonucu:

Renk Önizleme:

HEX Kodu:

#3b82f6

RGB Değeri:

rgb(59, 130, 246)

HSL Değeri:

hsl(217, 91%, 60%)

Renk Paleti:

#dbeafe

#93c5fd

#60a5fa

#3b82f6

#2563eb

CSS Kodu:

.element {
  color: #3b82f6;
  background-color: rgb(59, 130, 246);
  border-color: hsl(217, 91%, 60%);
}

Nasıl Kullanılır?

Hesaplama Türünü Seçin

Dört farklı hesaplama türünden ihtiyacınıza uygun olanı seçin: Renk Seçici, HEX → RGB, RGB → HEX veya RGB → HSL.

Değerleri Girin

Seçtiğiniz hesaplama türüne göre gerekli değerleri (HEX kodu veya RGB değerleri) ilgili alanlara girin.

Hesapla Butonuna Tıklayın

Tüm değerleri girdikten sonra "Hesapla" butonuna tıklayarak sonuçları görüntüleyin.

Sonuçları İnceleyin

Hesaplama sonucunda HEX, RGB ve HSL değerlerini görüntüleyin, renk paletini inceleyin ve CSS kodunu kopyalayın.

Sonuçları Paylaşın

Hesaplama sonuçlarını sosyal medyada paylaşabilir veya hesaplayıcıyı kendi web sitenize ekleyebilirsiniz.

HTML Renk Kodu Nedir?

HTML renk kodları, web sayfalarında ve dijital tasarımlarda renkleri tanımlamak için kullanılan standart kodlardır. Bu kodlar sayesinde, web geliştiricileri ve tasarımcılar, web sitelerinde, uygulamalarda ve diğer dijital platformlarda tutarlı renkler kullanabilirler.

HTML Renk Kodları Türleri

Web geliştirmede kullanılan başlıca renk kodu formatları şunlardır:

1. HEX (Hexadecimal) Renk Kodları

HEX renk kodları, en yaygın kullanılan renk formatıdır ve # işareti ile başlar, ardından 6 haneli bir hexadecimal (onaltılık) sayı gelir. Bu 6 hane, kırmızı, yeşil ve mavi (RGB) renk değerlerini temsil eder.

#RRGGBB

Burada:

RR: Kırmızı rengin hexadecimal değeri (00-FF)
GG: Yeşil rengin hexadecimal değeri (00-FF)
BB: Mavi rengin hexadecimal değeri (00-FF)

Örneğin, #3b82f6 kodu, kırmızı için 3b (59), yeşil için 82 (130) ve mavi için f6 (246) değerlerini içerir.

HEX kodları ayrıca kısaltılmış 3 haneli formatta da kullanılabilir. Örneğin, #f00 kodu #ff0000 ile aynıdır ve saf kırmızıyı temsil eder.

2. RGB (Red, Green, Blue) Renk Kodları

RGB renk kodları, kırmızı, yeşil ve mavi renk değerlerini 0-255 arasında belirtir. CSS'de rgb() fonksiyonu kullanılarak tanımlanır.

rgb(kırmızı, yeşil, mavi)

Örneğin, rgb(59, 130, 246) kodu, kırmızı için 59, yeşil için 130 ve mavi için 246 değerlerini içerir.

RGB kodları ayrıca alfa (şeffaflık) kanalını da destekler. Bu, rgba() fonksiyonu ile tanımlanır:

rgba(kırmızı, yeşil, mavi, alfa)

Alfa değeri 0 (tamamen şeffaf) ile 1 (tamamen opak) arasında değişir. Örneğin, rgba(59, 130, 246, 0.5) %50 şeffaflıkta bir mavi tonu oluşturur.

3. HSL (Hue, Saturation, Lightness) Renk Kodları

HSL renk kodları, renkleri ton (hue), doygunluk (saturation) ve parlaklık (lightness) değerleriyle tanımlar. Bu format, renkleri daha sezgisel bir şekilde manipüle etmeyi sağlar.

hsl(ton, doygunluk%, parlaklık%)

Burada:

Ton (Hue): 0-360 arasında bir açı değeri (0/360 kırmızı, 120 yeşil, 240 mavi)
Doygunluk (Saturation): 0% (gri) ile 100% (tam doygunluk) arasında bir yüzde
Parlaklık (Lightness): 0% (siyah) ile 100% (beyaz) arasında bir yüzde

Örneğin, hsl(217, 91%, 60%) kodu, 217 derece ton (mavi), %91 doygunluk ve %60 parlaklık değerlerini içerir.

HSL kodları da alfa kanalını destekler. Bu, hsla() fonksiyonu ile tanımlanır:

hsla(ton, doygunluk%, parlaklık%, alfa)

Renk Kodları Arasında Dönüşüm

Farklı renk kodları arasında dönüşüm yapmak, web geliştirme ve tasarım süreçlerinde sıkça ihtiyaç duyulan bir işlemdir. İşte temel dönüşüm formülleri:

HEX'ten RGB'ye Dönüşüm

HEX kodunu RGB'ye dönüştürmek için, her iki haneli hexadecimal değeri ondalık (decimal) değere çevirmeniz gerekir:

HEX kodunu üç parçaya ayırın: RR, GG ve BB
Her parçayı ondalık sayıya dönüştürün

Örneğin, #3b82f6 için:

3b (hex) = 59 (decimal)
82 (hex) = 130 (decimal)
f6 (hex) = 246 (decimal)

Sonuç: rgb(59, 130, 246)

RGB'den HEX'e Dönüşüm

RGB değerlerini HEX'e dönüştürmek için, her ondalık değeri hexadecimal değere çevirmeniz ve birleştirmeniz gerekir:

Her RGB değerini hexadecimal'e dönüştürün
Tek haneli sonuçların başına 0 ekleyin
Tüm değerleri birleştirin ve başına # ekleyin

Örneğin, rgb(59, 130, 246) için:

59 (decimal) = 3b (hex)
130 (decimal) = 82 (hex)
246 (decimal) = f6 (hex)

Sonuç: #3b82f6

RGB'den HSL'ye Dönüşüm

RGB'den HSL'ye dönüşüm biraz daha karmaşıktır ve matematiksel formüller gerektirir. Temel adımlar şunlardır:

RGB değerlerini 0-1 aralığına normalize edin
Maksimum ve minimum RGB değerlerini bulun
Parlaklık (L) = (max + min) / 2
Doygunluk (S) = (max - min) / (1 - |2L - 1|) (eğer L = 0 veya L = 1 ise, S = 0)
Ton (H) hesaplaması, maksimum değerin hangi renk olduğuna bağlıdır

Bu hesaplamalar karmaşık olduğundan, genellikle renk dönüşüm araçları veya kütüphaneler kullanılır.

HTML ve CSS'de Renk Kodlarının Kullanımı

HTML ve CSS'de renk kodları çeşitli şekillerde kullanılabilir:

HTML'de Renk Kodları

HTML'de renk kodları genellikle inline stil özellikleri veya eski HTML özellikleri aracılığıyla kullanılır:

<p style="color: #3b82f6;">Mavi renkli metin</p>
<p style="color: rgb(59, 130, 246);">Aynı mavi renkli metin</p>
<p style="color: hsl(217, 91%, 60%);">Yine aynı mavi renkli metin</p>

CSS'de Renk Kodları

CSS'de renk kodları çeşitli özelliklerde kullanılabilir:

.mavi-metin {
  color: #3b82f6;
}

.mavi-arkaplan {
  background-color: rgb(59, 130, 246);
}

.mavi-cerceve {
  border: 2px solid hsl(217, 91%, 60%);
}

.yarim-saydam-mavi {
  background-color: rgba(59, 130, 246, 0.5);
}

Renk Teorisi ve Renk Uyumu

Etkili web tasarımı için, renk teorisi ve renk uyumu prensiplerini anlamak önemlidir. İşte bazı temel renk uyumu türleri:

1. Monokromatik Renk Uyumu

Tek bir rengin farklı ton, doygunluk ve parlaklık değerlerini kullanır. Bu, temiz ve profesyonel bir görünüm sağlar.

2. Analogous Renk Uyumu

Renk çemberinde yan yana bulunan renkleri kullanır. Bu, uyumlu ve rahatlatıcı bir görünüm sağlar.

3. Tamamlayıcı Renk Uyumu

Renk çemberinde karşılıklı bulunan renkleri kullanır. Bu, yüksek kontrast ve canlılık sağlar.

4. Triadik Renk Uyumu

Renk çemberinde eşit aralıklarla bulunan üç rengi kullanır. Bu, dengeli ve canlı bir görünüm sağlar.

Renk Erişilebilirliği

Web tasarımında renk kullanırken, erişilebilirlik standartlarını göz önünde bulundurmak önemlidir. WCAG (Web Content Accessibility Guidelines) standartlarına göre, metin ve arka plan arasında yeterli kontrast oranı sağlanmalıdır:

Normal metin için minimum 4.5:1 kontrast oranı
Büyük metin için minimum 3:1 kontrast oranı

Renk kontrastını kontrol etmek için çeşitli çevrimiçi araçlar mevcuttur.

Popüler Renk Paletleri ve Araçlar

Web tasarımında kullanabileceğiniz birçok renk paleti ve araç bulunmaktadır:

Renk Paleti Kaynakları

Adobe Color
Coolors
Color Hunt
Colormind

Renk Araçları

Color Picker araçları
Kontrast kontrol araçları
Renk dönüştürücüler
Renk paleti oluşturucular

Sonuç

HTML renk kodları, web tasarımı ve geliştirmede renkleri tanımlamak için kullanılan standart yöntemlerdir. HEX, RGB ve HSL gibi farklı formatlar, farklı kullanım senaryolarına uygun esneklik sağlar. Renk teorisi ve erişilebilirlik prensiplerini anlayarak, etkili ve kullanıcı dostu web siteleri oluşturabilirsiniz.

Yukarıda açıklanan bilgiler ve araçlar, web projelerinizde renkleri etkili bir şekilde kullanmanıza yardımcı olacaktır. HTML Renk Kodu hesaplayıcımızı kullanarak, farklı renk formatları arasında kolayca dönüşüm yapabilir ve projeleriniz için uygun renk paletleri oluşturabilirsiniz.

Not: Bu makaledeki bilgiler genel bilgilendirme amaçlıdır. Spesifik web geliştirme projeleriniz için, güncel web standartlarını ve tarayıcı uyumluluğunu kontrol etmeniz önerilir.

Kaynaklar

Sıkça Sorulan Sorular

HTML renk kodları nedir ve neden kullanılır?

HTML renk kodları, web sayfalarında ve dijital tasarımlarda renkleri tanımlamak için kullanılan standart kodlardır. Bu kodlar, web geliştiricilerin ve tasarımcıların web sitelerinde, uygulamalarda ve diğer dijital platformlarda tutarlı renkler kullanmalarını sağlar. Renk kodları, metin rengi, arka plan rengi, kenarlık rengi gibi çeşitli HTML ve CSS özelliklerinde kullanılabilir. En yaygın renk kodu formatları HEX (#RRGGBB), RGB (rgb(R,G,B)) ve HSL (hsl(H,S%,L%)) formatlarıdır. Bu kodlar, renkleri sayısal değerlerle tanımlayarak, farklı cihazlarda ve platformlarda aynı rengin görüntülenmesini sağlar.

HEX, RGB ve HSL renk kodları arasındaki farklar nelerdir?

HEX, RGB ve HSL, web geliştirmede kullanılan farklı renk kodu formatlarıdır. HEX (Hexadecimal) kodları # işareti ile başlar ve 6 haneli bir onaltılık sayı içerir (örn. #3b82f6). Bu 6 hane, kırmızı, yeşil ve mavi renk değerlerini temsil eder. RGB (Red, Green, Blue) kodları, kırmızı, yeşil ve mavi renk değerlerini 0-255 arasında belirtir (örn. rgb(59, 130, 246)). HSL (Hue, Saturation, Lightness) kodları ise renkleri ton (0-360 derece), doygunluk (0%-100%) ve parlaklık (0%-100%) değerleriyle tanımlar (örn. hsl(217, 91%, 60%)). RGB ve HSL formatları ayrıca alfa (şeffaflık) kanalını da destekler (rgba ve hsla). HSL formatı, renkleri daha sezgisel bir şekilde manipüle etmeyi sağlar, çünkü ton sabit kalırken sadece doygunluk ve parlaklık değerlerini değiştirerek farklı varyasyonlar elde edebilirsiniz.

Renk kodları arasında nasıl dönüşüm yapabilirim?

Renk kodları arasında dönüşüm yapmak için çeşitli yöntemler kullanabilirsiniz. HEX'ten RGB'ye dönüşüm için, her iki haneli hexadecimal değeri ondalık değere çevirmeniz gerekir. Örneğin, #3b82f6 kodunda, 3b (hex) = 59 (decimal), 82 (hex) = 130 (decimal), f6 (hex) = 246 (decimal) olur, sonuç: rgb(59, 130, 246). RGB'den HEX'e dönüşüm için, her ondalık değeri hexadecimal'e çevirip birleştirmeniz gerekir. RGB'den HSL'ye dönüşüm daha karmaşıktır ve matematiksel formüller gerektirir. Bu hesaplamaları manuel olarak yapmak yerine, web sitemizde sunduğumuz HTML Renk Kodu hesaplayıcısı gibi çevrimiçi araçları kullanabilirsiniz. Bu araçlar, farklı renk formatları arasında anında dönüşüm yapmanızı sağlar ve renk paletleri oluşturmanıza yardımcı olur.

Web tasarımında renk uyumu nasıl sağlanır?

Web tasarımında renk uyumu, renk teorisi prensiplerini uygulayarak sağlanır. Temel renk uyumu türleri şunlardır: 1) Monokromatik Renk Uyumu: Tek bir rengin farklı ton, doygunluk ve parlaklık değerlerini kullanır, temiz ve profesyonel bir görünüm sağlar. 2) Analogous Renk Uyumu: Renk çemberinde yan yana bulunan renkleri kullanır, uyumlu ve rahatlatıcı bir görünüm sağlar. 3) Tamamlayıcı Renk Uyumu: Renk çemberinde karşılıklı bulunan renkleri kullanır, yüksek kontrast ve canlılık sağlar. 4) Triadik Renk Uyumu: Renk çemberinde eşit aralıklarla bulunan üç rengi kullanır, dengeli ve canlı bir görünüm sağlar. Renk uyumu oluşturmak için Adobe Color, Coolors, Color Hunt gibi çevrimiçi araçları kullanabilirsiniz. Ayrıca, web sitenizin hedef kitlesini, marka kimliğinizi ve sitenizin amacını göz önünde bulundurarak renk seçimleri yapmanız önemlidir.

Web tasarımında renk erişilebilirliği neden önemlidir?

Web tasarımında renk erişilebilirliği, tüm kullanıcıların, özellikle görme engelli veya renk körü olan kişilerin, web içeriğine eşit şekilde erişebilmesini sağlamak için önemlidir. WCAG (Web Content Accessibility Guidelines) standartlarına göre, metin ve arka plan arasında yeterli kontrast oranı sağlanmalıdır: normal metin için minimum 4.5:1, büyük metin için minimum 3:1 kontrast oranı gereklidir. Renk erişilebilirliği ilkelerine uymak, sadece engelli kullanıcılar için değil, tüm kullanıcılar için daha iyi bir kullanıcı deneyimi sağlar. Ayrıca, rengi tek bilgi kaynağı olarak kullanmaktan kaçınmalı, rengin yanında metin, simge veya desen gibi alternatif göstergeler de kullanmalısınız. Renk kontrastını kontrol etmek için WebAIM Contrast Checker, Colour Contrast Analyser gibi çevrimiçi araçları kullanabilirsiniz.

CSS'de şeffaflık (alfa kanalı) nasıl kullanılır?

CSS'de şeffaflık (alfa kanalı), rgba() ve hsla() renk fonksiyonları veya opacity özelliği kullanılarak uygulanabilir. RGBA ve HSLA fonksiyonları, standart RGB ve HSL değerlerine ek olarak, 0 (tamamen şeffaf) ile 1 (tamamen opak) arasında değişen bir alfa değeri alır. Örneğin, rgba(59, 130, 246, 0.5) %50 şeffaflıkta bir mavi tonu oluşturur. Benzer şekilde, hsla(217, 91%, 60%, 0.5) de aynı şeffaflık seviyesine sahip bir mavi tonu oluşturur. Opacity özelliği ise bir elementin tamamını (içeriği dahil) şeffaflaştırır: opacity: 0.5; gibi. Modern CSS'de, #RRGGBBAA formatında HEX kodları da alfa kanalını destekler, örneğin #3b82f680 %50 şeffaflıkta bir mavi tonu oluşturur. Şeffaflık, arka plan renkleri, metin renkleri, kenarlıklar ve gölgeler gibi çeşitli CSS özelliklerinde kullanılabilir.