Cara Mengatur Warna HTML Color Style dan HSL
- Penggunaan Nama Warna: Contoh penggunaan nama warna pada HTML; <p style="color: red;">Teks berwarna merah</p>. Pada potongan kode yang diberikan, 'red' adalah salah satu dari sekian nama warna yang bisa langsung digunakan dalam kode HTML.
- Penggunaan Kode Hexadecimal: Contoh penggunaan kode warna hex pada HTML; <p style="color: #00ff00;">Teks berwarna hijau</p>. Di sini, #00ff00 adalah kode warna hex untuk hijau murni. Kode warna hex terdiri dari enam digit yang terdiri dari kombinasi huruf dan angka (dari 0 hingga F) yang mewakili kombinasi warna RGB.
- Penggunaan RGB (Red, Green, Blue): Contoh penggunaan kode warna RGB pada HTML; <p style="color: rgb(255, 0, 0);">Teks berwarna merah</p>. Nilai dalam rgb (255, 0, 0) mewakili jumlah merah, hijau, dan biru dalam rentang 0 hingga 255.
- Hue (H): Hue merujuk pada "warna" dalam roda warna dan diwakili dalam derajat (0-360) di sekitar roda warna. Contoh penggunaan HSL untuk mengatur hue; <p style="color: hsl(120, 100%, 50%);">Teks berwarna hijau</p>. Pada contoh tersebut, hsl(120, 100%, 50%) mewakili hue 120° (hijau), saturasi 100%, dan kecerahan 50%.
- Saturation (S) dan Lightness (L): Saturation mengacu pada kejenuhan warna (dalam persentase), sedangkan Lightness menentukan seberapa terang atau gelap warna (juga dalam persentase).
Penjelasan Lebih Lengkap
h1
color:#00FF00;}
 |
| Gambar 1 tabel warna hexadecimal |
Warna HTML
<!DOCTYPE html>
<html>
<head>
<title>
Contoh Kode HTML dengan Hexadecimal Style
</title>
</head>
<body>
<!-- Contoh teks dengan warna merah (#ff0000) -->
<h1 style="color: #ff0000;">
Ini adalah teks berwarna merah
</h1>
<!-- Contoh teks dengan warna biru tua (#000080) -->
<p style="color: #000080;">
Ini adalah teks berwarna biru tua
</p>
<!-- Contoh teks dengan warna hijau tua (#008000) -->
<p style="color: #008000;">
Ini adalah teks berwarna hijau tua
</p>
</body>
</html>
h1
Warna HTML
Catatan: rgba(0,0,0) adalah warna hitam dan rgb (255,255,255) adalah warna putih.
Contoh: Kode HTML dengan kode warna RGB.
<!DOCTYPE html>
<html>
<head>
<title>
Contoh Kode HTML dengan RGB Style
</title>
</head>
<body>
<!-- Contoh teks dengan warna merah -->
<h1 style="color: rgb(255, 0, 0);">
Ini adalah teks berwarna merah
</h1>
<!-- Contoh teks dengan warna biru -->
<p style="color: rgb(0, 0, 255);">
Ini adalah teks berwarna biru
</p>
<!-- Contoh teks dengan warna hijau -->
<p style="color: rgb(0, 128, 0);">
Ini adalah teks berwarna hijau
</p>
</body>
</html>
h1
color:rgba(11, 99, 150, 1);}
Contoh: Kode HTML dengan kode warna RGBA.
<!DOCTYPE html>
<html>
<head>
<title>
Contoh Kode HTML dengan RGBA Style
</title>
</head>
<body>
<!-- Contoh teks dengan warna merah dan transparansi setengah (50%) -->
<h1 style="color: rgba(255, 0, 0, 0.5);">
Ini adalah teks berwarna merah dengan transparansi.
</h1>
<!-- Contoh teks dengan warna biru dan transparansi rendah (25%) -->
<p style="color: rgba(0, 0, 255, 0.25);">
Ini adalah teks berwarna biru dengan transparansi rendah.
</p>
<!-- Contoh teks dengan warna hijau dan transparansi tinggi (75%) -->
<p style="color: rgba(0, 128, 0, 0.75);">
Ini adalah teks berwarna hijau dengan transparansi tinggi.
</p>
</body>
</html>
Warna HTML
Warna HSL: 'H' adalah untuk tipe hue, 'S' adalah untuk tipe saturation, dan 'L' adalah untuk lightness (kecerahan). Nilai warna HSL dijelaskan sebagai berikut ini:
hsl(hue, saturation, lightness)
- Hue adalah warna dari image itu sendiri. Jangkauan nilainya dimulai dari 0 hingga 360. 0 untuk warna merah, 120 untuk warna hijau, dan 240 untuk warna biru.
- Saturation adalah intensitas atau kemurnian dari hue. 0% adalah untuk bayangan abu-abu dan 100% adalah untuk warna penuh. Ketika saturation warna bernilai penuh, maka warna dinyatakan pada kondisi murni atau versi alami.
- Lightness adalah ruang kecerahan warna. 0% adalah untuk warna hitam atau gelap, 100% adalah untuk warna putih.
h1
color:#00FF00;
background-color: hsl(200, 20%, 40%);
color: hsl(300, 30%, 90%);}
Warna HTML
Contoh: Jika diaplikasikan hue yang telah dijelaskan sebelumnya, maka hasilnya dapat diperlihatkan seperti contoh berikut ini.
Secara total dimiliki 4096 kombinasi warna berbeda dari cakupan rentang warna merah, hijau, dan biru mulai dari 00 hingga FF. Dengan kombinasi 16*16*16 kombinasi warna yang berbeda-beda. Kemudian, dengan penggunaan HSL dapat ditemukan kombinasi warna lainnya yang jauh lebih kreatif dan dengan skala rentang yang jauh lebih besar.
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<title>
WarnaHTML
</title>
<style type="text/css">
h1{
color:#0FFFF0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);}
h4{
color:rgb(0, 255, 0);
background-color: hsl(150, 20%, 40%);
color: hsl(360, 30%, 90%);}
li{
color:rgba(11, 99, 150, 1);
background-color: hsl(250, 45%, 60%);
color: hsl(175, 35%, 87%);
}
</style>
</head>
<body>
<h1>
Warna HTML
</h1>
<h4>
Bahasa Pemrograman
</h4>
<ul>
<li>Java</li>
<li>C++</li>
<li>C</li>
</ul>
</body>
</html>
Warna HTML
Bahasa Pemrograman
- Java
- C++
- C
15 komentar untuk "Cara Mengatur Warna HTML Color Style dan HSL"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Ada berapa tipe warna yang diberikan pada HTML?
BalasHapusHTML mendukung 140 standar penamaan warna yang dapat digunakan dalam pengembangan web.
HapusApakah model warna yang digunakan pada HTML?
BalasHapusModel warna yang digunakan pada HTML adalah model warna RGB. Model RGB merupakan model warna yang terdiri dari untaian kode hexadesimal yang melambangkan suatu urutan kode warna tertentu mulai dari R atau red, G atau green, dan B atau blue (#RRGGBB).
HapusApa yang dimaksud dengan sytle pada html?
BalasHapusStyle adalah sekumpulan format yang diterapkan pada item yang dipilih dalam presentasi halaman HTML dan dapat digunakan untuk mengubah tampilan dari halaman. Saat menerapkan style pada HTML, pengembang dapat menerapkan sekelompok format tertentu pada saat yang bersamaan.
HapusApa yang dimaksud dengan background color pada laman html?
BalasHapusBackground color adalah properti yang digunakan untuk mengatur warna latar belakang sebuah elemen pada laman html. Latar belakang elemen adalah ukuran total sebuah elemen, termasuk padding dan batas-batas.
HapusTips: Jika ingin menggunakan pewarnaan pada latar belakang situs, gunakanlah kombinasi warna yang kontras. Jika latar belakang yang digunakan adalah warna cerah, maka warna huruf yang digunakan adalah warna yang gelap dan begitupus sebaliknya.
Bagaimana cara mengatur warna latar belakang pada laman html?
BalasHapusUntuk menyetel warna pada latar belakang html, perancang situs dapat menggunakan atribut style. Atribut style menentukan gaya dalam sebuah elemen latar belakang html. Atribut tersebut digunakan pada tag BODY html. Namun pada HTML5, penggunakan atribut latar belakang (bgcolor) sudah tidak bisa didukung lagi penggunaannya, sehingga alternatif untuk dapat memberikan warna pada latar belakang adalah menggunakan bahasa pemrogramana tambahan yang khusus digunakan untuk mengatur style pada laman html yaitu CSS.
HapusKode warna hexadesimal adalah kode warna yang mewakili warna merah, hijau, dan biru (#RRGGBB). Misalnya, pada warna merah, kode warnanya adalah #FF0000, yaitu bernilai '255' merah, '0' bernilai hijau, dan '0' bernilai biru. Kode warna dapat memberikan pewarnaan pada latar belakang, teks, dan tabel pada halaman html.
BalasHapusApa yang dimaksud dengan kode warna hexadesimal pada html?
BalasHapusKode warna hexadesimal adalah sebuah kombinasi dari enam digit angka dan huruf yang ditentukan secara acak yang membentuk suatu kombinasi warna dari pencampuran warna merah, hijau, dan biru (RGB). Pada dasarnya, kode warna hexadesimal adalah singkatan dari nilai RGB-nya itu sendiri dengan sedikit kombinasi dari komposisi warna dari ketiga kode warna tersebut.
HapusApa yang dimaksud dengan kode warna pada laman html?
BalasHapusKode warna atau color code adalah suatu sistem yang digunakan untuk menampilkan informasi dengan menggunakan warna yang berbeda pada dokumen html.
Hapus