Token Warna Design System
Hasilkan set lengkap token warna design system dari 7 warna dasar — primary, secondary, accent, success, warning, error, dan info. Setiap warna mendapat 9 varian turunan otomatis (base, light, dark, hover, active, bg, border, text, dan muted) untuk mode terang dan gelap. Ekspor sebagai custom property CSS atau JSON. Semua pemrosesan berjalan di browser Anda — gratis, tanpa pendaftaran.
Generate a complete set of design system colour tokens from 7 base colours. Get light and dark mode variants with CSS variables and JSON export - perfect for design systems, component libraries, and theme files.
Main brand colour used for primary actions, active states, and key UI elements
Supporting brand colour for secondary actions and complementary elements
Highlight colour for emphasis, badges, and call-to-action elements
Positive feedback - confirmations, success messages, and valid states
Cautionary feedback - warnings, low-priority alerts, and pending states
Negative feedback - errors, destructive actions, and invalid states
Informational feedback - tooltips, helper text, and neutral notifications
Primary
Secondary
Accent
Success
Warning
Error
Info
:root {
/* Light mode colour tokens */
--color-primary-base: #3b82f6;
--color-primary-light: #e2ecfe;
--color-primary-dark: #0f213e;
--color-primary-hover: #326fd1;
--color-primary-active: #295bac;
--color-primary-bg: #f5f9ff;
--color-primary-border: #9dc1fb;
--color-primary-text: #000000;
--color-primary-muted: #336ecc;
--color-secondary-base: #8b5cf6;
--color-secondary-light: #eee7fe;
--color-secondary-dark: #23173e;
--color-secondary-hover: #764ed1;
--color-secondary-active: #6140ac;
--color-secondary-bg: #f9f7ff;
--color-secondary-border: #c5aefb;
--color-secondary-text: #000000;
--color-secondary-muted: #6133cc;
--color-accent-base: #f59e0b;
--color-accent-light: #fef0da;
--color-accent-dark: #3d2803;
--color-accent-hover: #d08609;
--color-accent-active: #ac6f08;
--color-accent-bg: #fffaf3;
--color-accent-border: #facf85;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #10b981;
--color-success-light: #dbf5ec;
--color-success-dark: #042e20;
--color-success-hover: #0e9d6e;
--color-success-active: #0b825a;
--color-success-bg: #f3fcf9;
--color-success-border: #88dcc0;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f97316;
--color-warning-light: #feeadc;
--color-warning-dark: #3e1d06;
--color-warning-hover: #d46213;
--color-warning-active: #ae510f;
--color-warning-bg: #fff8f3;
--color-warning-border: #fcb98b;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #ef4444;
--color-error-light: #fde3e3;
--color-error-dark: #3c1111;
--color-error-hover: #cb3a3a;
--color-error-active: #a73030;
--color-error-bg: #fef6f6;
--color-error-border: #f7a2a2;
--color-error-text: #000000;
--color-error-muted: #cc3333;
--color-info-base: #06b6d4;
--color-info-light: #daf4f9;
--color-info-dark: #022e35;
--color-info-hover: #059bb4;
--color-info-active: #047f94;
--color-info-bg: #f3fbfd;
--color-info-border: #83dbea;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
/* Dark mode colour tokens */
--color-mode: light;
}
[data-theme="dark"], .dark {
--color-primary-base: #0b3d8e;
--color-primary-light: #dae2ee;
--color-primary-dark: #030f24;
--color-primary-hover: #093479;
--color-primary-active: #082b63;
--color-primary-bg: #f3f5f9;
--color-primary-border: #859ec7;
--color-primary-text: #ffffff;
--color-primary-muted: #336ecc;
--color-secondary-base: #3d0eaa;
--color-secondary-light: #e2dbf2;
--color-secondary-dark: #0f042b;
--color-secondary-hover: #340c91;
--color-secondary-active: #2b0a77;
--color-secondary-bg: #f5f3fb;
--color-secondary-border: #9e87d5;
--color-secondary-text: #ffffff;
--color-secondary-muted: #6133cc;
--color-accent-base: #f5c470;
--color-accent-light: #fef6ea;
--color-accent-dark: #3d311c;
--color-accent-hover: #d0a75f;
--color-accent-active: #ac894e;
--color-accent-bg: #fffcf8;
--color-accent-border: #fae2b8;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #d1faec;
--color-success-light: #f8fefc;
--color-success-dark: #343f3b;
--color-success-hover: #b2d5c9;
--color-success-active: #92afa5;
--color-success-bg: #fdfffe;
--color-success-border: #e8fdf6;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f8b07c;
--color-warning-light: #fef3eb;
--color-warning-dark: #3e2c1f;
--color-warning-hover: #d39669;
--color-warning-active: #ae7b57;
--color-warning-bg: #fffbf8;
--color-warning-border: #fcd8be;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #891010;
--color-error-light: #eddbdb;
--color-error-dark: #220404;
--color-error-hover: #740e0e;
--color-error-active: #600b0b;
--color-error-bg: #f9f3f3;
--color-error-border: #c48888;
--color-error-text: #ffffff;
--color-error-muted: #cc3333;
--color-info-base: #4ddbf5;
--color-info-light: #e4fafe;
--color-info-dark: #13373d;
--color-info-hover: #41bad0;
--color-info-active: #3699ac;
--color-info-bg: #f6fdff;
--color-info-border: #a6edfa;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
--color-mode: dark;
}Pembuatan Token Lengkap
Hasilkan token desain siap produksi hanya dari warna dasar Anda.
- 7 Kategori Semantik: Primary, secondary, accent, success, warning, error, dan info — masing-masing dengan set lengkap varian turunan termasuk base, light, dark, hover, active, bg, border, text, dan muted.
- Mode Terang & Gelap: Setiap token warna secara otomatis disesuaikan untuk mode gelap menggunakan inversi kecerahan perseptual yang mempertahankan keterbacaan dan hierarki visual dalam tema gelap.
- Varian Cerdas: Varian hover, active, bg, border, dan teks-di-atas-warna dihasilkan otomatis menggunakan pencampuran sadar-luminansi — tanpa penyetelan manual untuk kontras ramah WCAG.
- Ekspor CSS + JSON: Salin custom property CSS siap pakai untuk selektor :root dan [data-theme="dark"], atau ekspor berkas JSON token lengkap untuk integrasi dengan alat desain dan pipeline build.
Kasus Penggunaan Umum
Dari design system hingga mode gelap — token warna menggerakkan UI yang konsisten.
- Pengembangan Design System: Hasilkan token warna yang konsisten untuk pustaka komponen atau design system Anda. Gunakan variabel CSS yang diekspor di semua komponen Anda sebagai satu-satunya sumber kebenaran.
- Penyerahan Desain: Konversikan token desain Figma atau Sketch menjadi variabel CSS dan berkas JSON siap untuk pengembang. Hilangkan kesalahan pemetaan warna manual antara desain dan pengembangan.
- Theming & White-Labeling: Buat beberapa set token untuk merek atau tema berbeda. Setiap set mendapat varian terang/gelap yang konsisten secara otomatis — sempurna untuk produk SaaS multi-tenant.
- Implementasi Mode Gelap: Berhenti menebak-nebak warna mode gelap. Masukkan palet terang Anda sekali dan dapatkan token mode gelap ramah WCAG seketika tanpa perhitungan on-the-fly.
- Migrasi Framework: Saat bermigrasi antar framework CSS atau menambahkan design system di tengah proyek, hasilkan token warna konsisten yang bekerja dengan Tailwind, CSS murni, atau CSS-in-JS.
- Situs E-commerce & Pemasaran: Pertahankan konsistensi merek di halaman landing, katalog produk, dan alur checkout dengan satu set token warna semantik yang dibagikan di semua halaman.
Tentang Token Warna Design System
Pahami cara kerja token warna dan cara menggunakannya dalam proyek Anda.
- Apa Itu Token Warna Design System?: Token warna design system adalah nama variabel semantik yang mengabstraksi nilai warna yang dikodekan keras menjadi pengenal bermakna yang dapat digunakan ulang. Alih-alih menggunakan kode hex langsung — sulit dirawat dan mustahil di-tema-kan — Anda menggunakan nama seperti --color-primary-base atau --color-error-hover. Ini memungkinkan penataan gaya yang konsisten antar komponen dan peralihan tema seketika.
- Cara Token Mode Terang Dihasilkan: Untuk setiap warna dasar, kami menurunkan 9 varian token: base (asli), light (85% campuran putih), dark (75% campuran hitam), hover (15% lebih gelap), active (30% lebih gelap), bg (95% campuran putih), border (50% campuran putih), text (hitam atau putih untuk kontras), dan muted (saturasi dikurangi). Varian text menggunakan luminansi WCAG untuk memastikan kontras yang terbaca terhadap warna dasar.
- Cara Token Mode Gelap Disesuaikan: Token mode gelap menggunakan algoritma inversi kecerahan perseptual. Warna dasar terang digeser ke ujung gelap spektrum sambil mempertahankan hubungan hue dan saturasi. Hasilnya mempertahankan hierarki visual palet asli sekaligus nyaman dilihat di latar gelap.
- Menggunakan Token yang Diekspor: Keluaran CSS mencakup blok :root dan [data-theme="dark"] dengan semua variabel token siap ditempel ke proyek Anda. Keluaran JSON menggunakan format pasangan kunci-nilai datar yang kompatibel dengan pola spesifikasi Design Token. Seret dan letakkan ke alat desain Anda atau impor melalui skrip build untuk alur kerja yang sepenuhnya otomatis.
Pertanyaan yang Sering Diajukan
Token warna adalah variabel semantik yang mewakili warna dalam sebuah design system. Alih-alih menggunakan kode hex mentah di mana-mana, Anda menggunakan nama seperti --color-primary atau --color-error-bg. Ini memudahkan pembaruan warna secara global, implementasi mode gelap, dan menjaga konsistensi antar komponen. Generator token warna online gratis kami membuat set lengkap dari 7 warna dasar.
Setiap warna dasar menghasilkan 9 varian: base (warna asli), light (dicampur putih), dark (dicampur hitam), hover (sedikit lebih gelap), active (lebih gelap untuk status ditekan), bg (sangat terang untuk latar), border (redup untuk garis tepi), text (hitam atau putih untuk kontras terbaca), dan muted (saturasi dikurangi). Varian mode terang dan gelap keduanya dihasilkan.
Adaptasi mode gelap menggunakan algoritma inversi perseptual yang memetakan nilai kecerahan mode terang ke padanan gelap melalui kurva yang mempertahankan hubungan kontras relatif. Saturasi sedikit dikurangi dalam mode gelap karena warna dengan saturasi tinggi bisa tidak nyaman dibaca di latar gelap.
Ya. Varian text setiap token menggunakan perhitungan luminansi WCAG untuk memilih teks hitam atau putih secara otomatis, memastikan rasio kontras minimal 7:1 terhadap warna dasar. Ini memenuhi persyaratan WCAG AAA untuk teks normal — tanpa penyetelan manual.
Dua format: custom property CSS (dengan blok :root dan [data-theme="dark"] terpisah, siap ditempel ke proyek Anda) dan JSON (format pasangan kunci-nilai datar yang kompatibel dengan pola spesifikasi Design Token dan alat seperti Style Dictionary).
Nama token mengikuti pola konsisten --color-{kategori}-{varian}. Anda dapat mengganti namanya setelah disalin dengan find-and-replace sederhana — atau memodifikasi keluaran CSS/JSON langsung di kodebasis Anda.
Ya, generator token warna design system ini 100% gratis tanpa pendaftaran, tanpa tingkatan premium, dan tanpa batas penggunaan. Semua pemrosesan berjalan di browser Anda.
7 kategori (primary, secondary, accent, success, warning, error, info) mencakup sebagian besar kebutuhan design system. Jika Anda memerlukan kategori tambahan seperti surface, background, text, atau border di tingkat atas, Anda dapat menjalankan alat ini beberapa kali dengan warna dasar berbeda dan menggabungkan hasilnya.