Konverter Warna Online
Konversi antara HEX, RGB, HSL, HSV, CMYK, dan HWB secara instan, di browser Anda.
Mengapa menggunakannya
Setiap model warna dalam satu konverter
6 model warna
HEX, RGB, HSL, HSV, CMYK, dan HWB. Konversi antara kombinasi apa pun dalam satu langkah.
Privat
Konversi dilakukan sepenuhnya di browser Anda. Tidak ada nilai warna yang meninggalkan perangkat Anda.
Presisi penuh
Hasil tepat mengikuti spesifikasi ICC, W3C CSS Color Level 4, dan standar sRGB.
Instan
Konversi real time saat Anda mengetik. Tanpa tombol, tanpa menunggu.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Masukkan warna sumber
Ketik atau tempel nilai warna dalam format apa pun: #FF5733, rgb(255,87,51), hsl(11,100%,60%), cmyk(0%,66%,80%,0%), atau hwb(11 0% 0%). Anda juga dapat menggunakan salah satu dari 140 warna bernama CSS seperti tomato atau steelblue.
Pilih format target
Pilih model warna untuk dikonversi ke: HEX untuk web, RGB untuk layar, HSL untuk CSS modern, HSV/HSB untuk alat desain, CMYK untuk cetak, atau HWB untuk standar CSS Color Level 4.
Salin hasilnya
Dapatkan nilai warna tepat dalam format yang dipilih dengan satu klik. Konverter juga menampilkan pratinjau warna langsung dan semua nilai di setiap model secara bersamaan.
FAQ
Ada pertanyaan?
Model warna adalah representasi matematis yang mendeskripsikan warna secara sistematis menggunakan koordinat numerik. Setiap model mendekati warna dari perspektif yang berbeda: RGB mendeskripsikannya sebagai campuran cahaya (merah, hijau, biru); CMYK sebagai campuran tinta (cyan, magenta, kuning, hitam); HSL dan HSV mendeskripsikannya dalam istilah perseptual manusia (hue, saturasi, lightness/value); HWB (CSS Color Level 4) menggunakan hue, jumlah putih, dan jumlah hitam. Tidak ada model yang terbaik: pilihan bergantung pada konteks penggunaan (layar, cetak, pengeditan kode, alat desain).
RGB (Red, Green, Blue) adalah model warna aditif: mencampur ketiganya pada nilai maksimum menghasilkan putih. Digunakan untuk layar, monitor, LED, dan perangkat pemancar cahaya apa pun. CMYK (Cyan, Magenta, Yellow, Key/Black) adalah model subtraktif: mencampur tiga warna dasar secara teoritis menghasilkan hitam (dalam praktik coklat gelap keruh, itulah mengapa saluran hitam K murni ditambahkan). CMYK digunakan dalam percetakan. Konversi antara RGB dan CMYK tidak pernah sempurna karena keduanya memiliki gamut warna yang berbeda: warna layar yang cerah (biru listrik, hijau fluoresen) tidak dapat direproduksi dalam percetakan offset standar.
HSL (Hue, Saturation, Lightness) lebih intuitif bagi manusia daripada RGB karena memisahkan hue warna dari saturasi dan lightnessnya. Untuk menggelapkan warna biru dalam RGB Anda harus menghitung ulang ketiga saluran; dalam HSL Anda cukup mengurangi nilai L. Untuk membuat varian merek (terang, gelap, jenuh, tidak jenuh), HSL membuat transformasi dapat diprediksi. Dalam CSS modern, HSL memungkinkan theming dinamis dengan variabel: deklarasi warna merek dan pembuatan varian hanya dengan menyesuaikan L atau S.
HWB (Hue, Whiteness, Blackness) adalah model warna yang didefinisikan dalam spesifikasi CSS Color Level 4 (W3C), dirancang agar lebih intuitif dari HSL. Alih-alih saturasi dan lightness, model ini menggunakan langsung berapa banyak putih (W) dan berapa banyak hitam (B) yang dicampur dengan hue murni. hwb(0, 0%, 0%) adalah merah murni; hwb(0, 50%, 0%) adalah merah muda; hwb(0, 0%, 50%) adalah merah gelap; hwb(0, 50%, 50%) adalah abu-abu. Semua browser modern telah mendukung hwb() sejak 2022. Berguna saat Anda perlu memanipulasi warna dengan cara yang dapat diprediksi secara visual tanpa kalkulasi kompleks.
Gamut warna adalah rentang warna yang dapat direpresentasikan oleh perangkat atau ruang warna. sRGB (standar layar sejak 1996) mencakup sekitar 35% dari ruang CIE 1931 yang terlihat oleh mata manusia. Display P3 (digunakan di iPhone dan Mac sejak 2016) mencakup sekitar 26% lebih dari sRGB. Rec.2020 (HDR) mencakup hampir dua kali sRGB. Saat mengonversi antara HEX/RGB/HSL Anda berada dalam ruang sRGB: semua nilai dapat direpresentasikan. Mengonversi ke CMYK, gamut yang dapat dicetak berbeda (beberapa merah cerah tidak dapat direproduksi dalam offset; beberapa cyan terang dalam cetak tidak dapat direproduksi di layar). Konversi CMYK ke RGB dapat menghasilkan warna yang terlihat berbeda dari aslinya.
Model warna: sejarah dari Newton hingga CSS Color Level 4
Teori warna modern dimulai dengan Isaac Newton pada tahun 1672, ketika ia menerbitkan eksperimen prismanya dalam Philosophical Transactions of the Royal Society. Newton menunjukkan bahwa cahaya putih adalah jumlah dari semua warna spektrum yang terlihat dan mengusulkan lingkaran kromatik pertama dengan 7 warna (merah, oranye, kuning, hijau, biru, nila, ungu), sebuah angka yang dipilih dengan analogi dengan not musik. Pada tahun 1810, Johann Wolfgang von Goethe menerbitkan Teori Warnanya, berpendapat bahwa warna adalah interaksi antara cahaya dan kegelapan, dan menciptakan lingkaran 6 warna pertama dengan warna komplementer yang berlawanan. Meskipun kesimpulan ilmiahnya salah, model sirkularnya mempengaruhi roda warna yang digunakan dalam desain hingga hari ini.
Diagram kromatisitas CIE 1931 adalah upaya pertama untuk mendefinisikan secara matematis semua warna yang dapat dipersepsi oleh mata manusia rata-rata. Commission Internationale de l'Eclairage (CIE) menciptakan pada tahun 1931 ruang warna XYZ berdasarkan eksperimen pencocokan warna oleh Wright (1928) dan Guild (1931), di mana peserta manusia menyesuaikan campuran tiga cahaya primer untuk mencocokkan warna referensi. Ruang CIE XYZ mengandung semua warna yang terlihat dan berfungsi sebagai ruang referensi absolut untuk mengonversi antara ruang warna relatif mana pun. Standar sRGB (IEC 61966-2-1) didefinisikan pada tahun 1996 oleh HP dan Microsoft dan menjadi standar universal untuk layar dan web, dengan titik putih D65 (6500K) dan kurva gamma sekitar 2,2.
CSS Color Level 4, yang dikembangkan oleh W3C CSS Working Group, memperluas warna CSS yang tersedia melampaui sRGB. Level ini memperkenalkan ruang warna display-p3, rec2020, a98-rgb, prophoto-rgb, oklch, dan oklab menggunakan fungsi color(). Ruang oklch (diusulkan oleh Bjorn Ottosson pada tahun 2020 sebagai peningkatan dari LCH dalam ruang CIELAB) sangat dihargai dalam desain karena memiliki persepsi lightness yang lebih seragam daripada HSL: dua warna dengan nilai L yang sama dalam oklch tampak sama terangnya bagi mata manusia, yang tidak berlaku dalam HSL. Browser telah mendukung oklch sejak 2023. Manajemen warna di browser menggunakan profil ICC yang tertanam dalam gambar untuk secara otomatis mengonversi antara ruang warna dan memastikan reproduktibilitas di berbagai perangkat.