Basic-CSS POST CSS

Basic CSS - Colors

colors

Pendahuluan

Pada bagian ini merupakan hal yang sangat penting untuk teman-teman ketahui, yaitu warna pada CSS. Bagaimana cara mengatur warna dan apa saja jenis warna yang dapat digunakan di CSS. Lansung saja kita akan bahas di tutorial kali ini

CSS Colors

Warna pada CSS dapat ditentukan menggunakan nama warna yang telah di tentukan sebelumnya atau nilai seperti RGB, HEX, HSL, RGBA, HSLA

Menggunakan Nama Warna

Jika teman-teman ingat, pada materi sebelumnya kita sudah menggunakan beberapa nama warna. Nah sekarang kita akan bahas kembali untuk mengatur warna di CSS. CSS mendukung penamaan warna sebanyak 140 standard nama warna. Teman-teman dapat mengunjungi website ini untuk melihat nama warna yang di dukung HTML color Names

Contoh :

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Hasil :

nama warna

RGB Color

Nilai warna RGB mewakili campuran warna antara Red, Green, dan Blue. Di CSS, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:

rgb(red, green, blue)

Setiap parameter (Red, Green, Blue) mendefenisikan intensitasa warna dari 0 sampai dengan 255.

Sebagai contoh rgb(255,0,0) di tampilkan sebagai merah, karena merah di atur ke nilai tertinggi (255) dan yang lainnya di atur ke nilai 0.

Untuk menampilkan warna hitam, atur semua parameter warna menjadi 0 seperti ini rgb(0,0,0).

Sebaliknya untuk menampilkan warna menjadi warna putih dapat mengatur nilainya menjadi rgb(255,255,255)

RGB Color Generator

Result: Red: Green: Blue:Blue:

RGBA Value

RGBA adalah singkatan dari RGB dengan tambahan Alpha yang merupakan opasitas untuk warna. Nilai RGBA ditentukan dengan seperti berikut :

rgba(red, green, blue, alpha)

RGBA Color Generator

Result: Red: Green: Blue: Opasity:

CSS HEX Colors

Warna menggunakan HEX adalah menentukan kode warna dengan nilai hexadesimal dengan rumus seperti berikut :

#rrggbb

Nilai dari warna tersebut adalah #RRGGBB yang berarti RR (red), GG (green), BB (blue).

3 Digit HEX Value

Kita juga dapat menggunakan kode warna hexadesimal dengan 3 digit. Sebagai contoh seperti berikut :

body {
  background-color: #fc9;
}

h1 {
  color: #f0f; 
}

p {
  color: #b58; 
}

HSL Value

HSL merupakan singkatan dari Hue, Saturation, dan Lightness. Pada CSS, warna dapat ditentukan menggunakan HSL dalam bentuk rumus seperti berikut :

hsl(hue, saturation, lightness)
  • Hue adalah drajat dari 0 samapi 360. 0 adalah merah, 120 adalah hijau, dan 240 adalah biru.
  • Saturasi adalah nilai persentase, 0% berarti bayangan abu-abu, dan 100% adalah warna penuh.
  • Lightness juga persentase, 0% hitam, 50% tidak terang atau gelap, 100% putih

Contoh menggunakan HSL sebagai pengaturan warna pada CSS

h1{
    hsl(0, 100%, 50%) /* warna merah */
}

Kesimpulan

Cukup banyak pilihan yang diberikan oleh CSS untuk dapat kita gunakan untuk mengatur warna. Dari berbagai macam jenis warna yang bisa kita gunakan, manakah yang sering kamu gunakan untuk menentukan warna tampilan website kamu?