Menu
CoddyTech

HEX Renkleri

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

Onaltılık renkler, onaltılık değerler 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 rakam çifti, bu ana renklerden birinin 00 (yoğunluk yok) ile FF (tam yoğunluk) arasındaki yoğunluğunu temsil eder. Onaltılık renkler geniş bir renk seçeneği yelpazesi sunar ve web tasarımında yaygın olarak kullanılır.

CSS'de onaltılık renkleri kullanmanın temel söz dizimi şöyledir:

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

Örneğin:

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

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

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

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ı kullanmaktır. Aşağıdaki adımları izleyin:

  1. <h1> öğesi için bir CSS kuralı yazın. Hex renk kodu #BF00FF kullanarak arka plan rengini elektrik moru olarak ayarlayın.
  2. <h2> öğesi için bir CSS kuralı yazın. #39FF14 kullanarak arka plan rengini neon yeşili olarak ayarlayın.
  3. Tüm <p> öğeleri için bir CSS kuralı yazın. #D3D3D3 kullanarak arka plan rengini açık gri 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>
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