KAL
Menu

Format warna

Format warna hex, rgb, hsl, oklch modern, serta penggunaan alpha.

Daftar isi

Topik ini membahas format penulisan warna pada CSS, yaitu hex, rgb(), hsl(), dan oklch(), beserta cara menyatakan tingkat transparansi melalui kanal alpha. Pemilihan format memengaruhi keterbacaan kode dan kemudahan menyusun palet, sedangkan hasil warna yang tampil di layar tetap ditentukan nilainya. Setelah membacanya, satu warna dapat dinyatakan dalam empat format dan format yang sesuai untuk setiap keperluan dapat dipilih dengan alasan yang jelas.

Hex tiga, enam, dan delapan digit#

Format hex menuliskan warna dengan bilangan heksadesimal setelah tanda pagar. Bentuk enam digit #rrggbb menyatakan tiga kanal, yaitu merah, hijau, dan biru, masing-masing dengan nilai 00 hingga ff. Huruf besar dan kecil diperlakukan sama, sehingga #FFAA00 dan #ffaa00 adalah warna yang sama. Bentuk tiga digit #rgb merupakan singkatan yang sah apabila setiap pasangan digitnya sama, sehingga #a4c berarti #aa44cc.

Bentuk delapan digit menambahkan dua digit terakhir sebagai kanal alpha. Warna #1e5eff80 berarti warna dasar #1e5eff dengan transparansi sekitar separuh, karena nilai 80 dalam heksadesimal adalah 128 dari rentang 0 sampai 255. Kelebihan format hex adalah kekompakannya, dan format ini sudah digunakan sejak awal CSS. Kekurangannya, kanal-kanalnya tidak menyampaikan makna warna secara langsung bagi pembaca kode, sehingga #1e5eff tidak segera terbaca sebagai biru.

rgb() dan sintaks modern#

Fungsi rgb() menyatakan tiga kanal warna dengan angka desimal dari 0 sampai 255. Bentuk lama memisahkan kanal dengan koma, misalnya rgb(255, 0, 0), dan bentuk itu tetap valid hingga sekarang. Sintaks modern memisahkan kanal dengan spasi dan menaruh alpha setelah garis miring, sehingga hitam setengah transparan ditulis rgb(0 0 0 / 0.5). Kanal juga dapat ditulis dengan persen, misalnya rgb(100% 0% 0%) untuk merah penuh.

Sintaks modern menjadi pola umum karena konsisten dengan hsl() dan oklch() yang memakai pola spasi dan garis miring yang sama. Nilai alpha-nya berkisar dari 0 untuk sepenuhnya transparan sampai 1 untuk sepenuhnya pekat, dan bentuk persen seperti 50% juga diterima. Dengan pola ini, penambahan transparansi pada warna apa pun cukup dilakukan di bagian akhir deklarasi tanpa mengubah kanal warnanya.

hsl() yang mudah dibaca#

Fungsi hsl() menyatakan warna dari tiga komponen yang mudah dibayangkan, yaitu hue sebagai posisi pada lingkaran warna dari 0 sampai 360 derajat, saturation sebagai intensitas dalam persen, dan lightness sebagai terang gelapnya warna dalam persen. Saturation 0 menghasilkan abu-abu, lightness 0 menghasilkan hitam, lightness 100% menghasilkan putih, dan warna penuh berada di sekitar lightness 50%. Posisi hue pada lingkaran warna mengikuti penanda berikut.

HueWarna yang muncul
0merah
60kuning
120hijau
180sian
240biru
300magenta

Keunggulan hsl() terasa saat menyusun palet. Variasi satu warna cukup dibuat dengan menggeser hue dan menahan lightness, sehingga hsl(210 100% 40%) dan hsl(230 100% 40%) terbaca sebagai dua biru yang berdampingan. Transparansi ditambahkan dengan pola yang sama seperti rgb(), misalnya hsl(210 100% 40% / 0.6). Karena komponennya menyampaikan makna, kode warna lebih mudah ditinjau dan disunting oleh tim.

Satu warna dalam empat format#

Warna yang sama dapat dituliskan dalam keempat format, dan deklarasi berikut menampilkannya berdampingan. Nilai oklch() ditulis dengan pembulatan, sehingga hasilnya sangat dekat dengan tiga format lainnya tanpa harus identik sampai digit terakhir. Karena itu, pemilihan format menyangkut keterbacaan kode dan alat kerja, bukan perbedaan hasil di layar.

css Contoh: satu warna dalam empat format 
.a-hex {
  background-color: #1e5eff;
}

.a-rgb {
  background-color: rgb(30 94 255);
}

.a-hsl {
  background-color: hsl(223 100% 56%);
}

.a-oklch {
  background-color: oklch(55.3% 0.247 264);
}

Setiap format memanggil warna yang sama dengan sisi kuatnya masing-masing. Hex paling ringkas untuk ditukar antar alat, rgb() paling dekat dengan cara komputer menyimpan warna, hsl() paling mudah dibaca untuk palet sederhana, dan oklch() paling andal untuk palet yang menuntut keseragaman. Demo berikut menampilkan warna tersebut dalam empat format pada baris pertama, lalu warna yang sama dengan alpha beragam di atas latar terang dan latar gelap pada dua baris berikutnya. Jalankan demo, bandingkan keempat kotak warna dasar yang tampil sama, lalu amati bagaimana nilai alpha menipiskan warna hingga latar di belakangnya terlihat.

Kode sumber demo
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo format warna dan kanal alpha</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <main>
    <section>
      <h2>Warna dasar dalam empat format</h2>
      <div class="baris">
        <figure>
          <div class="kotak dasar"></div>
          <figcaption>#1e5eff</figcaption>
        </figure>
        <figure>
          <div class="kotak dasar"></div>
          <figcaption>rgb(30 94 255)</figcaption>
        </figure>
        <figure>
          <div class="kotak dasar"></div>
          <figcaption>hsl(223 100% 56%)</figcaption>
        </figure>
        <figure>
          <div class="kotak dasar"></div>
          <figcaption>oklch(55.3% 0.247 264)</figcaption>
        </figure>
      </div>
    </section>
    <section>
      <h2>Alpha di atas latar terang</h2>
      <div class="baris latar-terang">
        <figure>
          <div class="kotak a1"></div>
          <figcaption>1</figcaption>
        </figure>
        <figure>
          <div class="kotak a7"></div>
          <figcaption>0.7</figcaption>
        </figure>
        <figure>
          <div class="kotak a4"></div>
          <figcaption>0.4</figcaption>
        </figure>
        <figure>
          <div class="kotak a15"></div>
          <figcaption>0.15</figcaption>
        </figure>
      </div>
    </section>
    <section>
      <h2>Alpha di atas latar gelap</h2>
      <div class="baris latar-gelap">
        <figure>
          <div class="kotak a1"></div>
          <figcaption>1</figcaption>
        </figure>
        <figure>
          <div class="kotak a7"></div>
          <figcaption>0.7</figcaption>
        </figure>
        <figure>
          <div class="kotak a4"></div>
          <figcaption>0.4</figcaption>
        </figure>
        <figure>
          <div class="kotak a15"></div>
          <figcaption>0.15</figcaption>
        </figure>
      </div>
    </section>
  </main>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1e293b;
  background-color: #f8fafc;
}

section + section {
  margin-top: 18px;
}

h2 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.baris {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  background-color: #ffffff;
}

.latar-terang {
  background-color: #ffffff;
}

.latar-gelap {
  background-color: #0f172a;
  border-color: #334155;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: #475569;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.latar-gelap figcaption {
  color: #cbd5e1;
}

.kotak {
  height: 48px;
  border-radius: 6px;
  border: 1px solid rgb(0 0 0 / 0.15);
}

.dasar {
  background-color: #1e5eff;
}

.a1 {
  background-color: rgb(30 94 255 / 1);
}

.a7 {
  background-color: rgb(30 94 255 / 0.7);
}

.a4 {
  background-color: rgb(30 94 255 / 0.4);
}

.a15 {
  background-color: rgb(30 94 255 / 0.15);
}

</style>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1e293b;
  background-color: #f8fafc;
}

section + section {
  margin-top: 18px;
}

h2 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.baris {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  background-color: #ffffff;
}

.latar-terang {
  background-color: #ffffff;
}

.latar-gelap {
  background-color: #0f172a;
  border-color: #334155;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 6px;
  font-size: 11px;
  color: #475569;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.latar-gelap figcaption {
  color: #cbd5e1;
}

.kotak {
  height: 48px;
  border-radius: 6px;
  border: 1px solid rgb(0 0 0 / 0.15);
}

.dasar {
  background-color: #1e5eff;
}

.a1 {
  background-color: rgb(30 94 255 / 1);
}

.a7 {
  background-color: rgb(30 94 255 / 0.7);
}

.a4 {
  background-color: rgb(30 94 255 / 0.4);
}

.a15 {
  background-color: rgb(30 94 255 / 0.15);
}

</style></body>
</html>

Pada demo tersebut, baris latar gelap memperlihatkan hal yang sering luput, yaitu warna transparan yang tampilannya berbeda menurut latar di belakangnya. Nilai alpha 0.15 di atas latar terang hampir tak terlihat, sedangkan di atas latar gelap tetap terbaca sebagai lapisan tipis. Karena itu pengujiannya dilakukan pada latar yang benar-benar dipakai komponen tersebut.

oklch dan ruang warna modern#

Fungsi oklch() menyatakan warna dalam ruang warna OKLCH yang dirancang seragam secara persepsi (perceptually uniform). Tiga komponennya adalah L untuk terang dalam persen, C untuk chroma sebagai kepekatan yang lazim berkisar dari 0 sampai sekitar 0.4, dan H untuk hue dalam derajat. Karena seragam, penurunan L sebesar lima persen terlihat sama besarnya pada semua hue, sedangkan pada hsl() penurunan lightness yang sama dapat terlihat berbeda-beda antar hue. Sifat inilah yang membuat tangga warna untuk grafik dan status lebih konsisten bila disusun dengan oklch().

Dukungan browser untuk oklch() berstatus Baseline 2023, artinya seluruh browser modern utama telah mendukungnya sejak tahun tersebut. Browser yang lebih lama mengabaikan deklarasi yang tidak dikenalnya, sehingga properti tersebut tidak diterapkan sama sekali dan warna jatuh ke nilai warisan (inheritance) atau nilai bawaannya. Untuk itu pola deklarasi cadangan dipakai pada proyek yang masih menyasar browser lama.

Kesalahan umum#

Kesalahan pertama adalah menulis alpha tanpa garis miring pada sintaks modern, misalnya rgb(0 0 0 0.5). Deklarasi itu tidak valid dan diabaikan browser, sedangkan bentuk yang benar adalah rgb(0 0 0 / 0.5). Pola yang sama berlaku untuk hsl() dan oklch().

Kesalahan kedua adalah mengira bentuk tiga digit hex berlaku untuk kombinasi mana pun. Singkatan itu hanya sah apabila setiap pasangan digitnya sama, sehingga #123 berarti #112233, sedangkan #1e5 bukan singkatan dari #1e5eff. Perbaikannya, tulis enam digit penuh apabila pasangan digitnya tidak seragam.

Kesalahan ketiga adalah membalik urutan deklarasi cadangan, yaitu menaruh oklch() sebelum warna cadangan. Browser modern membaca deklarasi terakhir yang menang, sehingga warna oklch() tidak pernah tampil dan palet yang dirancang tidak terpakai. Perbaikannya, selalu susun warna cadangan lebih dulu dan deklarasi modern tepat setelahnya.

Ringkasan#

  • Hex hadir dalam bentuk tiga, enam, dan delapan digit, dan dua digit terakhir pada bentuk delapan menyatakan alpha.
  • Sintaks modern rgb() dan hsl() memisahkan kanal dengan spasi dan menaruh alpha setelah garis miring.
  • hsl() paling mudah dibaca untuk menyusun palet, sedangkan oklch() paling seragam secara persepsi dan berstatus Baseline 2023.
  • Warna yang sama dapat ditulis dalam empat format, sehingga pemilihan formatnya menyangkut keterbacaan kode, bukan hasil di layar.

Referensi#