Lompat ke konten
Aback Tools Logo

Palet Warna ke Variabel CSS

Konversi daftar warna hex menjadi deklarasi properti kustom CSS untuk design system atau stylesheet Anda. Konverter palet warna ke variabel CSS kami mendukung format keluaran HEX, RGB, HSL, dan per kanal dengan selektor dan prefiks variabel yang dapat dikonfigurasi. Tempel warna secara massal, hasilkan blok CSS, lalu salin atau unduh seketika - tanpa pendaftaran.

Color Palette to CSS Variables

Convert a list of hex colors into CSS custom property declarations. Enter color names and hex values, choose your output format and selector, then generate ready-to-paste CSS variables for your design system or stylesheet.

Hex value
Variable name (without --)

e.g. "brand" → --brand-color-primary

Mengapa menggunakan konverter palet warna ke variabel CSS kami?

  • Beberapa Format Keluaran: konverter palet warna ke variabel CSS kami mendukung empat format keluaran: HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)), dan "Semua Format" yang menghasilkan HEX, RGB, HSL, serta variabel kanal R/G/B individual dalam satu blok - sempurna untuk menyusun nilai rgba().
  • Generasi Variabel CSS Instan: masukkan nama warna dan nilai hex, pilih selektor dan format, lalu klik "Hasilkan" untuk mendapatkan deklarasi properti kustom CSS siap tempel seketika. Konverter kami juga mendukung tempel massal - masukkan beberapa warna sekaligus dalam format nama: #hex.
  • Palet Warna ke Variabel CSS Aman Online: semua konversi berjalan sepenuhnya di browser Anda. Nilai warna dan nama variabel Anda tidak pernah dikirim ke server mana pun saat Anda memakai konverter online kami - 100% privat, berfungsi sepenuhnya offline setelah dimuat.
  • Palet Warna ke Variabel CSS - Tanpa Instalasi: gunakan konverter gratis kami langsung di browser Anda tanpa unduhan, tanpa plugin, dan tanpa akun. Mendukung selektor khusus, prefiks variabel, dan masukan warna massal untuk alur kerja design system.

Kasus penggunaan umum palet warna ke variabel CSS

  • Generasi Token Design System: konversi palet warna merek Anda menjadi properti kustom CSS untuk design system. Gunakan konverter palet warna ke variabel CSS kami untuk menghasilkan semua token warna dengan satu klik dan menempelkannya ke stylesheet global atau berkas token desain Anda.
  • Ekstensi Tema Tailwind CSS: hasilkan variabel CSS dari warna merek Anda dan rujuk di konfigurasi Tailwind memakai var(--nama-warna). Konverter palet warna ke variabel CSS kami memudahkan menjembatani palet desain dengan sistem tema Tailwind.
  • Pergantian Tema Mode Gelap: tentukan palet warna mode terang dan gelap sebagai variabel CSS di bawah selektor berbeda (.light, .dark, atau [data-theme]). Gunakan konverter kami dengan opsi selektor khusus untuk menghasilkan kedua blok tema.
  • Dokumentasi Warna Merek: konversi palet warna hex dari panduan gaya merek menjadi variabel CSS untuk penyerahan ke pengembang. Konverter kami menghasilkan variabel bernama yang bersih dan sesuai konvensi penamaan tim desain.
  • Tematisasi Pustaka Komponen: hasilkan properti kustom CSS untuk token warna pustaka komponen. Gunakan opsi prefiks variabel di konverter kami untuk membuat namespace (misalnya, --brand-color-primary) dan menghindari konflik.
  • Komposisi RGBA dengan Variabel Kanal: gunakan keluaran "Semua Format" untuk menghasilkan variabel kanal R, G, dan B individual bersama warna lengkapnya. Ini memungkinkan Anda menyusun nilai rgba() dengan opasitas dinamis: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5).

Apa itu konverter palet warna ke variabel CSS?

Konverter palet warna ke variabel CSS adalah alat yang mengubah daftar nilai warna hex menjadi deklarasi properti kustom CSS - juga dikenal sebagai variabel CSS. Properti kustom CSS didefinisikan dengan awalan tanda hubung ganda (misalnya, --color-primary: #3b82f6 ) dan dapat dirujuk di mana saja dalam stylesheet Anda memakai var(--color-primary) . Konverter palet warna ke variabel CSS kami mendukung format keluaran HEX, RGB, HSL, dan gabungan, dengan selektor dan prefiks variabel yang dapat dikonfigurasi untuk alur kerja design system.

Cara kerja konverter palet warna ke variabel CSS kami

  1. Masukkan Warna Anda: tambahkan warna satu per satu memakai pemilih warna dan masukan hex, atau gunakan fitur tempel massal untuk memasukkan beberapa warna sekaligus dalam format nama: #hex. Setiap warna mendapat nama variabel yang menjadi nama properti kustom CSS.
  2. Konfigurasikan Opsi Keluaran: pilih format keluaran (HEX, RGB, HSL, atau semua format), selektor CSS (:root, .theme, atau khusus), dan prefiks variabel opsional. Semua konfigurasi berjalan lokal di browser Anda - nilai warna Anda tidak pernah meninggalkan perangkat.
  3. Salin atau Unduh CSS: klik "Hasilkan Variabel CSS" untuk menghasilkan blok CSS lengkap. Salin ke clipboard atau unduh sebagai berkas .css yang siap diimpor ke proyek Anda.

Apa yang dihasilkan konverter

  • Variabel HEX: nilai warna hex standar (misalnya, --color-primary: #3b82f6 ). Kompatibel dengan semua browser dan format paling ringkas untuk token warna.
  • Variabel RGB: notasi fungsi RGB (misalnya, --color-primary: rgb(59, 130, 246) ). Berguna saat Anda perlu menerapkan opasitas memakai rgba() pada warna tetap.
  • Variabel HSL: notasi fungsi HSL (misalnya, --color-primary: hsl(217, 91%, 60%) ). Disukai banyak design system karena hue, saturasi, dan kecerahan dapat disesuaikan secara independen.
  • Variabel Kanal (format "Semua"): nilai kanal R, G, dan B individual (misalnya, --color-primary-r: 59 ) yang memungkinkan Anda menyusun rgba() dengan opasitas dinamis: rgba(var(--color-primary-r), var(--color-primary-g), var(--color-primary-b), 0.5) .

Catatan penting tentang properti kustom CSS

Properti kustom CSS peka huruf besar-kecil - --Color-Primary dan --color-primary adalah variabel yang berbeda. Konverter palet warna ke variabel CSS kami secara otomatis mengubah nama variabel menjadi kebab-case huruf kecil untuk mengikuti konvensi penamaan CSS. Variabel yang didefinisikan di :root tersedia secara global. Variabel yang didefinisikan di selektor kelas (misalnya, .dark ) hanya berlaku ketika kelas tersebut ada pada elemen leluhur - berguna untuk pergantian tema.

Pertanyaan yang Sering Diajukan

Konverter palet warna ke variabel CSS mengubah nilai warna hex menjadi deklarasi properti kustom CSS. Masukkan nama warna dan nilai hex, pilih format keluaran dan selektor Anda, lalu dapatkan variabel CSS siap tempel. Semua konversi berjalan di browser Anda.

HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)), dan "Semua Format" yang menghasilkan ketiganya serta variabel kanal R, G, B individual untuk menyusun rgba() dengan opasitas dinamis.

Prefiks menambahkan namespace ke semua nama variabel. Misalnya, "brand" mengubah --color-primary menjadi --brand-color-primary, mencegah konflik penamaan saat menggabungkan beberapa design system.

Ya. Semua konversi berjalan sepenuhnya di browser Anda. Nilai warna hex dan nama variabel Anda tidak pernah dikirim ke server mana pun.

Hasilkan dua blok CSS - satu untuk :root (mode terang) dan satu untuk .dark atau [data-theme="dark"] memakai opsi selektor khusus. Alihkan kelas pada elemen html untuk berpindah tema.

Bisa. Klik "Tempel warna massal" dan masukkan beberapa warna sekaligus, satu per baris, dalam format "nama: #hex", "nama #hex", atau hanya "#hex".

Ya! 100% gratis tanpa pendaftaran, tanpa akun, dan tanpa batas penggunaan. Konversi palet warna sebanyak yang Anda butuh - sepenuhnya gratis, selamanya.