Warna HEX

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 26 dari 76.

Warna hex adalah cara untuk menentukan warna menggunakan nilai heksadesimal. Kode warna heksadesimal adalah kode enam digit yang diawali dengan simbol pagar (#) yang menunjukkan jumlah cahaya merah, hijau, dan biru yang membentuk suatu warna.

Setiap pasangan digit dalam kode mewakili intensitas salah satu warna primer ini, mulai dari 00 (tanpa intensitas) hingga FF (intensitas penuh). Warna hex menyediakan beragam pilihan warna dan banyak digunakan dalam desain web.

Berikut sintaks dasar untuk menggunakan warna heksadesimal di CSS:

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

Contoh:

p {
    color: #FF0000; /* Merah */
    background-color: #00FF00; /* Hijau */
}

Kamu juga bisa menggunakan notasi singkat untuk warna heksadesimal saat kedua digit dalam setiap pasangan sama. Contohnya:

p {
    color: #F00; /* Merah (setara dengan #FF0000) */
    background-color: #0F0; /* Hijau (setara dengan #00FF00) */
}

Tantangan

Mudah

Kamu diberi dokumen HTML dengan dua heading (<h1> dan <h2>) dan sebuah paragraf (<p>). Tugasmu adalah menggunakan kode warna heksadesimal untuk warna latar belakang. Ikuti langkah-langkah berikut:

Tulis aturan CSS untuk elemen <h1>. Atur warna latar belakang menjadi ungu elektrik menggunakan warna heksadesimal #BF00FF.
Tulis aturan CSS untuk elemen <h2>. Atur warna latar belakang menjadi hijau neon menggunakan #39FF14.
Tulis aturan CSS untuk semua elemen <p>. Atur warna latar belakang menjadi abu-abu muda menggunakan #D3D3D3.

Coba sendiri

<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>