devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Alat Warna

Konverter Warna

Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet 50–950 yang siap pakai.

Berjalan di browser Anda · tidak ada yang diunggah
#4f46e5
Coba:

Semua format

Palet tint & shade (50–950)

Opsi
Apakah alat ini membantu?Jadilah yang pertama memberi nilai

Cara menggunakan Konverter Warna

  1. Ketik atau tempel warna ke kolom Color value — format CSS apa pun bisa dipakai — atau pilih warna lewat color picker.
  2. Atur Opacity jika kamu membutuhkan transparansi; nilai HEX 8 digit dan / alpha akan diperbarui otomatis.
  3. Klik Copy di samping format yang kamu butuhkan. Ganti ke sintaks Legacy jika kode kamu memakai rgba(…, …) dengan koma.
  4. Gulir ke palet untuk mendapatkan 11 tint dan shade; pilih output CSS variables, 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 menyerahkan HEX dari Figma, pustaka komponen membutuhkan kanal HSL, dan sistem desain modern mungkin ditulis dalam OKLCH, jadi mengonversi warna dengan cepat (dan tepat) adalah pekerjaan sehari-hari.

Format yang didukung

FormatContohCocok untuk
HEX (3, 4, 6, 8 digit)#4f46e5, #4f46e580Format serah terima yang paling umum. Pasangan digit ke-4/ke-8 opsional adalah alpha: 80 ≈ 50%.
RGB / RGBArgb(79 70 229 / 0.5)Perhitungan kanal, canvas, dan kode rgba() lama.
HSL / HSLAhsl(243 75% 59%)Penyesuaian manual cepat untuk hue, saturation, dan lightness.
HWBhwb(243 27% 10%)Mencampur hue murni dengan putih dan hitam — intuitif untuk color picker.
OKLCHoklch(51% 0.23 277)Palet yang seragam secara persepsi dan design token (Tailwind CSS v4 menggunakan palet berbasis OKLCH).
CMYKcmyk(66%, 69%, 0%, 10%)Titik awal kasar untuk cetak — lihat catatan di bawah.
Nama warnatomato, rebeccapurpleSemua 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 daripada biru 50%, karena HSL hanyalah 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 kecerahan warna) dan H adalah sudut hue. Itu membuatnya ideal untuk membuat shade yang konsisten, state hover, dan pasangan warna yang mudah diakses. OKLCH juga bisa mendeskripsikan warna di luar sRGB (misalnya Display P3); saat kamu memasukkan warna seperti itu, alat ini memotongnya ke sRGB dan menandainya.

Cara palet 50–950 dibuat

Palet ini mempertahankan hue warnamu dan bekerja dalam OKLCH: setiap langkah mendapat target lightness tetap (dari sangat terang 50 hingga sangat gelap 950) dan porsi chroma dari warnamu, yang dikurangi bila diperlukan agar setiap swatch tetap berada di dalam sRGB. Dengan opsi Keep my exact color aktif, warna input menggantikan langkah yang lightness-nya paling dekat, sehingga warna brand muncul tanpa perubahan di dalam skala. Perlu memeriksa pasangan 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 mockup tetapi tidak untuk karya cetak yang krusial bagi brand — mintalah percetakanmu melakukan konversi berprofil.

Menggunakan warna di Webflow

Tempel nilai HEX ke color picker Webflow atau ke Color variable (panel Variables). Membuat satu variable untuk setiap langkah palet — misalnya Brand 50 … Brand 950 — memberimu struktur token yang sama dengan output CSS variables, sehingga class bisa merujuk ke shade alih-alih nilai yang ditulis langsung.

Pertanyaan yang sering diajukan

Bagaimana cara mengonversi HEX ke RGB secara manual?
Pisahkan enam digit menjadi tiga pasang dan konversi masing-masing dari basis 16 ke basis 10. Untuk #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?
Dua digit terakhir adalah kanal alpha (opasitas), dari 00 (sepenuhnya transparan) hingga ff (buram). #4f46e580 adalah indigo dengan opasitas 128/255 ≈ 50%. Semua browser modern mendukung HEX 4 dan 8 digit.
Apakah sebaiknya saya memakai OKLCH alih-alih HEX atau HSL?
Untuk design token dan shade yang dibuat otomatis, OKLCH biasanya lebih baik karena lightness-nya seragam secara persepsi dan mampu mengekspresikan warna wide-gamut. Format ini didukung oleh semua browser utama saat ini. HEX tetap menjadi format paling portabel untuk serah terima dan alat lama.
Mengapa nilai HSL saya berubah sedikit setelah dikonversi?
Warna di layar disimpan sebagai RGB 8-bit (0–255 per kanal), sehingga banyak nilai HSL dibulatkan ke warna RGB yang sama. Alat ini menampilkan HSL dengan satu angka desimal agar konversi balik menghasilkan HEX yang sama.
Apa perbedaan antara HSL dan HWB?
Keduanya menggunakan sudut hue. HSL kemudian mengatur saturation dan lightness, sedangkan HWB menentukan seberapa banyak putih dan hitam yang dicampurkan ke hue murni — hwb(0 0% 0%) adalah merah murni dan hwb(0 50% 0%) adalah merah yang dicampur 50% putih (merah muda). HWB sering lebih mudah dipahami di color picker.
Bisakah saya memasang Konverter Warna sebagai aplikasi web dan memakainya offline?
Bisa. Konverter Warna adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

Tool terkait

Generator Gradient CSSRancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu sali…Generator Box ShadowTumpuk beberapa lapisan shadow, atur offset, blur, spread dan opacity di atas kartu langsung, lalu salin CS…Konverter Basis BilanganKetik angka dalam basis apa pun dan langsung lihat hasilnya di semua basis lain. Periksa two’s complement b…