Macam-Macam Sistem Penulisan Kode Warna pada Skrip Web

Assalamualaikum, hello guys, dalam postingan kali ini saya akan menjelaskan macam-macam sistem penulisan kode warna pada script desain web. Simak penjelasan berikut ini.

Kode Warna

Ada 6 sistem penulisan kode warna pada skrip web, yaitu :

1. Hexadecimal

Kode warna hexadecimal (hex) adalah kode warna menggunakan kombinasi huruf dan angka (hanya angka 0-9 dan huruf A-F) yang menunjukkan warna tertentu. Format penulisan kode warna hexadecimal adalah #RRGGBB di mana RR adalah merah (red), GG adalah hijau (green), dan BB adalah biru (blue). Contohnya #FF0000 menunjukkan warna merah.

Kode hex ini adalah kode yang paling populer karena cara penulisannya yang sederhana.

Berikut ini beberapa kode warna dalam sistem hex yang harus diketahui.

#FFFFFF = putih
#000000 = hitam

#FF0000 = warna merah
#FFA500 = warna oranye
#FFFF00 = warna kuning
#00FF00 = warna hijau
#00FFFF = warna aqua
#0000FF = warna biru
#800080 = warna ungu
#FF00FF = warna magenta

Tambahan :
#808080 = abu-abu
#C0C0C0 = perak
emas = #FFD700
hijau toska = #00FF99
biru dongker = #000080
biru langit = #00CCFF
merah jambu = #FFC0CB

Di bawah ini adalah contoh penggunaan hex color pada CSS.

/* Penggunaan hex color pada CSS */
h1 {
color: #00CCFF;
border: 1px solid #F0F0F0;
}

2. RGB

Kode warna RGB (Red, Green, Blue) adalah kode warna yang menggunakan integer dengan angka 0 sampai 255, dengan format penulisan rgb(r,g,b). Contohnya warna hijau kode RGB-nya adalah rgb(0, 255, 0).

Berikut ini contoh penggunaan RGB pada CSS.

/* Penggunaan RGB pada CSS */
h1 {
color: rgb(0,0,0);
border: 1px solid rgb(240,240,240);
}

 
3. RGBA

Kode warna RGBA sama seperti RGB cuma yang membedakannya adalah terdapat A yaitu Alpha (disebut juga transparency / opacity) yang menunjukkan nilai transparency pada warna tersebut. Format penulisannya rgba(r,g,b,a) dengan mengganti value menjadi angka 0 sampai 255.

Contoh penggunaan RGBA pada CSS.

/* Penggunaan RGBA pada CSS */
h1 {
color: rgba(51,51,51,1);
border: 1px solid rgba(240,240,240,0.2);
}

4. HSL

HSL adalah kode warna yang merupakan singkatan dari Hue, Saturation, Lightness. Kode warna yang satu ini memang jarang digunakan tapi setidaknya kita tau apa itu HSL. Format penulisannya hsl(h,s,l). Berikut ini contoh penggunaannya pada CSS.

/* Penggunaan RGBA pada CSS */
h1 {
color: hsl(0,100%,50%);
border: 1px solid hsl(120,100%,50%);
}

5. HSLA

HSLA tidak beda jauh dengan HSL, yaitu hanya ada tambahan A (Alpha) yang menunjukkan tingkat transparency pada warna tersebut. Format penulisannya adalah hsla(h,s,l,a). Berikut ini adalah contoh penggunaannya pada CSS.

/* Penggunaan RGBA pada CSS */
h1 {
color: hsla(0,100%,50%,0.2);
border: 1px solid hsla(120,100%,50%,0.3);
}

6. Berdasarkan nama

Kode warna berdasarkan nama maksudnya langsung ditulis nama warnanya. Contohnya white (putih), black (hitam). Untuk melihat warna yang memiliki kata kunci (keyword) kalian bisa lihat di situs ini.

Sekian dari saya, semoga bermanfaat.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: