HEX Renkleri

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 26 / 76.

Hex renkleri, renkleri onaltılık değerler kullanarak belirtmenin bir yoludur. Onaltılık bir renk kodu, bir rengi oluşturan kırmızı, yeşil ve mavi ışık miktarını temsil eden ve başında bir diyez sembolü (#) bulunan altı haneli bir koddur.

Kodun içindeki her bir basamak çifti, bu ana renklerden birinin yoğunluğunu temsil eder ve 00 (yoğunluk yok) ile FF (tam yoğunluk) arasında değişir. Hex renkleri geniş bir renk seçeneği yelpazesi sunar ve web tasarımında yaygın olarak kullanılır.

CSS'de hex renklerini kullanmak için temel sözdizimi şöyledir:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Örneğin:

p {
    color: #FF0000; /* Kırmızı */
    background-color: #00FF00; /* Yeşil */
}

Her bir çifttteki her iki basamak da aynı olduğunda hex renkleri için kısa notasyon da kullanabilirsiniz. Örneğin:

p {
    color: #F00; /* Kırmızı (#FF0000 ile eşdeğer) */
    background-color: #0F0; /* Yeşil (#00FF00 ile eşdeğer) */
}

Görev

Kolay

İki başlık (<h1> ve <h2>) ve bir paragraf (<p>) içeren bir HTML belgesi size verilmiştir. Göreviniz, arka plan renkleri için onaltılık (hexadecimal) renk kodlarını kullanmaktır. Aşağıdaki adımları izleyin:

<h1> öğesi için bir CSS kuralı yazın. #BF00FF hex rengini kullanarak arka plan rengini elektrik moru (electric purple) olarak ayarlayın.
<h2> öğesi için bir CSS kuralı yazın. #39FF14 kullanarak arka plan rengini neon yeşili (neon green) olarak ayarlayın.
Tüm <p> öğeleri için bir CSS kuralı yazın. #D3D3D3 kullanarak arka plan rengini açık gri (light gray) olarak ayarlayın.

Kopya kağıdı

Hex renkleri, renkleri belirtmek için önünde bir diyez sembolü (#) bulunan altı haneli onaltılık bir kod kullanır. Her bir basamak çifti, 00'dan (yoğunluk yok) FF'ye (tam yoğunluk) kadar değişen kırmızı, yeşil ve mavi ışığın yoğunluğunu temsil eder.

Temel sözdizimi:

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Örnek:

p {
    color: #FF0000; /* Kırmızı */
    background-color: #00FF00; /* Yeşil */
}

Her çifttteki her iki basamak da aynı olduğunda kısa gösterim kullanılabilir:

p {
    color: #F00; /* Kırmızı (#FF0000 ile eşdeğer) */
    background-color: #0F0; /* Yeşil (#00FF00 ile eşdeğer) */
}

Kendin dene

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>