Renkler ve Birimler

Bu dersin sonunda bir rengi dört farklı şekilde yazabilecek ve bir ölçü için doğru birimi seçebileceksiniz.

color ve background-color

color yazının rengini, background-color elemanın arka planını belirler. İkisi birlikte düşünülmelidir, çünkü yazının okunup okunmadığı aralarındaki farka bağlıdır.

<p style="color: white; background-color: teal; padding: 12px;">Koyu zemin, açık yazı</p>
<p style="color: midnightblue; background-color: lemonchiffon; padding: 12px;">Açık zemin, koyu yazı</p>

Renk adları

CSS yaklaşık 150 hazır renk adını tanır: red, navy, teal, gold, crimson, tomato, orchid, slategray… Denemek için çok rahattır ama ince ayar yapamazsınız.

transparent da bir renk adıdır ve tamamen saydam anlamına gelir.

Onaltılık renkler (hex)

En yaygın yazım budur. # işaretinden sonra kırmızı, yeşil ve mavi için ikişer karakter gelir:

#RRGGBB

Her çift 00 (hiç yok) ile ff (en fazla) arasındadır. Yani #ff0000 kırmızı, #000000 siyah, #ffffff beyazdır. Çiftlerin iki karakteri aynıysa kısa yazabilirsiniz: #ff8800 yerine #f80.

Sonuna iki karakter daha eklerseniz saydamlığı belirlersiniz: #ff000080 yarı saydam kırmızıdır.

<p style="background-color: #ff6347; padding: 8px;">#ff6347</p>
<p style="background-color: #4682b4; color: #ffffff; padding: 8px;">#4682b4</p>
<p style="background-color: #fc0; padding: 8px;">#fc0 (kısa yazım)</p>
<p style="background-color: #ff634780; padding: 8px;">#ff634780 (yarı saydam)</p>

rgb ve rgba

Aynı üç rengi 0 ile 255 arasında sayılarla yazar. rgba dördüncü bir değer alır: 0 tamamen saydam, 1 tamamen opaktır.

<p style="background-color: rgb(255, 99, 71); padding: 8px;">rgb(255, 99, 71)</p>
<p style="background-color: rgba(255, 99, 71, 0.3); padding: 8px;">rgba(255, 99, 71, 0.3)</p>

hsl

Renk üzerinde oynamanın en kolay yolu hsl yazımıdır. Üç değeri vardır:

• Ton (hue): Renk çemberindeki yer, 0 ile 360 derece arası. 0 kırmızı, 120 yeşil, 240 mavidir.
• Doygunluk (saturation): 0% gri, 100% en canlı hâl.
• Açıklık (lightness): 0% siyah, 50% normal renk, 100% beyaz.

Aynı rengin açık ve koyu tonlarını üretmek için yalnızca son sayıyı değiştirmeniz yeterlidir:

<p style="background-color: hsl(200, 80%, 30%); color: white; padding: 8px;">Koyu</p>
<p style="background-color: hsl(200, 80%, 50%); padding: 8px;">Normal</p>
<p style="background-color: hsl(200, 80%, 85%); padding: 8px;">Açık</p>

hsla de rgba gibi saydamlık alır: hsla(200, 80%, 50%, 0.5)

Birimler

CSS’te boyut yazarken birim de yazılır. Sayı ile birim arasında boşluk olmaz: 16px doğru, 16 px yanlıştır. Tek istisna sıfırdır: 0 için birim gerekmez.

• px Sabit ölçü. Kenarlık ve küçük boşluklar için idealdir.
• em Elemanın yazı boyutuna göredir. Yazı boyutu 20px olan bir elemanda 2em 40px eder.
• rem Sayfanın kök yazı boyutuna göredir. Tarayıcılarda varsayılan değer 16px olduğu için 1rem genellikle 16px eder.
• % Dıştaki elemana göredir. width: 50% dıştaki kutunun yarısıdır.
• vw Pencere genişliğinin yüzde biridir. 50vw pencerenin yarısıdır.
• vh Pencere yüksekliğinin yüzde biridir.

<div style="background-color: lightblue; padding: 4px; margin-bottom: 8px; width: 200px;">200px genişlik</div>
<div style="background-color: lightgreen; padding: 4px; margin-bottom: 8px; width: 50%;">Kutunun yarısı (50%)</div>
<div style="background-color: khaki; padding: 4px; margin-bottom: 8px; width: 60vw;">Pencerenin %60'ı (60vw)</div>
<p style="font-size: 1rem;">1rem yazı</p>
<p style="font-size: 2rem;">2rem yazı</p>
<p style="font-size: 20px;">20px kutu içinde <span style="font-size: 2em;">2em yazı</span></p>

Bilgisayardaysanız kod ile önizleme arasındaki ayracı sürükleyin. Önizleme daralınca px kutusu aynı kalır, diğer ikisi küçülür.

Hangisini seçmeliyim?

• Yazı boyutları için rem. Bazı kullanıcılar tarayıcılarının yazı boyutunu büyütür. rem bu ayara uyar.
• Kenarlıklar için px. İnce çizginin büyümesine gerek yoktur.
• Genişlikler için %. Kutu farklı ekranlara uyar.
• Bir elemanın kendi yazısıyla orantılı boşluklar için em.

<p style="background-color: #ffcc00;">Hex</p>
<p style="background-color: rgb(144, 238, 144);">RGB</p>
<p style="background-color: hsl(200, 80%, 70%);">HSL</p>

<div style="width: 50%; background-color: lightblue; font-size: 1.5rem;">Kutu</div>

Bu derste öğrendikleriniz

• Renkler ad, hex, rgb veya hsl ile yazılabilir. rgba, hsla ve sekiz haneli hex saydamlık da taşır.
• Yazı ile arka plan arasında yeterli karşıtlık olmalıdır.
• Birimler sayıya bitişik yazılır. Yalnızca 0 birimsiz yazılabilir.
• Yazı boyutu için rem, kenarlık için px, genişlik için % iyi bir başlangıçtır.