Warna Konverter

Memahami format warna

Sebuah konverter yang menangani HEX, RGB, HSL, HSV, dan CMYK menyentuh lima cara yang cukup berbeda untuk menggambarkan fenomena perseptual yang sama. Mereka diciptakan oleh orang-orang yang berbeda, di dekade yang berbeda, untuk mesin yang berbeda, dan dengan prioritas yang berbeda. Menggeser nilai dari satu notasi ke notasi lain terlihat seperti aritmatika sepele, dan di permukaan biasanya memang demikian, tetapi sejarah menjelaskan mengapa setiap notasi ada, dan matematika menjelaskan mengapa round-trip antara mereka tidak selalu lossless.

HEX, Singkatan Basis-16 untuk Triplet sRGB

Notasi warna heksadesimal mendahului CSS beberapa tahun pada workstation dan dalam format file grafik, tetapi makna universalnya di web ditetapkan oleh Rekomendasi CSS1 yang dipublikasikan W3C pada 17 Desember 1996. CSS1 adalah karya Håkon Wium Lie dan Bert Bos: Lie telah mengusulkan Cascading Style Sheets saat di CERN pada Oktober 1994, dan Bos bergabung dengan proyek di INRIA pada Juli 1995. Sebelum CSS, HTML 1.0 tidak memiliki gagasan warna sama sekali, set awal 18 tagnya benar-benar struktural. Warna hex adalah bilangan bulat tiga byte (atau empat byte, dengan alpha) yang dipisah browser menjadi saluran merah, hijau, dan biru. Bentuk 6 digit #RRGGBB memberikan setiap saluran nilai 8-bit, 0-255, dikodekan dalam dua digit hex. Singkatan 3 digit #RGB persis setara dengan bentuk 6 digit dengan setiap digit digandakan, jadi #F0A dan #FF00AA adalah warna yang sama. CSS Color Module Level 4 secara formal menambahkan bentuk 4 digit (#RGBA) dan 8 digit (#RRGGBBAA) dengan saluran alpha, di mana 00 sepenuhnya transparan dan FF sepenuhnya opak. Dukungan browser tiba di Chrome 62, Firefox 49, Safari 10, dan Edge 79, jadi pada 2026 itu pada dasarnya universal. Hex populer karena pendek, dapat-disalin-tempel, dan tidak ambigu, background: #1e90ff bertahan dari salin/tempel antara Figma, VS Code, Slack, dan email tanpa perlu siapa pun memikirkan spasi atau koma.

RGB, Prinsip Tiga Warna Maxwell, Dibuat Digital

Ide "RGB", bahwa warna apa pun yang dilihat mata dapat dicocokkan dengan mencampur jumlah terkontrol dari tiga cahaya utama, mendahului fotografi warna. James Clerk Maxwell pertama kali mengusulkannya dalam makalahnya tahun 1855 "Experiments on Colour, as Perceived by the Eye, with Remarks on Colour Blindness," disampaikan ke Royal Society of Edinburgh. Enam tahun kemudian, pada 17 Mei 1861, Maxwell mendemonstrasikan prinsip itu di depan umum: dia meminta fotografer Thomas Sutton membuat tiga pelat hitam-putih dari pita tartan, masing-masing dipotret melalui filter merah, hijau, atau biru, dan kemudian memproyeksikan tiga pelat itu kembali melalui filter yang sama ke layar. Proyeksi yang ditumpangkan menghasilkan gambar berwarna yang dapat dikenali, foto warna pertama di dunia dengan sintesis aditif. RGB aditif Maxwell menjadi fondasi dari setiap layar elektronik sejak itu. RGB web modern secara khusus berarti sRGB, ruang warna "standar RGB" yang diusulkan oleh Hewlett-Packard dan Microsoft pada 1996 (penulis Michael Stokes dan Ricardo Motta dari HP, Matthew Anderson dan Srinivasan Chandrasekar dari Microsoft) dan distandarisasi sebagai IEC 61966-2-1:1999. Motivasinya prosaik: web awal membutuhkan ruang warna yang cukup sederhana untuk diasumsikan secara default, cukup kuat untuk terlihat dapat diterima pada CRT murah, dan cukup kecil agar tidak menggembungkan file gambar. Dua puluh lima tahun kemudian, ia masih merupakan ruang kerja default dari setiap browser, setiap JPEG dan setiap PNG yang tidak membawa profil ICC tertanam. Di CSS, RGB ditulis rgb(255, 0, 153) (sintaks koma legacy) atau rgb(255 0 153) (modern dipisahkan spasi, per CSS Color Level 4).

HSL dan HSV, Sumbu Perseptual Alvy Ray Smith

RGB sangat baik untuk perangkat keras (layar secara harfiah memiliki sub-pixel merah, hijau, dan biru) dan tidak berguna untuk intuisi manusia. Tidak ada yang men-tweak desain web dengan beralasan bahwa mereka ingin "dua belas unit hijau lebih banyak dan tujuh unit merah lebih sedikit". Desainer berpikir dalam istilah hue (warna mana), saturasi (seberapa cerah), dan kecerahan (seberapa terang). Konversi diformalkan oleh Alvy Ray Smith dalam makalah SIGGRAPH 1978-nya "Color Gamut Transform Pairs," diterbitkan dalam edisi Agustus 1978 Computer Graphics, halaman 12-19. Smith berada di New York Institute of Technology Computer Graphics Lab, setelah sebelumnya bekerja di Xerox PARC. Makalah mencatat bahwa transformasi RGB-to-HSV telah "digunakan dengan sukses selama sekitar empat tahun" dalam program lukisan frame-buffer pada saat diterbitkan, Smith mendokumentasikan praktik kerja, bukan menciptakannya dari awal. Dia bersama-sama dianugerahi SIGGRAPH Computer Graphics Achievement Award pada 1990 untuk, antara lain, "model ruang warna HSV (alias HSB)". HSL dan HSV berbagi sumbu hue (sudut, 0°-360°, di sekitar roda warna: 0° merah, 120° hijau, 240° biru) dan sumbu saturasi (0% abu-abu hingga 100% murni), tetapi mereka berbeda dalam sumbu ketiga mereka. HSV (Hue, Saturation, Value) memperlakukan V sebagai maksimum dari saluran RGB, putih murni memerlukan V=100% DAN S=0%, merah murni adalah V=100%, S=100%; baik putih maupun merah hidup di puncak silinder. HSL (Hue, Saturation, Lightness) memperlakukan L sebagai titik tengah dari saluran paling terang dan paling gelap, putih murni adalah L=100% terlepas dari S, merah murni adalah L=50%, S=100%; putih hidup di puncak silinder, warna paling cerah hidup di khatulistiwa. HSL secara khusus dipilih untuk CSS karena simetri di sekitar L=50% sesuai dengan bagaimana desainer memikirkan tints dan shades.

CMYK, Model Subtraktif Pencetak

Sementara monitor memancarkan cahaya (aditif: lebih banyak lebih terang, ketiganya penuh = putih), tinta menyerap cahaya (subtraktif: lebih banyak lebih gelap, ketiganya penuh = hitam, secara teori). Pencetakan proses empat warna, cyan, magenta, kuning, ditambah pelat "key" hitam, pertama kali digunakan secara komersial pada tahun 1890-an untuk ilustrasi surat kabar warna. Eagle Printing Ink Company umumnya dikreditkan dengan proses tinta basah empat warna pertama yang sejati pada tahun 1906. "K" berasal dari "key" (pelat yang mendaftarkan semua yang lain, secara tradisional pelat detail hitam), bukan dari "black", itulah sebabnya modelnya adalah CMYK dan bukan CMYB. Pelat key ada untuk empat alasan praktis: menggabungkan 100% C, M, dan Y dalam tinta nyata menghasilkan cokelat tua keruh, bukan hitam sejati, karena pigmen nyata tidak sempurna murni; hitam tiga warna membuang tinta dan memperlambat pengeringan; hitam tiga warna basah membuat kertas terlipat dan robek; dan tipe dan garis halus membutuhkan satu pelat kontras tinggi untuk ketajaman.

Matematika Konversi, Secara Singkat

HEX ↔ RGB sepele, bagi string hex menjadi tiga substring dua-karakter dan parse masing-masing sebagai bilangan bulat basis-16 dengan parseInt(hex, 16); balikkan dengan n.toString(16).padStart(2, '0'). RGB → HSL adalah matematika max/min: chroma = max(R,G,B) − min(R,G,B); lightness = (max + min) / 2; saturasi = chroma / (1 − |2L − 1|); hue dihitung melalui formula sepotong-sepotong yang memilih saluran dominan dan menerjemahkan posisinya menjadi sudut di salah satu dari enam sektor 60° dari lingkaran hue. (Beberapa implementasi menggunakan atan2, tetapi makalah Smith tahun 1978 secara sengaja menghindari trigonometri karena alasan kinerja, atan2 adalah instruksi mahal pada frame buffer 1970-an, dan formula sepotong-sepotong tetap ada karena memberikan jawaban yang sama lebih cepat.) HSL → RGB membalikkan proses melalui pemetaan linear sepotong-sepotong dengan chroma dan offset yang menerjemahkan triplet chroma ke titik yang tepat dari sumbu kecerahan. RGB ↔ HSV menggunakan kerangka yang sama tetapi dengan sumbu vertikal yang berbeda: V = M bukan L = (M+m)/2, dan S = Δ/M bukan pembagi yang sadar-kecerahan. RGB ↔ CMYK menggunakan formula sederhana K = 1 − max(R,G,B), lalu C, M, Y sebagai (1 − saluran − K) / (1 − K). Ini secara matematis konsisten-sendiri tetapi tidak menggambarkan bagaimana mesin cetak nyata akan mereproduksi warna, lihat peringatan cetak di bawah.

Masalah Round-Trip

Konversi #7A3D5C (HEX) → HSL → HEX. Anda tidak akan selalu mendapatkan #7A3D5C kembali. Alasannya sepenuhnya pejalan kaki. Pemotongan bilangan bulat: saluran HEX adalah bilangan bulat 0-255; konversi HSL menghasilkan float; membulatkan (1, 121.987, 47.512) ke bilangan bulat kehilangan informasi sub-pixel yang tidak dapat dipulihkan oleh round-trip. Ketidaktepatan Float64: satu-satunya tipe numerik JavaScript adalah float biner presisi-ganda IEEE 754, dengan mantissa 52-bit yang memberikan sekitar 15-17 digit desimal signifikan, banyak untuk satu konversi tetapi terakumulasi jika Anda merantai banyak operasi. Peta asimetris: beberapa triplet (R,G,B) yang berbeda dapat memetakan ke triplet (H,S,L) yang sama ketika chroma adalah nol (abu-abu apa pun memiliki hue tidak terdefinisi; konvensi memilih H = 0 atau melestarikan H sebelumnya). Untuk alat browser pragmatis, ini baik-baik saja, pengguna mengetik #7A3D5C, melihat (322°, 32%, 36%) dalam HSL, dan mendapatkan #7A3D5C (atau #7A3E5D, salah satu) kembali. Selama swatch yang ditampilkan sesuai dengan apa yang diharapkan mata, perjalanan itu baik. Tetapi layak untuk jujur: round-trip lossless tidak dijamin.

Ruang Warna CSS Modern di Luar sRGB

Selama beberapa dekade, "warna web" berarti sRGB dan hanya sRGB. Asumsi itu pecah pada 2015, ketika Apple mengirimkan iMac akhir-2015 sebagai "komputer konsumen pertama dengan layar wide-gamut bawaan" yang mendukung ruang warna Display P3 Apple. P3 berasal sebagai DCI-P3, didefinisikan pada 2005 oleh Digital Cinema Initiative untuk proyeksi teater. Varian Display P3 Apple mempertahankan primer DCI tetapi mengganti titik putih ke D65 (cocok dengan sRGB) dan mengadopsi kurva reproduksi nada sRGB untuk membuatnya cocok untuk tampilan desktop/seluler daripada teater gelap. Gamut Display P3 sekitar 25% lebih besar berdasarkan luas permukaan dibandingkan sRGB dan memungkinkan ponsel dan laptop menampilkan merah dan hijau yang lebih cerah secara terukur. Untuk memungkinkan CSS menggambarkan warna di luar sRGB, CSS Color Module Level 4 W3C memperkenalkan fungsi color() dengan parameter ruang warna eksplisit: color(srgb 1 0.5 0.2), color(display-p3 1 0.5 0.2), color(rec2020 1 0.5 0.2). Ruang warna yang telah ditetapkan termasuk srgb, srgb-linear, display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, xyz, xyz-d50, dan xyz-d65. Pada layar sRGB normal, warna P3 di luar gamut dipetakan ke ekuivalen sRGB terdekat yang dapat ditampilkan layar.

CSS Color Level 4 juga menambahkan fungsi kelas-satu lab(), lch(), oklab(), dan oklch(). lab() dan lch() menggunakan ruang warna CIE 1976 L*a*b*, distandarisasi oleh Commission Internationale de l'Éclairage pada 1976, ruang warna perseptual-seragam pertama yang banyak digunakan, dengan sumbu a* dan b* sesuai dengan pasangan opponen merah-hijau dan biru-kuning yang cocok dengan bagaimana sistem visual manusia sebenarnya mengkodekan warna. Pada Desember 2020, developer Swedia Björn Ottosson menerbitkan "A perceptual color space for image processing" di blognya dan memperkenalkan Oklab. Ottosson telah menghabiskan bertahun-tahun di industri game melakukan manipulasi warna sederhana dan menyimpulkan bahwa setiap ruang warna yang ada gagal pada mereka dengan cara tertentu. Oklab disetel khusus untuk operasi pemrosesan-gambar: gradien antara dua warna Oklab tetap halus secara perseptual, dan penyesuaian kecerahan di Oklab terasa seperti penyesuaian kecerahan pada mata manusia. Bentuk silinder, OKLCH, adalah apa yang sebenarnya ditulis sebagian besar desainer. Oklab ditambahkan ke CSS Color Level 4 setahun setelah posting blog, pada Desember 2021, dan sekarang adalah ruang interpolasi default untuk gradien CSS di browser yang mengimplementasikan Color Level 4. Palet warna Tailwind CSS v4 dihasilkan dari koordinat OKLCH. Fungsi color-mix() (CSS Color Module Level 5) dikirim di Safari 16.2 (Desember 2022), Chrome 111 (Maret 2023) dan Firefox 113 (Mei 2023), membuatnya tersedia sebagai baseline di seluruh browser sejak Mei 2023.

Mini-Sejarah Teori Warna

Konverter warna web duduk di akhir busur 360 tahun upaya untuk memahami warna secara sistematis. Tonggak penting: Newton (1665-66) menggunakan prisma kaca untuk membagi cahaya matahari menjadi spektrum terlihat dan mengidentifikasi tujuh warna dalam Opticks-nya. Goethe (1810) menerbitkan Theory of Colours, sebuah risalah anti-Newtonian yang lebih tertarik pada dimensi perseptual dan emosional warna daripada fisikanya, salah secara sains tetapi benar bahwa persepsi itu penting. Maxwell (1855/1861) seperti yang dibahas di atas. Itten (1961) menerbitkan The Art of Color di Bauhaus, mengkodifikasi roda warna 12-hue dan tujuh jenis kontras warna yang masih diajarkan di sekolah desain hari ini. Pantone (1963) memperkenalkan Pantone Matching System (PMS), mengubah komunikasi warna antara desainer dan pencetak menjadi katalog bernomor, nomor Pantone berarti warna yang sama persis di pencetak mana pun di dunia yang berlangganan sistem itu. Stack warna web mewarisi dari semua tradisi ini: Newton memberi kita spektrum terlihat, Maxwell primer aditif, Itten kosakata sekolah-desain skema komplementer dan analog, Pantone fakta praktis bahwa angka dapat mewakili pengalaman perseptual.

Aksesibilitas: Kontras WCAG pada Apa pun yang Anda Pilih

Setelah Anda memiliki warna, Anda perlu tahu apakah Anda dapat menempatkan teks di atasnya. WCAG 2.1 Success Criterion 1.4.3 (Contrast, Minimum) memerlukan rasio kontras 4.5:1 untuk teks normal dan 3:1 untuk teks besar (didefinisikan sebagai 18pt / 24 piksel CSS reguler, atau 14pt / 19 piksel CSS tebal). Rasio kontras dihitung dari pencahayaan relatif: (L1 + 0.05) / (L2 + 0.05), di mana L1 adalah pencahayaan warna yang lebih terang dan L2 yang lebih gelap, dan pencahayaan adalah jumlah berbobot dari saluran R, G, B yang gamma-decoded dengan bobot 0.2126, 0.7152, dan 0.0722 (sesuai dengan sensitivitas mata manusia terhadap panjang gelombang tersebut). WCAG 2.1 SC 1.4.6 (Enhanced) menaikkan bar ke 7:1 normal / 4.5:1 besar untuk kesesuaian AAA. WCAG 2.1 SC 1.4.11 mencakup kontras non-teks (komponen UI, indikator fokus, objek grafik yang diperlukan untuk pemahaman) pada 3:1. APCA yang lebih baru (Advanced Perceptual Contrast Algorithm) adalah pengganti tahap penelitian yang lebih cocok dengan kontras yang dirasakan untuk teks badan dan sedang dievaluasi untuk WCAG 3, ia mengembalikan nilai Lc terarah di mana ±60 adalah ekuivalen kasar dari 4.5:1 WCAG. Selalu periksa pasangan warna terhadap formula kontras yang sebenarnya, bukan mata Anda; desainer secara konsisten melebih-lebihkan seberapa mudah dibaca pasangan kontras rendah.

Peringatan Cetak Jujur: CMYK Naif Bukan CMYK Asli

Formula sederhana K = 1 − max(R,G,B) yang digunakan setiap konverter browser secara matematis konsisten-sendiri, round-trip RGB → CMYK → RGB mengembalikan RGB yang sama persis, modulo floating-point. Tetapi tidak menggambarkan bagaimana mesin cetak nyata akan mereproduksi warna itu di kertas. Konversi RGB-ke-CMYK nyata membutuhkan tiga hal yang tidak dapat dikirimkan alat ini: profil ICC target (mendefinisikan kombinasi pencetak + kertas, kertas coated menyerap tinta secara berbeda dari uncoated, dan mesin cetak komersial kelas atas menjalankan profil yang berbeda dari printer inkjet desktop), maksud rendering (perseptual, kolorimetri relatif, saturasi, kolorimetri absolut, mereka memperdagangkan bagaimana warna di luar gamut diperas masuk), dan model kolorimetri nyata (CIE Lab sebagai lapisan tengah independen-perangkat, dengan tabel lookup profil ICC penuh di setiap sisi). Inilah yang Adobe Photoshop lakukan di balik menu konversi CMYK-nya dan apa yang dilakukan perangkat lunak prepress profesional (Esko, Heidelberg Prinect, Caldera) untuk pekerjaan produksi. Formula naif baik-baik saja untuk memahami hubungan antara model warna aditif dan subtraktif, dan berguna untuk eksplorasi warna pas pertama, tetapi jika Anda mengirim file ke pencetak komersial, lakukan konversi di Photoshop (atau alat pilihan pencetak Anda) dengan profil ICC yang benar dimuat, perbedaan yang terlihat bisa substansial.

Warna Bernama dan Kisah rebeccapurple

CSS3 mengirim 147 warna bernama (148 jika Anda menghitung alias aqua = cyan), diwarisi dari campuran 16 warna bernama HTML 4 asli dan daftar yang lebih panjang dari X11 Window System. Warna bernama yang paling baru ditambahkan memiliki cerita. Pada 7 Juni 2014, putri pendukung standar web Eric Meyer, Rebecca, meninggal karena bentuk kanker otak agresif sehari setelah ulang tahunnya yang keenam. Warna favorit Rebecca adalah ungu. Dalam beberapa hari, anggota CSS Working Group, dipimpin oleh editor Tab Atkins Jr., mengusulkan menambahkan rebeccapurple (#663399) ke spesifikasi CSS Color Level 4 sebagai warna bernama, untuk mengenangnya. Warna ditambahkan pada Juni 2014 dan dikirimkan ke browser tak lama setelahnya. Nilai hex secara khusus dipilih sebagai nilai yang digunakan Eric Meyer sendiri di situs webnya. rebeccapurple sekarang berada di tabel warna-bernama setiap browser, satu-satunya warna peringatan dalam spesifikasi CSS, dan pengingat bahwa spesifikasi teknis kering web ditulis oleh orang-orang yang memperhatikan ketika salah satu dari mereka sedang berduka.

Pertanyaan umum

Format apa yang harus saya gunakan dalam CSS?

Ketiganya berfungsi di CSS modern. HEX paling kompak dan paling banyak digunakan. RGB berguna saat Anda perlu menghitung nilai dalam kode. HSL paling baik untuk membuat variasi warna · cukup sesuaikan lightness atau saturasi sambil mempertahankan hue.

Apa perbedaan antara #FFF dan #FFFFFF?

Hex tiga digit adalah singkatan di mana setiap digit digandakan: #FFF = #FFFFFF, #09C = #0099CC. Keduanya valid dalam CSS, tetapi enam digit lebih eksplisit dan mencakup semua 16 juta warna.

Bisakah saya mengonversi warna dengan transparansi (alpha)?

Alat ini mengonversi warna opak. Untuk alpha, CSS mendukung rgba(r,g,b,a) dan hsla(h,s%,l%,a), serta hex 8 digit (#RRGGBBAA). Kami dapat menambahkan dukungan alpha dalam pembaruan mendatang.

Apakah konversi CMYK saya akan cocok dengan yang keluar dari printer?

Mungkin tidak persis. Matematika sederhana yang digunakan alat ini secara kolorimetri konsisten-sendiri (RGB → CMYK → RGB mengembalikan RGB yang sama) tetapi tidak memperhitungkan profil ICC dari kombinasi pencetak + kertas spesifik Anda, maksud rendering (perseptual, kolorimetri relatif, dll.), atau karakteristik dot-gain mesin cetak. Untuk pekerjaan yang terikat cetak, lakukan konversi CMYK akhir di Photoshop atau alat pilihan pencetak Anda dengan profil ICC yang benar dimuat, perbedaan yang terlihat antara konversi naif dan yang sadar-profil bisa substansial, terutama untuk merah dan biru jenuh di tepi gamut CMYK.

Bagaimana dengan OKLCH dan ruang warna CSS modern?

CSS modern mendukung oklab(), oklch(), lab(), lch(), dan color(display-p3 ...) untuk pekerjaan warna gamut lebih luas dan perseptual-seragam. Dukungan browser untuk itu baseline sejak kira-kira 2023 (Safari 16.4, Chrome 111, Firefox 113 untuk oklch(); color() dengan ruang bernama dikirim sedikit lebih awal di Safari). Mereka belum ditampilkan di konverter ini, sebagian karena matematika lebih sulit ditampilkan dalam bentuk kompak (Lab memiliki sumbu bertanda yang tidak dipetakan ke slider 0-100%) dan sebagian karena sebagian besar alur kerja produksi saat ini masih menargetkan sRGB. Jika Anda bekerja di sistem desain modern yang menggunakan OKLCH (Tailwind CSS v4, misalnya), gunakan tooling sistem itu untuk generasi warna; konverter ini adalah jawaban yang tepat untuk pekerjaan sRGB legacy.

Apakah data saya dikirim ke mana pun?

Tidak. Konversi warna adalah aritmetika murni, tidak ada yang dapat dilakukan server yang tidak dapat dilakukan browser Anda. Setiap konversi berjalan secara lokal dalam JavaScript. Anda dapat memverifikasi di tab Network DevTools saat Anda mengubah warna: tidak ada permintaan keluar. Bawa halaman offline (mode pesawat) setelah dimuat dan konverter akan tetap bekerja.

Alat terkait