Warna CSS

Penentuan warna melalui penggunaan nama warna yang ditetapkan, atau nilai RGB, HEX, HSL, RGBA, dan HSLA.

Nama warna CSS

Dalam CSS, dapat digunakan nama warna untuk menentukan warna:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Coba sendiri

Dukungan CSS/HTML 140 jenis nama warna standar.

Latar Belakang CSS

Anda dapat menentukan warna latar belakang elemen HTML:

Selamat datang di Cina
Cina adalah negara yang besar!

Contoh

<h1 style="background-color:DodgerBlue;">Cina</h1>
<p style="background-color:Tomato;">Cina adalah negara yang besar!</p>

Coba sendiri

Warna Teks CSS

Anda dapat menentukan warna teks:

Cina

Cina adalah negara yang besar!

Cina, secara resmi Republik Rakyat Cina, adalah negara di Asia Timur.

Contoh

<h1 style="color:Tomato;">Cina</h1>
<p style="color:DodgerBlue;">Cina adalah negara yang besar!</p>
<p style="color:MediumSeaGreen;">Cina, secara resmi Republik Rakyat Cina...</p>

Coba sendiri

Warna Border CSS

Anda dapat menentukan warna garis bingkai:

Hello World
Hello World
Hello World

Contoh

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Coba sendiri

Nilai Warna CSS

Dalam CSS, Anda dapat menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, atau nilai HSLA untuk menentukan warna:

Sama dengan warna nama "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Sama dengan warna nama "Tomato" tetapi kekerasan 50%:

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

Coba sendiri

Ketahui lebih banyak tentang nilai warna

Dalam bab berikutnya, Anda akan belajar tentang RGB、HEX Dan HSL Lebih Banyak Pengetahuan.