Color Picker & Converter

Pemilih & Penukar Warna

Pilih secara visual atau tampal sebarang nilai — HEX, RGB, HSL, OKLCH dan OKLAB kekal selari. Termasuk pemeriksa kontras WCAG 2.2 dan penjana palet berasaskan OKLCH. Berjalan sepenuhnya dalam pelayar anda.

Pemilih & Penukar Warna — TL;DR

Pilih secara visual atau tampal sebarang nilai — HEX, RGB, HSL, OKLCH dan OKLAB kekal selari. Termasuk pemeriksa kontras WCAG 2.2 dan penjana palet berasaskan OKLCH. Berjalan sepenuhnya dalam pelayar anda.

Tampal nilai hex anda (cth. #ff5722) ke dalam medan HEX — baris RGB akan dikemas kini serta-merta. Begitu juga, tampal rgb(255 87 34) ke dalam medan RGB dan HEX, HSL, OKLCH dan OKLAB semuanya akan selari. Penukaran adalah dua hala merentas setiap format yang disokong.

OKLCH ialah ruang warna CSS Color Module Level 4 yang menggunakan kecerahan persepsi (L), chroma (C), dan rona (h) — seperti HSL, tetapi seragam dari segi persepsi. Dua warna OKLCH dengan nilai L yang sama kelihatan sama cerah, walaupun pada rona berbeza. Itu menjadikan token reka bentuk, palet yang dijana, dan tanjakan warna boleh diakses jauh lebih boleh diramal berbanding HSL. Semua pelayar evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) menyokongnya.

Nilai warna tidak pernah meninggalkan peranti anda. Buka DevTools → Network dan anda akan melihat sifar permintaan keluar semasa penukaran, pemilihan, penjanaan palet atau pemeriksaan kontras.

HEX
RGB
HSL
OKLCH
OKLAB
Bernama

Palet

Kontras WCAG 2.2

Teks
Latar belakang
—
Pratonton
Sampel tajuk besar
Sampel teks badan — the quick brown fox jumps over the lazy dog.

Direka untuk aliran kerja sebenar

Daripada sistem reka bentuk hingga audit kebolehcapaian — setiap format dan semakan yang anda perlukan, di satu tempat.

Enam ruang warna

Tukar dua hala antara HEX (3 / 4 / 6 / 8 digit), RGB(A), HSL(A), OKLCH, OKLAB dan warna bernama CSS. Rentetan output mengikut sintaks CSS Color Module Level 4 — tampal terus ke dalam stylesheet anda.

Pemeriksa kontras WCAG 2.2

Lihat nisbah kontras antara mana-mana dua warna dengan lencana lulus/gagal satu klik untuk AA (4.5 : 1) dan AAA (7 : 1), pada saiz teks biasa dan besar. Pengiraan menepati rujukan W3C: pelinearan sRGB, kecerahan relatif, kemudian (L1+0.05)/(L2+0.05).

EyeDropper — sampel mana-mana piksel

Klik eyedropper untuk mengambil sampel sebarang warna pada skrin anda — reka bentuk, tangkapan skrin, foto, malah tab pelayar lain. Menggunakan API EyeDropper asli pada pelayar Chromium.

Palet berasaskan OKLCH

Jana 9 langkah tints dan shades serta harmoni complementary, triadic dan analogous — diterbitkan dalam OKLCH supaya setiap langkah berjarak sama dari segi persepsi (tidak seperti HSL, di mana kecerahan berubah-ubah).

Privasi secara reka bentuk

Setiap penukaran berjalan dalam JavaScript pada peranti anda. Tiada apa-apa dimuat naik, dilog, atau dihantar kepada pihak ketiga — buka DevTools → Network jika anda ingin mengesahkannya sendiri.

Dibina untuk kelajuan

JavaScript tulen, tiada framework runtime. Muatan dingin di bawah 50 KB gzipped; penukaran dan penjanaan palet selesai dalam satu milisaat pada komputer riba berusia lima tahun.

Cara menggunakan pemilih warna

Empat cara untuk bermula, setiap format selari.

  1. 1

    Pilih secara visual

    Seret di dalam petak ketepuan/nilai untuk memilih bayangan, luncurkan bar rona di bawah untuk menukar warna asas, dan gunakan peluncur alfa untuk kelutsinaran. Setiap format di sebelah kanan dikemas kini serta-merta.

  2. 2

    Tampal sebarang nilai

    Tampal HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) atau bahkan warna bernama CSS (tomato) ke dalam input yang sepadan — pemilih dan format lain semuanya selari.

  3. 3

    Sampel dengan eyedropper

    Klik butang eyedropper untuk menangkap mana-mana piksel pada skrin anda — tab lain, tangkapan skrin, foto, ikon. Menggunakan API EyeDropper asli pada Chrome, Edge dan Opera.

  4. 4

    Salin atau semak kontras

    Klik ikon salin di sebelah mana-mana format untuk meletakkannya pada papan keratan anda. Atau tatal ke bahagian kontras WCAG 2.2 untuk menyemak sama ada gabungan latar depan / latar belakang anda lulus AA atau AAA pada saiz teks biasa dan besar.

Dibina untuk pereka, pembangun dan pengaudit kebolehcapaian

Alat warna yang sesuai dengan empat aliran kerja biasa.

Pengarangan token sistem reka bentuk

Tukar nilai HEX jenama kepada OKLCH supaya setiap bayangan dalam tanjakan token anda mempunyai langkah kecerahan persepsi yang sama. Tampal output OKLCH terus ke dalam CSS anda — tiada prapemproses diperlukan.

Audit kebolehcapaian WCAG

Letakkan pasangan latar depan / latar belakang dan baca nisbah kontras serta lencana AA / AAA. Tangkap gabungan yang gagal sebelum ia dilancarkan — memenuhi ambang 4.5 : 1 biasa / 7 : 1 dipertingkatkan yang dimandatkan W3C.

Penukaran CSS front-end

Mempunyai HEX daripada mockup pereka tetapi memerlukan HSL untuk konfigurasi Tailwind atau OKLCH untuk stylesheet moden? Tampal sekali, salin dalam mana-mana format. Rentetan output adalah sintaks CSS Color Module Level 4 yang sah.

Penerokaan palet

Pilih warna asas dan lihat serta-merta sembilan tints dan shades yang berjarak persepsi serta harmoni complementary, triadic dan analogous — dijana dalam OKLCH supaya setiap langkah kelihatan sama cerah.

100% peribadi — berjalan dalam pelayar anda

Nilai warna tidak pernah meninggalkan peranti anda. Buka DevTools → Network dan anda akan melihat sifar permintaan keluar semasa penukaran, pemilihan, penjanaan palet atau pemeriksaan kontras.

  • Setiap penukaran (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) berjalan sebagai JavaScript pada mesin anda — formula boleh dilihat dalam sumber halaman.
  • API EyeDropper hanya mengembalikan warna yang anda klik secara eksplisit; pelayar mengendalikan kebenaran dan tidak pernah membenarkan halaman melihat piksel sewenang-wenangnya.
  • Tiada log masuk, tiada telemetri pada nilai warna, tiada API warna pihak ketiga. Tapak ini mematuhi GDPR secara langsung.

Panduan berkaitan

Tutorial pilihan untuk pereka, pembangun dan pasukan kebolehcapaian.

Soalan lazim

Bagaimana saya menukar HEX kepada RGB?

Tampal nilai hex anda (cth. #ff5722) ke dalam medan HEX — baris RGB akan dikemas kini serta-merta. Begitu juga, tampal rgb(255 87 34) ke dalam medan RGB dan HEX, HSL, OKLCH dan OKLAB semuanya akan selari. Penukaran adalah dua hala merentas setiap format yang disokong.

Apakah OKLCH dan kenapa saya patut menggunakannya?

OKLCH ialah ruang warna CSS Color Module Level 4 yang menggunakan kecerahan persepsi (L), chroma (C), dan rona (h) — seperti HSL, tetapi seragam dari segi persepsi. Dua warna OKLCH dengan nilai L yang sama kelihatan sama cerah, walaupun pada rona berbeza. Itu menjadikan token reka bentuk, palet yang dijana, dan tanjakan warna boleh diakses jauh lebih boleh diramal berbanding HSL. Semua pelayar evergreen (Chrome 111+, Safari 15.4+, Firefox 113+) menyokongnya.

Adakah keputusan kontras WCAG boleh dipercayai?

Ya. Kami menggunakan algoritma daripada WCAG 2.2 §1.4.3: linearkan setiap saluran sRGB, kira kecerahan relatif (0.2126·R + 0.7152·G + 0.0722·B), kemudian (L_lighter + 0.05) / (L_darker + 0.05). AA lulus pada 4.5 : 1 untuk teks biasa dan 3 : 1 untuk teks besar (18 pt+ atau 14 pt+ tebal). AAA lulus pada 7 : 1 dan 4.5 : 1 masing-masing.

Bolehkah saya mengambil sampel warna dari imej atau aplikasi lain?

Ya — klik butang Eyedropper untuk melancarkan API EyeDropper terbina dalam pelayar. Anda boleh sampel mana-mana piksel di mana-mana pada skrin: tab pelayar lain, reka bentuk Figma, bingkai video, malah tangkapan skrin. Kini disokong pada Chrome, Edge dan Opera; Firefox dan Safari undur dengan baik (butang dilumpuhkan).

Adakah apa-apa dihantar ke pelayan anda?

Tidak. Pemilih, setiap penukaran, penjana palet dan pemeriksa kontras semuanya berjalan dalam pelayar anda. Tiada nilai warna, sampel imej, atau teks pernah dihantar. Anda boleh membuka DevTools → Network dan sahkan tiada permintaan keluar semasa penggunaan.