Pembuat Token Desain CSS

Buat palet warna OKLCH lengkap 50-950 ditambah properti kustom CSS semantik — primer, permukaan, batas, cincin, dan lainnya, dengan varian mode gelap opsional — dari satu warna hex merek Anda.

Input

Warna Merek

Pilih warna, atau ketik nilai HEX secara langsung.

Nama Token

Digunakan sebagai kunci palet, misalnya --warna-merek-500.

Format

Keluaran modern oklch() nilai; Hex menampilkan #rrggbb klasik.

Sertakan varian mode gelap

Menambahkan blok kedua dengan penggantian token semantik ramah gelap.

Pemilih gelap

Chroma

Skala saturasi palet. 100 menjaga chroma warna merek Anda.

Output

Token CSS

Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-design-token-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "brandColor": "#464aff",
    "tokenName": "brand",
    "colorFormat": "oklch",
    "includeDarkMode": "true",
    "darkSelector": ".dark",
    "chromaBoost": "100"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `css-design-token-generator` tool (CSS Design Token Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/css-design-token-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Pembuat Token Desain CSS — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCP	Mulai dari 5 kredit
Butuh kredit lebih?	Lihat harga

Juga tersedia melalui

Integrasi Ekstensi browser Ekstensi VS Code

Panduan

Apa itu token desain?

Token desain adalah nilai bernama, dapat digunakan kembali — warna, spasi, radii, ukuran tipe — yang membentuk sistem desain. Alih-alih hard-coding #3b3ff0 di dua puluh komponen yang berbeda, Anda menentukan --warna-primer sekali dan mereferensikannya di mana-mana. Ubah nilai token dan setiap komponen yang menggunakannya akan diperbarui bersama-sama. Token adalah yang memungkinkan sistem desain tetap konsisten saat berkembang, dan yang memungkinkan saklar mode gelap tunggal untuk melukis ulang seluruh produk.

Mengapa properti kustom CSS adalah format target umum

Token desain dapat diekspor ke banyak format — JSON, objek JS/TS, variabel Sass — tetapi properti kustom CSS (--token-saya: nilai;) memiliki keunggulan yang berbeda: properti ini asli untuk browser, diselesaikan pada waktu render, dan secara otomatis berjenjang dan ditimpa oleh selector. Itulah yang membuat theming mungkin dengan CSS biasa: tentukan token Anda sekali di bawah :root, kemudian timpa sebagian darinya di bawah .gelap (atau @media (prefers-color-scheme: gelap)), dan setiap komponen yang menggunakan var(--warna-primer) akan dilukis ulang tanpa JavaScript atau rebuild apa pun. Alat ini menargetkan properti kustom CSS secara khusus karena perilaku cascade-dan-override adalah persis apa yang dibutuhkan sistem warna.

Bagaimana alat ini membangun palet

Dimulai dari satu warna hex merek, alat ini melakukan interpolasi melalui OKLCH — ruang warna yang seragam secara perceptual — untuk menghasilkan skala 11 langkah (50 hingga 950), bentuk yang sama digunakan oleh palet default Tailwind. Karena langkah lightness OKLCH adalah perceptual yang genap, setiap langkah terlihat seperti lompatan kecerahan yang konsisten, bukan lompatan tidak merata yang Anda dapatkan dari interpolasi RGB atau HSL mentah. Setiap langkah yang dihasilkan juga dijepit kembali ke gamut sRGB, sehingga selalu render sebagai warna yang valid dan dapat ditampilkan bahkan untuk warna merek yang sangat jenuh.

Di atas palet mentah, alat ini memetakan set tetap peran semantik — --warna-primer, --warna-permukaan, --warna-batas, --warna-cincin, dan lainnya — ke langkah tertentu (misalnya primer → 600 dalam mode terang, 400 dalam mode gelap). Nama-nama semantik itu adalah yang sebenarnya harus direferensikan oleh komponen Anda; skala mentah 50–950 terutama ada untuk mendukungnya.

Cara menggunakan alat ini

Pilih Warna Merek (atau ketik nilai hex secara langsung).
Tetapkan Nama Token — ini menjadi kunci palet, misalnya --warna-merek-500. Gunakan sesuatu yang spesifik untuk merek atau produk Anda, seperti acme atau biru-nila.
Pilih Format: oklch() untuk nilai modern dan siap lebar-gamut, atau hex biasa untuk kompatibilitas maksimal dengan alat yang lebih lama.
Biarkan Sertakan varian mode gelap aktif untuk mendapatkan blok kedua dari penggantian semantik, dan pilih Pemilih gelap yang cocok dengan framework Anda — kelas .gelap (Tailwind, shadcn), atribut [data-tema="gelap"], atau kueri @media (prefers-color-scheme: gelap) untuk theming level sistem operasi tanpa toggle JavaScript apa pun.
Sesuaikan Chroma untuk menskalakan saturasi palet naik atau turun — 100 menjaga intensitas asli warna merek, nilai yang lebih rendah menghasilkan palet yang lebih lembut dan desaturasi.
Salin CSS yang dihasilkan, atau unduh sebagai file .css, dan letakkan di stylesheet Anda.

Output diperbarui secara instan saat Anda menyesuaikan kontrol apa pun.

FAQ

Mengapa palet mencakup kedua langkah mentah (--warna-merek-600) dan token semantik (--warna-primer)? Skala mentah adalah sumber kebenaran; token semantik adalah lapisan alias di atasnya. Komponen harus mereferensikan nama-nama semantik — --warna-primer, --warna-batas — bukan langkah mentah secara langsung, sehingga mendesain ulang palet (atau menukar warna merek) tidak pernah memerlukan menyentuh kode komponen.

Apa yang sebenarnya dilakukan slider Chroma? Ini menskalakan saturasi (chroma) dari setiap langkah yang dihasilkan relatif terhadap chroma warna merek Anda sendiri, sambil menjepitnya kembali ke gamut sRGB. 100 mereproduksi saturasi warna merek sedekat mungkin yang memungkinkan gamut setiap langkah lightness; nilai di bawah 100 menghasilkan palet yang lebih tenang dan lebih kusam; nilai di atas 100 mendorong menuju warna paling jenuh yang dapat ditampilkan pada brightness itu.

Pemilih mode gelap mana yang harus saya pilih? Gunakan .gelap jika framework Anda (Tailwind, shadcn/ui, dan sebagian besar pustaka komponen) mengalihkan kelas pada <html> atau <body>. Gunakan [data-tema="gelap"] jika Anda mengalihkan atribut data sebagai gantinya. Gunakan kueri @media jika Anda ingin halaman secara otomatis mengikuti tema sistem operasi, tanpa toggle apa pun.

Bisakah saya menggunakan nilai oklch() jika saya perlu mendukung browser yang lebih lama? oklch() didukung di semua browser utama saat ini, tetapi jika Anda perlu mendukung browser yang lebih lama secara signifikan, alihkan Format ke Hex — palet yang sama dan struktur semantik dihasilkan dengan cara apa pun, hanya dengan nilai #rrggbb alih-alih oklch().

Privasi

Semuanya terjadi di browser Anda. Tidak ada warna, nama token, atau pengaturan yang Anda masukkan pernah dikirim ke server — CSS dihasilkan dan diperbarui secara lokal saat Anda mengetik.

cssdesign tokenscustom propertiescss variablesoklchcolor palettedark mode

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan