color-mix() ve Göreli Renk Sözdizimi
Modern CSS renk işlevlerini kullanarak renkleri harmanlayın ve renk çeşitleri oluşturun.
color-mix() ve Göreli Renk Sözdizimi, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. 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.
color-mix() İşlevi
color-mix(), iki rengi belirtilen bir renk uzayında harmanlar. Sass veya JavaScript olmadan tasarım belirteci temelli renk çeşitleri oluşturmayı sağlar.
<button class="button-hover">Hover-mixed button</button>color-mix() Sözdizimi
Tam sözdizimi: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). Yüzdelerin toplamı 100% olmalıdır.
<div class="mix-equal">Equal mix</div>
<div class="mix-weighted">Weighted mix</div>color-mix() İçindeki Renk Uzayları
Renk uzayı, harmanlama sonucunu etkiler. oklch gibi modern algısal uzaylar, srgb'den daha görsel olarak tekdüze sonuçlar üretir:
<div class="oklch-mix">OKLCH mix</div>
<div class="srgb-mix">sRGB mix</div>color-mix() ile Renk Ölçekleri Oluşturma
Tek bir marka renginden tutarlı bir renk paleti oluşturun:
<span class="swatch swatch-100"></span>
<span class="swatch swatch-300"></span>
<span class="swatch swatch-700"></span>
<span class="swatch swatch-900"></span>Göreli Renk Sözdizimi
Göreli renkler, belirli kanalları değiştirerek mevcut bir renkten yeni bir renk türetmenizi sağlar. from anahtar sözcüğünü kullanın:
<p class="darker">20% darker text</p>
<p class="desaturated">Half saturation text</p>Göreli Renkle Saydam Varyant
RGB değerlerini bilmeden bir marka renginin saydam bir sürümünü oluşturun:
<div class="overlay">Overlay</div>Açıklaştırma ve Koyulaştırma
Açık ve koyu tonlar oluşturmak için oklch içindeki açıklık değerini artırın veya azaltın:
<div class="card demo-active">Card</div>oklch Renk Uzayına Genel Bakış
OKLCH, algısal olarak tekdüze bir renk uzayıdır:
l— açıklık (0 ile 1 arası)c— kroma/doygunluk (0 ile 0.4+ arası)h— renk tonu açısı (0 ile 360 arası)
l değerini ayarlamak, öngörülebilir biçimde tekdüze açık ve koyu tonlar sağlar.
Tarayıcı Desteği
color-mix(), Chrome 111+, Firefox 113+ ve Safari 16.2+ sürümlerinde desteklenir. Göreli renk sözdizimi (from anahtar sözcüğü) Chrome 119+, Safari 16.4+ ve Firefox 128+ sürümlerindedir. Güncel destek durumu için caniuse.com adresini kontrol edin.
color-contrast() Gelecekte
color-contrast(), belirli bir arka plana karşı en okunabilir rengi (bir listeden) otomatik olarak seçen, önerilen bir işlevdir. Henüz tarayıcılarda bulunmaz; ancak erişilebilirlik odaklı tema oluşturma için tasarlanmıştır.
Hızlı Kontrol
Hangi color-mix() renk uzayı algısal olarak en tekdüze harmanlama sonuçlarını üretir?
Özet
color-mix(in oklch, color1 %, color2 %), renkleri belirtilen bir uzayda harmanlar — tek bir marka renginden açık tonlar, koyu tonlar ve saydam varyantlar oluşturmak için idealdir. Göreli renk sözdizimi (oklch(from var(--brand) calc(l+0.2) c h)), tek tek kanalları değiştirerek yeni renkler türetir. Algısal olarak tekdüze sonuçlar için en iyi renk uzayı OKLCH'dir.
Sıkça Sorulan Sorular
“color-mix() ve Göreli Renk Sözdizimi” dersi ücretsiz mi?
Evet — “color-mix() ve Göreli Renk Sözdizimi” 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.
“color-mix() ve Göreli Renk Sözdizimi” dersinde ne öğreneceğim?
Modern CSS renk işlevlerini kullanarak renkleri harmanlayın ve renk çeşitleri oluşturun. 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 4. dersidir.
“color-mix() ve Göreli Renk Sözdizimi” 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
- Dinamik Hesaplamalar için calc()
- Akışkan Değerler için min(), max() ve clamp()
- Grid'de repeat() ve minmax()
- color-mix() ve Göreli Renk Sözdizimi