Menu
Coddy logo textTech

HEX Renkleri

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 26 / 76.

Hex renkleri, onaltılık değerleri kullanarak renkleri belirtmenin bir yoludur. Onaltılık renk kodu, bir rengi oluşturan kırmızı, yeşil ve mavi ışık miktarını temsil eden, önünde kare sembolü (#) bulunan altı basamaklı bir koddur.

Koddaki her basamak çifti, bu ana renklerden birinin 00 (yoğunluk yok) ile FF (tam yoğunluk) arasında değişen 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'de onaltılık renkleri kullanmanın temel sözdizimi şöyledir:

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

Örneğin:

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

Her çiftteki iki rakam aynı olduğunda hex 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) */
}
challenge icon

Görev

Kolay

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

  1. <h1> öğesi için bir CSS kuralı yazın. Arka plan rengini, #BF00FF onaltılık rengini kullanarak elektrik moru olarak ayarlayın.
  2. <h2> öğesi için bir CSS kuralı yazın. Arka plan rengini, #39FF14 kullanarak neon yeşili olarak ayarlayın.
  3. Tüm <p> öğeleri için bir CSS kuralı yazın. Arka plan rengini, #D3D3D3 kullanarak açık gri olarak ayarlayın.
REQUIRED OUTPUT FORMAT: [Çevrilmiş içeriğiniz burada]

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>
quiz iconKendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

CSS ile Stil Verme bölümündeki tüm dersler

Kendi başına pratik yap: Web playground