🔇 🐀 👨‍💼 Warna CSS LCH ❔ 🙍🏻 🆓

Saya selalu tertarik pada ilmu warna. Pada tahun 2014, saya berbicara di berbagai konferensi, berbicara tentang spesifikasi CSS Color 4. Sebelum itu, pada tahun 2009, saya menulis sebuah program untuk memilih warna. Dia menggunakan applet Java tersembunyi untuk mendukung profil warna ICC dan bekerja dengan baik dengan CMYK. Sejauh yang saya tahu, itu adalah program pertama dari jenisnya. Saya tidak pernah merilisnya, tetapi itu mengarah ke publikasi publikasi ini . Ketertarikan pada warna membawa saya kepada pria yang menjadi suami saya. Pada 2019, saya menjadi co-editor dari spesifikasi CSS 5 Warna . Tujuan saya adalah untuk mengkonkretkan proposal saya .

modifikasi warna, yang bertujuan untuk memungkinkan para desainer untuk secara sewenang-wenang menyesuaikan saluran warna untuk membuat opsi warna. Saya juga ingin menggabungkan penawaran saya dengan penawaran ini . Warna CSS LCH adalah sesuatu yang benar-benar membuat saya terpesona. Saya sangat yakin bahwa desainer, ketika mereka belajar lebih banyak tentang warna LCH, akan marah oleh kenyataan bahwa mereka masih tidak memiliki kesempatan untuk menggunakan warna seperti itu.

Apa itu LCH?

Modul CSS Color 4 memiliki, antara lain, definisi warna LCH . Hari ini, semua browser utama telah mulai mengimplementasikan dukungan mereka, atau secara serius mempertimbangkan kemungkinan ini:

Di Safari, dukungan LCH sudah diterapkan.
Fitur ini diharapkan di Chrome .
Kemungkinan penerapan fitur ini di Firefox dibahas .

LCH adalah ruang warna yang memiliki beberapa keunggulan dibandingkan ruang warna RGB / HSL yang digunakan semua orang untuk bekerja dengan CSS. Bahkan, saya akan melangkah lebih jauh dan menyebut LCH sebuah teknologi yang secara dramatis dapat mengubah cara kerja warna di web. Berikut adalah tiga fakta yang memungkinkan saya untuk membuat pernyataan seperti itu.

▍1. LCH, dibandingkan dengan sRGB, memberikan akses ke sekitar 50% lebih banyak warna

Ini adalah langkah besar ke depan. Saat ini, setiap warna CSS yang dapat kita atur didefinisikan dalam ruang warna sRGB . Beberapa tahun yang lalu, ini lebih dari cukup, karena semua monitor, kecuali yang profesional, memiliki gamut warna kurang dari sRGB. Namun, sekarang semuanya tidak lagi demikian. Saat ini, gamut warna (yaitu, kisaran warna yang dapat ditampilkan) pada kebanyakan monitor mendekati P3 . Dan volume ruang warna ini adalah 50% lebih banyakdari jumlah ruang sRGB. CSS saat ini sama sekali tidak memiliki akses ke warna-warna ini. Biarkan saya ulangi ini: kita tidak memiliki akses ke sepertiga dari warna yang dapat ditampilkan monitor modern. Dan ini bukan tentang beberapa warna minor. Kita berbicara tentang warna paling terang yang dapat ditampilkan monitor. Situs kami terlihat pucat karena fakta bahwa perangkat keras monitor berkembang lebih cepat daripada spesifikasi CSS dan implementasi browser.

Ruang Warna sRGB dan P3

▍2. LCH (dan Lab) adalah ruang warna yang seragam dalam persepsi

Saat bekerja dengan LCH, perubahan numerik yang sama dalam ruang warna memberikan perbedaan persepsi yang sama antara warna. Properti ruang warna ini disebut "keseragaman persepsi". Ruang warna RGB atau HSL tidak seragam dalam persepsi. Berikut adalah contoh yang sangat signifikan dari fitur ini (di sini adalah sumber dari contoh ini).

Heterogenitas persepsi warna HSL.

Warna pada baris atas dan bawah berbeda dalam nada sebesar 20 derajat. Apakah Anda pikir perbedaan yang dirasakan antara warna-warna ini sama?

▍3. Kecerahan di LCH adalah indikator yang berarti sesuatu

Dalam ruang warna HSL, cahaya adalah indikator yang tidak berarti. Warna mungkin memiliki cahaya yang sama, tetapi sangat bervariasi dalam kecerahan yang dirasakannya. Contoh favorit saya adalah perbandingan kuning dan biru. Anda mungkin tidak percaya, tetapi warna yang ditunjukkan di bawah ini memiliki kecerahan HSL yang sama.

Warna HSL memiliki tingkat kecerahan yang sama.

Kedua warna memiliki tingkat kecerahan 50%, tetapi keduanya jelas tidak memiliki kecerahan yang sama sekali. Apa arti dari konsep "ringan" di HSL?

Di sini Anda dapat berdebat dengan saya, mengatakan bahwa cahaya, setidaknya, masuk akal dengan nada warna yang sama (rona) dan saturasi warna. Yaitu - saat mengubah cahaya dalam warna yang sama. Dan kebenarannya: meningkatkan HSL-lightness kita mendapatkan warna yang lebih terang, dan berkurang - warna yang lebih gelap. Namun yang terjadi belum tentu warnanya sama.

Menyesuaikan kecerahan dengan nada warna konstan dan saturasi warna

Kedua warna ini memiliki rona dan saturasi yang sama, tetapi apakah keduanya terlihat seperti versi yang lebih gelap dan lebih terang dari warna yang sama?

Saat menggunakan model warna LCH, warna yang memiliki luminositas yang sama dianggap sebagai warna yang memiliki kecerahan yang sama, dan warna dengan kroma yang sama dianggap sebagai warna dengan saturasi yang sama.

Bagaimana pengaturan warna LCH?

LCH adalah kependekan dari Lightness, Chroma, Hue (lightness, color, tone). Komponen warna dalam model warna ini memiliki beberapa hubungan dengan komponen model warna HSL. Tetapi ada perbedaan serius antara komponen model warna ini.

Sudut pitch di LCH tidak cukup cocok dengan nada HSL. Yaitu - 0 - ini tidak sepenuhnya merah. Warna ini agak mendekati magenta. Dan 180 bukan warna pirus, agak biru kehijauan, dan benar-benar saling melengkapi.

Warna dengan kecerahan yang dirasakan sama.

Perhatikan bahwa warna-warna ini, meskipun nadanya sangat berbeda, terlihat seperti warna yang memiliki kecerahan yang sama.

Dalam ruang warna HSL, saturasi diwakili oleh rentang nilai yang rapi dari 0-100. Faktanya adalah bahwa ruang ini adalah hasil dari transformasi sederhana RGB menjadi koordinat kutub. Namun, dalam LCH, nilai komponen kroma secara teori tidak terbatas. Standar LCH (seperti Lab) dirancang untuk dapat mewakili berbagai macam warna yang dirasakan oleh manusia. Tidak semua warna ini dapat ditampilkan pada monitor, bahkan satu yang mendukung ruang warna P3. Selain itu, kita berbicara tidak hanya tentang jumlah maksimum warna yang ditampilkan, tergantung pada gamut warna monitor, tetapi juga tentang perbedaan warna.

Mungkin ide ini akan lebih mudah dipahami jika saya menggambarkannya dengan sebuah contoh. Demi kesederhanaan, mari kita bayangkan bahwa kita memiliki monitor yang warnanya persis sama dengan ruang warna sRGB. Sebagai perbandingan, layar MacBook Air 2013 dapat menghasilkan sekitar 60% sRGB, tetapi sebagian besar layar modern, seperti yang telah disebutkan, menampilkan 150% sRGB. Untuk L = 50 dan H = 180 (sampel Cyan pada gambar di atas), nilai maksimum C hanya 35! Untuk L = 50 dan H = 0 (Pink), nilai C dapat mencapai 77 tanpa melampaui sRGB. Untuk L = 50 dan H = 320 (Ungu), nilai C bisa naik hingga 108!

Meskipun kurangnya batas dapat dianggap sebagai sesuatu yang menakutkan (apakah itu tentang orang atau ruang warna), tidak ada yang perlu dikhawatirkan: jika warna diatur yang tidak dapat ditampilkan pada monitor tertentu, itu akan dikurangi menjadi warna serupa yang didukung oleh monitor. Pada akhirnya, tidak ada yang baru: sampai monitor memperoleh gamut warna melebihi kemampuan sRGB, inilah yang terjadi dengan warna CSS yang biasa ditampilkan pada monitor yang warnanya kurang dari sRGB.

Pemetik warna LCH

Saya harap sekarang Anda juga sedikit tertarik dengan ide menggunakan warna LCH. Ini menimbulkan pertanyaan tentang bagaimana memvisualisasikan warna-warna ini.

Sebenarnya, saya sudah lama membuat alat yang sesuai, LCH Color Picker, yang dirancang terutama untuk membantu saya dan rekan-rekan saya memahami fitur LCH dengan benar saat mengedit CSS Color 5 . Salah satunya adalah untuk mengetahui teorinya, dan yang lainnya adalah untuk dapat bereksperimen dengan slider dan melihat hasilnya dengan mata Anda sendiri. Saya bahkan membeli domain, css.land , untuk mengirim contoh yang relevan di sana. Kami menggunakan alat ini sedikit, saya menambahkan fitur baru ke dalamnya, tetapi saya tidak pernah menulis tentang itu. Oleh karena itu, alat ini hanya tersedia bagi kami, dan bagi mereka yang memperhatikanrepositori github ini .

Cara untuk memilih warna LCH

Jika Anda tertarik untuk bereksperimen dengan warna LCH, Anda dapat menggunakan alat ini. Berikut ini beberapa detail tentang dia:

Kode konversi warna ditulis oleh salah satu anggota tim kami. Kami yakin bahwa perhitungan, setidaknya, dilakukan atas dasar pemahaman yang benar tentang proses konversi (yaitu, jika terjadi kesalahan - ini adalah kesalahan dalam kode, dan bukan hasil dari kesalahpahaman tentang sesuatu).
Komponen warna Chroma mendukung perubahan dalam rentang selain 0 - 100, yang membedakan alat kami dari beberapa yang lain yang dapat kami temukan.
Pengguna dapat memuat warna CSS sewenang-wenang ke dalamnya (menggunakan tombol Impor).
Slider hanya memungkinkan Anda memasukkan nilai integer, tetapi di bidang hitam yang muncul di atas slider, Anda bisa memasukkan angka apa saja.
Dalam prosesnya, Anda dapat menyimpan warna dan melihat bagaimana mereka diinterpolasi.
Analisis warna didukung untuk apakah itu milik ruang warna sRGB, P3 (atau Rec.2020, bahkan ruang warna yang lebih luas).
Pengaturan transparansi yang didukung.
Dan akhirnya, menggunakan alat ini sangat menarik! Terutama mengingat bahwa itu diimplementasikan berdasarkan Mavo (walaupun sedikit JavaScript digunakan di sini, yaitu, itu bukan proyek Mavo yang dibuat dalam HTML murni).

Sebenarnya, Anda dapat mencoba LCH Color Picker di sini .

Pertanyaan dan jawaban

Setelah saya menerbitkan artikel ini, mereka mulai bertanya kepada saya. Saya percaya bahwa saya harus mengklarifikasi beberapa kesalahpahaman umum di sini.

▍Anda mengatakan bahwa dukungan untuk warna LCH di browser belum diterapkan, tetapi saya dapat melihatnya di artikel. Bagaimana ini mungkin?

Semua warna yang digunakan dalam artikel ini termasuk dalam gamut warna sRGB. Ini karena kami sejauh ini tidak dapat menampilkan warna di luar sRGB. sRGB adalah ruang warna, bukan sintaks deskripsi warna. Misalnya, rgb(255 0 0)mereka lch(54.292% 106.839 40.853)mengatur warna yang sama.

▍ Bagaimana LCH Color Picker menampilkan warna di luar sRGB?

Program saya, LCH Color Picker, tidak menampilkan warna seperti itu. Dan, sejauh yang saya tahu, di Internet tidak ada program yang bisa menampilkan warna seperti itu. Proyek LCH Color Picker diimplementasikan menggunakan teknologi web, yang berarti bahwa pembatasan standar berlaku untuk halaman web lainnya. Saya mengonversi warna non-output ke sRGB. Pada awalnya, saya hanya membawa komponen warna RGB ke kisaran 0-100%, tetapi berkat PR ini , program sekarang menggunakan algoritma yang jauh lebih sukses. Yaitu, kita berbicara tentang mengurangi nilai komponen LCH C hingga warnanya masuk dalam batas sRGB. Itulah sebabnya peningkatan nilai komponen C di atas batas tertentu tidak mengarah pada kesimpulan warna yang lebih cerah. Faktanya adalah bahwa warna seperti itu belum dapat disimpulkan menggunakan CSS.

▍ Saya perhatikan bahwa Firefox menampilkan warna yang lebih terang daripada Chrome dan Safari. Apakah ada koneksi dengan dukungan LCH?

Firefox belum mengimplementasikan bagian dari spesifikasi yang membatasi warna CSS ke bingkai sRGB. Sebagai gantinya, browser hanya memberikan nilai RGB mentah ke layar. Misalnya, rgb(100% 0% 0%)ini adalah warna merah paling terang yang dapat ditampilkan oleh monitor. Meskipun ini mungkin tampak seperti solusi cerdas, di sini kita dihadapkan dengan kontradiksi. Faktanya adalah bahwa dengan pendekatan ini, Anda dapat mengatur warna, paling banter, hanya sekitar, karena semua layar menampilkan warna berbeda. Dengan membatasi warna CSS ke ruang warna yang dikenal (sRGB), kami mendapatkan kebebasan perangkat. Ruang warna LCH dan Lab juga tidak tergantung pada perangkat, karena didasarkan pada warna yang diukur sebenarnya.

▍ Apa yang bisa Anda katakan tentang desain warna (tampilan-p3 rgb)? Safari telah mendukungnya sejak 2017!

Saya diberitahu tentang ini setelah saya menerbitkan artikel ini. Saya sudah lama tahu bahwa Safari sedang mengerjakan fitur ini, tapi entah bagaimana saya melewatkan momen ketika itu sudah siap. Bahkan, bulan lalu ini artikel yang diterbitkan menggambarkan sintaks ini di WebKit. Luar biasa

Desain color(colorspaceid params)adalah fitur yang dijelaskan dalam CSS Color 4. Dia, dalam hal manajemen warna dalam CSS, dapat dibandingkan dengan pisau Swiss. Hal yang hebat tentang desain ini adalah memungkinkan Anda menentukan profil warna ICC dan warna yang diambil darinya. Misalnya, ini dapat berguna jika Anda ingin menggunakan warna CMYK asli atau warna Pantone di halaman web. Desain ini juga mendukung beberapa ruang warna standar, salah satunya adalah display-p3. Sebagai contoh, color(display-p3 0 1 0)ini memberi kita warna hijau paling terang di ruang warna P3. Untuk menguji dukungan untuk desain ini, Anda dapat menggunakan tes ini . Jika tidak ada dukungan color(), warna merah akan ditampilkan, dan jika tersedia, warna hijau terang.

Meskipun ini adalah fitur luar biasa (dan saya perlu membuat ulang LCH Color Picker saya sehingga program akan menggunakannya color()jika didukung), perhatikan fakta bahwa itu hanya memecahkan masalah pertama yang saya sebutkan. Yaitu, kita berbicara tentang akses ke semua warna dari gamut warna. Tetapi, karena alat ini color()didasarkan pada RGB, ia menderita dari semua kerugian yang terkait dengan RGB. Itu tidak dibedakan oleh persepsi yang seragam, dengan bantuannya, dengan menyesuaikan parameter warna, sulit untuk membuat opsi warna (opsi yang lebih terang atau lebih gelap, lebih atau kurang cerah, dan sebagainya).

Selain itu, saya perhatikan bahwa ini adalah solusi sementara. Sekarang ini berlaku karena kenyataan bahwa layar yang dapat menampilkan warna yang tidak cocok di P3 jarang terjadi. Tetapi setelah perbaikan lain dari tampilan, ternyata desain color(display-p3 ...)akan memiliki masalah yang sama dengan warna RGB sekarang.

Ruang warna LCH dan Lab adalah perangkat yang independen, mereka dapat mewakili semua warna yang terlihat oleh manusia, dan sebagai hasilnya mereka akan tetap relevan terlepas dari evolusi perangkat keras.

Pembaca yang budiman! Apakah Anda tertarik menggunakan warna LCH di CSS?

Warna CSS LCH