Saya baru-baru ini memperbarui grafik animasi di situs web saya dengan tema baru dan sekelompok karakter perintis, mempraktikkan banyak teknik yang saya bagikan dalam seri ini. Beberapa animasi saya berubah tampilannya ketika seseorang berinteraksi dengannya atau pada waktu yang berbeda dalam sehari.
Warna grafik di atas halaman blog saya berubah dari pagi hingga malam setiap hari. Lalu, ada mode salju, yang menambahkan warna dingin dan tema musim dingin, berkat lapisan overlay dan mode blending.
Saat mengerjakan ini, saya mulai bertanya-tanya apakah nilai warna relatif CSS dapat memberi saya kontrol lebih besar sekaligus menyederhanakan prosesnya. Catatan: Dalam tutorial ini, saya akan fokus pada nilai warna relatif dan ruang warna OKLCH untuk memberi tema grafis dan animasi. Jika Anda ingin mendalami warna relatif, Ahmad Shadeed membuat panduan interaktif yang luar biasa. Mengenai ruang warna, gamut, dan OKLCH, Geoff Graham kami sendiri yang menulis tentangnya.
Penggunaan elemen secara berulang-ulang adalah kuncinya. Latar belakang digunakan kembali bila memungkinkan, dengan zoom dan overlay membantu membangun adegan baru dari karya seni yang sama. Ini lahir karena kebutuhan, tetapi juga mendorong pemikiran dalam bentuk serial daripada adegan individual. Masalah Dengan Memperbarui Palet Warna Secara Manual Mari langsung ke tantangan saya. Dalam Judul Toon seperti ini — berdasarkan episode Yogi Bear Show tahun 1959 “Lullabye-Bye Bear” — dan karya saya secara umum, palet dibatasi pada beberapa warna tertentu.
Saya menciptakan corak dan rona dari apa yang saya sebut warna “fondasi” untuk memperluas palet tanpa menambahkan lebih banyak rona.
Di Sketch, saya bekerja di ruang warna HSL, jadi proses ini melibatkan peningkatan atau penurunan nilai kecerahan warna dasar saya. Sejujurnya, ini bukanlah tugas yang sulit — tetapi memilih warna alas bedak yang berbeda memerlukan penciptaan rangkaian corak dan rona yang benar-benar baru. Melakukannya secara manual, lagi dan lagi, dengan cepat menjadi melelahkan.
Saya menyebutkan HSL — H (hue), S (saturation), dan L (lightness) — ruang warna, namun itu hanyalah salah satu dari beberapa cara untuk mendeskripsikan warna. RGB — R (merah), G (hijau), B (biru) — mungkin yang paling familiar, setidaknya dalam bentuk Hex-nya. Ada juga LAB — L (ringan), A (hijau–merah), B (biru–kuning) — dan yang lebih baru, namun kini didukung secara luas LCH — L (ringan), C (chroma), H (hue) — model dalam bentuk OKLCH-nya. Dengan LCH — khususnya OKLCH di CSS — saya dapat menyesuaikan nilai kecerahan warna alas bedak saya.
Atau saya bisa mengubah kromanya. Kroma LCH dan saturasi HSL menggambarkan intensitas atau kekayaan suatu warna, namun keduanya melakukannya dengan cara yang berbeda. LCH memberi saya rentang yang lebih luas dan perpaduan warna yang lebih dapat diprediksi.
Saya juga dapat mengubah rona untuk membuat palet warna yang memiliki nilai kecerahan dan kroma yang sama. Baik di HSL maupun LCH, spektrum rona dimulai dari merah, beralih ke hijau dan biru, dan kembali ke merah.
Mengapa OKLCH Mengubah Cara Saya Berpikir Tentang Warna Dukungan browser untuk ruang warna OKLCH kini tersebar luas, meskipun alat desain — termasuk Sketch — belum bisa menyusulnya. Untungnya, hal itu tidak menghentikan Anda untuk menggunakan OKLCH. Browser dengan senang hati akan mengubah nilai Hex, HSL, LAB, dan RGB menjadi OKLCH untuk Anda. Anda dapat menentukan properti khusus CSS dengan warna dasar di ruang mana pun, termasuk Hex: /* Warna alas bedak */ --fondasi: #5accd6;
Warna apa pun yang berasal darinya akan diubah menjadi OKLCH secara otomatis: --fondasi-cahaya: oklch(dari var(--fondasi) [...]; } --foundation-mid: oklch(dari var(--foundation) [...]; } --fondasi-gelap: oklch(dari var(--fondasi) [...]; }
Warna Relatif Sebagai Sistem Desain Bayangkan warna relatif yang mengatakan: “Ambil warna ini, sesuaikan, lalu beri saya hasilnya.” Ada dua cara untuk menyesuaikan warna: perubahan absolut dan perubahan proporsional. Kodenya terlihat serupa, tetapi berperilaku sangat berbeda setelah Anda mulai menukar warna dasar. Memahami bahwa perbedaan itulah yang dapat mengubah penggunaan warna relatif menjadi suatu sistem. /* Warna alas bedak */ --fondasi: #5accd6;
Misalnya nilai kecerahan warna foundation saya adalah 0,7837, sedangkan versi yang lebih gelap memiliki nilai 0,5837. Untuk menghitung selisihnya, saya mengurangi nilai yang lebih rendah dari nilai yang lebih tinggi dan menerapkan hasilnya menggunakan fungsi calc(): --fondasi-gelap: okelch(dari var(--fondasi) kalk(l - 0,20) c h);
Untuk mendapatkan warna yang lebih terang, saya menambahkan perbedaannya: --fondasi-cahaya: okelch(dari var(--fondasi) kal(l + 0,10) c h);
Kromapenyesuaian mengikuti proses yang sama. Untuk mengurangi intensitas warna alas bedak saya dari 0,1035 menjadi 0,0035, saya mengurangi satu nilai dari nilai lainnya: okelch(dari var(--fondasi) aku menghitung(c - 0,10) jam);
Untuk membuat palet rona, saya menghitung perbedaan antara nilai rona warna dasar saya (200) dan rona baru saya (260): okelch(dari var(--fondasi) l c kal(h + 60));
Perhitungan tersebut bersifat mutlak. Ketika saya mengurangi jumlah yang tetap, saya secara efektif mengatakan, “Selalu kurangi sebanyak ini.” Hal yang sama berlaku ketika menambahkan nilai tetap: perhitungan (c - 0,10) perhitungan(c + 0,10)
Saya mempelajari batasan pendekatan ini dengan susah payah. Saat saya mengandalkan pengurangan nilai kroma tetap, warna menyusut menjadi abu-abu segera setelah saya mengubah alas bedak. Palet yang berfungsi untuk satu warna menjadi berantakan karena warna lain. Perkalian berperilaku berbeda. Saat saya mengalikan kroma, saya memberi tahu browser: “Kurangi intensitas warna ini secara proporsional.” Hubungan antar warna tetap utuh, meskipun alas bedaknya berubah: perhitungan(c * 0,10)
Aturan Pindahkan Saya, Skala, Putar
Pindahkan keringanan (menambah atau mengurangi), Skala kroma (berkembang biak), Putar rona (menambah atau mengurangi derajat).
Saya menskalakan kroma karena saya ingin perubahan intensitas tetap proporsional dengan warna dasar. Hubungan rona bersifat rotasi, jadi mengalikan rona tidak masuk akal. Lightness bersifat perseptual dan absolut — mengalikannya sering kali menghasilkan hasil yang aneh.
Dari Satu Warna Menjadi Seluruh Tema Warna relatif memungkinkan saya menentukan warna dasar dan menghasilkan setiap warna lain yang saya perlukan — isian, guratan, penghentian gradien, bayangan — darinya. Pada titik itu, warna berhenti menjadi palet dan mulai menjadi sebuah sistem. Ilustrasi SVG cenderung menggunakan kembali beberapa warna yang sama pada isian, guratan, dan gradien. Warna relatif memungkinkan Anda menentukan hubungan tersebut satu kali dan menggunakannya kembali di mana saja — seperti halnya animator menggunakan kembali latar belakang untuk membuat adegan baru.
Ubah warna alas bedak satu kali, dan setiap warna turunan akan diperbarui secara otomatis, tanpa perlu menghitung ulang apa pun secara manual. Di luar grafik animasi, saya dapat menggunakan pendekatan yang sama untuk menentukan warna status elemen interaktif seperti tombol dan tautan. Warna alas bedak yang saya gunakan dalam Judul Toon “Lullabye-Bye Bear” saya adalah warna biru yang tampak cyan. Latar belakangnya adalah gradien radial antara alas bedak saya dan versi yang lebih gelap.
Untuk membuat versi alternatif dengan suasana yang sepenuhnya berbeda, saya hanya perlu mengubah warna dasar: --fondasi: #5accd6; --grad-end: var(--fondasi); --grad-start: oklch(dari var(--foundation) kalk(l - 0,2357) kalk(c * 0,833) jam);
Untuk mengikat properti khusus tersebut ke gradien SVG saya tanpa menduplikasi nilai warna, saya mengganti nilai stop-color yang dikodekan dengan gaya inline:
Selanjutnya, saya perlu memastikan bahwa Toon Text saya selalu kontras dengan warna alas bedak apa pun yang saya pilih. Rotasi rona 180 derajat menghasilkan warna komplementer yang jelas menonjol — namun dapat bergetar dengan tidak nyaman: .teks-cahaya { isi: oklch(dari var(--fondasi) l c kal(h + 180)); }
Pergeseran 90° menghasilkan warna sekunder yang cerah tanpa saling melengkapi: .teks-cahaya { isi: oklch(dari var(--fondasi) aku menghitung (h - 90)); }
Pembuatan ulang Judul Toon 1959 Quick Draw McGraw saya “El Kabong” menggunakan teknik yang sama tetapi dengan palet yang lebih bervariasi. Misalnya, ada gradien radial lain antara warna alas bedak dan warna yang lebih gelap.
Bangunan dan pohon di latar belakangnya memiliki nuansa berbeda dengan warna dasar yang sama. Untuk jalur tersebut, saya memerlukan dua warna isian tambahan: .bg-pertengahan { isi: oklch(dari var(--fondasi) kalk(l - 0,04) kalk(c * 0,91) jam); }
.bg-gelap { isi: oklch(dari var(--fondasi) kalk(l - 0,12) kalk(c * 0,64) jam); }
Saat Fondasi Mulai Bergerak
Sejauh ini, semua yang saya tunjukkan bersifat statis. Bahkan ketika seseorang menggunakan color picker untuk mengubah warna alas bedak, perubahan itu terjadi secara instan. Namun grafik animasi jarang berhenti — petunjuknya ada pada namanya. Jadi, jika warna adalah bagian dari sistem, tidak ada alasan mengapa warna tidak dapat dianimasikan juga.
Untuk menganimasikan warna dasar, pertama-tama saya harus membaginya menjadi saluran OKLCH-nya— kecerahan, kroma, dan rona. Namun ada langkah tambahan yang penting: Saya perlu mendaftarkan nilai tersebut sebagai properti khusus yang diketik. Tapi apa maksudnya?
Secara default, browser tidak mengetahui apakah nilai properti khusus CSS mewakili warna, panjang, angka, atau sesuatu yang lain sama sekali. Hal ini sering kali berarti nilai tersebut tidak dapat diinterpolasi dengan lancar selama animasi, dan berpindah dari satu nilai ke nilai berikutnya.
Mendaftarkan properti khusus memberi tahu browser jenis nilai yang diwakilinya dan bagaimana perilakunya seiring waktu. Dalam hal ini, saya ingin browser memperlakukan saluran warna saya sebagai angka sehingga dapat dianimasikan dengan lancar.
@properti --f-l {
sintaksis: "
@properti --f-c {
sintaksis: "
@properti --f-h {
sintaksis: "
Setelah didaftarkan, properti khusus ini berperilaku seperti CSS asli. Browser dapat menginterpolasinya frame-by-frame. Saya kemudian membangun kembali warna dasar dari saluran tersebut: --fondasi: oklch(var(--f-l) var(--f-c) var(--f-h));
Hal ini membuat warna dasar menjadi dapat dianimasikan, sama seperti nilai numerik lainnya. Berikut adalah animasi “pernapasan” sederhana yang dengan lembut mengubah kecerahan seiring waktu: @keyframes bernafas { 0%, 100% { --fl: 0,36; } 50% { --fl: 0,46; } }
.toon-judul { animasi: bernapas 10 detik kemudahan masuk-keluar tak terbatas; }
Karena setiap warna lain dalam isian, gradien, dan guratan berasal dari --foundation, semuanya dianimasikan bersama-sama, dan tidak ada yang perlu diperbarui secara manual. Satu Warna Animasi, Banyak Efek Pada awal proses ini, saya bertanya-tanya apakah nilai warna relatif CSS dapat menawarkan lebih banyak kemungkinan sekaligus membuatnya lebih mudah untuk diterapkan. Saya baru-baru ini menambahkan latar belakang tambang emas baru ke halaman kontak situs web saya, dan iterasi pertama menyertakan lampu minyak yang menyala dan berayun.
Saya ingin mengeksplorasi bagaimana menganimasikan warna relatif CSS dapat membuat interior tambang lebih realistis dengan mewarnainya dengan warna dari lampu. Saya ingin mereka mempengaruhi dunia di sekitar mereka, seperti halnya cahaya sebenarnya. Jadi, daripada menganimasikan banyak warna, saya membangun sistem pencahayaan kecil yang hanya menganimasikan satu warna.
Tugas pertama saya adalah menempatkan lapisan overlay antara latar belakang dan lampu saya:
Saya menggunakan mode campuran-campuran: warna karena warna tersebut memberi warna pada apa yang ada di bawahnya sambil mempertahankan pencahayaan yang mendasarinya. Karena saya hanya ingin overlay terlihat ketika animasi diaktifkan, saya membuat overlay opt-in: .svg-tambang #overlay { tampilan: tidak ada; }
@media (lebih memilih gerakan yang dikurangi: tidak ada preferensi) { .svg-mine[data-animasi=aktif] #overlay { tampilan: blok; opacity: 0,5; } }
Lapisan luarnya sudah terpasang, namun belum tersambung ke lampu. Saya membutuhkan sumber cahaya. Lampu saya sederhana, dan masing-masing lampu berisi elemen lingkaran yang saya buramkan dengan filter. Filter menghasilkan keburaman yang sangat lembut di seluruh lingkaran.
Daripada menganimasikan overlay dan lampu secara terpisah, saya menganimasikan satu token warna “nyala” dan mengambil semua hal lain darinya. Pertama, saya mendaftarkan tiga properti khusus yang diketik untuk saluran OKLCH:
@properti --fl-l {
sintaksis: "
Saya menganimasikan saluran-saluran itu, dengan sengaja mendorong beberapa frame ke arah oranye sehingga kedipannya terbaca dengan jelas seperti cahaya api:
@keyframes api { 0%, 100% { --fl-l: 0,86; --fl-c: 0,12; --fl-h: 95; } 6% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 92; } 12% { --fl-l: 0,83; --fl-c: 0,14; --fl-h: 100; } 18% { --fl-l: 0,88; --fl-c: 0,11; --fl-h: 94; } 24% { --fl-l: 0,82; --fl-c: 0,16; --fl-h: 82; } 30% { --fl-l: 0,90; --fl-c: 0,12; --fl-h: 90; } 36% { --fl-l: 0,79; --fl-c: 0,17; --fl-h: 76; } 44% { --fl-l: 0,87; --fl-c: 0,12; --fl-h: 96; } 52% { --fl-l: 0,81; --fl-c: 0,15; --fl-h: 102; } 60% { --fl-l: 0,89; --fl-c: 0,11; --fl-h: 93; } 68% { --fl-l: 0,83; --fl-c: 0,16; --fl-h: 85; } 76% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 91; } 84% { --fl-l: 0,85; --fl-c: 0,14; --fl-h: 98; } 92% {--fl-l: 0,80; --fl-c: 0,17; --fl-h: 74; } }
Lalu saya memasukkan animasi itu ke SVG, sehingga variabel bersama tersedia untuk lampu dan overlay saya:
@media (lebih memilih gerakan yang dikurangi: tidak ada preferensi) { .svg-mine[data-animasi=aktif] { animasi: api 3,6 detik linier tak terbatas; isolasi: mengisolasi;
/* Membuat warna api dari saluran animasi */ --nyala: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Warna lampu berasal dari nyala api */ --inti lampu: oklch(dari var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Warna overlay berasal dari nyala api yang sama */ --overlay-tint: oklch(dari var(--api) kalk(l + 0,06) kalk(c * 0,65) kalk(h - 10)); } }
Terakhir, saya menerapkan warna turunan tersebut pada lampu yang bersinar dan lapisan yang dipengaruhinya: @media (lebih memilih gerakan yang dikurangi: tidak ada preferensi) { .svg-mine[data-animations=on] #mine-lamp-1 > lingkaran, .svg-mine[data-animations=on] #mine-lamp-2 > lingkaran { isi: var(--lamp-core); }
.svg-mine[data-animasi=aktif] #overlay { tampilan: blok; isi: var(--overlay-tint); opacity: 0,5; } }
Saat nyala api bergeser ke arah oranye, lampu menjadi hangat, dan pemandangan pun ikut memanas. Saat nyala api mendingin, semuanya beres. Bagian terbaiknya adalah tidak ada yang ditulis secara manual. Jika saya mengubah warna dasar atau mengubah rentang animasi nyala api, seluruh sistem pencahayaan akan diperbarui secara bersamaan. Anda dapat melihat hasil akhirnya di situs web saya. Digunakan Kembali, Digunakan Kembali, Ditinjau Kembali Para animator Hanna-Barbera terpaksa mengubah elemen karena kebutuhan, namun saya menggunakan kembali warna karena membuat pekerjaan saya lebih konsisten dan lebih mudah dipelihara. Nilai warna relatif CSS memungkinkan saya untuk:
Tentukan satu warna alas bedak, Jelaskan bagaimana warna lain berhubungan dengannya, Gunakan kembali hubungan itu di mana pun, dan Menganimasikan sistem dengan mengubah satu nilai.
Warna relatif tidak hanya membuat tema menjadi lebih mudah. Hal ini mendorong cara berpikir yang menjadikan warna, seperti halnya gerakan, disengaja — dan mengubah satu nilai dapat mengubah keseluruhan pemandangan tanpa perlu menulis ulang karya yang mendasarinya.
