Tutorial Belajar CSS Bagian 43 : Cara Menggunakan Property Color di CSS

Pada tutorial sebelumnya, kita sudah belajar tentang Tutorial Belajar CSS Bagian 42 : Cara Menggunakan Property Font Weight di CSS. Pada tutorial kali ini kita akan belajar cara menggunakan property color untuk mengatur pewarnaan pada desain web.

Properti color di CSS digunakan untuk mengatur warna elemen HTML. Biasanya, properti ini digunakan untuk mengatur warna latar belakang atau warnafont suatu elemen.

Di CSS, kami menggunakan nilai color untuk menentukan warna. Kita juga dapat menggunakan properti ini untuk warnatepi dan efek dekoratif lainnya.

Kita dapat menentukan warnasuatu elemen dengan menggunakan cara berikut:

format RGB.
format RGBA.
Notasi heksadesimal.
HSL.
HSLA.
Built-in Color.

Mari kita pahami sintaks dan deskripsi cara-cara di atas secara detail.

Format RGB

Format RGB adalah kependekan dari ‘RED GREEN and BLUE’ yang digunakan untuk menentukan warna elemen HTML hanya dengan menentukan nilai R, G, B yang berada di kisaran 0 hingga 255.

Nilai color dalam format ini ditentukan dengan menggunakan properti rgb(). Properti ini memungkinkan tiga nilai yang dapat berupa persentase atau bilangan bulat (berkisar dari 0 hingga 255).

Properti ini tidak didukung di semua browser; itu sebabnya tidak disarankan untuk menggunakannya.

Sintaksis

color: rgb(R, G, B);

Format RGBA

Ini hampir mirip dengan format RGB kecuali RGBA berisi A (Alpha) yang menentukan transparansi elemen. Nilai alpha berada pada rentang 0.0 hingga 1.0, dimana 0.0 untuk transparan penuh, dan 1.0 untuk tidak transparan.

Sintaksis

color: rgba(R, G, B, A);

Notasi heksadesimal

Heksadesimal dapat didefinisikan sebagai representasi warna enam digit. Notasi ini dimulai dengan simbol # diikuti oleh enam karakter yang berkisar dari 0 hingga F.

Dalam notasi heksadesimal, dua digit pertama mewakili nilai color merah (RR), dua digit berikutnya mewakili nilai color hijau (GG), dan yang terakhir dua digit mewakili nilai color biru (BB).

Notasi warna hitam dalam heksadesimal adalah #000000, dan notasi warna putih dalam heksadesimal adalah #FFFFFF. Beberapa kode dalam notasi heksadesimal adalah #FF0000, #00FF00, #0000FF, #FFFF00, dan masih banyak lagi.

Sintaksis

color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

Kode Hex pendek

Ini adalah bentuk singkat dari notasi heksadesimal di mana setiap digit diciptakan kembali untuk sampai pada nilai heksadesimal yang setara.

Misalnya, #7B6 menjadi #77BB66 dalam heksadesimal.

Notasi warna hitam dalam hex pendek adalah #000, dan notasi warna putih dalam hex pendek adalah #FFF. Beberapa kode dalam hex pendek adalah #F00, #0F0, #0FF, #FF0, dan masih banyak lagi.

HSL

Ini adalah bentuk singkat dari Hue, Saturation, dan Lightness. Mari kita pahami mereka satu per satu.

Hue : Ini dapat didefinisikan sebagai derajat pada roda warna dari 0 hingga 360. 0 melambangkan merah, 120 melambangkan hijau, 240 melambangkan biru.
Saturation : Dibutuhkan nilai dalam persentase di mana 100% mewakili sepenuhnya jenuh, yaitu tidak ada bayangan abu-abu, 50% mewakili 50% abu-abu, tetapi warnanya masih terlihat, dan 0% mewakili sepenuhnya tidak jenuh, yaitu abu-abu sepenuhnya, dan color tidak terlihat.
Lightness : Kecerahan color dapat didefinisikan sebagai cahaya yang ingin kami berikan warna di mana 0% mewakili hitam (tidak ada cahaya), 50% mewakili tidak gelap atau terang, dan 100% mewakili putih (kecerahan penuh) .

Mari kita lihat sintaks HSL pada properti warna.

Sintaksis

color:hsl(H, S, L);

HSLA

Ini sepenuhnya mirip dengan properti HSL, kecuali mengandung A (alpha) yang menentukan transparansi elemen. Nilai alpha berada pada rentang 0.0 hingga 1.0, dimana 0.0 menunjukkan transparan penuh, dan 1.0 menunjukkan tidak transparan.

Sintaksis

color:hsla(H, S, L, A);

Built-in color (warna bawaan)

Seperti namanya, warnabawaan berarti kumpulan warna yang ditentukan sebelumnya yang digunakan dengan menggunakan nama seperti merah, biru, hijau, dll.

Sintaksis

color: color-name;

Mari kita lihat daftar warna bawaan beserta nilai desimal dan heksadesimalnya.

Nama Warna	Nilai Hexadecimal	Nilai Decimal atau Nilai RGB()
Merah	#FF0000	rgb(255,0,0)
Oranye	#FFA500	rgb(255,165,0)
Kuning	#FFFF00	rgb(255,255,0)
Merah Muda	#FFC0CB	rgb(255.192.203)
Hijau	#008000	rgb(0,128,0)
Ungu	#EE82EE	rgb(238.130.238)
Biru	#0000FF	rgb(0,0,255)
Aqua	#00FFFF	rgb(0,255,255)
Coklat	#A52A2A	rgb(165,42,42)
Putih	#FFFFFF	rgb(255.255.255)
Abu-abu	#808080	rgb(128.128.128)
Hitam	#000000	rgb(0,0,0)

Ilustrasi warna CSS, yang menyertakan properti di atas, diberikan di bawah ini.

Contoh :

<html>   
    <head>   
        <title>Property CSS hsl color</title>   
        <style>   
            h1{   
                text-align:center;   
            }   
            #rgb{  
              color:rgb(255,0,0);  
            }  
            #rgba{  
              color:rgba(255,0,0,0.5);  
            }  
            #hex{  
              color:#EE82EE;  
            }  
            #short{  
              color: #E8E;  
            }  
            #hsl{  
              color:hsl(0,50%,50%);  
            }  
            #hsla{                
              color:hsla(0,50%,50%,0.5);  
            }  
            #built{  
              color:green;  
            }  
        </style>   
    </head>   
    <body>   
        <h1 id="rgb">   
         Halo dunia. Ini adalah format RGB.  
        </h1>   
        <h1 id="rgba">   
         Halo dunia. Ini adalah format RGBA.  
        </h1>   
        <h1 id="hex">   
         Halo dunia. Ini adalah format Hexadecimal.  
        <h1 id="short">   
         Halo dunia. Ini adalah format Short-hexadecimal.  
        </h1>   
        <h1 id="hsl">   
         Halo dunia. Ini adalah format HSL.  
        </h1>   
        <h1 id="hsla">   
         Halo dunia. Ini adalah format HSLA.  
        </h1>   
        <h1 id="built">   
         Halo dunia. Ini adalah format Built-in color.  
        </h1>   
    </body>   
</html>

Hasil dari kode di atas adalah :

Semoga tutorial ini bisa membantu Anda untuk belajar cara menggunakan property color dalam mengatur pewarnaan pada desain website.