Renk Değerleri: Adlandırılmış, Hex, RGB, HSL
Adlandırılmış renkler, hex kodları, rgb() ve hsl() işlevleri dahil tüm CSS renk biçimlerini öğrenin.
Renk Değerleri: Adlandırılmış, Hex, RGB, HSL, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
CSS Renk Biçimleri
CSS birden çok renk biçimini destekler. Doğru seçeneği belirlemek; iş akışınıza, kullandığınız araçlara ve saydamlığa ya da dinamik işlemeye ihtiyaç duyup duymadığınıza bağlıdır.
Adlandırılmış Renkler
CSS, 140'tan fazla adlandırılmış renk tanımlar; örneğin red, tomato ve cornflowerblue. Bunlar hızlı prototip oluşturmak için harikadır ancak hassasiyetleri sınırlıdır.
<h1>Named Colors</h1>
<button>cornflowerblue button</button>
Onaltılık Renkler
Onaltılık renklerde, 6 onaltılık basamağın (kısa yazımda 3 basamağın) önünde bir # bulunur. Her basamak çifti kırmızı, yeşil ve mavi değerlerinden birini temsil eder (0–255).
<p class="full-hex">Full hex: #ff6347</p>
<p class="shorthand-hex">Shorthand hex: #f64</p>
Alfa İçeren Onaltılık Renkler
Alfa saydamlığı için 4. bir onaltılık basamak çifti (kısa yazımda 4. basamak) ekleyin:
<div class="hex-alpha-full">8-digit hex alpha</div>
<div class="hex-alpha-short">4-digit shorthand alpha</div>
RGB Renkleri
rgb(), kırmızı, yeşil ve mavi kanalları için üç tam sayı (0–255) alır. Okunması ve programatik olarak anlaşılması çok kolaydır.
<p class="rgb-tomato">rgb(255, 99, 71)</p>
<p class="rgb-black">rgb(0, 0, 0)</p>
<p class="rgb-white">rgb(255, 255, 255)</p>
RGBA Renkleri
Alfa saydamlığı için rgb() işlevine dördüncü bir parametre (0–1) ekleyin. Bu, eğik çizgi söz dizimi kullanan daha yeni rgb() biçimiyle eşdeğerdir.
<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
<p class="rgba-modern">rgb(255 99 71 / 0.5)</p>
HSL Renkleri
hsl(), rengi renk tonu (0–360°), doygunluk (0–100%) ve açıklık (0–100%) ile tanımlar. Renk paletleri ve varyantları oluşturmak için çok daha sezgiseldir.
<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
<p class="hsl-steelblue">hsl(210, 70%, 50%)</p>
HSLA Renkleri
rgba() gibi, hsla() da bir alfa kanalı ekler. Modern CSS bunun yerine eğik çizgi ayırıcısı kullanmanıza izin verir:
<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
<p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>
HSL ile Renk Varyantları Oluşturma
HSL, açık ve koyu tonlar oluşturma konusunda öne çıkar. Renk tonunu ve doygunluğu sabit tutup açıklığı değiştirin:
<button class="btn-light">Light</button>
<button class="btn">Base</button>
<button class="btn-dark">Dark</button>
currentColor Anahtar Sözcüğü
currentColor, öğenin geçerli color özelliğine eşit olan dinamik bir değerdir. Kenarlıkların, gölgelerin veya SVG dolgularının metin rengini otomatik olarak devralmasını sağlamak için kullanın.
<a href="#">Link with currentColor border</a>
transparent Anahtar Sözcüğü
transparent anahtar sözcüğü, tamamen saydam olan rgba(0,0,0,0) değerine eşittir. Saydamdan bir renge geçiş yaptığınız üzerine gelme efektleri için kullanışlıdır.
<button>Transparent background</button>
Hızlı Kontrol
Aynı renk tonunun daha açık ve daha koyu tonlarını oluşturmayı hangi renk biçimi kolaylaştırır?
Özet
CSS; adlandırılmış, onaltılık, RGB ve HSL renk biçimleri sunar. HSL, programatik renk işleme için idealdir. Tüm biçimler saydamlık için bir alfa kanalı kabul eder. currentColor ve transparent kullanışlı özel anahtar sözcüklerdir.
Sıkça Sorulan Sorular
“Renk Değerleri: Adlandırılmış, Hex, RGB, HSL” dersi ücretsiz mi?
Evet — “Renk Değerleri: Adlandırılmış, Hex, RGB, HSL” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Renk Değerleri: Adlandırılmış, Hex, RGB, HSL” dersinde ne öğreneceğim?
Adlandırılmış renkler, hex kodları, rgb() ve hsl() işlevleri dahil tüm CSS renk biçimlerini öğrenin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Renk Değerleri: Adlandırılmış, Hex, RGB, HSL” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Renk Değerleri: Adlandırılmış, Hex, RGB, HSL
- Arka Plan Rengi ve Görseli
- Degradeler: Doğrusal ve Radyal
- Opaklık ve RGBA Saydamlığı