Lompat ke konten
SPCXTools

Konverter Warna

Konversi warna apa pun antara HEX, RGB, HSL, HSV, dan CMYK, serta cek kontrasnya.

Berjalan secara lokal — file tidak pernah meninggalkan perangkat Anda

Memuat alat…

Cara menggunakan Konverter Warna

  1. 1Ketik atau tempel warna dalam format apa pun — misalnya #0EA5E9, rgb(14 165 233), hsl(199 89% 48%) atau nama CSS seperti tomato — atau gunakan pemilih warna.
  2. 2Lihat warna yang sama dalam format HEX, RGB, HSL, HSV, dan CMYK lalu salin format yang Anda butuhkan.
  3. 3Cek rasio kontras terhadap putih dan hitam untuk melihat apakah teks dengan warna ini mudah dibaca.
  4. 4Klik contoh warna pada skala warna terang dan gelap untuk menjelajahi versi yang lebih terang dan lebih gelap.

Konversi warna antar semua format umum

Desainer, developer, dan pemasar sering kali harus memindahkan warna antar alat yang menggunakan format berbeda: CSS butuh HEX atau HSL, panduan merek memakai RGB dan CMYK, dan aplikasi desain menampilkan HSB. Konverter warna ini menerima warna dalam format apa pun dan menampilkannya dalam semua format lain sekaligus, dilengkapi tombol salin sekali klik untuk masing-masing format. Alat ini juga mengecek kontras teks untuk aksesibilitas dan membuat skala warna terang (tints) dan gelap (shades).

Fitur

  • Mendukung semua format input: HEX (3, 4, 6, atau 8 digit), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, tiga angka biasa, dan nama warna CSS.
  • Semua output sekaligus: HEX, RGB, HSL, HSV, dan CMYK, masing-masing dengan tombol salin.
  • Dukungan transparansi — nilai alpha dipertahankan pada HEX8, RGBA, dan HSLA.
  • Color picker bawaan untuk memilih warna secara visual.
  • Pengecek kontras WCAG terhadap warna putih dan hitam, dengan hasil standar AA untuk teks normal dan besar.
  • Tints dan shades dari tingkat kecerahan 10% hingga 90%; klik kotak warna mana saja untuk memuatnya.

Penjelasan format warna

  • HEX — #RRGGBB dalam heksadesimal, format paling umum dalam desain web. Pasangan keempat (opsional) mengatur tingkat transparansi.
  • RGB — red (merah), green (hijau), dan blue (biru) dari 0 hingga 255; cara layar perangkat menampilkan warna.
  • HSL — hue (posisi pada roda warna), saturation (intensitas), dan lightness (kecerahan). Mudah diatur secara manual: cukup ubah nilai kecerahan untuk mendapatkan versi lebih terang atau gelap dari warna yang sama.
  • HSV / HSB — hue, saturation, dan value (kecerahan), digunakan oleh sebagian besar color picker di aplikasi desain.
  • CMYK — persentase tinta cyan, magenta, yellow (kuning), dan key (hitam) yang digunakan dalam percetakan.

Contoh

Warna biru langit #0EA5E9 adalah rgb(14, 165, 233), hsl(199, 89%, 48%), hsv(199, 94%, 91%) dan kira-kira cmyk(94%, 29%, 0%, 9%). Kontrasnya terhadap warna putih sekitar 2.8:1 — cocok untuk judul besar dan ikon, tapi terlalu rendah untuk teks utama, yang membutuhkan 4.5:1. Pada latar hitam kontrasnya mencapai sekitar 7.6:1, lulus dengan aman.

Tips menggunakan warna

  • Buat palet dalam HSL. Pertahankan nilai hue dan saturation, lalu ubah lightness untuk membuat state tombol, background, dan border yang konsisten.
  • Cek kontras sejak awal. Banyak warna brand terlalu terang untuk teks di atas latar putih; gunakan warna yang lebih gelap dari palet untuk teks dan warna aslinya untuk aksen.
  • Jangan hanya mengandalkan warna untuk menyampaikan makna — tambahkan ikon atau label untuk pengguna buta warna.
  • Hasil cetak bisa berbeda. Warna RGB yang terang, terutama biru dan hijau cerah, sering kali terlihat lebih kusam saat dicetak dalam CMYK.

Perlu mengolah gambar juga? Konverter Gambar dapat mengubah format antara JPG, PNG, dan WebP. Untuk meng-encode gambar kecil atau ikon ke CSS, gunakan Base64.

Pertanyaan yang sering diajukan

Bagaimana cara konversi HEX ke RGB?
Warna HEX memiliki tiga pasang digit heksadesimal untuk merah, hijau, dan biru. Ubah setiap pasangan dari basis 16 ke basis 10: pada #FF8800, FF = 255, 88 = 136 dan 00 = 0, sehingga warnanya menjadi rgb(255, 136, 0). Singkatan tiga digit seperti #F80 menggandakan setiap digitnya terlebih dahulu.
Apa perbedaan antara HSL dan HSV (HSB)?
Keduanya mendeskripsikan warna berdasarkan hue (0–360°) dan saturasi, tetapi menggunakan nilai ketiga yang berbeda. Pada HSL, lightness 50% adalah warna murni, 0% hitam, dan 100% putih. Pada HSV/HSB, value atau brightness 100% adalah warna murni pada saturasi penuh, dan 0% hitam. Aplikasi desain seperti Photoshop dan Figma sering menggunakan HSB pada color picker mereka, sedangkan CSS menggunakan HSL.
Apakah konversi CMYK akurat untuk cetak?
Nilai CMYK adalah hasil konversi matematis dari RGB, yang berguna sebagai titik awal. Hasil cetak sebenarnya bergantung pada printer, tinta, dan kertas, yang ditentukan oleh profil warna ICC. Untuk kebutuhan cetak profesional, lakukan konversi di software desain menggunakan profil printer Anda.
Apa arti rasio kontras?
Web Content Accessibility Guidelines (WCAG) mengukur kontras antara teks dan latar belakang dari 1:1 hingga 21:1. Teks normal membutuhkan setidaknya 4.5:1 untuk lulus level AA, dan teks besar (sekitar 24 px, atau 18.7 px bold) membutuhkan 3:1. Checker ini menunjukkan apakah warna tersebut lulus uji pada latar belakang putih dan hitam.
Format input apa saja yang didukung?
HEX dengan 3, 4, 6, atau 8 digit (dengan atau tanpa #), rgb() dan rgba(), hsl() dan hsla(), hsv() atau hsb(), cmyk(), tiga angka biasa seperti 255 136 0, serta nama warna CSS seperti rebeccapurple. Sintaks yang dipisahkan koma maupun spasi modern sama-sama bisa digunakan, termasuk alpha seperti rgb(14 165 233 / 50%).

Alat terkait

Konverter GambarUbah format foto dan grafis antara JPG, PNG, WebP, dan AVIF — secara massal, tanpa perlu upload.Pengubah HurufUbah teks ke berbagai format huruf — dari Title Case hingga snake_case — dan lihat semua hasilnya sekaligus.Encode & Decode Base64Konversi teks dan file ke Base64 dan sebaliknya, dengan dukungan penuh UTF-8 dan Base64URL.Generator Box ShadowAtur bayangan lembut, tajam, berlapis, atau inset dengan pratinjau langsung dan salin CSS-nya.Simulator Buta WarnaLihat pratinjau gambar Anda dari sudut pandang penderita defisiensi penglihatan warna untuk memastikan desain Anda mudah diakses.Cek Kontras WarnaCek apakah teks Anda cukup mudah dibaca — dan dapatkan warna terdekat yang memenuhi standar WCAG.