Panduan warna
Panduan singkat dan praktis tentang warna untuk layar: format, kontras, palet, mode gelap, dan CSS. Setiap angka dihitung, setiap contoh bisa disalin.
- Apa itu OKLCH: format warna yang akhirnya sesuai dengan mata AndaOKLCH menggambarkan warna dari seberapa terang warna itu terlihat, seberapa pekat warnanya, dan rona apa yang dimilikinya. Berbeda dengan HSL, nilai kecerahan yang sama benar-benar terlihat sama terangnya di semua rona, sehingga palet, warna hover, dan kontras yang aksesibel jadi bisa diprediksi.28 September 2026Dibaca 3 menit
- APCA vs WCAG 2: cek kontras mana yang bisa dipercayaRasio kontras WCAG 2 adalah yang diminta oleh hukum. APCA adalah model yang lebih baru dan jauh lebih akurat memprediksi keterbacaan, terutama untuk tema gelap dan warna yang pekat. Dengan mengecek keduanya, teks Anda patuh aturan sekaligus benar-benar mudah dibaca.28 September 2026Dibaca 3 menit
- Apa itu gamut warna: sRGB, Display P3, dan warna di luar gamutGamut adalah kumpulan warna yang bisa ditampilkan sebuah layar atau ruang warna. Web dibangun di atas sRGB, tetapi kini sebagian besar ponsel dan banyak laptop menampilkan Display P3, dengan merah, hijau, dan oranye yang jauh lebih mencolok.28 September 2026Dibaca 2 menit
- Format warna: HEX, RGB, HSL, OKLCH, dan lainnyaSatu warna bisa ditulis dengan belasan cara. Berikut arti setiap format, kapan memakainya, dan seperti apa warna yang sama dalam semua format itu.28 September 2026Dibaca 2 menit
- Kode warna hex: cara kerja #RRGGBBKode warna hex seperti #1e90ff terdiri dari tiga pasang digit heksadesimal: jumlah cahaya merah, hijau, dan biru, masing-masing dari 00 (tidak ada) sampai ff (penuh, 255). Tambahkan pasangan keempat untuk mengatur opasitas: 80 berarti sekitar 50%, ff berarti sepenuhnya pekat.28 September 2026Dibaca 5 menit
- Cara memilih palet warna untuk website atau aplikasiMulailah dari satu warna merek, buat skala 50 sampai 950 darinya, tambahkan abu-abu yang sedikit bernuansa dan empat warna semantik, lalu uji kontras dan buta warna untuk setiap pasangan teks. Pilih tingkat berdasarkan kecerahan OKLCH, bukan perkiraan mata: di atas latar putih, teks lolos WCAG AA begitu kecerahannya turun ke sekitar 0,55, apa pun ronanya.28 September 2026Dibaca 6 menit
- Warna mode gelap: cara memilih latar, teks, dan aksenPakai latar abu-abu gelap seperti #121212, bukan hitam murni, teks putih lembut seperti #e5e5e5, bukan putih murni, serta versi warna merek yang lebih terang dan kurang pekat. Periksa teks dengan APCA selain WCAG 2, karena WCAG 2 menilai kontras di latar gelap terlalu tinggi.28 September 2026Dibaca 6 menit
- Harmoni warna: komplementer, analog, triadik, dan lainnyaHarmoni warna memilih rona dengan sudut tetap pada roda warna: berjarak 180° untuk komplementer, 30° untuk analog, 120° untuk triadik. Putar rona di OKLCH, bukan HSL, agar semua warna tetap sama terangnya dan tidak ada satu rona pun yang tanpa sengaja paling menonjol.28 September 2026Dibaca 5 menit
- CSS color-mix() dan warna relatif: tint, hover, dan transparansicolor-mix() mencampur dua warna di ruang warna pilihan Anda, sedangkan sintaks warna relatif memungkinkan Anda mengubah satu kanal dari warna yang sudah ada, misalnya oklch(from var(--brand) calc(l - 0.1) c h). Keduanya berjalan di browser, bekerja dengan variabel CSS, dan menggantikan sebagian besar fungsi warna Sass. Campur di oklab untuk tint dan hover, di srgb untuk transparansi.28 September 2026Dibaca 6 menit
- Palet ramah buta warna: cara memeriksa dan memperbaiki warna AndaPalet ramah buta warna menjaga setiap pasangan warna tetap bisa dibedakan pada protanopia, deuteranopia, tritanopia, dan skala abu-abu. Solusi paling andal bukan rona khusus, melainkan selisih kecerahan: warna yang berjarak sekitar 0,2 pada kecerahan OKLCH tetap berbeda di setiap simulasi yang kami jalankan. Padukan dengan ikon atau label, karena warna saja selalu gagal bagi sebagian orang.28 September 2026Dibaca 6 menit
- Warna Tailwind CSS: palet OKLCH v4, warna kustom, dan shadeTailwind CSS v4 menyediakan 26 skala warna, masing-masing berisi 11 shade dari 50 sampai 950, total 286 warna yang didefinisikan dalam OKLCH sebagai variabel CSS seperti --color-blue-500. Warna sendiri ditambahkan dengan @theme { --color-brand-500: oklch(...) }. Nomor shade yang sama tidak berarti kecerahan yang sama: blue-600 adalah biru paling terang yang lolos 4,5:1 di atas putih, sedangkan yellow butuh 700.28 September 2026Dibaca 6 menit