Cara Menggunakan Kode Warna

dasar penulisan html Kode Warna untuk sebuah teks atau background atau yang lainnya baik dalam postingan atau membuat / memodifikasi sebuah template / tema blog, sebenarnya di internet sudah banyak yang postingan kode warna tersebut, jadi kita tinggal memilihnya warna apa yang ingin digunakan. Kode warna tersebut ada yang sudah jadi seperti pada Daftar Lengkap Kode Warna atau juga dalam sebuah Tool Kode Warna HTML, jadi lebih praktis dan mudah untuk membuat kode warna tersebut.

Dalam pembuatan Kode Warna (yang saya ketahui) bisa menggunakan :

Kode RGB (secara desimal)
Kode Hexadecimal (Hex)
Kode HSL (persentase)

Kode Warna RGB

Kode warna pada dasarnya menggunakan aturan warna RGB yaitu penggabungan dari warna Red (merah) Green (Hijau) dan Blue (Biru). Kode warna secara desimal diwakili dengan kode 0 (nol) sampai dengan 255. Arti 0 (nol) di sini yaitu nilai terkecil untuk masing-masing warna (RGB) dan 255 merupakan nilai terbesar dari masing-masing warna tersebut.

Contoh penulisan kode warna RGB :

RGB(0,50,255) artinya 0 untuk warna Red, 50 untuk warna Green, 255 untuk warna Blue. Warna biru menggunakan angka 255 atau yang terbesar maka hasil warna tersebut mayoritas biru, sehingga hasil kode tersebut menghasilkan warna seperti di bawah :

Adapun penulisan kode warna RGB, sebagai contoh berikut :

<div style="background-color: RGB(0,50,255) ;">hasil kode RGB</div>

Hasilnya

hasil kode RGB

Kode Warna Secara Hexadesimal

Hexadesimal atau sistem bilangan basis 16 adalah sebuah sistem bilangan yang menggunakan 16 simbol, yaitu angka 0 sampai 9 ditambah dengan 6 simbol lainnya dengan menggunakan huruf A hingga F, sumber : wikipedia.org

Angka 0 (nol) merupakan nilai terkecil dan angka 9 merupakan nilai terbesar dari masing-masing kode warna tersebut. Dan huruf A merupakan nilai terkecil dan huruf F merupakan nilai terbesar dari masing-masing kode warna tersebut.

Penulisan kode Hexadesimal baik yang 3 atau 6 angka/huruf tetap mengacu ke penggabungan warna RGB dan diawali dengan kode tanda pagar (#)

Contoh kode #03f

Angka 0 mewakili warna R (Red/Merah)
Angka 3 mewakili warna G (Green/Hijau)
Huruf f mewakili warna B (Blue/Biru)

Contoh Penulisannya :

<div style="background-color: #03f;">hasil kode Hexadesimal 3 anggka/huruf</div>

Hasilnya

hasil kode Hexadesimal 3 anggka/huruf

Adapun kode warna Hexadesimal yang 6 angka/huruf hampir sama dengan kode warna Hexadesimal 3 angka/huruf, hanya saja di setiap kode warna RGB tersebut ditambahkan lagi 1 huruf/angka dibelakangnya.

Sebagai contoh dari kode warna RGB(0,50,255) seperti di atas, maka diperoleh kode warna Hexadesimalnya adalah # 0032fa

Angka 00 mewakili warna R (Red/Merah)
Angka 32 mewakili warna G (Green/Hijau)
Huruf fa mewakili warna B (Blue/Biru)

Silahkan anda cek kode warna dengan memasukan kode RGB-nya

Pilih Warna

Contoh Penulisannya :

<div style="background-color: #0032fa;">hasil kode Hexadesimal 6 anggka/huruf</div>

Hasilnya

hasil kode Hexadesimal 6 anggka/huruf

Catatan :

Jadi pada kode Warna Hexadesimal 6 angka/huruf bisa dirubah menjadi 3 angka/huruf, dengan cara menghapus angka/huruf ke dua masing-masing kode warna tersebut.

Kita ambil contoh kode hexadesimal 6 angka/huruf di atas.

# 0032fa

Hapus angka/huruf ke dua dari kode R yaitu angka/huruf 0
Hapus angka/huruf ke dua dari kode G yaitu angka/huruf 2
Hapus angka/huruf ke dua dari kode G yaitu angka/huruf a

Sehingga hasilnya menjadi :

# 03f dan warna yang dihasilkan akan sama. Lihat contoh di atas.

Kode Warna Hsl

Kode warna HSL adalah singkatan dari Hue, Saturation, dan Lightness (Luminance). Kode warna HSL biasanya menggunakan persentase (%)

Nilai pertama yakni Hue merupakan derajat warna dengan nilai 0 sampai 360. Nilai kedua dari kode warna HSL adalah Saturation. Saturation menyatakan seberapa “murni” sebuah warna. Nilai dari Saturation adalah persen dari 0% sampai dengan 100%, dan Nilai ketiga dari HSL adalah Lightness atau kecerahan dari warna menggunakan persentase dari angka 0% sampai dengan 100%.

Contoh :

(hsl(228,100%,49%)

Adapun contoh penulisan kode warna hsl, sebagai contoh berikut :

<div style="background-color: hsl(228,100%,49%)">Hasil Kode HSL</div>

Hasilnya

Hasil Kode HSL

Menggunakan Nama Warna

Dalam memberikan warna pada teks atau background bisa juga menggunakan kode warna langsung (namun dalam bahasa Inggris)

Contoh :

<div style="background-color: black">Hasil Kode Nama Warna</div>

Hasilnya

Hasil Kode Nama Warna

Cara Menggunakan Kode Warna

Contoh lain penggunaan kode warna

Inilah contoh penggunaan kode warna <span style="color : red; background-color:blue">dan ini hasilnya</span>, mudah juga ya...!

Hasilnya