Paket Token Warna Merek — Skala HEX HSL OKLCH
Buat paket token warna merek dari satu warna dasar di browser. Langkah: pilih dasar (HEX atau color picker), lihat HEX/RGB/HSL/OKLCH, buat skala 50–950 dengan pasangan hitam/putih di setiap langkah, lalu salin variabel CSS atau JSON. Contoh biru #2563eb dimuat saat buka — tidak ada unggahan.
Cara kerja
Masukkan atau pilih satu warna dasar merek. Halaman menampilkan HEX, RGB, HSL, OKLCH, lalu membuat skala 11 langkah (50–950) dengan pratinjau UI. Setiap swatch menyarankan teks hitam/putih dan rasio kontras. Salin variabel CSS atau JSON jika ramp sudah pas — semua lokal.
Aturan yang perlu Anda tahu
Yang diharapkan dari skala, ruang warna, petunjuk kontras, dan privasi.
- Langkah 500 adalah dasar Anda. Di bawahnya mencerahkan dengan campuran ke putih; di atasnya menggelapkan ke hitam (campuran linear sRGB).
- Blok dasar mencantumkan HEX, RGB, HSL, OKLCH untuk warna yang sama. OKLCH memakai konversi sRGB → linear → OKLab agar selaras dengan sintaks CSS modern.
- Setiap swatch menyarankan teks hitam atau putih — mana yang kontrasnya lebih tinggi di latar itu. Rasio mengikuti luminance relatif WCAG; label AA hanya petunjuk.
- Privasi: pembuatan, pratinjau, dan salin clipboard semua lokal di tab ini — warna merek tidak diunggah.
Contoh
Muat contoh (#2563EB). Blok ruang warna menampilkan HEX, RGB, HSL, OKLCH untuk dasar; grid skala 50–950 dengan teks hitam/putih yang disarankan dan rasio kontras. Salin CSS menghasilkan :root { --color-50: …; … --color-950: …; } siap untuk stylesheet.
Cocok untuk
- Design system: mulai dari satu HEX merek dan kirim ramp 50–950 konsisten plus variabel CSS untuk komponen.
- Mode gelap: cek tint terang (50–300) untuk permukaan dan shade dalam (700–950) untuk teks di atas warna merek.
- Serah ke dev: salin token JSON atau properti CSS alih-alih mengetik ulang HEX dari tangkapan layar.
Frequently asked questions
Apakah warna saya keluar dari browser?
Tidak. Perhitungan dan ekspor berjalan di tab ini — warna Anda tidak dikirim ke server.
Bagaimana skala 50–950 dibuat?
Langkah 500 sama dengan warna dasar Anda. Langkah lebih terang (50–400) dicampur ke putih; lebih gelap (600–950) ke hitam. Pencampuran linear di sRGB agar rona tetap stabil.
Apa arti kolom kontras?
Setiap swatch membandingkan teks hitam dan putih di latar itu lalu memilih yang kontras WCAG-nya lebih tinggi. Label menampilkan rasio dan apakah teks normal mungkin memenuhi AA (4,5:1) atau AA teks besar (3:1).
Apa isi Salin CSS dan Salin JSON?
Salin CSS mengeluarkan properti kustom :root (--color-50 hingga --color-950). Salin JSON memberi skala yang sama plus ruang warna dasar sebagai data terstruktur untuk token desain.
Kapan pakai pemeriksa kontras?
Ini saran cepat hitam/putih per langkah. Untuk pasangan foreground/background kustom atau level WCAG tepat, buka pemeriksa kontras WCAG dan tempel HEX swatch mana pun.
Related tools
Pertanyaan atau masukan
Ada yang kurang jelas, rusak, atau hilang? Tulis pesan di bawah — kami membaca setiap catatan tentang alat ini.