Color Converter — Penukar HEX, RGB, HSL Dalam Talian _

Apakah penukaran warna?

Setiap warna yang dirender oleh pelayar anda akhirnya adalah triple sRGB — tiga nombor antara 0 dan 255 untuk saluran merah, hijau, dan biru, ditambah alfa pilihan. Spesifikasi CSS Color Level 4 mentakrifkan beberapa format teks yang perjalanan pergi-balik kepada triple yang sama, ditambah ruang OKLCH yang seragam secara persepsi. Alat ini membaca mana-mana daripadanya, menukar kepada kesemua daripadanya, dan melaporkan nisbah kontras WCAG 2.1 terhadap warna kedua supaya anda boleh menghantar antara muka yang boleh diakses dengan yakin.

Bagaimana penukaran warna berfungsi?

Penukaran adalah siri transformasi linear dan bukan linear yang takrifkan dengan baik. Setiap langkah berjalan di pelayar anda — tiada input yang sampai ke pelayan kami:

1. Input anda dihurai. Alat ini secara automatik mengesan HEX 3, 4, 6, atau 8 digit, bentuk berfungsi rgb()/rgba()/hsl()/hsla()/hsv()/hwb() dalam sama ada sintaks koma lama atau sintaks slash-alfa moden, atau mana-mana 150 warna CSS bernama (rebeccapurple termasuk).
2. Warna yang dihurai dinormalkan kepada sRGB kanonik — empat titik terapung {r, g, b, a} masing-masing dalam julat 0–1. Ini adalah sumber kebenaran tunggal yang setiap format output diterbitkan daripadanya.
3. HEX datang daripada membulatkan setiap saluran kepada nilai bait 0–255-nya dan menyertai digit hex. RGB / RGBA mencetak bait yang sama. HSL dan HSV menggunakan algoritma koordinat silinder W3C piawai; HWB memperoleh rona daripada HSV, keputihan daripada min(r, g, b), dan kehitaman daripada 1 - max(r, g, b).
4. CMYK adalah anggaran naif — k = 1 - max(r, g, b), kemudian c, m, y daripada saluran sisa. Ia sesuai untuk pratonton skrin tetapi bukan untuk cetak: output CMYK sebenar memerlukan profil ICC yang alat ini sengaja tidak membenamkan.
5. OKLCH mengikuti laluan hadapan css-color-4: sRGB dilinearkan, didarab melalui matriks LMS, diakar-kubik, didarab melalui matriks LMS-ke-OKLab, dan akhirnya ditukar daripada OKLab segi empat sama kepada OKLCH kutub. OKLCH adalah seragam secara persepsi, menjadikannya ruang yang tepat untuk mereka palet yang kelihatan seimbang kepada mata manusia.

Mengapa menggunakan penukar warna ini?

• Privasi: setiap penukaran berjalan di pelayar anda menggunakan JavaScript biasa. Warna yang anda tampalkan tidak pernah meninggalkan peranti anda, yang penting untuk kerja jenama yang belum diterbitkan, sistem reka bentuk dalaman, dan mock klien di bawah NDA.
• Penyerahan pereka kepada pembangun: tampalkan HEX daripada Figma dan baca semula rentetan rgb() untuk konfigurasi Tailwind, rentetan hsl() untuk sifat tersuai CSS, atau rentetan oklch() untuk palet moden — setiap format dalam satu tempat, tanpa menyalin-tampal antara tab.
• Ketepatan WCAG: pemeriksa kontras menggunakan formula luminans relatif WCAG 2.1 yang tepat dan ambang AA (4.5 / 3.0) dan AAA (7.0 / 4.5) yang diterbitkan untuk teks biasa dan besar. Nisbah yang dilaporkan sepadan dengan kalkulator manual sehingga 0.01.
• Mod gelap dan terbitan palet: HSL dan OKLCH mendedahkan kecerahan sebagai saluran tunggal, jadi mudah untuk menganjak warna jenama ke atas atau ke bawah paksi kecerahan untuk mendapatkan token mod gelap yang sepadan atau menjana tangga palet 10 langkah daripada satu benih tunggal.

Apakah aplikasi biasa penukaran warna?

Penukaran warna muncul merentas pembangunan web, reka bentuk, dan kerja kebolehcapaian:

• Sistem reka bentuk: menukar HEX jenama kepada token HSL dan OKLCH yang sepadan untuk skala sifat tersuai CSS, kemudian mengesahkan bahawa setiap gabungan token lulus WCAG AA terhadap latar belakang halaman.
• Audit kebolehcapaian: menampalkan pasangan latar depan dan latar belakang daripada skrin produk sebenar dan membaca nisbah kontras serta keputusan AA/AAA untuk teks berat biasa dan berat besar dalam satu pandangan.
• Perjalanan pergi-balik merentas alat: menarik warna daripada pemilih tangkap layar (HEX), menampalnya di sini, dan menyalin rentetan hsl() atau oklch() terus ke dalam Tailwind, token Figma, atau tema CSS-in-JS.

Bagaimana contoh penukaran warna kelihatan?

Ambil warna terkenal rebeccapurple. Carian warna bernama menyelesaikannya kepada #663399. Penukaran RGB memberikan rgb(102, 51, 153). Penukaran HSL memberikan hsl(270, 50%, 40%) — rona violet, separuh tepu, empat persepuluh cerah. Memeriksa warna itu terhadap putih tulen dengan alat kontras mengembalikan nisbah hampir 7.39, yang melebihi AAA (7.0) untuk teks biasa dan AAA (4.5) untuk teks besar — pilihan latar depan yang kuat dan boleh diakses. Perjalanan pergi-balik #663399 melalui RGB → HSL → RGB → HEX mengembalikan rentetan asal dengan tepat, bait demi bait.

Gunakan penukar ini sebagai rujukan pantas untuk sebarang warna yang anda temui — dalam kod, dalam fail reka bentuk, atau dalam tangkap layar — dan pemeriksa kontras sebagai semakan kewarasan sebelum menghantar. Semuanya berjalan secara setempat, tiada yang dilog, dan matematik penukaran mengikut spesifikasi W3C dan WCAG yang diterbitkan supaya nombor sepadan dengan apa yang alat audit atau devtools pelayar anda laporkan.