Generator Warna ke Variabel CSS Ubah sekumpulan warna menjadi properti kustom CSS (variabel).

🎨

Warna ke Variabel CSS

Ubah sekumpulan warna menjadi properti kustom CSS (variabel).

Tambahkan Warna

Tambahkan warna dengan nama variabel kustom menggunakan pemilih warna.

Pilih Format

Pilih format output: HEX, RGB, atau HSL.

Salin CSS

Salin blok properti kustom CSS :root yang dihasilkan.

Loading tool...

What Is Warna ke Variabel CSS?

Generator Warna ke Variabel CSS mengubah koleksi warna bernama menjadi properti kustom CSS (:root variables) yang siap ditempelkan ke stylesheet Anda. Anda dapat menambahkan sejumlah warna, memberi nama variabel semantik untuk setiap warna (seperti "primer", "sekunder", "aksen"), dan memilih format output: HEX untuk kesederhanaan, RGB dipisahkan koma untuk fleksibilitas rgba(), atau HSL dipisahkan koma untuk manipulasi runtime yang mudah. Properti kustom CSS adalah fondasi sistem tema modern, memungkinkan mode gelap, tema merek, dan pembaruan warna dinamis. Alat ini menghasilkan blok boilerplate :root { --variabel: nilai; } sehingga Anda dapat dengan cepat menyiapkan sistem warna. Pratinjau langsung menampilkan semua warna Anda bersama sebagai strip palet.

Why Use Warna ke Variabel CSS?

Tambahkan warna tak terbatas dengan nama variabel kustom
Tiga format output: HEX, RGB, atau HSL
Menghasilkan blok CSS :root { } yang bersih
Pratinjau pita palet secara langsung
Dasar untuk sistem tema CSS

Common Use Cases

Pembuatan Tema CSS

Atur properti kustom CSS untuk pembuatan tema mode terang/gelap.

Token Desain

Konversi token sistem desain ke variabel CSS.

Warna Merek

Buat set variabel CSS yang dapat digunakan kembali untuk warna merek.

Perpustakaan Komponen

Tentukan variabel warna yang dapat disesuaikan untuk perpustakaan komponen CSS.

Technical Guide

Properti kustom CSS (var(--nama)) didefinisikan dalam selector :root untuk cakupan global. Format HEX menyimpan nilai warna lengkap: --primer: #3B82F6. Format RGB dipisahkan koma menyimpan saluran: --primer: 59, 130, 246, yang dapat digunakan sebagai rgb(var(--primer)) atau rgba(var(--primer), 0,5) untuk opasitas fleksibel. Format HSL menyimpan: --primer: 217, 91%, 60%, dapat digunakan sebagai hsl(var(--primer)). Format RGB dan HSL lebih fleksibel karena memungkinkan menambahkan opasitas pada titik penggunaan tanpa harus mendefinisikan ulang variabel. Properti kustom CSS diwariskan oleh semua elemen anak dan dapat diberlakukan kembali dalam media query atau selector kelas untuk switching tema. Mereka didukung di semua browser modern dan mengalir seperti properti CSS biasa.

Tips & Best Practices

1
Gunakan nama semantik seperti --primer, --sekunder bukan --biru, --merah untuk fleksibilitas
2
Format RGB paling fleksibel: rgba(var(--primer), 0.5) memberikan kontrol opasitas
3
Format HSL memungkinkan Anda menghasilkan variasi: hsl(var(--primer-h), var(--primer-s), 90%)
4
Timpa variabel dalam kueri media untuk mode gelap: @media (prefers-color-scheme: dark) { :root { ... } }
5
Jaga jumlah variabel Anda tetap terkelola - sebagian besar sistem memerlukan 5-10 variabel warna

Related Tools

Konverter HEX ke RGB

Ubah kode warna HEX menjadi nilai RGB secara instan dengan pratinjau langsung.

🎨 Color Tools

Konverter HEX ke HSL

Ubah kode warna HEX menjadi nilai HSL (Hue, Satuasi, Kecerahan).

🎨 Color Tools

Pemilih Warna

Pemilih warna interaktif dengan output HEX, RGB, HSL, dan CMYK.

🎨 Color Tools

Pencari Warna Tailwind

Temukan kelas warna CSS Tailwind yang paling dekat untuk kode HEX apa pun.

🎨 Color Tools

Pembuat Filter CSS

Terapkan efek filter CSS seperti blur, kecerahan, kontras, dan lainnya dengan kontrol visual.

🎨 CSS & Design

Frequently Asked Questions

Q Format mana yang harus saya pilih?

HEX untuk kesederhanaan dan keterbacaan. RGB jika Anda perlu kontrol opasitas melalui rgba(var(...), alpha). HSL jika Anda ingin menghasilkan variasi warna dengan menyesuaikan komponen individual.

Q Apakah properti kustom CSS didukung di mana-mana?

Ya, di semua browser modern sejak 2016 (Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+). Tidak didukung di IE11.

Q Bisakah saya menggunakan variabel untuk mode gelap?

Tentu saja. Tentukan nilai mode terang di :root, lalu timpa dalam @media (prefers-color-scheme: dark) { :root { ... } } atau pada kelas .gelap.

About This Tool

Warna ke Variabel CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.