Pratonton 4 Ciri Warna CSS Baru

Artikel ini meneroka perubahan terkini dalam medan warna CSS dan kemungkinan perubahan masa depan, dengan jumlah kandungan yang mengejutkan. Kaedah baru dan akan datang untuk menentukan warna adalah dalam bilangan cara yang lebih besar daripada yang sedia ada. Mari kita lihat dengan cepat.

Pertama sekali, adalah penting untuk menekankan bahawa kandungan ini sangat rumit. Saya secara peribadi merasa sukar difahami sepenuhnya. Tetapi inilah beberapa perkara utama:

• Sehingga semua perubahan yang akan datang, kami hanya mempunyai RGB sebagai model warna, dan semuanya berdasarkan itu.
• Kami mempunyai "ruang warna" yang berbeza untuk mengendalikannya secara berbeza (contohnya, fungsi RGB () memetakan model warna RGB ke kiub dengan koordinat linear, fungsi HSL () memetakan model warna RGB ke silinder), tetapi semuanya tergolong dalam gamut warna SRGB.
• Dengan perubahan yang akan datang, kami akan mendapat model warna baru dan (!) Kami akan mendapat fungsi baru yang memetakan model warna dengan cara yang berbeza. Jadi saya fikir ia adalah pukulan dua atau tiga kali ganda.

Saya tidak dapat menjelaskan semua butiran kepada anda secara terperinci - saya menulis ini kerana saya percaya banyak orang, seperti saya, ingin tahu mengapa kita perlu mengambil berat tentang ini, dan itulah yang saya cuba fahami mengapa saya perlu mengambil berat tentang perkara ini.

Display-P3 menghidupkan warna-warna yang lebih terang yang sebelum ini tidak dapat diterangkan.

 badan {
  Latar Belakang: Warna (Display-P3 1 0.08 0); */
}

Ternyata monitor moden dapat memaparkan lebih banyak warna, terutama warna -warna yang lebih terang, tetapi kami tidak mempunyai cara untuk menentukan warna -warna ini menggunakan sintaks warna CSS klasik seperti Hex, RGB, dan HSL. Sangat pelik, bukan? ! Tetapi jika anda menggunakan paparan-p3, anda boleh mengakses warna-warna cerah ini dengan lebih luas.

Syarikat Pembangunan Panic melihat ini awal dan mula menggunakan warna ini sebagai "Senjata Rahsia":

? Sebagai tambahan kepada WebGL, warna P3 kini merupakan bahagian penting dalam timbunan senjata rahsia laman web panik. Shh, jangan beritahu sesiapa, anda harus melihat halaman ini di skrin iMac Pro! https://www.php.cn/link/f08c64512c2ce6b9642b58563e9c029b

- Panic (@panic) 24 Mei 2019

Jen Simmons juga menerangkan cara menggunakannya, termasuk pilihan sandaran untuk penyemak imbas yang tidak disokong:

Paparkan warna P3. Direka dalam penyemak imbas. luar biasa.

Biarkan saya menunjukkan kepada anda bagaimana untuk beralih ke P3, cari warna, dan kemudian cari warna sandaran untuk pelayar yang lebih tua. Semua operasi dilakukan di Inspektor Web Safari. (Buka bunyi dan dengar penjelasan saya!) Pic.twitter.com/aakhrn2s3e

- Jen Simmons (@jensimmons) 5 Januari 2022

sumber

• CSS Wide Gamut Warna Menggunakan Display-P3 (WebKit Blog)
• Gamut warna yang sentiasa berkembang di Internet (Ollie Williams)

HWB lebih "manusia" tetapi itu sedikit dibahaskan, dan ia masih berdasarkan SRGB.

Saya tidak tahu apa HWB () sebelum ini - terima kasih kepada catatan blog Stefan Judis.

Saya biasanya memikirkan HSL sebagai format warna "manusia" CSS (dan sesuai untuk kawalan program), kerana, dengan baik, mengendalikan warna 360 ° dan ketepuan dan kecerahan 0-100% mempunyai beberapa makna yang jelas.

Tetapi dalam HWB () kita mempunyai warna (saya fikir sama seperti HSL), maka keputihan dan kegelapan . Stefan:

Menambah putih dan hitam ke warna akan menjejaskan ketepuannya. Anggapkan anda menambah jumlah yang sama putih dan hitam ke warna, nada warna tetap sama, tetapi warna kehilangan ketepuan. Ini berfungsi sehingga 50% putih dan 50% hitam (HWB (0deg 50% 50%)), yang menghasilkan warna bukan warna.

Stefan meragui sama ada ini lebih mudah difahami daripada HSL, dan saya cenderung bersetuju. Saya mungkin hanya perlu membiasakannya, tetapi ia kelihatan lebih abstrak daripada hanya mengubah kecerahan atau ketepuan.

HWB terhad kepada gamut warna yang sama (SRGB) kerana semua format warna lama. Tiada warna baru yang dibuka di sini.

sumber

• Pemilih warna HWB
• HWB () - Notasi warna manusia? (Stefan Judis)

Makmal seperti rgb () dengan gamut warna yang lebih luas

 div {
  Latar Belakang: Lab (150% -400 400);
}

Apabila saya bertanya, saya suka penjelasan Lab Eric Portis:

Makmal adalah seperti RGB, ia mempunyai tiga komponen linear. Semakin rendah bilangan bermakna lebih sedikit perkara itu, dan semakin besar bilangannya bermakna lebih banyak perkara itu. Oleh itu, anda boleh menggunakan makmal untuk menentukan hijau yang paling terang, hijau yang akan menjadi sangat cerah dan hijau untuk semua orang, tetapi akan lebih cerah dan lebih hijau pada monitor dengan gamut warna yang lebih luas.

Oleh itu, kita mendapat semua warna tambahan, yang hebat, tetapi terdapat satu lagi masalah dengan SRGB (selain ungkapan warna yang terhad), iaitu, ia tidak bersatu dengan persepsi . Brian Kardell:

Ruang SRGB tidak bersatu dengan persepsi. Pergerakan matematik yang sama mempunyai tahap persepsi yang berbeza pada kedudukan yang berbeza di ruang warna. Jika anda ingin membaca tentang pengalaman pereka dengan ini, inilah contoh yang menarik yang menggambarkan proses bekerja keras untuk melakukannya dengan baik.

Contoh klasik di sini ialah dalam HSL, warna dengan "kecerahan" yang sama sebenarnya terasa sama sekali berbeza.

Hsl dan makmal :: kecerahan?

Warna yang sama dari undi warna rumit kami, tetapi kali ini saya menunjukkan versi makmal warna yang sama. Sila ambil perhatian sejauh mana nilai kecerahan makmal adalah hasil yang kami pilih!

? Tidak semua ruang warna adalah sama! https://www.php.cn/link/ff15242553d87dd31723dcd88a087382 pic.twitter.com/xkeguq3kzg

- Adam Argyle (@argyleink) 3 Disember 2019

Tetapi di makmal ia jelas bersatu padu, yang bermaksud bahawa memanipulasi warna secara programatik adalah tugas yang lebih munasabah. Manfaat lain ialah warna makmal ditentukan sebagai peranti bebas. Michelle Barker:

Makmal dan LCH ditakrifkan dalam spesifikasi sebagai warna bebas peranti . Makmal adalah ruang warna yang boleh diakses dalam perisian seperti Photoshop, dan disyorkan jika anda mahu warna pada skrin menjadi sama seperti yang dicetak pada T-shirt, sebagai contoh.

sumber

• makmal () (mdn)
• Panduan untuk menggunakan warna CSS moden untuk RGB, HSL, HWB, Lab, dan LCH (Michelle Barker)

LCH seperti hsl () dengan gamut warna yang lebih luas

Ingat ketika saya berkata HSL adalah "manusia" kerana lebih mudah difahami daripada RGB? Menukar warna, ketepuan, dan kecerahan masuk akal. LCH () Sama seperti ini, kita mempunyai kecerahan , kromatik , dan warna . Kembali ke perbualan saya dengan Eric Portis:

LCH lebih seperti HSL: ruang koordinat kutub. H = hue = bulatan. Jadi melakukan matematik untuk memilih warna pelengkap (atau apa sahaja transformasi anda selepas) menjadi remeh (hanya tambah 180 -atau nilai lain!)

Saya fikir anda akan memilih LCH hanya kerana anda suka sintaksnya, atau kerana ia menjadikan beberapa operasi programatik yang kompleks yang anda cuba lakukan lebih mudah - dan anda tahu ia menyatakan lebih daripada 50% warna secara percuma.

Kami juga mendapat perpaduan di sini. Lea Verou nampaknya teruja bahawa kecerahan sebenarnya masuk akal:

Dalam HSL, kecerahan tidak bermakna. Warna boleh mempunyai nilai kecerahan yang sama, tetapi kecerahan yang dirasakan sangat berbeza. [...] Dengan LCH, apa -apa warna dengan kecerahan yang sama sama -sama persepsi cerah, dan warna apa pun dengan kromatik yang sama sama -sama tepu.

Satu lagi manfaat model baru ialah kita boleh menyingkirkan "zon mati kelabu" dalam kecerunan warna CSS. Saya tidak fikir kerana perpaduan persepsi ini, kedua-dua warna yang kaya tidak menjadi pelik dan secara beransur-ansur mengubah diri mereka di kawasan yang tidak kaya.

Berikut adalah ramalan peribadi yang kecil: Saya akan mengatakan lch () mungkin menjadi kegemaran pereka. Akan ada banyak pilihan warna baru tidak lama lagi, dan ia selalu terlalu sukar dan pelik untuk memilih warna yang berbeza. LCH nampaknya paling psikologi berkesan.

sumber

• lch () (mdn)
• Warna LCH dalam CSS: Apa, Mengapa dan Bagaimana? (Lea Verou)

"Pasti"

Makmal dan rakan -rakannya kelihatan begitu baru kerana ia baru kepada CSS ... tetapi makmal dicipta pada tahun 1940 -an. Dalam perbualannya dengan Adam Argyle, dia menggunakan frasa yang tidak dapat dilupakan: semua ruang warna mempunyai tumit Achilles . Iaitu, mereka agak buruk pada perkara -perkara. Bagi SRGB, ia adalah masalah zon mati kelabu dan gamut warna yang terhad. Makmal adalah baik, tetapi ia pasti mempunyai kelemahannya sendiri. Sebagai contoh, kecerunan biru ke putih di makmal akan melalui kawasan ungu agak canggung.

Pada bulan Disember 2020, Björn Ottosson berkata, "Hei, ruang warna baru baru muncul" dan sekarang Oklab akan datang. Jelas sekali, pembuat keputusan CSS percaya bahawa nilai ruang warna ini cukup tinggi sehingga Oklab () dan Oklch () telah dinormalisasi. Saya fikir kita harus peduli kerana mereka biasanya lebih baik , tetapi tidak memetik apa yang saya katakan.

Mengapa paparan p3 menggunakan fungsi warna () manakala fungsi lain tidak digunakan?

Saya betul -betul tidak tahu. Saya fikir fungsi warna CSS () agak baru, dan itulah bagaimana Safari meletakkannya di dalamnya di tempat pertama. Saya tidak tahu jika paparan P3 akan mendapat fungsi khusus, atau jika kita semua mula menggunakan warna CSS (), atau apa.

 /* Ini adalah cara menggunakan paparan p3*/
warna (paparan-p3 1 0.08 0);

/* Tetapi ini tidak berfungsi*/
warna (Oklch 42.1% 0.192 328.6);

/ * Adakah anda perlu melakukan ini? ‍♀️ */
Oklch (42.1% 0.192 328.6);

/ * Tetapi anda boleh menggunakan ruang warna dalam kecerunan ... */
Imej latar belakang: Linear-Gradient (
    ke kanan
    di Oklch,
    LCH (50% 100 100),
    LCH (50% 100 250)
  );

Sintaks warna relatif sangat berguna.

Terdapat ciri yang sangat sejuk yang dipanggil "Sintaks Warna Relatif" di mana anda pada dasarnya boleh membongkar warna CSS semasa memindahkannya ke format lain. Katakan anda mempunyai (nampaknya) warna CSS hex yang paling terkenal, anjing kabut, dan anda mahu menukarnya ke HSL:

 badan {
  Latar Belakang: HSL (dari #F06D06 HSL);
}

Mungkin ini tidak berfungsi dengan segera, tapi hei, sekarang kita boleh menambah Alpha kepadanya! Sebenarnya tidak ada cara lain untuk memohon alpha pada warna hex yang ada, jadi ini sangat penting:

 badan {
  Latar Belakang: HSL (dari #F06D06 HSL / 0.5);
}

Tetapi saya juga boleh mengubahnya. Katakan saya mahu menembusi anjing kabut sedikit sebelum menambah kelegapan, kerana kelegapan yang lebih rendah secara semulajadi akan menggelapkannya, saya mahu mengimbangi itu. Saya boleh menggunakan calc () pada pembolehubah yang tersirat di sana:

 badan {
  Latar Belakang: HSL (dari #F06D06 H Calc (S 20%) L / 0.5);
}

Ini sangat sejuk. Saya pasti kita akan melihat sesuatu yang luar biasa daripadanya. Ia pastinya tidak terhad kepada HSL. Saya hanya menggunakan HSL kerana saya merasa selesa sekarang. Sekiranya saya mahu, saya boleh mulakan dengan warna merah yang dinamakan dan mengubahnya di lch:

 badan {
  Latar Belakang: LCH (dari Red L Calc (C 15) H / 0.25);
}

Ini berguna apabila digabungkan dengan sifat tersuai.

Tidak ada lagi fungsi khas khusus untuk Alpha.

Harus jelas bahawa tidak ada koma dalam nilai alfa dalam fungsi warna CSS sebelum itu - tetapi slash ke hadapan:

 /* Lama! */
RGB (255, 0, 0);
RGBA (255, 0, 0, 0.5);

/* Baru! */
RGB (255 0 0);
RGB (255 0 0 / 0.5);
HSL (0deg 40% 40%)
HSL (0deg 40% 40% / 90%) /* boleh menjadi peratusan dan bukannya 0.9 atau nilai lain* /

/* Kandungan warna baru hanya mempunyai satu fungsi asas, tiada fungsi kecil alfa*/
Makmal (49% 39 80)
Makmal (49% 39 80 / 0.25)

/* Paparan p3, menggunakan fungsi warna, pada dasarnya cara yang sama seperti slashes ke hadapan*/
warna (paparan-p3 1 0.08 0 / 0.25);

Anda juga boleh menentukan ruang warna CSS anda sendiri.

Tetapi saya tidak boleh memikirkan perkara ini. Ini mengejutkan saya, saya minta maaf.

Atas ialah kandungan terperinci Pratonton 4 Ciri Warna CSS Baru. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!