Sintaksis warna relatif CSS

Membuat warna baru berdasarkan saluran dan nilai warna lain.

Adam Argyle

Di Chrome 119 adalah fitur warna yang sangat canggih dari CSS Color Level 5. Sintaksis warna relatif menciptakan jalur yang mulus untuk manipulasi warna dalam CSS, yang menawarkan cara penulis dan desainer untuk:

• Lighten
• Gelapkan
• Saturasi
• Desaturasi
• Peningkatan kroma
• Menyesuaikan opasitas
• Balikkan
• Komplementer
• Konversikan
• Kontras
• Palet warna
  • Monokromatik
  • Analog
  • Triadik
  • Tetradis
  • Monokromatik dengan rotasi hue

Sebelum sintaksis warna relatif, untuk mengubah opasitas warna, Anda harus membuat properti khusus untuk saluran warna, biasanya HSL, dan merakit menjadi warna akhir dan warna varian akhir. Ini berarti mengelola banyak potongan warna yang rumit, yang dapat dengan cepat membebani.

:root {
  --brand-hue: 300deg;
  --brand-saturation: 75%;
  --brand-lightness: 50%;

  --brand-hsl:
    var(--brand-hue)
    var(--brand-saturation)
    var(--brand-lightness);

  --brand-color: hsl(var(--brand-hsl));

  /* all this work just so I can set the opacity to 50% in a variant */
  --brand-color-variant: hsl(var(--brand-hsl) / 50%);
}

Setelah sintaksis warna relatif, Anda dapat membuat warna merek dengan ruang warna apa pun atau sintaksis yang dibutuhkan, dan buat varian opasitas setengah dengan kode yang jauh lebih sedikit. Penting juga jauh lebih mudah untuk membaca maksud dari gaya dan sistem.

:root {
  --brand-color: hsl(300deg 75% 50%);
  --brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}

Postingan ini akan membantu Anda mempelajari sintaksis dan mendemonstrasikan manipulasi warna umum.

Jika Anda lebih suka video, hampir semua artikel berikut dibahas dalam Tantangan GUI ini.

Ringkasan sintaksis

Tujuan dari {i>syntax<i} warna relatif adalah untuk memungkinkan pengambilan warna dari yang lain {i>color<i}. Warna dasar disebut warna asal, ini adalah warna yang muncul setelah kata kunci from baru. Browser akan mengonversi dan memisahkan warna asal ini serta menawarkan suku cadang sebagai variabel untuk digunakan dalam definisi warna baru.

Diagram sebelumnya menunjukkan warna asal green yang dikonversi menjadi ruang warna baru, diubah menjadi nomor individual yang direpresentasikan sebagai r, g, b, dan alpha variabel, yang kemudian langsung digunakan sebagai nilai warna rgb() baru.

Meskipun gambar ini menunjukkan perincian, proses, dan variabel, hal ini juga tidak mengubah warna. Variabel dimasukkan kembali ke warna tidak berubah, sehingga yang menghasilkan warna hijau.

Catatan: Untuk ulasan tentang cara menentukan warna, kunjungi warna definisi tinggi untuk semua informasi yang Anda butuhkan tentang warna web. Postingan ini mengasumsikan bahwa Anda telah memahami warna fungsional notasi, ruang warna seperti OKLCH, dan gamut warna.

Kata kunci from

Bagian pertama sintaksis yang harus dipelajari adalah bagian yang ditambahkan from <color> ke menentukan warna. Hal ini berlaku tepat sebelum Anda menentukan nilainya. Berikut kodenya contoh, yang semua yang ditambahkan adalah from green, tepat sebelum nilai untuk rgb() ditentukan.

.syntax-introduction_same-colors {
  color: green;
  color: rgb(0 128 0);
  color: rgb(from green r g b);    /* result = rgb(0 128 0) */
}

Kata kunci from tersebut, jika dilihat sebagai parameter pertama dalam notasi fungsional, mengubah definisi warna menjadi warna relatif! Setelah kata kunci from, CSS mengharapkan warna, warna yang akan menginspirasi warna berikutnya.

Konversi warna

Secara sederhana, ia mengubah saluran hijau menjadi r g dan b untuk digunakan dalam {i>color<i}.

rgb(from green r g b)           /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b);   /* r=0 g=128 b=0 */

Warna dari properti kustom

Membaca rgb from green sangat jelas dan mudah dipahami. Inilah sebabnya properti khusus dan sintaks warna relatif sangat cocok, karena Anda dapat menghilangkan misteri dari warna from. Anda juga umumnya tidak perlu ketahui format warna dari warna properti khusus, saat Anda membuat warna dalam format pilihan Anda.

rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b)   /* clear */

Gunakan ruang warna pilihan Anda

Anda dapat memilih ruang warna dengan pilihan notasi warna fungsional.

rgb(from hsl(120 100% 25%) r g b)     /*  r=0   g=128  b=0    */
hsl(from hsl(120 100% 25%) h s l)     /*  h=120 s=100% l=25%  */
hwb(from hsl(120 100% 25%) h w b)     /*  h=120 w=0%   b=50%  */
lch(from hsl(120 100% 25%) l c h)     /*  l=46  c=68   h=134  */

Sintaks warna relatif memiliki langkah konversi tersebut; warna setelah from adalah diubah menjadi ruang warna seperti yang ditentukan di awal baris {i>color<i}. Input dan output tidak harus cocok, yang sangat membebaskan.

Kemampuan untuk memilih ruang warna juga memberdayakan, seperti memilih warna ruang cenderung lebih fokus pada jenis pergantian warna daripada preferensi. Preferensi ada pada hasil, bukan format warna atau saluran jenis datanya. Hal ini akan menjadi lebih jelas di bagian yang menunjukkan kasus penggunaan, seperti ruang warna yang berbeda unggul dalam tugas yang berbeda.

Mencampur, mencocokkan, menghilangkan, dan mengulangi variabel

Sesuatu yang aneh tapi menarik tentang sintaks ini, variabelnya tidak harus untuk mengaturnya kembali dan dapat diulang.

rgb(from green g g g)    /* rgb(128 128 128) */
rgb(from green b r g)    /* rgb(0 0 128) */
rgb(from green 0 0 g)    /* rgb(0 0 128) */

Opasitas sebagai variabel

Sintaksis juga menyediakan opasitas sebagai variabel bernama alpha. Bersifat opsional, dan mengikuti / dalam notasi warna fungsional.

rgb(from #00800080 r g b / alpha)             /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha)      /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha)    /* alpha=50% */

Menggunakan calc() atau fungsi CSS lainnya pada variabel

Sejauh ini kita telah terus membuat warna hijau. Mempelajari sintaks, membiasakan diri dengan langkah-langkah konversi dan destrukturisasi. Sekarang adalah waktu untuk memodifikasi variabel, ubah {i>output<i} sehingga tidak sama dengan input teks.

green                              /*  h=120 s=100% l=25%  */
hsl(from green calc(h * 2) s l)    /*  h=240 s=100% l=25%  */

Warnanya dongker! Hue digandakan, mengambil hue 120 dan mengubahnya menjadi 240, sehingga mengubah warna sepenuhnya. Tindakan ini akan memutar hue di sepanjang warna roda gulir, trik rapi yang sangat mudah dibuat dengan ruang warna silinder seperti HSL, HWB, LCH, dan OKLCH.

Untuk melihat nilai saluran secara visual, sehingga Anda bisa mendapatkan perhitungan dengan tepat tanpa menebak atau menghafal spesifikasinya, cobalah alat nilai saluran sintaksis warna relatif ini. Cara ini mengungkapkan nilai setiap saluran berdasarkan sintaks yang Anda tentukan, sehingga Anda dapat mengetahui dengan tepat nilai yang tersedia untuk dimainkan.

Memeriksa dukungan browser

@supports (color: rgb(from white r g b)) {
  /* safe to use relative color syntax */
}

Kasus penggunaan dan demonstrasi

Contoh dan kasus penggunaan berikut memiliki banyak sintaks alternatif untuk mencapai hasil yang serupa atau sama. Variasi berasal dari ruang warna dan saluran yang ditawarkan.

Selain itu, banyak contoh akan menunjukkan penyesuaian warna dengan panjang kata by dan to. Warna by yang berubah adalah perubahan warna relatif; perubahan yang menggunakan nilai variabel dan membuat penyesuaian berdasarkan nilainya saat ini. J perubahan warna to adalah perubahan warna absolut; perubahan yang tidak menggunakan variabel dan menentukan nilai yang sama sekali baru.

Semua demo dapat ditemukan di koleksi Codepen ini.

Mencerahkan warna

OKLCH, OKLAB, XYZ atau Ruang warna sRGB memberikan hasil yang dapat diprediksi saat mencerahkan warna.

Catatan: Pelajari lebih lanjut hasil gradien yang dapat diprediksi dalam episode podcast CSS.

Cerahkan dalam jumlah tertentu

Contoh berikut .lighten-by-25 mengambil warna blue dan mengonversinya menjadi OKLCH, lalu mencerahkan warna biru dengan meningkatkan saluran l (kecerahan) dengan mengalikan nilai saat ini dengan 1.25. Tindakan ini akan mendorong kecerahan biru ke arah putih sebesar 25%.

.lighten-by-25 {
  background: oklch(from blue calc(l * 1.25) c h);
}

Cerahkan ke nilai tertentu

Contoh berikut .lighten-to-75 tidak menggunakan saluran l untuk mencerahkan blue, fungsi ini akan sepenuhnya mengganti nilai dengan 75%.

.lighten-to-75 {
  background: oklch(from blue 75% c h);
}

Menggelapkan warna

Ruang warna yang sama efektif untuk mencerahkan warna, juga bagus untuk menjadi lebih gelap.

Gelapkan sebesar jumlah tertentu

Contoh berikut .darken-by-25 mengambil warna biru dan mengonversinya menjadi OKLCH, kemudian menggelapkan biru dengan mengurangi saluran l (kecerahan) sebesar 25% dengan mengalikan nilainya dengan .75. Tindakan ini akan mendorong warna biru ke hitam sebesar 25%.

.darken-by-25 {
  background: oklch(from blue calc(l * .75) c h);
}

Menggelapkan ke nilai yang ditentukan

Contoh berikut .darken-to-25 tidak menggunakan saluran l untuk menggelapkan blue, nilai ini akan sepenuhnya menggantikan nilai dengan 25%.

.darken-to-25 {
  background: oklch(from blue 25% c h);
}

Saturasi warna

Saturasi dalam jumlah tertentu

Contoh berikut .saturate-by-50 menggunakan s dari hsl() untuk meningkatkan Cahaya orchid oleh kerabat 50%.

.saturate-by-50 {
  background: hsl(from orchid h calc(s * 1.5) l);
}

Saturasi ke jumlah tertentu

Contoh .saturate-to-100 berikut tidak menggunakan saluran s dari hsl(), ini akan menentukan nilai saturasi yang diinginkan. Dalam contoh ini, saturasi dinaikkan menjadi 100%.

.saturate-to-100 {
  background: hsl(from orchid h 100% l);
}

Menurunkan saturasi warna

Menurunkan saturasi berdasarkan jumlah

Contoh berikut .desaturate-by-half menggunakan s dari hsl() untuk menurunkan saturasi indigo sebesar setengahnya.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Menurunkan saturasi ke nilai tertentu

Daripada menurunkan saturasi berdasarkan jumlah, Anda dapat menurunkan saturasi ke level tertentu yang diinginkan dengan sejumlah nilai. Contoh .desaturate-to-25 berikut membuat warna baru berdasarkan indigo, tetapi menyetel saturasi ke 25%.

.desaturate-to-25 {
  background: hsl(from indigo h 25% l);
}

Kroma meningkatkan warna

Efek ini mirip dengan saturasi warna tetapi berbeda dalam beberapa cara. Pertama, ini adalah perubahan chroma, bukan perubahan saturation, dan ini adalah karena ruang warna yang dapat masuk menjadi rentang dinamis tinggi tidak memanfaatkan saturasi tertentu. Ruang warna yang menampilkan chroma adalah rentang dinamis tinggi mampu meningkatkan kecemerlangan warna lebih jauh dari saturasi bahkan Anda bisa melakukannya.

.increase-chroma {
  background: oklch(from orange l calc(c + .1) h);
}

Menyesuaikan opasitas warna

Membuat varian semi-transparan dari warna adalah salah satu warna yang paling umum penyesuaian yang dilakukan dalam sistem desain. Lihat contohnya di bagian pengantar jika Anda melewatkannya, akan dibahas ruang permasalahan dengan sangat baik.

Menyesuaikan opasitas berdasarkan jumlah

.decrease-opacity-by-25 {
  background: rgb(from lime r g b / calc(alpha / 2));
}

Menyesuaikan opasitas ke nilai tertentu

.decrease-opacity-to-25 {
  background: rgb(from lime r g b / 25%);
}

Menginversi warna

Inversi warna adalah fungsi penyesuaian warna umum yang ditemukan di library warna. Salah satu cara untuk mencapai ini adalah dengan mengubah warna ke RGB kemudian mengurangi setiap nilai channel dari 1.

.invert-each-rgb-channel {
  background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}

Melengkapi warna

Jika tujuan Anda bukanlah untuk menginversi warna melainkan melengkapinya, maka rona adalah yang Anda cari. Pilih ruang warna yang menawarkan hue sebagai sudut, lalu gunakan calc() untuk memutar hue sesuai jumlah yang Anda inginkan. Menemukan komplementer warna dilakukan dengan memutar setengah putaran, dalam hal ini Anda dapat menambah atau mengurangi dari saluran h dengan 180 untuk mencapai hasil.

.complementary-color {
  background: hsl(from blue calc(h + 180) s l);
}

Mengontraskan warna

Sebagai metode untuk mencapai rasio kontras warna yang aksesibel, pertimbangkan L&midast; (Lstar). Ini menggunakan saluran (kurang-lebih) kecerahan seragam (L) yang seragam dari LCH dan OKLCH, di calc(). Bergantung pada apakah Anda menargetkan rendah, sedang, atau tinggi kontras, L&midast; delta sekitar ~40, ~50, atau ~60.

Teknik ini berfungsi dengan baik di semua hue di LCH atau OKLCH.

Membuat kontras warna yang lebih gelap

Class .well-contrasting-darker-color menunjukkan L* dengan delta 60. Karena warna asal adalah warna gelap (kecerahan bernilai rendah), 60% (0.6) ditambahkan ke saluran kecerahan. Teknik ini digunakan untuk mendapatkan hasil kontras yang baik, rona warna yang sama, warna teks gelap dengan latar belakang terang.

.well-contrasting-darker-color {
  background: darkred;
  color: oklch(from darkred calc(l + .60) c h);
}

Membuat kontras warna yang lebih terang

Class .well-contrasting-lighter-color menunjukkan L* dengan delta 60% juga. Karena warna asal adalah warna terang (kecerahan bernilai tinggi), 0,60 adalah dikurangi dari saluran {i>lightness<i}.

.well-contrasting-lighter-color {
  background: lightpink;
  color: oklch(from lightpink calc(l - .60) c h);
}

Palet warna

Sintaksis warna relatif sangat baik dalam membuat palet warna. Terutama berguna dan canggih karena jumlah ruang warna yang tersedia. Hal berikut semua contoh menggunakan OKLCH karena saluran kecerahan dapat diandalkan dan hue {i>channel<i} dapat dirotasi tanpa efek samping. Contoh terakhir menunjukkan kombinasi kecerahan dan penyesuaian rotasi hue agar lebih menarik hasil!

Buka contoh kode sumber untuk resource ini dan coba ubah --base-color, menjadi melihat betapa dinamisnya palet ini. Ini menyenangkan!

Jika Anda menyukai video, saya memberikan informasi mendalam tentang cara membangun palet warna di CSS dengan OKLCH di YouTube.

Palet monokromatik

Untuk membuat palet monokromatik adalah dengan membuat palet dari rona yang sama tetapi dengan variasi dalam terang dan gelap. Warna tengah adalah warna sumber untuk palet, di mana dua varian lebih terang dan dua lebih gelap diletakkan di lain.

:root {
  --base-color: deeppink;

  --color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
  --color-1: oklch(from var(--base-color) calc(l + .10) c h);
  --color-2: var(--base-color);
  --color-3: oklch(from var(--base-color) calc(l - .10) c h);
  --color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}

Cobalah sekumpulan palet yang dibuat dengan {i>syntax<i} warna relatif dan OKLCH

Open Props, koleksi variabel CSS gratis, penawaran palet warna yang dibangun dengan strategi ini dan membuatnya mudah digunakan dengan impor. Mereka juga dibuat dari warna yang dapat Anda sesuaikan, Anda cukup memberi itu sebuah warna dan menyemburkan sebuah palet!

Palet analog

Karena rotasi hue sangat mudah dilakukan dengan OKLCH dan HSL, maka sangat mudah untuk palet warna analog. Putar hue sesuai hasil yang Anda inginkan dan ubah warna dasar, dan melihat palet baru dibangun oleh {i>browser<i}.

:root {
  --base-color: blue;

  --primary:   var(--base-color);
  --secondary: oklch(from var(--base-color) l c calc(h - 45));
  --tertiary:  oklch(from var(--base-color) l c calc(h + 45));
}

Palet triadik

Mirip dengan warna pelengkap, palet warna triadik rotasi rona yang berlawanan tetapi harmonis diberi warna dasar. Di mana warna komplementer berada di sisi yang berlawanan dari warna, seperti garis lurus yang digambar melalui tengah roda warna, palet triadik seperti segitiga garis, menemukan 2 warna yang sama-sama diputar dari warna dasar. Lakukan hal ini dengan memutar hue 120deg.

Ini adalah sedikit penyederhanaan teori warna, tetapi cukup untuk menendang membantu Anda masuk ke palet triadik yang lebih kompleks jika tertarik.

:root {
  --base-color: yellow;
  --triad-1: oklch(from var(--base-color) l c calc(h - 120));
  --triad-2: oklch(from var(--base-color) l c calc(h + 120));
}

Palet tetradik

Palet tetradik adalah empat warna yang tersebar secara merata di sekitar roda warna, membuat palet tanpa nilai dominan yang jelas. Anda bisa membayangkannya juga, seperti dua pasangan warna komplementer. Jika digunakan dengan bijak, maka akan sangat berarti.

Ini adalah sedikit penyederhanaan teori warna, tetapi cukup untuk menendang mengarahkan Anda ke palet tetradik yang lebih kompleks jika Anda tertarik.

:root {
  --base-color: lime;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) l c calc(h + 90));
  --color-3: oklch(from var(--base-color) l c calc(h + 180));
  --color-4: oklch(from var(--base-color) l c calc(h + 270));
}

Monokromatik dengan sedikit rotasi hue

Banyak pakar warna yang melakukan trik ini. Masalahnya, skala warna monokrom bisa sangat membosankan. Solusinya adalah dengan menambahkan rotasi hue minor atau utama ke setiap warna baru saat kecerahan diubah.

Contoh berikut mengurangi kecerahan sebesar 10% setiap swatch dan juga memutar hue sebesar 10 derajat. Hasilnya, sebuah palet hotpink ke nila yang tampaknya menyatu dengan mulus seperti gradien.

:root {
  --base-color: deeppink;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
  --color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
  --color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
  --color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}

Coba papan peringkat ini yang dibuat dengan OKLCH dan rotasi hue

Antarmuka papan peringkat berikut menggunakan strategi rotasi hue ini. Setiap daftar item melacak indeksnya dalam dokumen sebagai variabel yang disebut --i. Indeks ini kemudian digunakan untuk menyesuaikan kroma, kecerahan, dan hue. Penyesuaiannya hanya sebesar 5% atau 5deg, jauh lebih halus dibandingkan contoh di atas dengan deeppink, sehingga ingin melihat alasan papan peringkat ini dapat dalam rona apa pun dengan keanggunan.

Pastikan untuk mengubah hue pada penggeser di bawah papan peringkat, dan lihat sintaks warna relatif menciptakan momen warna yang indah.

li {
  --_bg: oklch(
    /* decrease lightness as list grows */
    calc(75% - (var(--i) * 5%))

    /* decrease chroma as list grows */
    calc(.2 - (var(--i) * .01))

    /* lightly rotate the hue as the list grows */
    calc(var(--hue) - (var(--i) + 5))
  );
}