CSS3 Color

by

Saya pernah membahas tentang html color code di artikel sebelumnya. Disana saya menulis kalau ada 4 cara menulis kode warna, yaitu: RGB, CMYK, HEX dan HSL.

Saat ini, ada juga cara baru untuk menulis kode warna di CSS3 yaitu dengan:

RGBA color code

RGBA singkatan dari red-green-blue-alpha, kalau RGB kan hanya red-green-blue.

RGBA ditulis dengan fungsi notasi rgba(). Alpha sendiri menentukan nilai opacity atau transparasi dari warna tersebut.

Setiap nilai red, green dan blue punya value dari 0 sampai 255 atau 0% sampai 100%. Dan nilai alpha adalah dari 0.0 (full transparan) sampai 1.0 (full kelihatan).

Contoh:

h2 {
        color: rgba(0,255,0,.5);
    }
p {
        background-color: rgba(0%,100%,0%,.5);
    }

Hasilnya:

Heading 2

Contoh jika dipakai background color

HSL color code

HSL singkatan dari hue-saturation-lightness ditulis dengan fungsi notasi hsl().

  • Hue adalah derajat dari 0 sampai 360,
    • 0 atau 360 adalah merah
    • 120 adalah hijau
    • 240 adalah biru
  • Saturation adalah presentase kandungan warna, nilainya 0% sampai 100% (full warna)
  • Lightness untuk mengatur kecerahan, 0% itu gelap hitam, 100% itu terang putih.

Contoh:

p {background-color: hsl(360, 100%, 50%);

HSLA color code

HSLA singkatan dari hue-saturation-lightness-alpha, ditulis dengan fungsi notasi hsla().

Alpha ini menentukan transparansi dari 0.0 (full transparan) sampai 1.0 (full kelihatan).

Contoh:

p {background-color: hsla(360, 100%, 50%), 0.5;

Sekian tutorial menulis warna di css3. Thnks!

Leave a Comment