AI di perangkat — profesional dan privat.

Pusat Konverter Warna

Ubah warna apa pun ke dua belas format, tanpa unggah.

  • Berjalan di perangkat Anda
  • Dua belas format, termasuk OKLCH
  • Cek kontras dan buta warna
  • Seluruh stylesheet: 200 warna gratis

Jatuhkan stylesheet atau berkas token

CSS, SCSS, SASS, LESS, JSON, SVG, atau TXT — hingga 10.0 MB

#FF4D4D

Nama warna terdekat: tomato (Keluarga yang sama, jarak 6.4)

  • HEX#FF4D4D
  • RGBrgb(255 77 77)
  • HSLhsl(0 100% 65.1%)
  • HWBhwb(0 30.2% 0%)
  • HSVhsv(0 69.8% 100%)Bukan CSS
  • CMYKcmyk(0% 69.8% 69.8% 0%)Bukan CSS
  • LABlab(59.906 67.771 41.299)
  • LCHlch(59.906 79.363 31.36)
  • OKLABoklab(0.673 0.19441 0.09082)
  • OKLCHoklch(0.673 0.21457 25.04)
  • Display P3color(display-p3 0.9239 0.3574 0.3319)
  • XYZ D65color(xyz-d65 0.45232 0.27107 0.09872)

Kontras

Di atas putih3.27:1
Aa
  • AA normalGagal
  • AA besarLulus
  • AAA normalGagal
  • AAA besarGagal
Di atas hitam6.42:1
Aa
  • AA normalLulus
  • AA besarLulus
  • AAA normalGagal
  • AAA besarLulus
Di atas warna Anda3.27:1
  • AA normalGagal
  • AA besarLulus
  • AAA normalGagal
  • AAA besarGagal

Nuansa lulus terdekat — #E22D35 mencapai 4.51:1 terhadap warna pembanding Anda.

Penglihatan warna

Bagaimana warna ini terlihat oleh orang dengan tiap jenis defisiensi penglihatan warna.

  • Penglihatan umum
  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Tanpa penglihatan warna
Apa yang Anda konversi?
Nilai warna

Semua sintaks warna CSS, ditambah cmyk() dan hsv().

Sunting kanal dalam

Nilai yang Anda ketik di sini tetap bertahan, bahkan ketika warnanya tidak punya hue untuk menampilkannya.

Bandingkan dengan
Ekspor
Ekspor sebagai
Warna terbaru
Warna yang Anda konversi akan muncul di sini.

Cara mengonversi sebuah warna

  1. Pilih konverter

    Buka alat yang Anda butuhkan (mis. RGB ke HEX).

  2. Masukkan nilai

    Ketik angka atau gunakan pipet.

  3. Dapatkan hasil

    Pratinjau dan nilai diperbarui seketika; salin yang dibutuhkan.

Setiap format warna, dijelaskan

Dua belas format menggambarkan warna yang sama dengan cara berbeda, dan masing-masing ada karena menjawab pertanyaan yang dijawab dengan buruk oleh yang lain. Berikut kegunaan masing-masing.

HEX

Enam digit heksadesimal untuk merah, hijau, dan biru, ditulis sebagai #RRGGBB. Ini RGB dalam notasi yang lebih pendek dan tidak lebih dari itu, sehingga konversi di antara keduanya tepat di kedua arah. Tambahkan dua digit lagi untuk opasitas: #RRGGBBAA.

RGB

Tiga angka dari 0 sampai 255, satu per kanal, yang menyatakan seberapa banyak cahaya merah, hijau, dan biru yang dipancarkan layar. Sifatnya aditif: ketiganya penuh menghasilkan putih. CSS modern menulisnya dengan spasi, rgb(255 77 77), dan bentuk lama dengan koma masih berlaku di mana-mana.

HSL

Hue sebagai sudut pada roda warna, lalu saturasi dan lightness dalam persen. Jauh lebih mudah dipikirkan daripada RGB saat Anda ingin versi lebih terang dari warna yang sama, itulah sebabnya sistem tema memakainya. Kelemahannya: langkah lightness yang sama tidak terlihat sama — kuning pada 50% tampak jauh lebih terang daripada biru pada 50%.

HWB

Hue, lalu seberapa banyak putih dan hitam yang dicampurkan. Ini dekat dengan cara cat dideskripsikan, sehingga menjadi format CSS paling alami untuk membangun tint dan shade dari satu hue. Ketika putih dan hitam bersama-sama mencapai 100%, hue-nya hilang dan yang tersisa adalah abu-abu.

HSV

Hue, saturasi, dan value. Bukan format CSS, tetapi inilah yang dipakai hampir setiap aplikasi desain dan penyunting gambar di dalam pemilih warnanya, jadi inilah format yang dipakai untuk mencocokkan nilai yang Anda baca di program lain.

CMYK

Persentase tinta cyan, magenta, kuning, dan hitam, untuk cetak. Sifatnya subtraktif: tinta menyerap cahaya alih-alih memancarkannya, jadi angkanya berperilaku terbalik dari RGB. Konversi di sini memakai rumus standar yang tidak bergantung perangkat dan tanpa manajemen warna — lihat bagian keterbatasan.

LAB

Ruang warna yang dirancang agar jarak antara dua warna sesuai dengan seberapa berbeda keduanya terlihat. L adalah lightness dari 0 sampai 100, dan a serta b menempatkan warna pada sumbu hijau–merah dan biru–kuning. Ia mencakup setiap warna yang bisa dilihat manusia, jauh lebih banyak daripada yang bisa ditampilkan layar. lab() pada CSS memakai titik putih D50, dan itulah yang dikeluarkan alat ini.

LCH

Warna yang sama dengan LAB, ditulis sebagai lightness, chroma, dan sudut hue alih-alih dua sumbu. Karena hue adalah satu angka, LCH adalah format yang dipakai bila Anda ingin sekumpulan warna yang hanya berbeda saturasi atau hanya berbeda lightness.

OKLAB

Ruang seragam secara persepsi yang lebih baru dan memperbaiki kelemahan terburuk LAB: biru pada LAB bergeser hue secara kentara saat lightness diubah, sedangkan pada OKLAB tidak. Lightness berjalan 0 sampai 1, bukan 0 sampai 100.

OKLCH

OKLAB dalam bentuk polar, dan format yang dituju sebagian besar sistem desain. Cerahkan warna OKLCH dan hue-nya tetap; bangun palet dengan menahan chroma dan hue lalu menaikkan lightness, dan setiap langkah terlihat sama besarnya. Ia bagian dari CSS Color 4 dan berjalan di semua peramban saat ini.

Display P3

Ruang warna yang lebih luas daripada sRGB, dipakai layar Apple terbaru dan Android kelas atas. Ia dapat menampilkan merah dan hijau yang tak terjangkau sRGB, sehingga warna P3 sering tidak punya padanan persis di sRGB — alat ini mengatakannya dan memberikan yang terdekat.

XYZ

Ruang acuan yang menjadi dasar definisi semua ruang lain. Anda jarang menulisnya sendiri, tetapi ia adalah landasan bersama yang dilalui setiap konversi, dan berguna saat membandingkan nilai antar alat yang tidak sepakat.

Mengapa memakai konverter warna?

Menyatukan format, menjaga konsistensi web dan cetak, serta memindahkan warna antar aplikasi tanpa salah input manual.

Manfaat

  • Kompatibilitas: sesuaikan format ke tiap platform
  • Konsistensi: nuansa sama di berbagai media
  • Alur desain: gesekan lebih sedikit antar alat
  • Banyak format: RGB, HEX, HSL, CMYK
  • Langsung: lihat hasil saat mengubah nilai

Koleksi alat

Mencakup format umum untuk web, desain grafis, dan cetak.

RGB ke HEX

Penting untuk CSS dan pengembangan web.

HEX ke RGB

Terjemahkan warna web ke saluran numerik.

RGB ke HSL

Cocok untuk variasi tema dan penyesuaian intuitif.

HSL ke RGB

Bawa pilihan HSL ke RGB untuk tampilan.

RGB ke CMYK

Siapkan warna untuk media cetak.

Pipet

Satu tampilan dengan RGB, HEX, HSL, dan CMYK sinkron.

OKLCH dan warna modern di CSS

Kalau selama ini Anda hanya memakai HEX dan HSL, OKLCH adalah satu-satunya format di halaman ini yang layak dipelajari. Ia menyelesaikan masalah yang dihadapi setiap sistem desain dan yang biasanya disiasati secara manual.

  • Mencerahkan tetap menjaga hue — naikkan lightness sebuah biru di HSL dan warnanya bergeser ke ungu; lakukan di OKLCH dan ia tetap biru. Itulah tujuan ruang yang seragam secara persepsi.
  • Langkah yang sama terlihat sama — palet yang dibangun dengan menaikkan lightness OKLCH secara merata terbaca sebagai tangga yang rata. Kenaikan yang sama di HSL menghasilkan tangga yang menumpuk di satu ujung.
  • Satu angka untuk saturasi — chroma adalah satu nilai yang berarti sama pada setiap hue, sehingga «intensitas yang sama pada warna lain» menjadi perubahan satu angka, bukan tebakan.
  • Ia menjangkau warna di luar sRGB — OKLCH bisa menggambarkan warna di luar layar standar. Alat ini memberi tahu Anda saat itu terjadi dan memberikan warna terdekat yang memang bisa ditampilkan layar.

Tempel kode HEX apa pun di atas dan baca baris OKLCH untuk melihat di mana warna Anda saat ini berada. Untuk memindahkan seluruh palet sekaligus, gunakan mode seluruh berkas yang dijelaskan di bawah.

Mengonversi seluruh stylesheet atau berkas token

Mengonversi satu warna adalah bagian yang mudah. Memindahkan proyek dari HEX ke OKLCH, atau menarik semua warna dari berkas desain untuk diperiksa, berarti menyentuh ratusan nilai — dan di situlah semua konverter warna lain berhenti.

  • Ia menulis ulang, bukan membangun ulang — berkas yang Anda terima adalah berkas yang Anda berikan, dengan hanya nilai warnanya yang berubah. Komentar, spasi, minifikasi, akhir baris, dan segala hal yang tidak dikenali pemindai lewat apa adanya, bita demi bita.
  • Ia membaca tujuh jenis berkas — CSS, SCSS, SASS, LESS, JSON, SVG, dan teks biasa. Pada SVG dan JSON setiap warna berada di dalam tanda kutip, dan semuanya tetap ditemukan.
  • Nama warna bersifat opsional — tan, plum, salmon, dan red adalah kata Inggris biasa. Mencocokkannya adalah sakelar yang Anda nyalakan sendiri, sebab membiarkannya menyala pada berkas teks akan menulis ulang prosa.
  • Ia tahu apa yang bukan warna — #ff00001 kelebihan digit, tangerine bukan tan, dan --tan-100 adalah nama variabel. Tidak satu pun disentuh.

Paket gratis mengonversi 200 warna sekaligus, cukup untuk palet inti sebuah sistem desain. Pro menghapus batas itu, menerima hingga 25 berkas, dan mengembalikannya sebagai satu arsip.

Kontras dan aksesibilitas

Sebuah warna hanya berguna bila teks di atasnya bisa dibaca. Panel kontras mengukur warna Anda terhadap putih, terhadap hitam, dan terhadap warna kedua mana pun, lalu memeriksa tiap hasil dengan ambang WCAG.

  • 4,5:1 adalah syarat AA untuk teks isi normal, dan tolok ukur yang dipakai sebagian besar audit.
  • 3:1 sudah cukup untuk teks besar — 18,66px tebal atau 24px normal ke atas — serta untuk komponen antarmuka dan grafik.
  • 7:1 adalah AAA untuk teks normal, sebuah peningkatan keterbacaan yang nyata dan bukan sekadar formalitas, terutama untuk bacaan panjang.
  • Kontras hanya bergantung pada lightness, jadi mengubah hue warna yang gagal tidak akan menolongnya. Karena itu perbaikan yang disarankan menggeser lightness dan mempertahankan hue pilihan Anda.

Bila satu pasangan gagal, alat ini mencari ke arah lebih terang dan lebih gelap untuk perubahan terkecil yang lulus, lalu menunjukkan hasilnya alih-alih membiarkan Anda menebak.

Yang dilihat pengunjung dengan buta warna

Sekitar satu dari dua belas pria dan satu dari dua ratus wanita memiliki suatu bentuk defisiensi penglihatan warna. Deretan simulasi menampilkan warna Anda sebagaimana terlihat pada tiap jenis yang umum, sehingga Anda bisa memastikan dua warna dalam palet tetap bisa dibedakan alih-alih menyatu.

  • Protanopia dan deuteranopia — jenis merah–hijau, dan jauh yang paling umum. Merah menggelap serta hijau dan merah menyatu — itulah sebabnya indikator benar/salah berwarna merah/hijau adalah kegagalan aksesibilitas klasik.
  • Tritanopia — jarang, memengaruhi sumbu biru–kuning. Biru dan hijau menyatu, dan kuning bisa tampak merah muda.
  • Tanpa penglihatan warna — lebih jarang lagi, dan merupakan kasus terburuk yang berguna: jika sebuah desain berhasil pada baris skala abu-abu, ia berhasil untuk semua orang.

Simulasi ini memodelkan hilangnya satu jenis sel kerucut secara total. Defisiensi sebagian lebih umum dan berada di antara tampilan simulasi dan penglihatan umum — jadi anggap pasangan yang nyaris tidak lolos simulasi sebagai pasangan yang perlu diubah.

Tentang konverter warna

Kami membantu Anda berpindah format dengan cepat. Semua diproses di perangkat agar data tetap pribadi.

Alat yang tersedia:

  • RGB ke HEX: nilai RGB ke heksadesimal
  • HEX ke RGB: kode hex ke saluran RGB
  • RGB ke HSL: RGB ke rona, saturasi, terang
  • HSL ke RGB: HSL ke RGB untuk layar
  • RGB ke CMYK: persiapan cetak CMYK
  • Pipet: pilih warna dan lihat semua format

Pilih kartu yang Anda perlukan dan mulai segera.

Kapan memakai

Saat migrasi antar perangkat lunak, menyiapkan CSS, memvalidasi merek web/cetak, atau mendokumentasikan palet.

Kasus umum

  • Pengembangan web: CSS dan HTML
  • Desain: pindah antar aplikasi
  • Cetak: mendekati RGB ke spesifikasi CMYK
  • Pencocokan: bandingkan dengan referensi
  • Design system: token dan skala konsisten
  • Memodernkan palet: Pindahkan stylesheet yang ada dari HEX ke OKLCH dalam satu langkah

Fakta singkat

Konteks cepat tentang model warna.

Poin utama

  • RGB aditif (layar)
  • CMYK subtraktif (tinta)
  • HEX memadatkan info yang sama dengan RGB
  • HSL memudahkan mengubah rona dan saturasi
  • Konversi matematis tidak kehilangan presisi dalam ruang yang sama
  • CSS mendefinisikan 148 kata kunci warna, termasuk kedua ejaan gray dan grey
  • Layar sRGB standar menampilkan sekitar 16,7 juta warna; LAB dan OKLAB menggambarkan jauh lebih banyak

Praktik terbaik

Untuk hasil andal.

Kualitas

  • Cocokkan dengan panduan merek
  • Uji di layar dan, jika perlu, di proof cetak
  • Ingat perbedaan gamut RGB ↔ CMYK
  • Pilih format sesuai tujuan akhir
  • Periksa ulang warna kritis
  • Bangun palet dalam OKLCH agar langkah lightness terlihat rata, lalu konversikan ke HEX bila perlu dukungan lama

Kapan tidak memaksakan konversi

  • Jika target sudah menerima format asli Anda
  • Jika warna di luar gamut keluaran tanpa proof
  • Jika butuh verifikasi fisik dan hanya mengandalkan monitor
  • Jika platform tidak mendukung format target
  • Jangan mengonversi nama warna di dalam prosa — biarkan pencocokan kata kunci mati untuk berkas teks biasa

Batasan

Membutuhkan browser modern dengan JavaScript; cetak nyata bergantung pada kertas dan profil.

Didukung algoritme pemrosesan gambar yang dioptimalkan.

Pertanyaan umum

Alat warna apa saja yang ada di pusat ini?

Pusat ini menyatukan konverter khusus untuk RGB ke HEX, HEX ke RGB, RGB ke HSL, HSL ke RGB, dan RGB ke CMYK, ditambah pemilih warna interaktif. Ada juga konverter cepat serba guna yang menerima masukan HEX atau rgb() dan menampilkan semua format sekaligus dengan pratinjau langsung.

Format warna apa saja yang didukung?

Alat mencakup empat format yang dipakai di web, desain, dan cetak: RGB dan HEX untuk layar dan CSS, HSL untuk menyetel rona dan kecerahan secara intuitif, serta CMYK untuk keluaran cetak. Anda bisa berpindah antar format dan menyalin nilai akurat yang siap dipakai untuk masing-masing.

Apa beda RGB dan HEX?

RGB menjelaskan warna dengan tiga angka dari 0 hingga 255 untuk merah, hijau, dan biru, sedangkan HEX menulis saluran yang sama dalam heksadesimal, misalnya #FF0000 untuk merah. Keduanya mewakili warna yang sama, jadi konversinya tanpa kehilangan data; HEX hanya lebih ringkas di CSS.

Kapan sebaiknya memakai HSL atau CMYK?

Pakai HSL saat ingin menyetel warna secara intuitif dengan mengubah rona, saturasi, dan kecerahan terpisah, cocok untuk tema. Pakai CMYK saat menyiapkan karya untuk cetak, karena mesin cetak mencampur tinta cyan, magenta, kuning, dan hitam alih-alih memancarkan cahaya RGB.

Apakah konverter warna gratis dan privat?

Ya. Semua konverter dan pemilih warna gratis, dan seluruh konversi berjalan lokal di perangkat Anda. Nilai warna yang Anda masukkan tidak pernah diunggah atau disimpan, sehingga palet dan warna proyek tetap sepenuhnya privat di perangkat Anda.

Bisakah pusat ini memeriksa kontras warna untuk aksesibilitas?

Ya. Konverter cepat menyertakan pemeriksaan kontras yang menguji warna Anda terhadap putih dan hitam serta menunjukkan apakah lolos WCAG AA dan AAA untuk teks normal dan besar. Anda juga bisa menyimpan warna terbaru dan mengekspor nilai sebagai JSON atau TXT untuk dipakai lagi.

Apa itu OKLCH dan perlukah saya memakainya?

OKLCH adalah format warna dalam CSS Color 4 yang dibangun di atas ruang yang seragam secara persepsi: perubahan angka yang sama besar terlihat sama besar oleh mata. Cerahkan warna OKLCH dan hue-nya tetap, sedangkan perubahan yang sama di HSL bisa bergeser kentara ke hue lain. Dukungannya baik di peramban saat ini dan inilah format yang dituju sebagian besar sistem desain.

Seberapa akurat konversi RGB ke CMYK?

Nilai CMYK memakai rumus standar yang tidak bergantung perangkat — sama seperti yang diberikan konverter daring mana pun dan yang ditampilkan sebagian besar perangkat lunak desain secara bawaan. Ini bukan warna terkelola: mesin cetak sungguhan memerlukan profil ICC dan rendering intent, dan empat angka yang sama tercetak berbeda pada kertas berlapis dan tidak berlapis. Anggap nilainya sebagai titik awal yang andal dan pastikan warna penting bersama percetakan Anda.

Bisakah saya mengonversi semua warna dalam sebuah stylesheet sekaligus?

Bisa. Tempel sebuah stylesheet atau jatuhkan berkas .css, .scss, .sass, .less, .json, .svg, atau .txt, dan alat ini menemukan setiap warna di dalamnya lalu menulis ulang semuanya dalam format pilihan Anda. Semua hal lain dalam berkas — komentar, spasi, struktur — disalin apa adanya.

Mengapa sebuah warna ditandai di luar gamut?

Format seperti OKLCH, LAB, dan Display P3 dapat menggambarkan warna yang tidak bisa ditampilkan layar sRGB standar. Ketika Anda memasukkan salah satunya, alat ini memberi tahu Anda dan memberikan warna sRGB terdekat, yang diperoleh dengan menurunkan saturasi sambil mempertahankan lightness dan hue yang Anda minta — metode yang ditetapkan spesifikasi CSS persis untuk kasus ini.

4.8dari 5

dari 774 penilaian

Beri nilai alat ini

Ketuk bintang — hanya sebentar