Skema warna website — token CSS semantik
Buat skema warna website di browser Anda. Pilih HEX merek (contoh teal #0F6E8C), dapatkan netral bersama, action/hover/soft/focus, tautan netral, warna status tetap, pratinjau chrome, dan cek AA; lalu salin CSS :root atau JSON. Berbasis aturan — bukan AI cloud; tidak ada yang diunggah.
Netral + warna status bersama; tiap tema hanya menimpa token turunan merek. Maks. 4 tema.
| Token | Nilai |
|---|
| Token | Nilai | Peran |
|---|
Cara kerjanya
Isi satu sampai empat tema merek (id + HEX). Alat menjaga tangga netral bersama, menurunkan token aksi dari tiap merek, memetakan peran semantik (termasuk tautan netral dan status tetap), menggambar chrome terang, menjalankan cek AA, lalu membiarkan Anda menyalin variabel CSS atau JSON — semuanya lokal.
Aturan yang perlu Anda harapkan
Lapisan token, tautan vs aksi, status mandiri, petunjuk kontras, dan privasi.
- Primitif menyimpan netral mentah dan turunan merek. Semantik menamai tujuan (bg, surface, link, action…). Komponen sebaiknya hanya merujuk semantik.
- Merek → --action; hover menggelapkan ~22%; soft ≈ 10% alpha; focus-ring ≈ 40% alpha; --bg adalah netral yang sedikit diwarnai.
- Tautan dipetakan ke text / text-strong (netral). Jangan ikat --link bawaan ke --action.
- Danger / success / warning / info tetap tetap di semua tema agar merek tidak pernah mengganti semantik error.
- Privasi: pembuatan, pratinjau, dan salin ke clipboard berjalan di tab ini. Warna merek tidak diunggah.
Contoh
Muat contoh (id tema teal, #0F6E8C). Pratinjau menampilkan permukaan putih, sorotan lembut teal pada item aktif (tanpa bilah kiri), tautan isi netral, dan baris danger merah. Semantik memetakan --link ke warna teks (bukan --action). Salin CSS menghasilkan netral :root plus override html[data-theme="teal"].
Cocok untuk
- Chrome tools atau SaaS: kerangka terang yang mudah dibaca dengan aksen merek pada seleksi dan fokus, bukan di setiap tautan.
- Rebrand landing: ganti merek lewat html[data-theme] sambil mempertahankan kerangka netral dan warna status.
- Serah terima desain→dev: tempel variabel CSS :root, bukan daftar HEX dari screenshot.
Frequently asked questions
Apakah «cerdas» sama dengan AI generator warna?
Di sini «cerdas» berarti aturan deterministik: netral tetap, merek menurunkan action/hover/soft/focus, tautan tetap netral, dan warna status tidak ikut merek. Tanpa panggilan model dan tanpa unggahan — hitungan berjalan di tab ini.
Mengapa tautan tidak memakai warna merek?
Tautan bawaan memakai warna teks supaya halaman tidak jadi dinding hyperlink merek. Warna merek disimpan untuk aksi, seleksi, cincin fokus, dan fill soft ringan.
Mengapa warna status tidak berubah bersama tema?
Danger, success, warning, dan info tetap sama di semua tema. Merek amber tidak boleh jadi warna error — UI akan terlihat seperti peringatan terus-menerus.
Kapan sebaiknya pakai Buat skala warna merek?
Pakai Buat skala warna merek bila Anda butuh rampa 50–950 atau daftar HEX/HSL/OKLCH. Halaman ini untuk skema semantik situs terang lengkap (bg/surface/link/action/status) siap tempel.
Seberapa lengkap cek kontras mandiri?
Cek mandiri mencakup beberapa pasangan kunci pada tema aktif. Untuk pasangan bebas atau AAA, buka pemeriksa kontras WCAG dan tempel HEX token apa pun.
Related tools
Pertanyaan atau masukan
Ada yang kurang jelas, rusak, atau hilang? Tulis pesan di bawah — kami membaca setiap catatan tentang alat ini.