Color Token Generator
BaruGenerate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Runs entirely in your browser. Nothing is uploaded.
Mengapa setiap design system membutuhkan skala warna
Skala warna adalah tulang punggung bahasa visual yang konsisten. Tanpa skala, desainer dan developer membuat keputusan sesaat — 'biru yang sedikit lebih gelap untuk hover' atau 'versi sangat terang untuk latar kartu' — yang menghasilkan puluhan nilai hex nyaris identik tanpa hubungan sistematis. Lama-kelamaan, codebase dipenuhi nilai warna sekali pakai yang mustahil diperbarui secara serentak. Skala 11 tingkat yang dibangun dengan benar menyelesaikan masalah ini: tingkat terang (50–200) melayani permukaan bertint dan latar belakang, tingkat menengah (300–600) menangani elemen interaktif seperti tombol, tautan, dan focus ring, sedangkan tingkat gelap (700–950) dipakai untuk teks dan border berkontras tinggi.
Setiap keputusan visual selalu dapat dilacak kembali ke skala, dan mengganti warna brand cukup dengan memperbarui satu nilai dasar — bukan memburu ratusan kode hex di seluruh stylesheet. Inilah alasan skala warna menjadi fondasi setiap design system modern yang skalabel.
Konvensi skala warna Tailwind dan cara stop dihasilkan
Tailwind CSS mempopulerkan konvensi penamaan numerik 11 tingkat — 50, 100, 200 sampai 900, 950 — dan konvensi ini kini diadopsi sebagai standar oleh Radix UI, shadcn/ui, Material Design 3, serta mayoritas ekosistem pustaka komponen modern. Keunggulannya adalah prediktabilitas: developer yang pernah memakai salah satu sistem tersebut langsung tahu bahwa token level 500 adalah warna dasar menengah, level 100 adalah tint sangat terang, dan level 800 adalah shade gelap untuk latar terang.
Generator ini mengonversi warna hex Anda ke HSL (hue, saturation, lightness) lalu memetakan hue warna Anda ke setiap stop dengan kurva lightness perseptual yang telah ditentukan: 97% pada stop 50 hingga 8% pada stop 950. Saturasi sedikit dikurangi pada stop gelap agar bayangan tidak terlalu vivid, meniru perilaku visual palet bawaan Tailwind. Hasilnya adalah skala yang setiap stopnya terlihat seperti tint atau shade alami dari warna dasar Anda, dan secara visual kompatibel dengan palet bawaan Tailwind (blue, red, green, dan lainnya) — sehingga warna brand kustom Anda menyatu secara natural. Format ekspor Tailwind cocok persis dengan yang diharapkan theme.extend.colors di tailwind.config.js, dan ekspor CSS Variables sudah diformat untuk blok @theme Tailwind v4.
Memahami rasio kontras WCAG
Rasio kontras antara warna teks dan latarnya dihitung dari relative luminance masing-masing — ukuran seberapa terang sebuah warna tampak bagi mata manusia. Rumus WCAG adalah (L1 + 0.05) / (L2 + 0.05), di mana L1 adalah luminance warna yang lebih terang dan L2 yang lebih gelap. Hasilnya berkisar dari 1:1 (warna identik, tanpa kontras) hingga 21:1 (teks hitam di atas latar putih, kontras maksimum).
WCAG AA mensyaratkan 4.5:1 untuk teks normal dan 3:1 untuk teks besar (18pt ke atas). WCAG AAA mensyaratkan 7:1 untuk teks normal. Di alat ini, rasio kontras teks putih dan teks hitam pada setiap swatch dihitung dan ditampilkan sebagai badge W✓ dan B✓. Stop menengah (400–600) biasanya gagal di kedua ambang tersebut — memang dirancang untuk isian dekoratif dan aksen interaktif, bukan latar teks. Pasangan teks yang aksesibel berada di ujung skala: stop sangat terang untuk teks gelap, stop sangat gelap untuk teks putih. Memeriksa badge ini sebelum menetapkan warna teks mencegah pelanggaran aksesibilitas sebelum mencapai produksi — di banyak yurisdiksi, kepatuhan WCAG AA bahkan merupakan kewajiban hukum di bawah ADA dan EN 301 549.
Ruang warna: HSL, OKLCH, dan mengapa itu penting
Generator palet tradisional bekerja dalam HSL — Hue, Saturation, Lightness. HSL intuitif dan didukung luas, tetapi tidak seragam secara perseptual: langkah lightness numerik yang sama tampak sangat berbeda tergantung hue-nya. Perubahan dari 50% ke 60% lightness terasa lompatan besar untuk biru tetapi langkah kecil untuk kuning, karena mata manusia mempersepsikan warna secara berbeda di sepanjang spektrum.
OKLCH adalah ruang warna yang seragam secara perseptual: langkah lightness numerik yang sama terlihat sama terangnya bagi mata manusia, apa pun hue-nya. Tailwind CSS v4 beralih ke OKLCH secara internal karena alasan ini. Untuk generator palet, OKLCH menghasilkan skala yang setiap stopnya benar-benar tampak sebagai langkah merata menuju lebih terang atau lebih gelap — sangat berharga untuk desain palet aksesibel di mana langkah perseptual yang konsisten dibutuhkan untuk memprediksi rasio kontras secara andal di seluruh skala. Sebagai perbandingan, Adobe Color masih memakai pembangkitan berbasis HSL dan tidak menawarkan ekspor OKLCH.
Ekspor ke CSS, Tailwind, SCSS, dan JSON DTCG
Ekspor CSS Variables memakai pola penamaan --color-N di dalam :root { }. Ekspor Tailwind bisa langsung ditempel ke theme.extend.colors di tailwind.config.js — ganti nama 'color' dengan nama token Anda (misalnya 'primary' atau 'brand'). Ekspor SCSS memakai sintaks variabel $color-N yang kompatibel dengan Sass dan Less. Ekspor JSON mengikuti format token W3C DTCG dan kompatibel dengan Style Dictionary, Theo, Supernova, serta alat lain dalam ekosistem token pipeline modern.
Keempat format menghasilkan 11 nilai hex yang sama, sehingga berpindah format setelah palet dibuat tidak memerlukan perubahan apa pun. Klik swatch mana pun untuk menyalin nilai hex-nya langsung ke clipboard — praktis saat Anda hanya butuh satu shade spesifik untuk file desain Figma, inline style sekali pakai, atau referensi warna cepat tanpa menjalankan ekspor penuh. Semuanya berjalan di browser Anda — tidak ada data warna yang diunggah ke server, dan tidak perlu login.
Design token: konsep, model tiga tingkat, dan ekosistemnya
Design token dicetuskan oleh Jina Anne pada 2014 saat pengembangan Lightning Design System milik Salesforce — didefinisikan sebagai keputusan desain terkecil yang tak terbagi, disimpan sebagai data alih-alih nilai hard-coded. Sebelum ada token, nilai warna seperti #3b82f6 tersebar di ribuan file CSS; mengganti warna brand berarti find-and-replace di seluruh codebase — proses rawan kesalahan yang selalu menyisakan nilai usang di sudut-sudut produk. Token menyelesaikannya dengan memberi nama semantik pada nilai yang dapat diperbarui di satu tempat dan disebarkan ke mana-mana secara otomatis.
Industri telah menyepakati arsitektur token tiga tingkat. Tingkat pertama — token global atau primitif — menyimpan nilai mentah tanpa makna semantik: color-blue-500: #3b82f6. Tingkat kedua — token semantik — membuat alias berbasis konteks ke lapisan primitif: color-action: {color-blue-500}. Token semantik mengomunikasikan maksud, bukan tampilan. Tingkat ketiga — token komponen — memetakan token semantik ke elemen UI spesifik: button-background: {color-action}. Berkat indireksi ini, Anda dapat mengganti tema seluruh produk hanya dengan memperbarui pemetaan token semantik tanpa menyentuh kode komponen. Skala 11 tingkat yang dihasilkan alat ini adalah lapisan primitifnya.
Ekosistem pendukungnya sudah matang. Style Dictionary, di-open-source oleh Amazon pada 2017, mengubah token dari JSON netral-platform menjadi keluaran spesifik-platform: CSS custom properties, variabel SCSS, konstanta Swift untuk iOS, file XML Android, dan modul JavaScript/TypeScript. Spesifikasi W3C Design Token Community Group (DTCG), aktif sejak 2020, menstandarkan format file token dengan anotasi $type pada setiap token — misalnya "$type": "color" — sehingga Figma, Style Dictionary, Supernova, dan Theo dapat mengonsumsi JSON yang sama tanpa transformasi kustom. Figma Variables, diluncurkan pada 2023, membawa model tiga tingkat yang sama ke dalam alat desain, dan plugin-nya mengekspor JSON yang kompatibel dengan DTCG. Ekspor JSON dari generator ini mengikuti skema DTCG secara presisi.
CSS custom properties dan penamaan semantik di dunia nyata
CSS custom properties — juga disebut variabel CSS — adalah mekanisme native untuk mengimplementasikan design token secara runtime di browser. Token dideklarasikan sebagai --color-primary: #3b82f6; pada selektor :root dan dipakai di mana saja dengan background-color: var(--color-primary);. Berbeda dari variabel SCSS atau Less (yang diselesaikan saat kompilasi dan lenyap dari keluaran CSS), custom properties hidup di DOM dan dapat dibaca serta diubah JavaScript saat runtime. Custom properties mengikuti aturan cascade dan inheritance normal — dark mode adalah contoh klasiknya: deklarasikan --color-background: #ffffff; di :root lalu timpa dengan --color-background: #0f0f0f; di dalam @media (prefers-color-scheme: dark) atau kelas .dark. Setiap komponen yang memakai var(--color-background) otomatis merespons tanpa perubahan kode. Aturan @property (CSS Houdini) melangkah lebih jauh: dengan mendeklarasikan syntax: '<color>', browser memperlakukan properti sebagai nilai warna bertipe, membuka transisi dan animasi CSS pada token warna serta memungkinkan fungsi color-mix() dan oklch() bekerja langsung pada nilai token.
Pola penamaan token paling berbahaya adalah token nama-warna: --color-blue: #0000ff. Terasa jelas saat didefinisikan, tetapi menjadi kebohongan begitu brand berevolusi — jika warna aksi utama berubah dari biru ke teal, setiap komponen yang merujuk --color-blue menerima nilai yang salah. Solusinya adalah peran semantik: --color-primary, --color-secondary, --color-success, --color-warning, --color-error, --color-neutral. Design system produksi memperluasnya lagi dengan pola surface/content: token surface menggambarkan lapisan hierarki latar (--color-surface-default, --color-surface-raised untuk kartu dan dropdown, --color-surface-overlay untuk modal), sementara token content menggambarkan lapisan teks dan ikon di atasnya (--color-content-primary, --color-content-secondary, --color-content-disabled).
Sistem warna Radix UI adalah implementasi referensi yang paling banyak dipelajari untuk pendekatan ini. Radix mendefinisikan skala 12 langkah di mana setiap nomor langkah membawa peran semantik eksplisit: langkah 1–2 untuk latar halaman dan komponen, langkah 3–5 untuk latar elemen UI interaktif (idle, hover, active), langkah 6–8 untuk border dan pemisah, langkah 9–10 untuk isian interaktif solid (tombol, badge), dan langkah 11–12 untuk teks yang aksesibel. Kontrak langkah-ke-peran yang eksplisit ini membuat developer mana pun dapat menerapkan warna Radix dengan benar tanpa membaca dokumentasi. Skala 11 tingkat dari alat ini (50 hingga 950) memetakan erat ke model 12 langkah Radix — memberi Anda kejelasan semantik yang sama dengan kunci numerik yang kompatibel dengan Tailwind.
Frequently asked questions
Apa itu design token?
Design token adalah variabel bernama yang menyimpan keputusan desain visual — warna, spasi, tipografi, bayangan — dalam format yang dapat dibagikan lintas platform dan alat. Token warna seperti '--color-brand-500: #7c3aed' dapat dipakai identik di CSS web, Swift iOS, XML Android, dan React Native. Token adalah fondasi design system multi-platform yang skalabel dan kini distandarkan dalam format W3C Design Token Community Group (DTCG). Alat seperti Style Dictionary dan Supernova mengonsumsi JSON DTCG secara langsung untuk pipeline token otomatis.
Apa itu skala warna 11 tingkat?
Skala 11 tingkat mendefinisikan 11 shade warna bernomor 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, dan 950. Stop 50 nyaris putih (lightness 97%), stop 500 adalah warna dasar menengah, dan stop 950 nyaris hitam (lightness 8%). Tailwind CSS menetapkan konvensi ini dan kini menjadi standar design system termasuk Radix UI, shadcn/ui, Material Design 3, dan mayoritas pustaka komponen enterprise. Kebanyakan generator palet lain hanya menghasilkan 5 atau 10 stop, sehingga Anda kehilangan stop 50 dan 950 yang dibutuhkan untuk isian permukaan halus dan teks nyaris hitam.
Bagaimana stop skala dihasilkan?
Generator mengonversi warna hex Anda ke HSL (hue, saturation, lightness) dan memetakan hue warna Anda ke setiap stop dengan kurva lightness perseptual yang telah ditentukan: 97% pada stop 50 hingga 8% pada stop 950. Saturasi sedikit dikurangi pada stop gelap agar bayangan tidak terlalu vivid, meniru perilaku visual palet bawaan Tailwind. Hasilnya, setiap stop tampak seperti tint atau shade alami dari warna dasar Anda. Berbeda dari Coolors.co yang menghasilkan kombinasi 5 warna acak, alat ini membuat ramp sistematis dari satu warna dasar — keluaran yang benar-benar siap dijadikan design token.
Apa perbedaan ruang warna HSL dan OKLCH?
HSL (Hue, Saturation, Lightness) adalah model warna tradisional yang dipakai kebanyakan generator palet. Sederhana dan cepat, tetapi tidak seragam secara perseptual — perubahan lightness numerik yang sama di HSL tidak selalu terlihat sama terang bagi mata manusia. OKLCH adalah ruang warna lebih baru yang seragam secara perseptual: langkah lightness yang sama menghasilkan kecerahan terlihat yang sama di semua hue. Tailwind v4 kini memakai OKLCH secara internal demi palet yang lebih konsisten, terutama di antara hue yang sangat berbeda seperti kuning dan biru. Adobe Color masih memakai pembangkitan berbasis HSL dan tidak menawarkan ekspor OKLCH.
Apa arti badge W✓ / B✓ pada setiap swatch?
W✓ berarti teks putih lolos ambang kontras WCAG AA 4.5:1 pada swatch tersebut. B✓ berarti teks hitam lolos 4.5:1 pada swatch tersebut. Jika tidak ada badge sama sekali, teks putih maupun hitam gagal AA — swatch hanya cocok untuk keperluan dekoratif atau teks berukuran besar (yang hanya butuh 3:1). Memeriksa badge ini sebelum menetapkan warna teks mencegah pelanggaran aksesibilitas sampai ke produksi. Kebanyakan alat pesaing seperti Coolors.co dan Material Design Color Tool tidak menampilkan badge WCAG per swatch secara inline, sehingga Anda perlu contrast checker terpisah untuk memverifikasi setiap stop.
Apa itu WCAG dan mengapa kontras penting?
WCAG (Web Content Accessibility Guidelines) adalah standar internasional untuk aksesibilitas web yang diterbitkan W3C. Level AA mensyaratkan rasio kontras minimal 4.5:1 untuk teks normal (di bawah 18pt) dan 3:1 untuk teks besar (18pt ke atas atau 14pt tebal). Kontras yang kurang membuat teks tidak terbaca bagi pengguna dengan penglihatan rendah, defisiensi penglihatan warna, atau di lingkungan luar ruang yang terang. Di banyak yurisdiksi, kepatuhan WCAG AA juga merupakan kewajiban hukum untuk situs publik di bawah ADA dan EN 301 549.
Bagaimana cara memakai ekspor Tailwind di proyek saya?
Salin ekspor Tailwind dan tempel di dalam objek theme.extend.colors pada tailwind.config.js Anda, lalu ganti nama 'color' dengan nama token Anda (misalnya 'brand' atau 'primary'). Untuk Tailwind v4 dengan blok @theme berbasis CSS, gunakan ekspor CSS Variables dan tempel di dalam deklarasi @theme { } Anda dengan pola --color-brand-500: #hex; — Tailwind v4 membaca CSS custom properties langsung tanpa file config JavaScript. Alat ini bekerja di semua perangkat termasuk iPhone dan Android karena tidak ada yang perlu diinstal.
Bagaimana cara memakai ekspor CSS Variables?
Tempel ekspor CSS Variables di dalam blok :root { } pada stylesheet global Anda. Setiap stop menjadi custom property seperti --color-500: #7c3aed yang dapat dirujuk di mana saja dalam CSS dengan var(--color-500). Ganti nama 'color' dengan nama token Anda agar lebih jelas. Properti ini mengikuti cascade normal, sehingga Anda dapat menimpa stop tertentu di dalam selektor lingkup komponen atau media query dark mode. Tanpa build tool — ini CSS murni yang berjalan di semua browser modern.
Bisakah saya membuat palet untuk abu-abu netral?
Bisa. Masukkan hex apa pun yang mendekati #6b7280 untuk abu-abu bersih. Saturasi HSL yang rendah menghasilkan ramp netral dengan color cast minimal. Untuk netral hangat (abu-abu agak kecokelatan yang populer di desain UI modern — seperti palet stone atau sand milik Tailwind), masukkan hex dengan hue sekitar 25–40 derajat dan saturasi 6–12%. Untuk abu-abu dingin (mirip slate), gunakan hue di rentang 210–230 derajat.
Mengapa stop terang (50, 100) tidak putih murni?
Stop terang yang bertint jauh lebih praktis di UI nyata daripada putih murni — mereka menciptakan hierarki permukaan yang terlihat antara level latar, kartu, dan input tanpa terkesan kotor atau tidak sengaja. Putih murni (#ffffff) tidak punya identitas warna dan membuat lapisan permukaan mustahil dibedakan. Stop 50 dan 100 pada lightness 97% dan 93% cukup terang untuk terbaca sebagai 'hampir putih' namun tetap jelas terhubung dengan hue brand Anda.
Apa itu format W3C DTCG (Design Token Community Group)?
Format DTCG adalah standar W3C yang sedang berkembang untuk design token yang interoperabel, mendefinisikan bagaimana token distrukturkan dalam JSON sehingga alat seperti Figma, Style Dictionary, Theo, dan Supernova dapat mengonsumsi file token yang sama tanpa transformasi kustom. Ekspor JSON dari alat ini mengikuti bentuk DTCG dengan anotasi tipe, sehingga kompatibel dengan style-dictionary dan alat pipeline token lainnya.
Bagaimana memilih stop yang tepat untuk warna tombol, teks, dan latar?
Aturan umumnya: stop terang (50–200) untuk latar bertint, garis selang-seling baris tabel, dan isian permukaan halus. Stop menengah (300–500) untuk isian tombol, focus ring, dan aksen interaktif di latar terang. Stop gelap (600–800) untuk state hover pada tombol stop menengah dan teks di latar sangat terang. Stop sangat gelap (900–950) untuk teks dan border berkontras tinggi. Gunakan badge W✓/B✓ untuk memverifikasi kontras pada setiap penggunaan yang memuat teks.
Bagaimana perbandingannya dengan Coolors.co dan Adobe Color?
Coolors.co adalah alat penemuan palet — hebat untuk menghasilkan kombinasi 5 warna acak, tetapi tidak menghasilkan skala token terstruktur ataupun ekspor CSS. Adobe Color menghasilkan harmoni dari roda warna tetapi mewajibkan akun Adobe untuk mengekspor token, dan tidak mengeluarkan config Tailwind maupun JSON DTCG. Alat ini dibuat khusus untuk kasus penggunaan design token: masukkan satu hex dan dapatkan skala 11 tingkat yang sesuai standar, dengan empat format ekspor dan badge kontras WCAG per swatch — semuanya tanpa login atau mengunggah apa pun.
Related tools
Lihat semua perkakas
Baru Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Pemilih & Konverter Warna
Pilih warna dan konversikan di antara HEX, RGB, HSL, dan OKLCH.
Baru Pemeriksa Kontras Warna
Periksa rasio kontras WCAG AA/AAA antara warna teks dan latar belakang.
Baru Generator Gradien CSS
Buat gradien CSS linear, radial, dan konik dengan pratinjau langsung.
Baru Generator Box-Shadow CSS
Buat box-shadow CSS berlapis dengan preset dan pratinjau langsung. Salin CSS, nilai, atau gaya React secara instan.
Baru Generator Palet Warna
Hasilkan palet komplementer, analog, triadik, dan monokromatik.