Konverter Warna

Cara Menggunakan Konverter Warna

1. 1. Masukkan warna. Tempel atau ketik dalam notasi apa pun yang diterima kotak ini — #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%), atau nama CSS seperti rebeccapurple. 51 102 153 tanpa keterangan dibaca sebagai RGB.
2. 2. Atau gunakan pemilih. Pemilih menetapkan warna dan mempertahankan transparansi apa pun yang sudah Anda ketik.
3. 3. Salin yang Anda butuhkan. Setiap notasi memiliki tombol salinnya sendiri, dan Salin CSS memberi Anda nilai HEX, RGB, HSL, dan OKLCH sebagai properti kustom untuk stylesheet.
4. 4. Periksa namanya. Alat menampilkan kata kunci CSS jika warna Anda tepat sama dengan salah satunya (rebeccapurple adalah #663399) dan kata kunci terdekat jika tidak.

Cara Konversi Bekerja

Semuanya dikonversi melalui sRGB, ruang warna tempat browser melukis. Kode HEX hanyalah RGB dalam basis 16: #336699 adalah merah 0x33 = 51, hijau 0x66 = 102, biru 0x99 = 153. Notasi lainnya menyusun ulang ketiga angka yang sama.

• HSL menggambarkan warna sebagai rona (sudut pada roda warna, 0–360°), saturasi, dan kecerahan. Dengan kanal terbesar max dan terkecil min (masing-masing dibagi 255), kecerahan adalah (max + min) ÷ 2, dan saturasi adalah (max − min) ÷ (1 − |2L − 1|). Rona berasal dari kanal mana yang terbesar.
• HSV (juga disebut HSB) mempertahankan rona yang sama tetapi mengukur nilai sebagai max dan saturasi sebagai (max − min) ÷ max. Ini adalah model yang paling sering digambar oleh pemilih warna.
• HWB adalah kadar putih (min) dan kadar hitam (1 − max) di atas rona murni; lebih mudah dipahami daripada HSL ketika Anda menginginkan tint atau shade. Jika kadar putih ditambah kadar hitam mencapai 100%, hasilnya adalah abu-abu.
• CMYK ditampilkan sebagai konversi perangkat yang sederhana: K = 1 − max, lalu masing-masing C, M, dan Y adalah (1 − kanal − K) ÷ (1 − K). Tidak melibatkan tinta, kertas, atau profil apa pun.
• OKLCH adalah kecerahan, kroma, dan rona dalam ruang OKLab karya Björn Ottosson, yang didukung CSS Color 4 sebagai oklch(). Langkah L yang sama tampak jauh lebih mirip dengan kecerahan yang sama daripada di RGB atau HSL.

Mengapa CMYK di Sini Bukan Warna Cetak

Layar menambahkan cahaya merah, hijau, dan biru; pencetak menempatkan tinta sian, magenta, kuning, dan hitam di atas kertas. Kedua gamut itu berbeda, dan tinta di halaman bergantung pada kertas, mesin cetak, dan profil ICC yang mendeskripsikannya. Rumus yang bekerja dari RGB saja tidak dapat mengetahui semua itu, jadi CMYK di atas adalah notasi, bukan prediksi: biru layar murni #0000ff menjadi 100% sian dan 100% magenta, yang tercetak sebagai ungu yang lebih kusam. Untuk poster atau figur cetak, berikan artwork dalam RGB kepada pencetak Anda dan minta profil mereka, atau konversikan dengan profil itu di aplikasi desain.

Pembulatan, Pembatasan, dan Transparansi

• Pembulatan. HEX dan rgb() menyimpan bilangan bulat 0 hingga 255, jadi warna yang diketik sebagai hsl(210 50% 41%) dibulatkan ke nilai 8-bit terdekat. Mengonversi nilai itu kembali menghasilkan HSL yang sedikit berbeda — kisi 8-bit lebih kasar daripada HSL.
• Kanal di luar rentang. Nilai di luar rentang dibatasi, seperti yang dilakukan browser: rgb(300 0 0) adalah #ff0000, dan kanal negatif menjadi 0.
• Satuan rona. deg, grad, rad, dan turn diterima, dan rona berputar: −150° sama dengan 210°.
• Alfa. #rrggbbaa, #rgba, dan / 50% semuanya berfungsi. Alfa disimpan dengan 8 bit dalam HEX 8 digit, jadi 50% menjadi 80 dan terbaca kembali sebagai 50,2%.

Pertanyaan yang Sering Diajukan

Bagaimana cara mengonversi HEX ke RGB?

Pisahkan enam digit menjadi tiga pasangan dan baca setiap pasangan sebagai angka basis 16: #336699 adalah 33, 66, dan 99, yaitu 51, 102, dan 153. Tempel kode HEX ke kotak dan nilai RGB langsung muncul, bersama HSL, HWB, HSV, CMYK, dan OKLCH.

Apa perbedaan antara HSL dan HSV?

Keduanya menggunakan sudut rona yang sama. HSL menempatkan putih pada kecerahan penuh berapa pun saturasinya, sehingga bagian tengahnya adalah warna murni; HSV menempatkan warna murni pada nilai dan saturasi penuh, dan putih pada saturasi nol. HSL adalah yang didukung CSS sebagai hsl(), sedangkan HSV (atau HSB) adalah yang ditampilkan kebanyakan pemilih warna.

Apakah nilai CMYK akurat untuk pencetakan?

Tidak. Ini adalah konversi naif dari RGB tanpa tinta, kertas, atau profil ICC, jadi menggambarkan angka yang sama secara berbeda daripada memprediksi apa yang akan dicetak mesin. Warna di luar gamut pencetak, seperti biru dan hijau layar yang cerah, akan tercetak lebih kusam. Gunakan profil pencetak Anda untuk apa pun yang penting.

Apa arti nama CSS terdekat?

CSS mendefinisikan 148 kata kunci warna. Jika warna Anda tepat sama dengan salah satunya, alat menampilkannya tanpa keterangan. Jika tidak, alat menampilkan kata kunci yang paling dekat dalam OKLab, ruang yang dibangun agar jarak sesuai dengan perbedaan yang dirasakan — berguna untuk memberi nama warna dalam komentar, bukan sebagai pengganti kodenya.

Mengapa nilai HSL saya sedikit berubah setelah konversi bolak-balik?

HEX dan RGB menyimpan setiap kanal sebagai salah satu dari 256 nilai, dan HSL tidak terpetakan satu-satu pada kisi itu. Warna yang diketik dalam HSL dibulatkan ke nilai RGB terdekat, dan HSL yang ditampilkan dihitung dari nilai yang sudah dibulatkan. Jika mulai dari kode HEX, setiap konversi akurat hingga presisi yang ditampilkan.

Apakah data warna saya dikirim ke mana pun?

Tidak. Konversinya adalah aritmetika biasa di browser Anda; apa pun yang Anda ketik tidak diunggah atau disimpan.