Color Value di CSS: Jenis dan Cara Membuat Codenya

Section Artikel

1 Warna CSS
2 Warna Heksadesimal
3 Warna RGB
4 Warna RGBA
5 Warna HSL
6 Warna HSLA
7 Nama Predefined/Cross-browser Color
8 Warna currentcolor keyword

Warna CSS

Warna di CSS dapat ditentukan dengan metode berikut:

Warna heksadesimal
Warna RGB
Warna RGBA
Warna HSL
Warna HSLA
Nama predifine / Cross-brwoser
Warna curentcolor keyword

Warna Heksadesimal

Warna heksadesimal ditentukan dengan: #RRGGBB, di mana bilangan bulat heksadesimal RR (merah), GG (hijau) dan BB (biru) menentukan komponen warna. Semua nilai harus antara 00 dan FF.

Misalnya, nilai # 0000ff dirender sebagai biru, karena komponen biru disetel ke nilai tertinggi (ff) dan lainnya disetel ke 00.

Contoh
Tentukan warna HEX yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
</style>
</head>
<body>

<h2> Warna HEX </h2>
<p> Warna heksadesimal ditentukan dengan: #RRGGBB, di mana bilangan bulat heksadesimal RR (merah), GG (hijau) dan BB (biru) menentukan komponen warna. Semua nilai harus antara 00 dan FF. </p>

<p id = "p1"> Merah </p>
<p id = "p2"> Hijau </p>
<p id = "p3"> Biru </p>
<p id = "p4"> Kuning </p>
<p id = "p5"> Cerise </p>

</body>
</html>

Warna RGB

Nilai warna RGB ditentukan dengan fungsi rgb (), yang memiliki sintaks berikut:

rgb (red, green, blue)

Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna dan dapat berupa bilangan bulat antara 0 dan 255 atau nilai persentase (dari 0% hingga 100%).

Misalnya, nilai rgb (0,0,255) dirender sebagai biru, karena parameter biru disetel ke nilai tertinggi (255) dan yang lainnya disetel ke 0.

Selain itu, nilai berikut menentukan warna yang sama: rgb (0,0,255) dan rgb (0%, 0%, 100%).

Contoh
Tentukan warna RGB yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);}
#p2 {background-color:rgb(0,255,0);}
#p3 {background-color:rgb(0,0,255);}
#p4 {background-color:rgb(192,192,192);}
#p5 {background-color:rgb(255,255,0);}
#p6 {background-color:rgb(255,0,255);}
</style>
</head>
<body>

<h2>RGB colors</h2>
<p> Nilai warna RGB ditentukan dengan fungsi rgb (): rgb (merah, hijau, biru) </p>
<p> Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna dan dapat berupa bilangan bulat antara 0 dan 255 atau nilai persentase (dari 0% hingga 100%). </p>

<p id = "p1"> Merah </p>
<p id = "p2"> Hijau </p>
<p id = "p3"> Biru </p>
<p id = "p4"> Abu-abu </p>
<p id = "p5"> Kuning </p>
<p id = "p6"> Cerise </p>

</body>
</html>

Warna RGBA

Nilai warna RGBA adalah perpanjangan dari nilai warna RGB dengan saluran alfa – yang menentukan opasitas objek.

Warna RGBA ditentukan dengan fungsi rgba (), yang memiliki sintaks berikut:

rgba (merah, hijau, biru, alfa)

Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya tidak tembus pandang).

Contoh
Tentukan warna RGB yang berbeda dengan opacity:

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>

<h2>RGB colors with opacity</h2>
<p> Nilai warna RGBA adalah perpanjangan dari nilai warna RGB dengan saluran alfa - yang menentukan opasitas objek. </p>

<p id = "p1"> Merah </p>
<p id = "p2"> Hijau </p>
<p id = "p3"> Biru </p>
<p id = "p4"> Abu-abu </p>
<p id = "p5"> Kuning </p>
<p id = "p6"> Cerise </p>

</body>
</html>

Warna HSL

HSL adalah singkatan dari hue, saturation, dan lightness – dan mewakili representasi warna koordinat silinder.

Nilai warna HSL ditentukan dengan fungsi hsl (), yang memiliki sintaks berikut:

hsl (hue, saturation, lightness)

Corak warna adalah derajat pada roda warna (dari 0 hingga 360) – 0 (atau 360) merah, 120 hijau, 240 biru. Saturasi adalah nilai persentase; 0% berarti naungan abu-abu dan 100% adalah warna penuh. Ringan juga merupakan persentase; 0% hitam, 100% putih.

Contoh
Tentukan warna HSL yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>

<h2>HSL colors</h2>
<p> HSL adalah singkatan dari hue, saturation, dan lightness - dan mewakili representasi warna koordinat silinder. </p>
<p> Nilai warna HSL ditentukan dengan fungsi hsl (): hsl (hue, saturation, lightness) </p>
<p> Corak warna adalah derajat pada roda warna (dari 0 hingga 360) - 0 (atau 360) merah, 120 hijau, 240 biru. Saturasi adalah nilai persentase; 0% berarti warna abu-abu dan 100% adalah warna penuh. Ringan juga merupakan persentase; 0% hitam, 100% putih. </p>

<p id = "p1"> Hijau </p>
<p id = "p2"> Hijau muda </p>
<p id = "p3"> Hijau tua </p>
<p id = "p4"> Hijau pastel </p>
<p id = "p5"> Violet </p>
<p id = "p6"> Pastel violet </p>

</body>
</html>

Warna HSLA

Nilai warna HSLA adalah perpanjangan dari nilai warna HSL dengan saluran alfa – yang menentukan opasitas objek.

Nilai warna HSLA ditentukan dengan fungsi hsla (), yang memiliki sintaks berikut:

hsla (hue, saturation, lightness, alpha)

Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya tidak tembus pandang).

Contoh
Tentukan warna HSL yang berbeda dengan opacity:

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>

<h2>HSL colors with opacity</h2>
<p> Nilai warna HSLA adalah perpanjangan dari nilai warna HSL dengan saluran alfa - yang menentukan opasitas objek. </p>

<p id = "p1"> Hijau </p>
<p id = "p2"> Hijau muda </p>
<p id = "p3"> Hijau tua </p>
<p id = "p4"> Hijau pastel </p>
<p id = "p5"> Violet </p>
<p id = "p6"> Pastel violet </p>

</body>
</html>

Nama Predefined/Cross-browser Color

140 nama warna ditentukan sebelumnya dalam spesifikasi warna HTML dan CSS.

Misalnya: blue, red, coral, brown, dll:

Contoh
Tentukan nama warna yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
</style>
</head>
<body>

<h2>Predefined Color Names</h2>
<p>140 color names are predefined in the HTML and CSS color specification. These are just some of them.</p>

<p id="p1">Blue</p>
<p id="p2">Red</p>
<p id="p3">Coral</p>
<p id="p4">Brown</p>

</body>
</html>

Warna currentcolor keyword

Watna currentcolor keyword mengacu pada nilai properti color dari suatu elemen.

Contoh
Warna pembatas elemen berikut akan berwarna biru, karena warna teks dari elemen berwarna biru:

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  color: blue;
  border: 10px solid currentcolor;
}
</style>
</head>
<body>

<h2>The currentcolor Keyword</h2>
<p> Kata kunci currentcolor mengacu pada nilai properti color dari sebuah elemen. </p>
<p> Warna bingkai dari elemen div berikut akan berwarna biru, karena warna teks dari elemen div berwarna biru: </p>

<div id = "myDIV">
Elemen div ini memiliki warna teks biru dan batas biru.
</div>

</body>
</html>

CSS references