Warna CSS

View Categories

Warna CSS

Warna ditentukan menggunakan nama warna yang telah ditentukan atau juga dapat dengan menggunakan nilai RGB, HEX, HSL, RGBA, HSLA.

Warna Latar CSS

Mengubah warna latar belakang untuk elemen HTML:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Halo Dunia</h1>

<p style="background-color: Tomat;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nil ut aliquip ex ea commodo consequat.
</p>

</body></html>

Jalankan Contoh

Warna Tulisan CSS

Mengubah warna tulisan:

Halo Dunia

Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Jika Anda menginginkan sedikit kerusakan, Anda dapat melakukan latihan fisik tanpa henti tanpa henti untuk mendapatkan hasil yang sama.

Contoh

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Halo Dunia</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipscing elite, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Jika Anda ingin mendapatkan sedikit kerugian, Anda dapat melakukan latihan fisik tanpa henti tanpa henti untuk mendapatkan hasil yang sama.</p>

</body></html>

Jalankan Contoh

Warna Border CSS

Mengubah warna border (batas atau garis batas elemen):

Halo Dunia

Halo Dunia

Halo Dunia

Contoh

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Halo Dunia</h1>

<h1 style="border: 2px solid DodgerBlue;">Halo Dunia</h1>

<h1 style="border: 2px solid Violet;">Halo Dunia</h1>

</body></html>

Jalankan Contoh

Nilai Warna CSS

Dalam CSS, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA.

Berikut ini adalah contoh membuat komponen berwarna seperti buah tomat dan dan juga membuat warna tersebut transparan 50%:

Contoh

<!DOCTYPE html>
<html>
<body>

<p>Membuat warna seperti buah tomat</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Membuat warna seperti buah tomat, tetapi 50% transparan:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0,5);">hsla(9, 100%, 64%, 0,5)</h1>

<p>Warna dapat ditentukan menggunakan nilai RGB, HEX, HSL, sedangkan warna transparan dapat menggunakan nilai warna RGBA atau HSLA.</p>

</body></html>

Jalankan Contoh

Nilai RGB

Nilai warna RGB mewakili MERAH, HIJAU, dan BIRU. Dalam CSS, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:

rgb(merah, hijau, biru)

Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna antara 0 dan 255.

Misalnya, rgb(255, 0, 0) ditampilkan sebagai merah, karena merah disetel ke nilai tertinggi (255) dan yang lainnya disetel ke 0.

Untuk menampilkan warna hitam, setel semua parameter warna ke 0, seperti ini: rgb(0, 0, 0).

Untuk menampilkan warna putih, setel semua parameter warna ke 255, seperti ini: rgb(255, 255, 255).

Bereksperimen dengan menggabungkan nilai RGB di bawah:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Tentukan warna menggunakan nilai RGB</h1>

<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>

</body></html>

Jalankan Contoh

Warna abu-abu sering ditentukan menggunakan nilai yang sama untuk ketiga sumber:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Berwarna abu-abu</h1>

<p>Dengan menggunakan nilai yang sama untuk merah, hijau, dan biru, Anda akan mendapatkan nuansa abu-abu yang berbeda:</p>

<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>
<h2 style="warna latar belakang:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>

</body></html>

Jalankan Contoh

Nilai RGBA

Nilai warna RGBA adalah perluasan nilai warna RGB dengan saluran alpha- yang menentukan opasitas warna.

Nilai warna RGBA ditentukan dengan:

rgba(merah, hijau, biru, alpha)

Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):

Bereksperimen dengan menggabungkan nilai RGBA di bawah:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Buat warna transparan dengan RGBA</h1>

<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>

</body></html>

Jalankan Contoh

Nilai HEX

Warna heksadesimal ditentukan dengan: #RRGGBB, dengan bilangan bulat heksadesimal RR (merah), GG (hijau), dan BB (biru) menentukan komponen warna. Dalam CSS, warna dapat ditentukan menggunakan nilai heksadesimal dalam bentuk:

#rrggbb

Di mana rr (merah), gg (hijau), dan bb (biru) adalah nilai heksadesimal antara 00 dan ff (sama dengan desimal 0-255).

Misalnya, #ff0000 ditampilkan sebagai merah, karena merah disetel ke nilai tertinggi (ff) dan yang lainnya disetel ke nilai terendah (00).

Untuk menampilkan hitam, setel semua nilai ke 00, seperti ini: #000000.

Untuk menampilkan warna putih, setel semua nilai ke ff, seperti ini: #ffffff.

Bereksperimen dengan menggabungkan nilai HEX di bawah:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Tentukan warna menggunakan nilai HEX</h1>

<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>

</body></html>

Jalankan Contoh

Warna abu-abu sering ditentukan menggunakan nilai yang sama untuk ketiga sumber:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Berwarna abu-abu</h1>

<p>Dengan menggunakan nilai yang sama untuk merah, hijau, dan biru, Anda akan mendapatkan nuansa abu-abu yang berbeda:</p>

<h2 style="background-color:#3c3c3c;">#3c3c3c</h2>
<h2 style="background-color:#616161;">#616161</h2>
<h2 style="background-color:#787878;">#787878</h2>
<h2 style="background-color:#b4b4b4;">#b4b4b4</h2>
<h2 style="background-color:#f0f0f0;">#f0f0f0</h2>
<h2 style="background-color:#f9f9f9;">#f9f9f9</h2>

</body></html>

Jalankan Contoh

Nilai HEX 3 Digit

Terkadang hanya terlihat kode hex 3 digit di sumber CSS.

Kode hex 3 digit adalah kependekan dari kode hex 6 digit.

Kode hex 3 digit memiliki bentuk berikut:

#rgb

Di mana r, g, dan b mewakili komponen merah, hijau, dan biru dengan nilai antara 0 dan f.

Kode hex 3 digit hanya dapat digunakan jika kedua nilai (RR, GG, dan BB) sama untuk setiap komponen. Jadi, jika punya #ff00cc, bisa ditulis seperti ini: #f0c.

Ini contohnya:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #fc9; /* sama seperti #ffcc99 */
}

h1 {
  color: #f0f; /* sama seperti #ff00ff */
}

p {
  color: #b58; /* sama seperti #bb5588 */
}
</style>
</head>
<body>

<h1>Kode Hex 3 digit CSS</h1>
<p>Ini adalah sebuah paragraf.</p>

</body></html>

Jalankan Contoh

Nilai HSL

HSL berarti Hue, Saturation, dan Lightness. Dalam CSS, warna dapat ditentukan menggunakan Hue, Saturation, dan Lightness (HSL) dalam bentuk:

hsl(hue, saturation, lightness)

Hue adalah derajat pada roda warna dari 0 hingga 360 dengan 0 berarti merah, 120 berarti hijau, dan 240 berarti biru.

Saturation adalah nilai persentase dengan 0% berarti warna abu-abu, dan 100% berarti warna penuh.

Lightness juga merupakan persentase dengan 0% adalah hitam, 50% bukan terang atau gelap, 100% adalah putih.

Bereksperimen dengan menggabungkan nilai HSL di bawah:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Tentukan warna menggunakan nilai HSL</h1>

<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>

</body></html>

Jalankan Contoh

Saturation

Saturation dapat digambarkan sebagai intensitas warna.

100% adalah warna murni, tidak ada bayangan abu-abu.

50% adalah 50% abu-abu, tetapi masih dapat terlihat warnanya.

0% benar-benar abu-abu, tidak dapat lagi terlihat warnanya.

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Saturasi HSL</h1>

<p>Parameter kedua dari hsl() mendefinisikan saturasi. Lebih sedikit saturasi berarti lebih sedikit warna. 0% benar-benar abu-abu:</p>

<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h2>
<h2 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h2>
<h2 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h2>
<h2 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h2>
<h2 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h2>

</body></html>

Jalankan Contoh

Lightness

Tingkat terang suatu warna dapat dijelaskan sebagai seberapa banyak cahaya yang ingin diberi warna, di mana 0% berarti tidak ada cahaya (hitam), 50% gelap 50% terang (tidak gelap maupun terang), dan 100% berarti sangat terang (putih).

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Keringanan HSL</h1>

<p>Parameter ketiga dari hsl() mendefinisikan kecerahan. 0% berarti hitam, dan 100% berarti putih:</p>

<h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2>
<h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2>
<h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2>
<h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2>

</body></html>

Jalankan Contoh

Nuansa Abu-abu

Warna abu-abu sering ditentukan dengan menyetel corak dan saturasi ke 0, dan menyesuaikan kecerahan dari 0% hingga 100% untuk mendapatkan corak yang lebih gelap/terang:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Berwarna abu-abu</h1>

<p>Dengan HSL, nuansa abu-abu dibuat dengan menyetel saturasi ke 0%, dan menyesuaikan kecerahan dari 0% hingga 100%:</p>

<h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2>
<h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2>
<h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2>
<h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2>
<h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2>
<h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2>

</body></html>

Jalankan Contoh

Nilai HSLA

Nilai warna HSLA adalah perluasan dari nilai warna HSL dengan saluran alpha – yang menentukan opasitas warna.

Nilai warna HSLA ditentukan dengan:

hsla(hue, saturation, lightness, alpha)

Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):

Bereksperimen dengan menggabungkan nilai HSLA di bawah:

Contoh

<!DOCTYPE html>
<html>
<body>

<h1>Buat warna transparan dengan HSLA</h1>

<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Komentar CSS
Tutorial setelahnya : Warna Latar Belakang CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan