Warna HTML
Warna HTML ditentukan menggunakan nama warna yang telah ditentukan, atau nilai RGB, HEX, HSL, RGBA, HSLA.
contoh :
<! DOCTYPE html>
<html>
<body>
<h1 style = "background-color: Tomat;" > Tomat </ h1>
<h1 style = "background-color: Orange;" > Oranye </ h1>
<h1 style = "background-color: DodgerBlue;" > DodgerBlue </ h1>
<h1 style = "background-color: MediumSeaGreen;" > MediumSeaGreen </ h1>
<h1 style = "background-color: Gray;" > Gray </ h1>
<h1 style = "background-color: SlateBlue;" > SlateBlue </ h1>
<h1 style = "background-color: Violet;" > Violet </ h1>
<h1 style = "background-color: LightGray;" > LightGray </ h1>
</ body>
</ html>
HTML mendukung 140 nama warna standar .
Warna latar belakang
Anda dapat mengatur warna latar belakang untuk elemen HTML:
contoh :
<! DOCTYPE html>
<html>
<body>
<h1 style = "background-color: DodgerBlue;" > Selamat Datang </ h1>
<p style = "background-color: Tomato ;" >
Paragrap <br>
paragrap <br>
paragrap <br>
paragrap <br>
</ p>
</ body>
</ html>
Warna teks
Anda dapat mengatur warna teks:
contoh :
<! DOCTYPE html>
<html>
<body>
<h3 style = "color: Tomato;" >Selamat Datang </ h3>
<p style = "color: DodgerBlue;" > Paragrap <br>
paragrap <br>
paragrap <br>
paragrap <br>.
</ p> .
<p style = "color: MediumSeaGreen;" > Paragrap <br>
paragrap <br>
paragrap <br>
paragrap <br>.
</ p>
</ body>
</ html>
Warna Perbatasan
Anda dapat mengatur warna batas:
contoh :
<! DOCTYPE html>
<html>
<body>
<h1 style = "border: 2px Tomat padat;" > Semalat Datang </ h1>
<h1 style="border: 2px solid DodgerBlue;">Semalat Datang</h1>
<h1 style = " border: 2px Violet padat;" > Semalat Datang </ h1>
</ body>
</ html>
Nilai Warna
Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:
Sama seperti nama warna "Tomat":
contoh :
<! DOCTYPE html>
<html>
<body>
<p>Sama seperti nama warna "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>Sama seperti nama warna "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>Selain nama warna yang telah ditentukan, warna dapat ditentukan menggunakan RGB, HEX, HSL, atau bahkan warna transparan menggunakan nilai warna RGBA atau HSLA.</p>
</ body>
</ html>
Nilai RGB
Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:
rgb ( merah, hijau , biru )
Setiap ukuran warna/parameter (merah, hijau, dan biru) akan mendefinisikan intensitas warna antara 0 dan 255.
Sebagai contoh, rgb (255, 0, 0) ditampilkan sebagai merah, karena merah diatur ke nilai tertingginya (255) dan yang lainnya diatur ke 0.
Untuk menampilkan warna hitam, semua parameter warna harus diatur ke 0, seperti ini: rgb (0, 0, 0).
Untuk menampilkan warna putih, semua parameter warna harus diatur ke 255, seperti ini: rgb (255, 255, 255).
Bereksperimen dengan mencampur nilai RGB di bawah ini:
contoh :
<! DOCTYPE html>
<html>
<body>
<h1 style = " background-color: rgb (255, 0, 0); " > rgb (255, 0, 0) </ h1>
<h1 style = " background-color: rgb (0, 0, 255); " > rgb (0, 0, 255) </ h1>
<h1 style = " background-color: rgb (60, 179, 113); " > rgb (60, 179, 113) </ h1>
<h1 style = " background-color: rgb (238, 130, 238); " > rgb (238, 130, 238) </ h1>
<h1 style = " background-color: rgb (255, 165, 0); " > rgb (255, 165, 0) </ h1>
<h1 style = " background-color: rgb (106, 90, 205); " > rgb (106, 90, 205) </ h1>
<p>Dalam HTML, Anda dapat mengatur warna menggunakan nilai RGB.</p>
</ body>
</ html>
Nilai HEX
Dalam HTML, warna dapat ditentukan menggunakan nilai heksadesimal dalam bentuk:
# rrggbb
Dimana rr (merah), gg (hijau) dan bb (biru) adalah nilai heksadesimal antara 00 dan ff (sama dengan desimal 0-255).
Sebagai contoh, # ff0000 ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (ff) dan yang lainnya diatur ke nilai terendah (00).
contoh :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
<p>Dalam HTML, Anda dapat menentukan warna menggunakan nilai Hex.</p>
</body>
</html>
Kejenuhan
Saturasi dapat digambarkan sebagai intensitas warna.
100% adalah warna murni, tidak ada warna abu-abu
50% abu-abu 50%, tetapi Anda masih dapat melihat warnanya.
0% benar-benar abu-abu, Anda tidak dapat lagi melihat warnanya.
contoh :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
<p>
Dengan warna HSL, saturasi lebih sedikit berarti warna kurang. 0% benar-benar abu-abu.</p>
</body>
</html>
Nuansa abu-abu sering didefinisikan dengan mengatur rona dan saturasi ke 0, dan menyesuaikan tingkat kecerahan dari 0% hingga 100% untuk mendapatkan nuansa yang lebih gelap / lebih terang:
contoh :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>
<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>
<p>
Dengan warna HSL, gradasi abu-abu dibuat dengan menyesuaikan saturasi hingga 0%, dan menyesuaikan tingkat abu-abu gelap / terang.</p>
</body>
</html>
Nilai RGBA
Nilai warna RGBA adalah perpanjangan nilai warna RGB dengan saluran alfa - yang menentukan opasitas untuk warna.
Nilai warna RGBA ditentukan dengan:
rgba ( merah, hijau , biru, alfa )
Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):
contoh :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
<p>
Anda dapat membuat warna transparan dengan menggunakan nilai warna RGBA.</p>
</body>
</html>
Nilai HSLA
Nilai warna HSLA adalah perpanjangan nilai warna HSL dengan saluran alfa - yang menentukan opasitas untuk 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):
contoh :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
<p>
Anda dapat membuat warna transparan dengan menggunakan nilai warna HSLA.</p>
</body>
</html>
Selamat Mencoba dan semoga bermanfaat.
EmoticonEmoticon