Membuat warna baru berdasarkan saluran dan nilai warna lain.
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
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.
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.
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* (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* 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))
);
}