Warna digital hadir dalam selusin format berbeda yang dioptimalkan untuk berbagai tujuan — HEX untuk web, RGB untuk tampilan, CMYK untuk pencetakan, HSL untuk penyesuaian intuitif manusia, OKLab dan OKLCH untuk skala yang seragam, dan Display P3 untuk monitor wide-gamut. Alat warna yang baik mengonversi warna-warna tersebut secara akurat, menghasilkan palet harmonis yang menghormati teori warna yang mendasarinya, dan memverifikasi kepatuhan aksesibilitas sebelum warna dikirimkan. Bagian di bawah ini membahas mengapa berbagai format warna ada, bagaimana harmoni warna bekerja secara matematis, dan mengapa kepatuhan kontras WCAG dan APCA menjadi hal yang tidak dapat dinegosiasikan untuk desain digital profesional.
Mengapa Ada Banyak Format Warna
Setiap format warna memecahkan masalah tertentu yang tidak dapat ditangani dengan baik oleh format warna lain. RGB adalah format asli tampilan digital — setiap layar menampilkan warna dengan mencampurkan subpiksel merah, hijau, dan biru, sehingga RGB memiliki pemetaan perangkat keras langsung. Kelemahannya adalah nilai RGB tidak sesuai dengan cara manusia memandang warna: (255, 128, 0) dan (255, 0, 128) keduanya "intens" namun secara visual sangat berbeda, dan tidak ada cara intuitif untuk menyesuaikan "membuat warna ini lebih gelap" di RGB tanpa mengetahui perhitungan salurannya. HEX hanyalah RGB dalam notasi heksadesimal kompak, ada di mana-mana dalam CSS dan desain web karena cocok dengan 6 karakter. HSL mengatasi kesenjangan persepsi manusia: Hue adalah sudut warna yang Anda arahkan pada roda warna, Saturation mengontrol kecerahan, dan Lightness mengontrol kecerahan. Sebagian besar pemilih warna alat desain menggunakan HSL secara default karena penyesuaian ketiga sumbu tersebut terasa alami. HSV/HSB adalah sepupu dekat HSL dengan definisi kecerahan berbeda. CMYK adalah format cetak — printer menggunakan tinta cyan, magenta, kuning, dan hitam, bukan tinta terang, dan matematika pencampuran subtraktif pada dasarnya berbeda. OKLab dan OKLCH adalah ruang warna persepsi modern di mana langkah numerik yang sama menghasilkan perbedaan visual yang sama. Hal ini menjadikannya ideal untuk menghasilkan skala warna yang mudah diakses dan terlihat berjarak sama, bukannya menggumpal di tengah seperti yang dilakukan skala HSL. Ruang gamut lebar seperti Display P3 memberikan ~25% lebih kaya warna hijau dan merah untuk tampilan seluler dan desktop modern. Alat warna yang bagus mengkonversi semua warna secara akurat dan memahami perbedaan gamut.
Bagaimana Harmoni Warna Bekerja
Harmoni warna adalah kumpulan warna yang terlihat serasi, dan teori di baliknya ternyata bersifat matematis. Harmoni dihasilkan dengan memutar sudut rona dalam ruang warna sambil menjaga saturasi dan kecerahan tetap konstan. Tujuh harmoni standar: Komplementer (+180°, berlawanan pada roda warna) menghasilkan kontras tertinggi dan digunakan untuk aksen warna dan ajakan bertindak. Analog (±30°, berdekatan pada kemudi) menghasilkan tampilan halus dan terpadu yang umum dalam fotografi alam dan antarmuka yang menenangkan. Triadic (+120°, +240°) menghasilkan tiga warna dengan jarak yang sama, cerah namun seimbang. Split-Complementary (+150°, +210°) memperhalus pasangan komplementer dengan tetangga yang berdekatan, lebih mudah untuk dikerjakan daripada komplementer murni. Tetradik (+60°, +180°, +240°) menghasilkan empat warna dalam susunan persegi panjang. Kotak (+90°, +180°, +270°) menghasilkan empat warna dengan jarak yang sama — variasi maksimum tetapi paling sulit untuk diseimbangkan. Monokromatik menjaga rona tetap konstan dan memvariasikan kecerahan atau saturasi untuk skema satu warna. Perhitungannya adalah rotasi sederhana, namun hasil visualnya sangat bergantung pada saturasi dan kecerahan warna awal. Warna awal yang sangat jenuh menghasilkan harmoni yang dramatis; warna awal desaturasi menghasilkan warna yang halus. Alat ini menghasilkan ketujuh harmoni untuk warna masukan apa pun dan menampilkannya dalam konteks dengan konfigurasi CSS, Tailwind, SCSS, SwiftUI, Jetpack Compose, dan Design Tokens yang siap diekspor.
Kepatuhan Kontras WCAG dan APCA
Persyaratan kontras Pedoman Aksesibilitas Konten Web (WCAG) telah beralih dari praktik terbaik opsional ke persyaratan hukum di banyak wilayah hukum, dan persyaratan tersebut secara langsung memengaruhi pilihan desain yang seharusnya dibuat murni secara estetika. WCAG 2.1 menetapkan rasio kontras minimum antara teks dan latar belakangnya, diukur sebagai rasio pencahayaan relatif. Level AA (target kepatuhan umum) memerlukan 4,5:1 untuk teks isi normal dan 3:1 untuk teks besar (18pt+ tebal atau 24pt+). Level AAA lebih ketat pada 7:1 untuk normal dan 4,5:1 untuk teks besar. Standar WCAG 3 yang baru muncul memperkenalkan APCA (Advanced Perceptual Contrast Algorithm), yang memperhitungkan frekuensi spasial, bobot font, polaritas latar belakang, dan adaptasi cahaya untuk menghasilkan skor kontras (Lc) yang lebih akurat secara fisiologis. Memenuhi rasio ini bukanlah suatu pilihan untuk penerapan pemerintah dan komersial yang tercakup dalam Pasal 508 dan ADA. Tab Kontras & A11y di alat ini menampilkan skor WCAG 2.1 dan APCA, memberikan saran perbaikan yang dapat diakses dengan sekali klik, dan menyimulasikan tampilan kombinasi di semua bentuk utama defisiensi penglihatan warna.