Referensi Warna Sistem iOS

• Referensi Lengkap Warna Sistem iOS 18: jelajahi semua warna sistem iOS seperti yang didefinisikan dalam Human Interface Guidelines Apple - 13 warna sistem semantik (biru, merah, hijau, oranye, kuning, merah muda, ungu, indigo, teal, mint, cyan, cokelat, dan abu-abu dengan 6 varian abu-abu), 5 tingkat penekanan teks/label, 4 opasitas isian, 6 varian latar belakang, 2 gaya pemisah, serta warna tautan/tinta.
• Nilai Mode Terang & Gelap Berdampingan: setiap warna mencakup nilai HEX dan RGB untuk mode terang maupun gelap. Pengalih terang/gelap memungkinkan Anda mengganti tampilan seketika untuk melihat bagaimana warna beradaptasi antar tampilan. Contoh kecil menunjukkan kedua varian sekilas untuk memudahkan perbandingan.
• Pencarian & Penyaringan per Kategori: temukan warna sistem iOS mana pun dengan cepat melalui pencarian nama, nilai HEX, atau kategori. Saring berdasarkan 6 kategori - Warna Sistem, Teks & Label, Warna Isian, Warna Latar Belakang, Warna Pemisah, serta Warna Tautan & Tinta. Salin HEX atau RGB dengan sekali klik.
• Salin HEX & RGB Sekali Klik: setiap kartu warna menyertakan tombol Salin untuk nilai HEX dan RGB. Nilai yang disalin sesuai dengan mode tema yang sedang dipilih (terang atau gelap), sehingga Anda selalu mendapat nilai yang benar untuk konteks desain Anda.

Warna sistem iOS adalah sekumpulan warna semantik yang telah ditentukan dalam Human Interface Guidelines (HIG) Apple. Warna ini menyediakan bahasa visual yang konsisten di semua aplikasi iOS dan dirancang agar bekerja mulus baik di mode terang maupun gelap. Alih-alih memakai nilai warna sembarang untuk elemen UI, Apple menyarankan penggunaan warna sistem - warna ini otomatis menyesuaikan dengan pengaturan aksesibilitas pengguna (seperti Tingkatkan Kontras dan Kurangi Transparansi) serta memastikan tampilan dan nuansa yang native.

Warna sistem iOS diorganisasi ke dalam beberapa kelompok fungsional, masing-masing melayani tujuan tertentu dalam hierarki UI:

• Warna Sistem - 13 warna semantik (Merah, Oranye, Kuning, Hijau, Mint, Teal, Cyan, Biru, Indigo, Ungu, Merah Muda, Cokelat, Abu-abu) plus 6 varian skala abu-abu. Warna ini dipakai untuk makna semantik tertentu - merah untuk tindakan destruktif, hijau untuk keberhasilan, biru untuk tindakan utama.
• Warna Label - warna label primer, sekunder, tersier, dan kuaterner yang membentuk hierarki teks yang jelas. Label primer hampir hitam/putih untuk judul, sedangkan tersier dan kuaterner makin transparan untuk konten berpenekanan lebih rendah.
• Warna Isian - empat warna isian dengan opasitas berbeda (dari isian sistem hingga isian kuaterner) untuk ketebalan elemen UI yang berbeda. Isian lebih terang dipakai untuk elemen tipis seperti jalur penggeser; isian lebih padat untuk area latar belakang besar.
• Warna Latar Belakang - warna latar sistem dan terkelompok dengan varian primer, sekunder, dan tersier. Warna ini menciptakan hierarki visual melalui kedalaman permukaan.

Setiap warna sistem iOS memiliki nilai berbeda untuk mode terang dan gelap. Sistem otomatis beralih di antara nilai-nilai tersebut berdasarkan pengaturan tampilan pengguna atau lingkungan cahaya saat ini. Misalnya, Label berwarna hitam murni (#000000) di mode terang untuk kontras maksimal pada latar putih, dan putih murni (#ffffff) di mode gelap untuk keterbacaan optimal pada permukaan gelap. Beberapa warna, seperti Abu-abu Sistem (#8e8e93), tetap sama di kedua mode demi konsistensi. Alat referensi kami memungkinkan Anda beralih antara mode terang dan gelap untuk melihat bagaimana setiap warna beradaptasi.

Apple merancang semua warna sistem HIG agar memenuhi persyaratan kontras WCAG 2.1 AA bila digunakan sesuai panduan. Sistem opasitas label empat tingkat (primer → kuaterner) memastikan teks yang lebih penting memiliki kontras lebih tinggi. Warna sistem juga bekerja dengan fitur aksesibilitas seperti Tingkatkan Kontras (yang menyesuaikan nilai warna sistem agar pembedaannya makin besar) dan Kurangi Transparansi (yang memengaruhi cara warna isian dan pemisah dirender). Saat membangun aplikasi iOS, utamakan warna sistem dengan makna semantik (seperti UIColor.systemRed untuk tindakan destruktif) daripada nilai warna sembarang - warna sistem memastikan aplikasi Anda beradaptasi dengan benar terhadap semua pengaturan aksesibilitas dan pembaruan iOS di masa depan.