RGB sahaja tidak mencukupi: notasi warna HSL, CMYK, dan OKLCH

Dalam artikel sebelumnya, Bagaimana Komputer Mencipta Warna: RGB, HEX, dan Nombor Binari, kita melihat bahawa warna hanyalah tiga nombor — merah, hijau, biru, masing-masing 0–255. Skrin beroperasi dengan nombor-nombor tersebut dengan baik. Namun apabila manusia mula bekerja dengan warna, RGB menjadi tidak selesa dengan cepat.

RGB Mudah, Tetapi Tidak Intuitif

“Merah yang sedikit lebih terang.” Bagaimana anda membuat itu dengan RGB? Anda perlu menaikkan ketiga-tiga saluran sedikit secara serentak. “Saya hanya mahu menurunkan ketepuan sedikit” — anda tidak tahu saluran mana yang perlu diubah hanya dengan melihat RGB. “Cetak warna ini dengan tepat pada kertas” — mustahil dilakukan dengan RGB sahaja.

Notasi warna lain muncul untuk menyelesaikan masalah-masalah ini.

HSL — Cara Manusia Berfikir Tentang Warna

HSL memisahkan warna kepada tiga komponen: rona · ketepuan · kecerahan. hsl(14, 100%, 60%) ialah warna yang sama dengan #FF5733, tetapi setiap komponen jelas asal-usulnya.

Jika RGB adalah bahasa komputer — HSL adalah bahasa pereka. Warna yang sama boleh dikendalikan dari perspektif apa yang ingin anda ubah.

Hue — Rona Ialah Bulatan 360°

Rona berputar seperti jam — dari 0° hingga 360°. 0° dan 360° adalah merah yang sama.

Saturation — Ketepuan Adalah Kepekatan Warna

Walaupun rona sama, mengurangkan ketepuan akan menjadikan warna semakin mendekati kelabu.

Lightness — Kecerahan dari Hitam ke Putih

L 0% sentiasa hitam, 100% sentiasa putih. 50% adalah kecerahan “asal” sesebuah warna.

Kegunaan Sebenar HSL — Membina Palet Warna

Kekalkan Hue yang sama dan ubah L sahaja — anda akan mendapat sekumpulan warna yang serasi secara semula jadi. Untuk melakukan perkara yang sama dengan RGB, anda perlu mengira setiap 9 nilai secara manual. Dengan HSL, cukup ubah L dari 12% hingga 92% secara berperingkat.

Kedua-dua palet di atas boleh dibuat dalam satu blok kod.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... Ubah L sebanyak 10 setiap langkah */
}

Inilah tempat HSL paling berguna ketika membina sistem reka bentuk.

CMYK — Bahasa Dakwat

Untuk meletakkan warna pada kertas, bukan skrin, sistem yang berbeza diperlukan sepenuhnya. CMYK ialah nisbah empat dakwat yang digunakan oleh percetakan.

Mengapa hitam dinamakan “K” dan bukan “B”? Kerana B boleh mengelirukan dengan Blue. Selain itu, K berasal daripada istilah percetakan “Key plate” — plat rujukan yang digunakan untuk menjajarkan dakwat-dakwat lain.

Cahaya Semakin Terang Apabila Ditambah, Dakwat Semakin Gelap

Perbezaan terbesar antara RGB dan CMYK ialah cara percampurannya.

Dakwat merah kelihatan merah kerana ia menyerap cahaya lain dan hanya memantulkan merah. Dakwat bekerja dengan mengurangkan cahaya. Itulah sebabnya mencampurkan lebih banyak dakwat menghasilkan warna yang lebih gelap. Secara teorinya, mencampurkan CMY sepenuhnya seharusnya menghasilkan hitam, tetapi sebenarnya menghasilkan perang keruh. Oleh itu, dakwat hitam sebenar (K) disediakan secara berasingan.

Di Mana CMYK Digunakan

Jika anda bekerja dengan reka bentuk skrin, anda jarang akan menyentuh CMYK. Ia hanya muncul semasa kerja cetakan.

• Menghantar fail ke percetakan — Kad nama, poster, buku, pembungkusan. Percetakan akan menukar fail RGB kepada CMYK.
• Kerja cetakan dalam Photoshop / Illustrator — Tetapkan mod warna kepada CMYK dari awal.
• Panduan jenama — Nyatakan nilai HEX untuk skrin dan nilai CMYK untuk cetakan bersama-sama, supaya warna jenama kelihatan serupa pada kedua-dua medium.

Sebab Warna Skrin dan Warna Cetak Berbeza — Gamut

Julat warna yang boleh dipaparkan skrin (gamut RGB) dan yang boleh dihasilkan oleh dakwat (gamut CMYK) adalah berbeza. Merah jambu neon cerah di skrin tidak akan kelihatan sama setelah dicetak — kerana warna itu tidak boleh dihasilkan dengan dakwat.

Itulah sebabnya pereka cetakan hanya memilih warna dalam julat CMYK sebelum memulakan kerja. Reka bentuk yang dibuat dalam RGB sering kelihatan pudar apabila dicetak.

Cara Menulis Nilai CMYK

Nyatakan peratusan setiap dakwat yang akan disemburkan. 0% bermakna tiada, 100% bermakna penuh.

Hitam pekat menggunakan K 100% sahaja akan menghasilkan hitam keruh yang hampir kelabu. Itulah sebabnya percetakan menambah CMY bersama-sama untuk menghasilkan hitam yang lebih dalam.

OKLCH — Koordinat Manusia

Model warna yang muncul secara meluas pada tahun 2020-an ini. Kata kuncinya satu — “semula jadi di mata manusia.”

Tiga koordinatnya kelihatan serupa dengan HSL:

• L — Lightness (kecerahan, 0~1)
• C — Chroma (ketepuan, 0~kira-kira 0.4)
• H — Hue (rona, 0~360°)

Namun HSL mempunyai masalah tersembunyi. Walaupun L = 50% sama, kecerahan yang dirasakan berbeza-beza mengikut warna. Mari kita bandingkan secara langsung.

Ringkasnya — RGB dan HSL adalah koordinat mesin. OKLCH adalah koordinat manusia.

Peranan L · C · H Masing-masing

Mari lihat apa yang berlaku apabila hanya satu koordinat diubah pada warna yang sama.

Di Mana Ia Digunakan

• Palet dengan kecerahan seragam — Apabila anda ingin menyesuaikan 8 warna kategori pada kecerahan yang sama
• Penukaran mod gelap/cerah automatik — Membalikkan nilai L sahaja menghasilkan tema gelap yang semula jadi
• Kebolehaksesan — Perbezaan kecerahan antara teks dan latar belakang boleh diramalkan dengan tepat
• Kecerunan — Aliran semula jadi tanpa jalur kelabu di tengah

Ia telah diterima pakai secara rasmi sejak CSS Color Level 4, dan boleh digunakan terus di pelayar terkini.

.btn { background: oklch(67% 0.18 30); }       /* oren */
.btn:hover { background: oklch(60% 0.18 30); } /* Turun L sebanyak 7 → gelap tepat sebanyak itu */

Apa yang Digunakan dan Bila

Untuk kebanyakan kerja digital, RGB/HEX sudah mencukupi. HSL berguna semasa membina palet, dan OKLCH amat membantu untuk reka bentuk mod gelap/cerah.

Cara fns Mengendalikan Warna

Setelah anda tahu bahawa warna adalah nombor, langkah seterusnya ialah meletakkan warna yang kerap digunakan di hujung jari anda. fns menyatukan aliran mengambil, menyimpan, dan menggunakan semula warna di sebalik satu kekunci.

Eyedropper — Pilih Warna dari Mana-mana di Skrin — ⌘+Shift+K

Eyedropper ialah alat yang menangkap warna tepat mana-mana piksel di skrin. Ia seperti membawa pemilih warna yang biasanya hanya ada dalam Figma/Photoshop ke seluruh sistem.

Tekan ⌘+Shift+K dan Eyedropper fns akan muncul di mana sahaja pada skrin. Satu piksel dalam lakaran reka bentuk, kawasan tertentu dalam foto, warna latar belakang aplikasi lain — gerakkan tetikus dan klik untuk menangkap warna tepat di tempat itu.

• Warna disimpan ke papan klip secara automatik setiap kali anda klik. Tiada tindakan “salin” yang berasingan diperlukan.
• Anda boleh memilih format mana — RGB / HEX / HSL / CMYK / OKLCH — yang akan masuk ke papan klip daripada widget Eyedropper.
• Pratonton visual warna yang ditangkap dan warna sistem yang hampir juga dipaparkan.

Eyedropper → simpan automatik ke papan klip → ambil semula dari pemilih papan klip — aliran tidak terputus. Tidak perlu membuka Digital Color Meter Mac yang berasingan, atau menekan pintasan salin setiap kali.

Papan Klip Mengenali Warna Secara Automatik

Sejarah papan klip fns mengesan secara automatik sama ada teks yang disalin adalah kod warna. Ia mengenali tanpa mengira format.

Apabila anda mengambil semula warna yang disalin dari sejarah, sukar untuk mengingati warna apa itu hanya dengan melihat teks. fns memaparkan cip warna kecil di sebelah setiap entri supaya anda boleh melihatnya sekilas.

Tapis Warna Sahaja

Dengan satu kekunci, anda boleh menapis kod warna sahaja daripada sejarah papan klip. Apabila anda ingin melihat hanya warna yang baru digunakan semasa kerja reka bentuk, anda tidak perlu mencari di antara teks, URL, dan kod.

• Gunakan kata kunci penapis seperti color: dalam pemilih yang sama → hanya entri warna dipaparkan
• Cari mengikut nama warna — mencari “blue” atau “red” menapis warna dalam keluarga tersebut
• Diisih dengan warna serupa dikelompokkan secara visual

Tukar Satu Warna kepada Format Lain

Anda boleh menukar dan mengambil warna yang sama dalam notasi yang berbeza. Apabila anda menyalin #FF5733 dari Figma dan ingin menampalnya sebagai rgb(...) dalam CSS, pilih entri itu dalam pemilih papan klip fns dan tekan satu pintasan untuk penukaran automatik.

Anda tidak perlu membuka penukar setiap kali bertukar antara Figma (HSB) dan CSS (HSL/HEX/OKLCH).

Pengembangan Teks dan Pengelompokan

Daftarkan warna jenama yang kerap digunakan sebagai singkatan teks.

Singkatan yang sama berfungsi di mana sahaja — medan input warna CSS, Figma, mesej Slack, editor kod. Masa yang dihabiskan mencari dan menyalin warna daripada panduan jenama setiap kali pun hilang.

Cuba fns untuk mengurangkan masa yang selama ini dihabiskan membuka penukar dan memindahkan kod warna ke format lain.

Ingin tahu dari mana asalnya nombor-nombor ini — asas tiga saluran RGB, nombor binari, dan notasi HEX? Mulakan dengan Bagaimana Komputer Mencipta Warna: RGB, HEX, dan Nombor Binari.