Lukis semuanya di CSS – Beragampengetahuan

Saya memiliki kesempatan untuk mengedit banyak entri warna baru untuk beragampengetahuan Almanac. Kami telah menerbitkan beberapa informasi tentang jalan, termasuk panduan lengkap tentang fitur warna:

Saya harus mengakui: Saya tidak tahu banyak tentang warna di CSS (saya masih menggunakannya rgb()yang jelas bukan lagi pekerjaan Polay yang keren), jadi ini adalah pengalaman belajar yang menarik. Satu hal yang saya perhatikan ketika mencoba mengikuti semua informasi baru ini adalah berapa lama kosakata meja warna yang dibutuhkan, terutama konsep “warna”. Ada “ruang warna”, “model warna”, “rentang warna”, dan pada dasarnya hal -hal “warna”.

Mereka semua agak terkait, dan bisa membingungkan saat Anda menggunakan warna dalam CSS, terutama fitur warna baru yang baru -baru ini dikirim, seperti contrast-color() Dan color-mix(). Jadi saya ingin melakukan kosakata yang saya harap saya miliki ketika saya pertama kali mendengar setiap konsep dan siapa pun dapat memeriksanya ketika saya lupa hal “warna” spesifik apa.

Sebagai penafian, saya tidak akan menjelaskan warna di posting ini, atau menentukan reproduksi warna. Ini mungkin tidak mungkin bagi fana seperti saya. Mengganti lab() atau oklch() Juga mengerti apa yang membuat mereka unik.

Apa itu warna?

Mari kita memperlambat dulu. Untuk memahami semuanya ada warnakita perlu mengerti warna ada semuanya.

Gelombang cahaya ada di dunia, tetapi warna terjadi dalam interaksi antara gelombang cahaya dan mata, otak dan pikiran.

Bahkan jika warna bukanlah sesuatu yang fisik, kami masih ingin menyalinnya se -andal mungkin, terutama di era digital. Jika kita mengambil gambar bunga bakung yang indah (seperti karangan bunga di meja saya) dan kemudian menampilkannya di layar, kami ingin melihat warna yang sama dalam gambar dan dalam kenyataan. Tetapi “kenyataan” adalah istilah yang menyesatkan di sini, karena Realitas Warnanya tergantung pada penonton. Untuk mengatasi masalah ini, kita perlu memahami bagaimana panjang gelombang cahaya (hal -hal yang dapat diukur dan direplikasi) menghasilkan respons warna yang berbeda di audiens (yang tidak terukur).

Untungnya, tugas ini telah dilakukan oleh Komisi Penerangan Internasional (CIE, nama Prancis). Saya berharap saya bisa memperkenalkan detail percobaan, tetapi kami belum dalam warna pertama kami. Yang penting, dari pengukuran ini, CIE dapat memetakan semua warna yang terlihat ke rata -rata orang (dalam percobaan) pada panjang gelombang cahaya dan menggambarkannya dengan hanya tiga nilai.

Ruang warna baru ini juga memiliki tiga nilai, X dan Z mewakili warna warna, dan Y mewakili kecerahannya. Karena memiliki tiga sumbu, ia dapat membentuk bentuk 3D, tetapi jika kami mengirisnya sehingga kecerahan yang sama, pada gambar yang mungkin Anda lihat sebelumnya, kami mendapatkan semua warna yang terlihat untuk kecerahan yang diberikan.

Ini disebut warna xy Gambar dan dicadangkan semua Warna yang terlihat oleh mata manusia biasa (berdasarkan rata -rata audiens dalam percobaan CIE 1931). Warna di dalam bentuk dianggap nyata, sedangkan warna di luar dianggap fiksi.

Ruang warna

Tujuan terakhir dari penjelasannya adalah untuk mencapai konsep ruang warna Ciexyz, tetapi apa sebenarnya “ruang warna”? Mengapa Ciexyz Ruang berwarna -warni Apakah ini sangat penting?

Ruang warna CIEXYZ adalah pemetaan semua warna yang terlihat oleh mata manusia biasa ke sistem koordinat 3D, jadi kami hanya membutuhkan tiga nilai untuk menentukan warna. Kemudian, Ruang warna dapat dianggap sebagai pemetaan warna umumtidak perlu memasukkan semua warna yang terlihat, dan biasanya ditentukan oleh tiga nilai.

Ruang warna RGB

Ruang warna yang paling terkenal adalah ruang warna RGB (perhatikan jamak). Anda mungkin menebak dari namanya, di sini kita hanya membutuhkan jumlah merah, hijau dan biru untuk menggambarkan warna. Untuk menggambarkan ruang warna RGB, kita hanya perlu mendefinisikan nilai “paling merah”, “paling hijau” dan “blueest”. Jika kita menggunakan koordinat dari 0 hingga 1 untuk menentukan warna dalam ruang warna RGB, maka:

• (1, 0, 0) Menunjukkan warna paling merah.
• (0, 1, 0) Menunjukkan warna paling hijau.
• (0, 0, 1) Menunjukkan warna biru.

Namun, “paling merah”, “paling buruk” dan “paling hijau” adalah deskripsi warna. Apa yang membuat warnanya “lebih banyak lebih banyak” tergantung pada semua orang. Misalnya, warna apa yang menurut Anda termasuk dalam warna biru?

Seperti yang bisa Anda tebak, sesuatu seperti “Bluest” adalah deskripsi yang mengejutkan. Untungnya, kita hanya perlu melihat kembali ruang warna Ciexyz – sangat berguna! Di sini kita dapat mendefinisikan warna yang kita anggap sebagai Redtest, Greenest dan Blueest, seperti koordinat dalam grafik kromatik XY. Itu semua tentang membuat ruang warna RGB, dan mengapa ada begitu banyak!

Dalam CSS, ruang warna yang paling umum digunakan adalah ruang warna RGB (SRGB) standar, yang meninggalkan banyak warna seperti yang Anda lihat pada gambar sebelumnya. Namun, di CSS kita dapat menggunakan ruang warna RGB modern dan lebih banyak warna melalui colles color() Fungsi, mis. display-p3,,,,, prophoto-rgbDan rec2020.

Perhatikan bagaimana ruang warna Nabi RGB menghilangkan warna yang terlihat. Tidak masalah. Warna -warna di luar dijepit; Mereka bukan warna baru atau tidak terlihat.

Di CSS, selain SRGB, kami memiliki dua ruang warna: ruang warna Cielab dan ruang warna okrain. Untungnya, begitu kita memahami ruang warna Ciexyz, keduanya harus lebih mudah dipahami. Mari kita gali lebih dalam berikutnya.

Ruang warna cielab dan okra bir

Seperti yang telah kita lihat sebelumnya, ruang warna SRGB tidak memiliki banyak warna yang terlihat oleh mata manusia rata -rata. Dan, ketika layar modern menjadi lebih baik dalam menunjukkan lebih banyak warna, CSS perlu mengadopsi ruang warna yang lebih baru untuk memanfaatkan tampilan baru ini. Ini bukan satu -satunya masalah dengan SRGB – juga tidak memiliki persepsi persepsi, yang berarti bahwa perubahan warna warna juga akan mengubah sedikit persepsi. Misalnya, demo ini oleh Adam Argyle:

Cie Cielab yang didirikan pada tahun 1976, juga berasal dari CIEXYZ dan juga mencakup semua warna yang terlihat oleh mata manusia. Ini dapat bekerja sama dengan tiga koordinat: L yang dirasakan ringan, untuk jumlah merah dan hijau, dan b* untuk jumlah warna kuning dan biru.

Ini memiliki keseragaman persepsi yang lebih baik daripada SRGB, tetapi masih belum sepenuhnya bersatu, terutama dalam gradien yang melibatkan biru. Misalnya, dalam gradien putih ke biru berikut, transfer Cielab ke ungu.

Sebagai kemajuan terakhir, Björn Ottosson mengusulkan ruang warna Okrainian, yang juga memungkinkan semua warna terlihat oleh mata manusia sambil mempertahankan keseragaman yang lebih baik. Okra Dance juga menggunakan tiga L*a*b* koordinat. Berkat semua perbaikan ini, ini adalah ruang warna yang saya coba gunakan baru -baru ini.

Model warna

Ketika saya memahami konsep -konsep ini, tantangan terbesar saya setelah memahami ruang warna tidak membingungkan mereka dengan model warna dan rentang warna. Kedua konsep ini, meskipun saling melengkapi dan terkait erat dengan ruang warna, tidak sama, sehingga mereka adalah jebakan umum saat belajar warna.

satu Model warna Mengacu pada deskripsi matematika warna melalui angka, yang biasanya melibatkan tiga angka, tetapi nilai -nilai ini tidak memberi kita warna yang tepat sampai kita memasangkannya dengan ruang warna. Misalnya, Anda tahu bahwa dalam model warna RGB, kami mendefinisikan warna dengan tiga nilai: merah, hijau, dan biru. Namun, kami tidak memiliki warna sampai kami mencocokkannya dengan ruang warna RGB (mis. Dengan display-p3). Dalam hal ini, ruang warna dapat memiliki beberapa model warna, seperti SRGB menggunakan RGB, HSL dan HWB. Pada saat yang sama, model warna dapat digunakan di beberapa ruang warna.

Saya telah menemukan banyak artikel dan tutorial di mana “ruang warna” dan “model warna” digunakan secara bergantian. Ada beberapa tempat di mana definisi ruang warna dan modelnya berbeda dari yang disediakan di sini. Misalnya, panduan warna CSS HD Chrome mendefinisikan RGB dan HSL CSS sebagai ruang warna yang berbeda, sedangkan input ruang warna MDN memang mendefinisikan RGB dan HSL sebagai bagian dari ruang warna SRGB.

Secara pribadi, di CSS, saya merasa lebih mudah untuk memahami RGB, HSL dan HWB sebagai model yang berbeda untuk mengakses ruang warna SRGB.

Domain warna

satu Domain warna Penjelasannya lebih sederhana. Anda mungkin telah memperhatikan bagaimana kami berbicara tentang lebih banyak warna daripada warna lain, tetapi benar untuk mengatakan bahwa ia memiliki rentang “lebih luas” karena rentang warna adalah kisaran warna yang tersedia dalam ruang warna. Namun, domain warna tidak hanya dibatasi oleh batas -batas ruang warna, tetapi juga oleh keterbatasan fisik. Misalnya, layar yang lebih tua dapat mengurangi rentang warna karena tidak dapat menampilkan setiap warna dalam ruang warna yang diberikan. Dalam hal ini, warna tidak dapat diwakili (karena keterbatasan fisik atau di luar ruang warna itu sendiri), dikatakan “di luar jangkauan”.

Fungsi warna

Di CSS, satu -satunya ruang warna yang tersedia digunakan untuk SRGB. Saat ini, kita dapat bekerja dengan banyak ruang warna modern melalui fungsi warna masing -masing. Sebagai referensi cepat, setiap ruang warna di CSS menggunakan fitur -fitur berikut:

• SRGB: Kita dapat menggunakan simbol ol’Hexadecimal, warna bernama, bekerja di SRGB, rgb(),,,,, rgba(),,,,, hsl(),,,,, hsla() Dan hwb() Fungsi.
• Cielab: Di sini kita punya lab() untuk koordinat cartesian dan lch() Untuk koordinat kutub.
• Oklahoma: Mirip dengan Cielab, kami punya oklab() untuk koordinat cartesian dan oklch() Untuk koordinat kutub.
• lulus color() Dan color-mix(). Di luar tiga ruang warna ini, kita dapat menggunakan lebih banyak color() Dan color-mix() Fungsi. Secara khusus, kita dapat menggunakan ruang warna RGB: rgb-linear,,,,, display-p3,,,,, a98-rgb,,,,, prophoto-rgb,,,,, rec2020 dan ruang warna xyz: xyz,,,,, xyz-d50atau xyz-d65.

tl; dr

1. Ruang warna adalah pemetaan antara warna yang tersedia dan sistem koordinat. Di CSS kami memiliki tiga ruang warna utama: SRGB, Cielab dan Oklab, tetapi melalui color() Fungsi.
2. Model warna Tentukan warna dengan angka, tetapi mereka tidak memberi kami informasi tentang warna yang sebenarnya sampai kami memasangkannya dengan ruang warna. Misalnya, model RGB tidak berarti apa -apa sebelum mengalokasikan ruang warna RGB.
3. Dalam kebanyakan kasus, kami ingin berbicara tentang berapa banyak warna yang ada dalam ruang warna, jadi kami menggunakan istilah tersebut Domain warna Untuk tugas. Namun, domain warna juga terkait dengan keterbatasan fisik kamera/tampilan. Warnanya mungkin gagal, artinya tidak dapat diwakili dalam ruang warna yang diberikan.
4. Di CSS Kita dapat mengakses semua ruang warna ini melalui fungsi warnaAda banyak dari mereka.
5. ini Ruang warna ciexyz Ini berguna untuk mendefinisikan ruang warna lainnya, menggambarkan rentang mereka dan mengubahnya di antara mereka.

merujuk ke

¹ Cahaya adalah alasan utama warna, tetapi warna dapat dibuat oleh sesuatu selain cahaya. Misalnya, mata tertutup gesekan dapat secara mekanis mengiritasi retina untuk membuat warna dengan apa yang disebut fosforesensi. ⤴️

² jika Cahaya negatif Ini juga memungkinkan Anda untuk menggaruk kepala Anda, untuk informasi lebih lanjut tentang ruang warna ciexyz, saya sangat merekomendasikan Douglas A. Kerr Ruang warna cie xyz dan xyy Kertas. ⤴️

³ Kita juga perlu mendefinisikan paling gelap (“hitam”) dan paling terang (“putih”). Namun, untuk ruang warna yang berkinerja baik, keduanya dapat diabstraksi dari warna merah, biru dan hijau paling hijau. ⤴️

Segala sesuatu di CSS awalnya diterbitkan di beragampengetahuan, sebuah trek yang merupakan bagian dari keluarga Digitalocean. Anda harus menerima buletin.