Pemetaan Gamut Warna: Konversi Antar Ruang Warna

Ketika Anda memotret matahari terbenam yang indah dengan kamera profesional dan membukanya di browser web, ada sesuatu yang hilang. Oranye dan ungu yang dalam dan jenuh yang direkam sensor wide-gamut kamera tidak dapat direproduksi secara tepat di setiap layar — dan bahkan ketika bisa, warna mungkin tidak bertahan dalam konversi ke format web-safe. Proses adaptasi warna yang ada dalam satu ruang warna agar sesuai dengan batas-batas ruang lain ini disebut pemetaan gamut. Ini adalah salah satu operasi yang paling tidak terlihat namun paling konsekuensial dalam seluruh pipeline warna digital.

Apa Itu Pemetaan Gamut?

Gamut warna adalah rentang lengkap warna yang dapat direpresentasikan oleh perangkat, format, atau ruang warna tertentu. Setiap gamut memiliki batas — warna yang berada di dalamnya dapat direpresentasikan secara akurat; warna di luarnya tidak bisa.

Ketika Anda memindahkan warna dari gamut yang lebih besar ke gamut yang lebih kecil, beberapa warna mungkin berada di luar gamut target. Ini disebut warna out-of-gamut. Pemetaan gamut adalah proses memutuskan apa yang harus dilakukan dengan warna-warna tersebut.

Sebaliknya — bergerak dari gamut yang lebih kecil ke yang lebih besar — umumnya tanpa kerugian, karena semua warna sumber sesuai dalam tujuan. Tidak perlu pemetaan gamut.

Masalah Warna Out-of-Gamut

Pertimbangkan sian yang hidup: #00FFFF (#00FFFF) dalam sRGB. Warna ini berada di dekat tepi gamut sRGB. Dalam Display P3, ada sian yang lebih jenuh yang tersedia — warna yang sama sekali tidak dapat direpresentasikan oleh sRGB.

Bayangkan Anda merancang antarmuka dalam Display P3, menggunakan hijau hidup yang berada di luar sRGB: kira-kira color(display-p3 0.0 0.9 0.3) — hijau yang jauh lebih jenuh dari #00E84A (#00E84A) dalam sRGB. Ketika pengguna melihat ini pada monitor sRGB standar, browser harus membuat keputusan: warna sRGB apa yang harus mewakili hijau yang tidak dapat direproduksi ini?

Keputusan ini adalah pemetaan gamut, dan ada beberapa pendekatan dengan trade-off yang berbeda.

Clipping vs Kompresi Perseptual

Dua strategi utama untuk menangani warna out-of-gamut adalah clipping dan pemetaan perseptual (kompresi).

Clipping

Clipping adalah pendekatan paling sederhana: warna di luar gamut diubah ke titik terdekat pada batas gamut. Hasilnya:

• Warna dekat batas: perubahan yang terlihat minimal
• Warna jauh di luar gamut: kehilangan akurasi rona yang signifikan, warna yang mungkin tampak sangat berbeda dari aslinya

Masalah terbesar dengan clipping adalah pergeseran rona. Clipping juga menciptakan banding: berbagai warna sumber berbeda semua clip ke titik saturasi maksimum yang sama, menghasilkan langkah-langkah yang terlihat dalam gradien atau transisi warna halus.

Rendering Intent Perseptual (Kompresi)

Rendering perseptual mengambil pendekatan berbeda. Alih-alih hanya menyesuaikan warna out-of-gamut, ia menskalakan seluruh gamut secara proporsional.

Keunggulan kompresi perseptual: - Gradien halus tetap halus (tanpa banding) - Hubungan relatif antara warna dipertahankan - Umumnya lebih menyenangkan secara visual untuk fotografi dan gradien

Kerugian: - Warna dalam gamut juga digeser (sedikit dikurangi saturasi), meskipun tidak perlu - Warna mungkin terlihat sedikit kurang hidup dari aslinya, bahkan di mana mereka bisa direproduksi secara akurat

Rendering intent perseptual adalah default yang digunakan oleh profil warna ICC dalam alur kerja cetak dan fotografi profesional. Ini juga pendekatan yang digunakan oleh algoritma pemetaan gamut CSS.

Relatif Kolorimetrik (dengan Kompensasi Titik Hitam)

Pendekatan ketiga — relatif kolorimetrik — memetakan warna dalam gamut secara tepat dan meng-clip warna out-of-gamut, sambil menyesuaikan perbedaan titik putih antara sumber dan tujuan.

Rendering Intent Saturasi

Intent keempat yang digunakan terutama dalam grafik bisnis: memaksimalkan saturasi dengan mengorbankan akurasi rona. Digunakan untuk grafik batang dan lingkaran di mana warna yang hidup dan berbeda lebih penting.

Pemetaan Gamut CSS

CSS telah mendukung beberapa ruang warna sejak spesifikasi CSS Color Level 4, dan pemetaan gamut sekarang dibangun ke dalam algoritma resolusi warna CSS.

Menentukan Warna Wide-Gamut dalam CSS

/* sRGB (tradisional) */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3 (wide gamut) */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020 (ultra-wide) */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH (seragam perseptual, dapat menangani warna wide-gamut) */
color: oklch(0.75 0.25 150);  /* Hijau yang sangat hidup — mungkin di luar sRGB */

Cara CSS Menangani Overflow Gamut

Ketika nilai warna CSS menangani warna di luar gamut tampilan, browser menerapkan algoritma pemetaan gamut CSS yang didefinisikan dalam CSS Color Level 4. Algoritma ini menggunakan pencarian biner dalam ruang warna OKLCH untuk menemukan warna dalam gamut yang paling mirip menggunakan deltaE 2000 sebagai ukuran jarak.

Hasilnya adalah pendekatan pemetaan gamut yang memprioritaskan: 1. Mempertahankan kecerahan terlebih dahulu (pergeseran kecerahan paling dapat dipersepsi) 2. Mempertahankan rona kedua 3. Mengurangi chroma (saturasi) sampai warna sesuai dalam gamut target

Media Query color-gamut

CSS menyediakan media query untuk mendeteksi gamut apa yang didukung tampilan, memungkinkan Anda menyajikan warna berbeda untuk kemampuan berbeda:

/* Default: warna sRGB untuk semua tampilan */
.brand-color {
  color: #22C55E;
}

/* Ditingkatkan: warna P3 lebih hidup untuk tampilan yang mampu */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* Ultra-wide: vibrancy maksimum untuk tampilan Rec. 2020 */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

OKLCH dan Wide Gamut

OKLCH sangat cocok untuk pekerjaan desain wide-gamut karena nilai chroma tinggi secara alami menangani warna di luar sRGB. Nilai chroma di atas sekitar 0,37 dalam OKLCH akan berada di luar gamut sRGB untuk sebagian besar rona.

/* Dalam sRGB: hijau hidup */
color: oklch(0.75 0.22 145);

/* Di luar sRGB, dalam Display P3: hijau lebih hidup */
color: oklch(0.75 0.35 145);

/* Jauh di luar sRGB: browser akan memetakan gamut ke bawah */
color: oklch(0.75 0.5 145);

Gunakan Color Converter untuk mengonversi warna antar ruang warna dan melihat bagaimana nilai bergeser saat berpindah antara sRGB, Display P3, dan representasi OKLCH.

Solusi Praktis untuk Desainer

1. Desain dalam Gamut Target

Jika produk Anda menargetkan terutama pengguna web pada berbagai perangkat, desainlah dalam sRGB. Jika audiens Anda terutama pada perangkat Apple modern, pertimbangkan mendesain dalam Display P3 dan menyediakan fallback sRGB.

2. Ketahui Status Gamut Warna Hidup Anda

Banyak warna hidup yang "berhasil" dalam alat seperti Figma (yang menggunakan Display P3 pada perangkat keras Apple) mungkin terlihat berbeda ketika diekspor ke sRGB untuk penggunaan web. Selalu verifikasi warna akhir dengan nilai CSS yang Anda definisikan secara eksplisit.

3. Uji Transisi Gradien Lintas Gamut

Gradien antara dua warna wide-gamut dapat menghasilkan banding ketika ditampilkan pada monitor sRGB. Jika Anda melihat banding dalam gradien, coba: - Mengurangi chroma dari kedua titik akhir ke level yang aman untuk sRGB - Menambahkan stop gradien menengah untuk menyebarkan transisi - Merutekan gradien melalui OKLCH untuk jarak yang seragam secara perseptual

4. Gunakan Format Ekspor yang Benar

Untuk gambar yang mengandung warna wide-gamut: - JPEG: Sematkan profil warna (Display P3 atau Adobe RGB) - PNG: Sama — sematkan profil - WebP: Mendukung profil ICC; sematkan untuk warna yang akurat - SVG: Warna ditentukan dalam CSS — gunakan fungsi color() untuk wide gamut

5. Pendekatan Wide-Gamut yang Aman

Untuk desainer yang menginginkan warna yang lebih kaya tanpa kompleksitas mengelola beberapa target gamut, OKLCH dengan chroma sedang (0,18–0,25) sebagian besar tetap dalam sRGB sambil memberikan hasil yang sedikit lebih hidup.

/* Biru yang hidup tetapi sebagian besar aman untuk sRGB */
--color-primary: oklch(0.55 0.22 255);
--color-primary-hover: oklch(0.60 0.22 255);

Poin-Poin Utama

• Gamut warna adalah rentang warna yang dapat direpresentasikan oleh perangkat atau ruang warna. sRGB adalah web standar; Display P3 ~26% lebih besar dan tersedia pada perangkat Apple modern dan high-end.
• Warna out-of-gamut adalah warna yang berada di luar gamut target dan tidak dapat direproduksi secara akurat pada perangkat tersebut.
• Clipping mengubah warna out-of-gamut ke batas gamut — cepat tetapi dapat menyebabkan pergeseran rona dan banding. Kompresi perseptual menskalakan seluruh gamut secara proporsional — lebih lambat tetapi mempertahankan hubungan warna dan gradien.
• CSS Color Level 4 mendefinisikan algoritma pemetaan gamut yang menggunakan OKLCH dan deltaE 2000 untuk mengurangi chroma secara cerdas sambil mempertahankan kecerahan dan rona.
• Media query color-gamut memungkinkan Anda menyajikan warna color(display-p3) yang lebih hidup ke tampilan yang mampu sambil mempertahankan fallback sRGB.
• Gunakan Color Converter untuk memeriksa bagaimana warna mana pun diterjemahkan di seluruh sRGB, Display P3, dan OKLCH.