Color Format Converter menerjemahkan warna apa pun antara HEX, RGB, HSL, HSV, dan OKLCH. Pilih warna dengan pemilih asli, ketik nilai heks, tempel string warna CSS apa pun, atau sesuaikan slider RGB — setiap format diperbarui langsung dan masing-masing memiliki tombol Salin sendiri.
CSS modern memberi Anda lusin cara untuk menulis warna yang sama: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus varian alfa dari masing-masing. Anda sering perlu mengonversi di antara mereka — desain Figma memberi Anda OKLCH, basis kode Anda menggunakan HEX, dan variabel tema Anda lebih suka HSL untuk tweak hover. Color Format Converter melakukan semua konversi dalam satu panel. Pilih warna dari pemilih warna asli, tempel warna yang ada dalam sintaks apa pun, atau seret slider RGB untuk membilangnya. Setiap format umum merender secara bersamaan: HEX (dengan alfa), rgb()/rgba(), hsl()/hsla(), hsv(), dan oklch() — plus cuplikan variabel CSS dan nilai luminansi yang dihitung untuk matematika kontras cepat. Saluran alfa didukung end-to-end. Setiap format memiliki tombol Salin sendiri untuk digunakan satu klik, dan pengurai menerima nama warna asli dan semua yang didukung CSS.
Menampilkan HEX, RGB/RGBA, HSL/HSLA, HSV, dan OKLCH secara bersamaan — pilih format apa pun yang diharapkan kode target Anda tanpa mengonversi ulang setiap kali.
Menerima HEX (#abc atau #aabbcc atau #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch(), dan nama warna asli. Tempel apa pun yang didukung CSS.
Menangani format OKLCH baru yang digunakan dalam CSS modern — ruang warna yang seragam secara persepsi yang menjadi default sistem desain baru.
Setiap keluaran memiliki tombol Salin sendiri. Klik untuk mengambil format yang tepat yang Anda butuhkan untuk kode Anda, tidak diperlukan pemilihan manual.
Sesuaikan slider Merah/Hijau/Biru/Alfa untuk penyetelan halus. Setiap format diperbarui secara real-time saat Anda menyeret.
Transparansi ditangani di setiap format: #RRGGBBAA, rgba(...), hsla(...). Atur sekali, konversi di mana-mana.
Figma memberi Anda OKLCH atau HSL — tempel, salin setara HEX untuk konfigurasi Tailwind atau variabel CSS Anda tanpa meninggalkan browser.
Seret slider untuk menjelajahi nuansa, mencatat nilai OKLCH untuk palet sistem desain yang sistematis.
Konversi warna merek ke bentuk HSL-nya sehingga Anda dapat menggunakan hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) untuk status hover.
Bidang luminansi memberi Anda nilai baku yang digunakan dalam perhitungan kontras WCAG — berguna untuk matematika a11y.
Tempel oklch(...) dari file CSS yang Anda baca dan segera lihat warna apa yang sebenarnya dihasilkannya.
Klik ikon Format Warna di dermaga DevSuite Pro. Panel terbuka dengan pemilih warna, input heks, dan slider RGB.
Gunakan pemilih warna, ketik heks, atau tempel string warna CSS apa pun (rgb(...), oklch(...), dll.). Warna ditampilkan secara instan.
Setiap format merender di bawah: HEX, RGB, HSL, HSV, OKLCH, variabel CSS, dan luminansi. Semuanya tetap disinkronkan saat Anda menyesuaikan.
Seret slider R/G/B/A untuk penyesuaian halus. Bagus untuk membilang nada spesifik yang cocok dengan spesifikasi desain.
Klik Salin pada baris format yang Anda inginkan — nilainya mendarat di clipboard Anda dalam sintaks yang benar.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
