HTML Color Codes

Pemilih Warna HTML untuk format RGB HEX HSL

Mudah mendapatkan kode warna HTML CSS untuk situs web Anda menggunakan pemilih warna, mengubah format warna antara HEX, RGB, HSL, HSV.

Pilih Warna

Masukkan nilai warna

Atau gunakan pemilih HTML5

Warna Terpilih

Merah: 0
Hijau: 255
Biru: 255
HUE (Derajat): 180
Kecerahan: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Grup Warna: Cyan
Bagikan:
Contoh warna CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Gaya Tergelap dan Terang

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Dapatkan Warna dari Gambar

get pixel color from pic

Pilih Warna dan buat Palet

select color and create palette

Apa Itu Kode Warna HTML?

Kode warna HTML adalah cara untuk menentukan warna dalam desain web. Kode-kode ini digunakan dalam HTML dan CSS untuk menentukan warna elemen seperti teks, latar belakang, batas, dan lainnya. Memahami kode warna HTML sangat penting untuk menciptakan halaman web yang menarik secara visual dan konsisten.

Misalnya, warna merah dapat diidentifikasi menggunakan format berikut:

Jenis Kode Warna HTML


Kode Warna Hexadecimal:
  • Cara paling umum untuk menentukan warna dalam HTML dan CSS adalah dengan menggunakan kode warna hexadecimal (hex). Kode warna hex adalah kombinasi enam digit angka dan huruf yang ditentukan oleh campuran komponen merah, hijau, dan biru (RGB).
  • Format: #RRGGBB
  • Contoh: #FF5733 mewakili corak warna oranye.
  • Setiap pasangan digit sesuai dengan intensitas merah, hijau, dan biru, masing-masing, pada skala dari 00 (tanpa intensitas) hingga FF (intensitas penuh).
Kode Warna RGB:
  • Kode warna RGB menentukan warna berdasarkan komponen merah, hijau, dan biru mereka.
  • Format: rgb(merah, hijau, biru)
  • Contoh: rgb(255, 87, 51) adalah setara RGB dengan #FF5733.
  • Setiap komponen (merah, hijau, dan biru) ditentukan sebagai angka antara 0 dan 255
Kode Warna RGBA:
  • Mirip dengan RGB, tetapi termasuk komponen alpha untuk opasitas.
  • Format: rgba(merah, hijau, biru, alpha)
  • Contoh: rgba(255, 87, 51, 0.5) menentukan warna yang sama dengan opasitas 50%.
Kode Warna HSL:
  • HSL adalah singkatan dari Hue, Saturation, dan Lightness.
  • Format: hsl(hue, saturation%, lightness%)
  • Contoh: hsl(9, 100%, 60%) adalah cara lain untuk mewakili warna #FF5733
  • Hue adalah derajat pada roda warna (dari 0 hingga 360), saturasi adalah persentase (0% adalah skala abu-abu, 100% adalah warna penuh), dan kecerahan juga adalah persentase (0% adalah hitam, 100% adalah putih).
Kode Warna HSLA:
  • Mirip dengan HSL, tetapi termasuk komponen alpha untuk opasitas.
  • Format: hsla(hue, saturation%, lightness%, alpha)
  • Contoh: hsla(9, 100%, 60%, 0.5) menentukan warna yang sama dengan opasitas 50%.
Menggunakan Kode Warna HTML:

Kode warna HTML dapat digunakan dalam berbagai properti CSS untuk menata elemen web. Misalnya:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

Dalam contoh ini, teks, latar belakang, dan batas ditata menggunakan berbagai jenis kode warna HTML, semuanya mewakili corak oranye yang sama.

Kode warna HTML adalah aspek dasar desain web, memungkinkan pengembang untuk menentukan dan memanipulasi warna dengan tepat. Dengan memahami kode warna hex, RGB, RGBA, HSL, dan HSLA, Anda dapat menciptakan halaman web yang kohesif dan menarik secara visual yang meningkatkan pengalaman pengguna.