CSS HEX Renkleri

Onaltılık bir renk şu şekilde belirtilir: #RRGGBB; burada RR (kırmızı), GG (yeşil) ve BB (mavi) onaltılık tamsayılar rengin bileşenlerini belirtir.

HEX Değeri

CSS’de bir renk, formdaki onaltılık değer kullanılarak belirtilebilir:

#rrggbb

Burada rr (kırmızı), gg (yeşil) ve bb (mavi), 00 ile ff arasındaki onaltılık değerlerdir (0-255 ondalık sayıyla aynı).

Örneğin #ff0000 kırmızı olarak görüntülenir çünkü kırmızı en yüksek değere (ff) ve diğerleri en düşük değere (00) ayarlanmıştır.

Siyahı görüntülemek için tüm değerler 00 olmalıdır: #000000.

Beyazı görüntülemek için tüm değerler ff olmalıdır: #ffffff.

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>

</body>
</html>

Grinin tonları genellikle 3 ışık kaynağının tümü için eşit değerler kullanılarak tanımlanır:

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>

</body>
</html>

3 Haneli HEX Değeri

Bazen CSS kaynağında 3 basamaklı bir onaltılık kod göreceksiniz.

3 basamaklı hex kodu, bazı 6 basamaklı hex kodlarının kısaltmasıdır.

3 basamaklı hex kodu aşağıdaki forma sahiptir:

#rgb

Burada r, g ve b, 0 ile f arasındaki değerlere sahip kırmızı, yeşil ve mavi bileşenleri temsil eder.

3 basamaklı onaltılı kod yalnızca her iki değerin (RR, GG ve BB) her bileşen için aynı olması durumunda kullanılabilir.

Yani eğer #ff00cc’miz varsa şu şekilde yazabiliriz: #f0c.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #fc9; /* #ffcc99 İle aynı*/
}

h1 {
  color: #f0f; /* #ff00ff İle aynı*/
}

p {
  color: #b58; /* #bb5588 İle aynı*/
}
</style>
</head>
<body>

<h1>CSS 3 Haneli Hex Kodu</h1>
<p>Paragraf.</p>

</body>
</html>

10 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir