CSS Renk Özellikleri — Web Geliştiriciler İçin Eksiksiz Rehber
color ve background-color'dan gradyanlara ve opaklığa kadar tüm CSS renk özelliklerinde ustalaşın. Pratik örneklerle kapsamlı referans.
Temel: color ve background-color
En temel iki CSS renk özelliği color (metin için) ve background-color'dır (eleman arka planları için). Adlandırılmış renkler, HEX, RGB, HSL ve modern renk fonksiyonları dahil geçerli CSS renk değerlerini kabul ederler.
color özelliği elemanın ön plan rengini ayarlar. background-color özelliği elemanın tüm içerik ve dolgu alanını doldurur.
Modern CSS Renk Fonksiyonları
CSS temel rgb() ve hsl()'nin ötesine geçti:
rgb() fonksiyonu artık modern söz dizimini destekliyor: rgb(255 0 0). Alfa saydamlığı eğik çizgi kullanır: rgb(255 0 0 / 50%).
hsl() benzer şekilde çalışır. HSL renk varyasyonları oluşturmak için özellikle kullanışlıdır.
color-mix() fonksiyonu iki rengi karıştırır. oklch() ve oklab() algısal olarak düzgün renk uzayları sağlar.
Gradyanlar: Doğrusal, Dairesel ve Konik
CSS gradyanları yumuşak renk geçişleri oluşturur:
Doğrusal gradyanlar düz çizgide akar: background: linear-gradient(to right, #ff0000, #0000ff).
Dairesel gradyanlar merkez noktadan yayılır: background: radial-gradient(circle, red, blue).
Konik gradyanlar pasta grafiği gibi merkez nokta etrafında döner. Renk çarkları oluşturmak için mükemmeldir.
Opaklık ve Saydamlık
CSS saydamlığı kontrol etmek için birden fazla yol sunar:
opacity özelliği tüm elemanı ve tüm çocuklarını etkiler. Renk değerlerindeki alfa kanalları yalnızca belirli özelliği etkiler.
transparent anahtar kelimesi rgba(0, 0, 0, 0)'a eşdeğerdir. currentColor mevcut metin rengini devralır.
Renk Sistemleri İçin CSS Özel Özellikleri
CSS özel özellikleri modern renk sistemlerinin temelidir. Renkleri bir kez tanımlayıp tüm stil sayfasında yeniden kullanırlar.
Karanlık mod için değişkenleri geçersiz kılmanız yeterlidir.
Renk seçici aracımız tüm CSS formatlarında renk değerlerini anında üretir.