Cara menggunakan Konverter Warna
- Ketik atau tempel warna di kolom Nilai warna — format CSS apa pun bisa dipakai — atau pilih warna dengan color picker.
- Atur Opasitas jika kamu butuh transparansi; nilai HEX 8 digit dan
/ alphaakan otomatis diperbarui. - Klik Salin di sebelah format yang kamu butuhkan. Ganti ke sintaks Legacy jika kode kamu memakai
rgba(…, …)dengan koma. - Gulir ke palet untuk mendapatkan 11 tint dan shade; pilih output variabel CSS, Tailwind v4, SCSS, atau JSON, lalu salin atau unduh.
Apa itu konverter warna?
Konverter warna menerjemahkan satu warna ke berbagai notasi yang dipakai CSS dan alat desain. Warna indigo yang sama bisa ditulis sebagai #4f46e5, rgb(79 70 229), hsl(243.4 75.4% 58.6%), atau oklch(51.06% 0.2301 276.97) — semuanya menggambarkan satu warna sRGB yang sama. Desainer memberikan HEX dari Figma, sebuah component library membutuhkan kanal HSL, dan sistem desain modern mungkin ditulis dalam OKLCH, sehingga mengonversi dengan cepat dan tepat adalah pekerjaan harian.
Format yang didukung
| Format | Contoh | Cocok untuk |
|---|---|---|
| HEX (3, 4, 6, 8 digit) | #4f46e5, #4f46e580 | Format serah terima paling umum. Pasangan digit ke-4/ke-8 opsional adalah alpha: 80 ≈ 50%. |
| RGB / RGBA | rgb(79 70 229 / 0.5) | Perhitungan kanal, canvas, dan kode rgba() lama. |
| HSL / HSLA | hsl(243 75% 59%) | Penyesuaian cepat hue, saturasi, dan lightness secara manual. |
| HWB | hwb(243 27% 10%) | Mencampur hue murni dengan putih dan hitam — intuitif untuk color picker. |
| OKLCH | oklch(51% 0.23 277) | Palet dengan kecerahan persepsi yang merata dan design token (Tailwind CSS v4 menggunakan palet berbasis OKLCH). |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Titik awal kasar untuk cetak — lihat catatan di bawah. |
| Nama warna | tomato, rebeccapurple | Semua 148 kata kunci warna CSS dikenali; alat ini juga menampilkan nama terdekat untuk warna apa pun. |
Mengapa OKLCH layak dipelajari
Dalam HSL, kuning dengan “lightness 50%” terlihat jauh lebih terang dibanding biru 50%, karena HSL adalah transformasi geometris sederhana dari RGB. OKLCH dibangun di atas model OKLab, dirancang agar langkah yang sama pada L (lightness) terlihat sebagai langkah yang sama bagi mata, C adalah chroma (tingkat kepekatan warna), dan H adalah sudut hue. Ini membuatnya ideal untuk membuat shade yang konsisten, state hover, dan pasangan warna yang aksesibel. OKLCH juga bisa menjelaskan warna di luar sRGB (misalnya Display P3); saat kamu memasukkan warna seperti itu, alat ini memotongnya ke sRGB dan memberi tanda.
Cara palet 50–950 dibuat
Palet mempertahankan hue warnamu dan bekerja dalam OKLCH: setiap langkah mendapatkan target lightness tetap (dari sangat terang 50 hingga sangat gelap 950) dan porsi chroma dari warnamu, yang dikurangi bila perlu agar setiap swatch tetap berada dalam sRGB. Dengan Pertahankan warna asli saya aktif, input kamu menggantikan langkah dengan lightness paling dekat, sehingga warna brand tampil tanpa perubahan dalam skala. Perlu memeriksa pasangan warna dari palet untuk aksesibilitas? Gunakan Contrast Checker.
Catatan tentang CMYK
Konversi dari layar ke cetak bergantung pada tinta, kertas, dan profil ICC yang dipakai percetakanmu. Nilai CMYK di sini memakai rumus standar tanpa kalibrasi (K = 1 − max(R, G, B)), yang cukup untuk mock-up tetapi tidak untuk cetakan yang krusial bagi brand — mintalah konversi berprofil dari percetakanmu.
Menggunakan warna di Webflow
Tempel nilai HEX ke color picker Webflow atau ke Color variable (panel Variables). Membuat satu variabel per langkah palet — misalnya Brand 50 … Brand 950 — memberimu struktur token yang sama seperti output variabel CSS, sehingga class bisa merujuk ke shade alih-alih nilai yang ditulis langsung.
Juga dicari sebagai: hex ke rgb, rgb ke hex, hex ke hsl, konverter oklch, color picker, cmyk, palet warna css, generator palet warna.
Tool yang cocok dipakai bersama Konverter Warna
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
- Konverter Basis Angka — Ketik angka dalam basis apa pun dan langsung lihat hasilnya di basis lainnya.
- Gambar ke Base64 — Ubah PNG, JPEG, SVG, WebP atau GIF menjadi data URI Base64 dengan CSS dan HTML yang siap disalin, atau tempel string Base64 untuk melihat pratinjau dan mengunduh gambarnya.
Pertanyaan yang sering diajukan
Bagaimana cara mengonversi HEX ke RGB secara manual?
#4F46E5: 4F = 79, 46 = 70, E5 = 229, jadi warnanya adalah rgb(79 70 229). Kode 3 digit seperti #f60 digandakan dulu setiap digitnya (#ff6600).Apa arti warna HEX 8 digit?
00 (sepenuhnya transparan) hingga ff (buram). #4f46e580 adalah indigo dengan opasitas 128/255 ≈ 50%. Semua browser modern mendukung HEX 4 dan 8 digit.Sebaiknya pakai OKLCH daripada HEX atau HSL?
Mengapa nilai HSL-ku sedikit berubah setelah dikonversi?
Apa perbedaan HSL dan HWB?
hwb(0 0% 0%) adalah merah murni dan hwb(0 50% 0%) adalah merah yang dicampur 50% putih (pink). HWB sering lebih mudah dipahami di color picker.