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 renk kodu, bir rengi oluşturan kırmızı, green ve mavi ışık miktarını temsil eden, başında diyez işareti (#) bulunan altı basamaklı bir koddur.

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

CSS'te HEX renklerini kullanmak için temel sözdizimi şöyledir:

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

Örneğin:

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

Her çiftteki iki rakamın aynı olduğu durumlarda onaltılık renkler için kısa gösterimi de kullanabilirsiniz. Örneğin:

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

Görev

Kolay

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

<h1> öğesi için bir CSS kuralı yazın. Arka plan rengini, #BF00FF hex rengini kullanarak electric purple olarak ayarlayın.
<h2> öğesi için bir CSS kuralı yazın. Arka plan rengini, #39FF14 kullanarak neon green olarak ayarlayın.
Tüm <p> öğeleri için bir CSS kuralı yazın. Arka plan rengini, #D3D3D3 kullanarak light gray olarak ayarlayın.

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>