CSS Renk Değerleri
Adlı renkler başlangıç için yeter. Markalar ve tasarımlar tam değerlere ihtiyaç duyar — belirli bir teal, yumuşak bir katman, biraz kaydırabileceğiniz bir ton. Bunlar renk değeri biçimlerinden gelir: hex, rgb() / rgba() ve hsl() / hsla().
Renk değeri nedir?
Renk değeri, renk alan bir özellikten sonra yazdığınız şeydir — örneğin color: veya sonra background-color: sonrası. Aynı özellik; rengi yazmanın daha zengin yolları. Adlı anahtar sözcükler de değerdir. Bugün her hafta kullanacağınız sayısal biçimleri ekliyoruz.
Biçimler bir bakışta
İşe göre biçim seçin. İlk gün tüm sözdizimi gerekmez — haritayı öğrenin, sonra günlük üçü pratik edin.
📊 CSS renk değeri biçimleri
| Biçim | Örnek | En iyisi |
|---|---|---|
| Adlı | teal |
Hızlı demolar, öğretim, kaba taslaklar |
| Hex | #0f766e |
Tasarım araçları, marka token’ları, Figma’dan yapıştırma |
rgb() / rgba() |
rgb(15 118 110) / rgba(15, 118, 110, 0.85) |
Kanal düşüncesi, alfa ile saydamlık |
hsl() / hsla() |
hsl(174 77% 25%) |
Aileyi terk etmeden ton/aydınlık ayarı |
Hex renkler
Hex değerler # ile başlar, sonra hex rakamları (0–9, a–f). Yaygın biçimler: altı rakam #rrggbb (tam) ve üç #rgb (kısa — her rakam çiftlenir). Büyük/küçük harf önemli değil.
Metin ve yumuşak notta Hex
cssh1 {
color: #0f172a;
}
.note {
color: #0f766e;
}#0f766e nasıl okunur?
Çiftler kırmızı, yeşil, mavi: 0f / 76 / 6e. Tasarım uygulamaları genelde bu diziyi verir — CSS’e olduğu gibi yapıştırın, # kalsın.
rgb() ve rgba()
rgb() kırmızı, yeşil ve mavi kanalları 0–255 karıştırır (modern sözdiziminde yüzde de olur). rgba() veya dördüncü değerle alfa ekleyin ki renk kısmen saydam olsun.
RGB kanalları ve RGBA soluklaşması
css.lead {
color: rgb(51, 65, 85);
}
.overlay-label {
color: rgba(15, 118, 110, 0.9);
}Alfa bir cümlede
Alfa o rengin saydamlığıdır — 1 (veya 100%) katıdır; daha düşük değerler arkasını gösterir. Öğeyi düzenden çıkarmakla aynı değildir.
Ton düşüncesi için hsl()
hsl() ton (renk çemberi açısı), doygunluk (%) ve aydınlık (%) kullanır. Elle hex yeniden hesaplamadan «aynı aile, biraz daha açık» istediğinizde işe yarar.
Kaydırabileceğiniz HSL vurgu
css.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}Kaydırma alışkanlığı
Tonu koruyun, daha sakin metin için aydınlığı yükseltin veya daha güçlü başlık için düşürün. Doygunluk rengin ne kadar canlı göründüğünü kontrol eder.
Hangi biçim?
- Hex — tasarım dosyası veya marka paletinden kopyalarken varsayılan
rgb()/rgba()— kanallar veya hızlı alfa önemliysehsl()— ilişkili bir renk ailesini keşfederken veya ayarlarken- Adlı — eskiz ve öğretim demoları için hâlâ iyi
Hepsi bugüncolorüzerinde geçerli; sonra arka planlarda yeniden kullanacaksınız.
Kendiniz deneyin
h1,.leadve.noteolan sayfa.- Başlık hex (
#0f172a), leadrgb(51, 65, 85), note#0f766e. .badgeiçinhsl(174, 77%, 28%)ve aynı tonda daha koyu HSL kenarlık.- Bir etiketi
rgba(15, 118, 110, 0.75)ile yumuşatın —1’den daha az katı görünmeli. - İsteğe bağlı: çiftler gerçekten çiftleniyorsa kısa biçim; değilse altı rakam kalsın.
Sık hatalar
- Hex’ten önce
#unutmak (0f766etek başına geçerli renk değil) - Hex’te
a–fdışı harfler - RGB kanalları
0–255dışı (veya birim karışıklığı) - Alfanın
display: nonegibi düzen alanı kaldırmasını beklemek - Her biçimi kaskadda «daha özgül» sanmak — biçim specificity’yi değiştirmez
Özet
- Renk değerleri, renk alan aynı özellikler için biçimlerdir
- Hex, tasarımdan yapıştırmanın günlük biçimidir
rgb()/rgba()kanal ve alfayı gösterirhsl()ton, doygunluk ve aydınlıkla düşünmeye yardım eder- Adlı renkler geçerli kalır; işe göre seçin
- Hex artı bir işlevsel biçim (
rgbaveyahsl) pratik edin ta ki ikisi de doğal gelsin
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek