Memahami warna relatif dalam desain web

Dalam desain web, bahkan keputusan yang paling sederhana dapat berkembang biak. Apa yang dimulai sebagai pilihan desain tunggal dengan cepat berkembang menjadi lusinan variasi visual untuk interaksi, latar belakang, perbatasan, dan banyak lagi. Bangunan Anda dapat menjadi berantakan dengan nilai -nilai yang tidak cocok dan tweak manual tanpa sistem yang konsisten.

Sintaks warna relatif di CSS menawarkan pendekatan yang lebih pintar dan lebih dapat diskalakan. Ini memungkinkan Anda mendefinisikan variasi visual berdasarkan satu sumber, menjaga desain Anda kohesif dan mudah dikelola. Biasanya, ini membutuhkan penulisan kode khusus. Tetapi dengan Divi 5, Anda dapat menggunakan teknik modern ini secara visual, sejak awal. Mari kita lihat lebih dekat.

Masalah Manajemen Warna Umum

Satu warna merek sempurna yang Anda pilih dapat dengan cepat berlipat ganda menjadi lusinan variasi yang tersebar di situs Anda. Berikut adalah beberapa masalah yang berkontribusi pada masalah ini:

Mengelola variasi untuk satu warna

Anda mulai dengan satu pangkalan biru dan dengan cepat membutuhkan lusinan variasi. Pemetik warna pembangun halaman Anda menjadi berantakan. Biru terang, biru yang lebih terang, biru tua, biru gelap, biru pudar - masing -masing disimpan sebagai warna yang terpisah.

Merek Anda Blue mencakup dua puluh warna berbeda di situs Anda. Beberapa bagian menggunakan biru asli, yang lain menggunakan versi yang lebih ringan yang Anda buat tiga minggu lalu, dan tombol Anda menggunakan warna gelap yang Anda buat untuk kontras yang lebih baik.

Tak satu pun dari warna -warna ini terhubung ke yang lain. Ketika klien Anda menginginkan ungu, bukan biru, Anda menghadapi memperbarui setiap warna dengan tangan. Anda akan menghabiskan berjam -jam mengklik modul. Anda memburu setiap warna. Anda berharap Anda tidak ketinggalan.

Kumpulan banyak warna biru yang serupa di sebelah kiri berubah menjadi ungu yang tersebar dan tidak berhubungan di sebelah kanan karena memperbaruinya satu per satu membosankan dan membutuhkan konsistensi yang konstan. Terlebih lagi, variasi warna ini biasanya bola mata dan tidak memiliki koneksi.

Masalah opacity

Banyak pembangun halaman termasuk kontrol transparansi, yang bisa menjadi mimpi buruk untuk konsistensi warna. Anda dapat membuat overlay biru yang sempurna dengan opacity 60%, tetapi nanti, Anda perlu merah tembus pandang yang sama untuk bagian yang berbeda.

Pembuat halaman Anda tidak ingat campuran yang tepat, jadi Anda dibiarkan mengamati slider opacity dan mencoba mencocokkan apa yang Anda buat sebelumnya.

Upaya 1, 2, dan 3 bervariasi dalam naungan dan transparansi karena eyeball tidak memberikan hasil yang tepat bahkan dengan kontrol yang tepat.

Beberapa pembangun halaman memungkinkan Anda menyimpan warna transparan. Orang lain tidak. Anda berakhir dengan sekelompok biru tembus pandang yang tampak serupa.

Mereka semua sedikit berbeda. Desain Anda kehilangan konsistensi. Anda tidak dapat dengan andal menciptakan kembali warna transparan yang sama di berbagai modul. Setiap kali Anda membutuhkan transparansi, Anda mulai dari awal. Anda menebak nilai opacity. Anda berharap mereka cocok dengan desain Anda yang ada.

Membuat variabel secara manual

Sebagian besar pembangun halaman menawarkan beberapa bentuk penghematan warna, tetapi dengan cepat menjadi tidak terkendali. Anda menyimpan warna dengan nama generik seperti "Yellow 1," "Yellow 2," dan "Yellow Light."

Enam bulan kemudian, Anda tidak tahu kuning mana yang melakukan apa. Palet warna yang Anda simpan menjadi berantakan warna yang mirip dengan nama yang tidak berarti. Perpustakaan warna Anda tumbuh tanpa sistem organisasi apa pun. Anda memiliki tiga jeruk berbeda yang terlihat hampir sama, tetapi mereka melayani berbagai tujuan.

Sebuah kisi -kisi dari banyak swatch warna dengan nuansa yang tumpang tindih dan nama -nama yang tidak konsisten, tidak jelas berkontribusi pada palet yang berantakan dan membingungkan yang sulit diatur atau digunakan secara efektif.

Anggota tim menambahkan variasi warna mereka, membuat nuansa duplikat dengan nama yang berbeda. Oranye merek Anda ada sebagai "oranye," "oranye merek," "oranye primer," dan "oranye utama." Tidak ada yang tahu mana yang akan digunakan.

Beberapa pengembang mencoba menyelesaikannya dengan menulis variabel CSS khusus. Ini memberi mereka kontrol yang lebih baik atas hubungan warna.

Tapi sekarang Anda telah membuat rintangan teknis. Anggota tim non-teknologi Anda tidak dapat lagi memperbarui warna, dan klien Anda tidak dapat membuat perubahan warna sederhana sendiri. Anda menjadi bertanggung jawab atas setiap penyesuaian warna kecil.

Warna relatif apa yang ada di CSS (dan mengapa Anda membutuhkannya)

Warna relatif menyelesaikan masalah warna Anda. Anda memilih satu warna merek. CSS membuat semua versi yang Anda butuhkan. Yang ringan untuk latar belakang. Yang gelap untuk perbatasan. Yang jelas untuk overlay. Semua dari satu warna awal.

CSS berfungsi sebagai alat warna dinamis. Anda mengatakannya, "Buat pemantik kuning ini." CSS melakukan pekerjaan. Tombol merah Anda perlu memudar saat melayang. CSS menambahkan transparansi. Header biru Anda membutuhkan perbatasan yang lebih gelap. CSS segera membuatnya.

Alur kerja tradisional membutuhkan lebih banyak upaya manual. Desainer membuat set warna di Photoshop. Coders menggunakan alat seperti sass. Pembangun situs web harus menebak warna yang cocok. CSS sekarang menangani ini secara otomatis.

Bagaimana CSS menciptakan warna dari warna

Kata "dari" memberi tahu CSS untuk menggunakan warna yang ada sebagai titik awalnya. Anda memberi CSS warna, dan memecah warna menjadi potongan -potongan yang dapat digunakan.

Warna awal Anda menjadi dasar. CSS membagi menjadi beberapa bagian. Jumlah merah, jumlah hijau, jumlah biru. Atau rona, kecerahan, dan saturasi jika Anda lebih suka kontrol itu.

Anda dapat mulai dengan format warna apa pun. Gunakan warna hex seperti #e91e63. Beri tahu CSS untuk bekerja dengannya sebagai HSL untuk perubahan kecerahan yang mudah. Keluarkan RGB jika kode Anda membutuhkannya. CSS mengubah semuanya secara otomatis.

Kode mengikuti pola sederhana. Pertama, Anda mengatakan dari mana mendapatkan warnanya, dan kemudian Anda mengatakan apa yang harus diubah tentang hal itu. Anda dapat menjaga semuanya tetap sama tetapi menambahkan transparansi, atau mengubah rona tetapi menjaga kecerahan. Keduanya bekerja dengan cara yang sama.

Memecah warna menjadi beberapa bagian

Format warna yang berbeda memberi Anda alat yang berbeda. RGB memungkinkan Anda mengganti merah, hijau, dan biru secara terpisah. HSL memberi Anda rona, saturasi, dan kontrol ringan.

Begini cara kerjanya. Anda menulis RGB (dari #FF4081 RGB). CSS mengambil kode hex merah muda itu dan membaginya menjadi angka merah, hijau, dan biru. Maka Anda dapat menggunakan angka -angka itu sesuka Anda. Polanya tetap sama: fungsi warna (dari channel1 channel2 channel2 Anda.

Jadi, alih -alih menulis warna dari awal, Anda membangun warna yang ada dan hanya mengubah bagian yang ingin Anda ubah.

Setiap bagian dikonversi agar sesuai dengan apa yang Anda pilih. Mengonversi hex pink itu memberi Anda r = 255, g = 64, b = 129. Gunakan apa adanya atau ubah dengan calc ().

Anda dapat mencampur dan mencocokkan saluran juga. Ingin semua piksel merah menjadi sama? Gunakan RGB (dari VAR (–Color) GGG). Ini membutuhkan nilai hijau dan menggunakannya untuk merah, hijau, dan biru, menciptakan nada abu -abu dari warna asli Anda.

Dukungan Browser & Pertimbangan Lainnya

Situs besar tidak dapat mengabaikan pengunjung karena mereka perlu mengakomodasi semua orang. Versi lama Safari bekerja secara berbeda. Versi krom menangani beberapa hal dengan cara mereka sendiri. Firefox, itu sendiri. Anda akan akhirnya menulis tiga versi kode yang berbeda untuk satu efek warna.

Semua pekerjaan ekstra ini membutuhkan waktu jauh dari hal -hal yang lebih baik. Anda dapat meningkatkan fungsionalitas situs dan menambahkan fitur yang diinginkan orang.

Banyak pengembang menggunakan warna relatif secara selektif. Alat internal dan proyek pribadi bekerja dengan baik karena Anda mengontrol browser. Situs pemasaran dan pekerjaan klien membutuhkan perencanaan yang lebih cermat.

Teknologi ini bekerja dengan baik di tempat yang didukung. Pertanyaannya adalah apakah kompleksitas ekstra sesuai dengan garis waktu proyek dan tim Anda atau kemampuan teknis klien. Tetapi untuk kebanyakan kasus, itu akan menjadi berlebihan dan overhead untuk sebagian besar anggota tim.

Inilah sebabnya mengapa tim Divi melangkah masuk. Kami melihat desainer web berjuang dengan kompatibilitas browser sambil kehilangan alat warna yang kuat. Solusi kami dalam Divi 5 mengambil bagian terbaik dari warna relatif dan membungkusnya dalam sistem yang bekerja di mana -mana dan tidak memerlukan pengkodean.

Bagaimana Divi 5 membuat warna relatif mudah

Sekarang, Anda tahu kekuatan warna relatif; Namun, Anda mungkin menyadari bahwa itu tidak mudah untuk diterapkan. Divi 5 mengambil pendekatan yang berbeda dan membangun fleksibilitas warna langsung ke antarmuka visualnya. Tapi mari kita cari tahu apa sebenarnya Divi.

Apa itu Divi?

Divi adalah pembangun halaman WordPress yang paling populer. Ini memprioritaskan desain visual dan memberi Anda kontrol penuh atas desain Anda.

Anda dapat menyaksikan perubahan Anda terjadi secara langsung, menyesuaikan ukuran font atau jarak garis, dan segera melihat hasilnya di halaman Anda. Anda mendapatkan akses ke 200+ modul yang pergi ke mana pun Anda menginginkannya. Blok teks, judul, dan potongan konten berfungsi sebagai tim. Tidak ada templat kaku yang memeras ide -ide Anda menjadi bentuk yang canggung.

Inilah yang membuat Divi berbeda: lebih dari 2000 tata letak siap pakai yang dibangun untuk bisnis nyata. Ini bukan templat pemula dasar. Setiap desain menargetkan industri tertentu. Anda akan menemukan tata letak yang berbicara bahasa audiens Anda dan mencocokkan kebutuhan bisnis Anda.

Lewati halaman blues kosong dengan situs cepat divi

Situs divi cepat memperbaiki yang mengintimidasi kanvas kosong yang membunuh proyek sebelum dimulai. Anda mendapatkan situs web starter profesional dengan desain solid yang dibangun oleh tim desain kami menggunakan gambar asli dan karya seni yang tidak akan Anda temukan di tempat lain.

Jika Anda menginginkan sesuatu yang lebih personal, situs divi cepat bekerja dengan Divi AI untuk membangun tata letak khusus berdasarkan detail bisnis Anda. Jelaskan perusahaan konsultan atau restoran Anda, dan menghasilkan halaman yang relevan dengan konten khusus industri.

Ini bukan wireframes dasar: Anda menerima berita utama, konten tertulis, dan gambar yang sesuai dengan jenis bisnis Anda. Bahkan merancang header dan footer, halaman produk, dan templat posting blog, antara lain, untuk Anda.

Anda dapat mengatur font dan warna merek Anda dari awal atau membiarkan AI memilihnya untuk Anda. AI bekerja dalam pedoman tersebut. Setelah itu, semuanya tetap dapat diedit sepenuhnya, sehingga Anda dapat menyesuaikan tipografi sampai sesuai dengan kebutuhan Anda.

Kontrol lengkap atas desain situs Anda, sekarang dengan AI

Pembuat tema membuat Anda bertanggung jawab atas desain di seluruh situs web Anda. Buat header khusus yang mencerminkan kepribadian merek Anda. Bangun tata letak blog yang membuat pembaca terlibat dengan artikel panjang. 404 halaman Anda dapat tetap di dalam merek dengan font dan gaya yang cocok.

Divi Ai, seperti yang disebutkan sebelumnya, menempatkan AI tepat di dalam alur kerja desain Anda. Buat berita utama yang terdengar seperti Anda menulisnya dan deskripsi produk yang menangkap suara merek Anda.

Pengeditan foto dapat dilakukan di dalam pembangun. Beri tahu AI perubahan apa yang Anda inginkan dalam sebuah gambar, dan itu menangani pengeditan.

Butuh gambar segar? Itu juga menciptakannya.

Bagian halaman lengkap yang sangat cocok dengan bisnis Anda.

Plus cuplikan kode saat Anda membutuhkannya.

Divi 5: Evolusi berikutnya

Divi 5 memasuki pengujian alpha dengan misi yang jelas: untuk meningkatkan kinerja proses desain web Anda. Kami mendengarkan umpan balik nyata tentang apa yang memperlambat Anda dan apa yang akan membantu Anda.

Semua yang Anda sukai tentang divi saat ini tetap. Kami hanya membuatnya bekerja lebih baik. Antarmuka terlihat lebih bersih. Halaman memuat lebih cepat dari sebelumnya. Kontrol merespons tepat saat Anda mengkliknya.

Kami membangun kembali yayasan menggunakan standar web hari ini. Ini berarti lebih sedikit bug aneh dan kinerja yang lebih halus secara keseluruhan.

Anda menghabiskan lebih sedikit waktu melawan pembangun dan lebih banyak waktu merancang. Situs Anda terlihat lebih profesional karena konsistensi terjadi secara otomatis. Klien mendapatkan situs web yang lebih baik karena Anda dapat fokus pada kebutuhan mereka alih -alih masalah teknis.

Versi alpha siap digunakan di situs web baru, meskipun kami tidak merekomendasikan untuk mengonversi situs web Divi 4 Anda yang ada ke Divi 5.

Apa yang Baru di Divi 5

Divi 5 membawa perubahan besar pada cara Anda membangun situs web. Versi alpha publik berfungsi dengan baik untuk proyek baru saat ini. Tim pengembangan kami mengirimkan fitur baru setiap dua minggu, dengan beberapa pembaruan besar yang sudah dirilis sejak Alpha dimulai.

Berikut beberapa pembaruan kunci:

• Basis kode modern mempercepat segalanya dengan memuat hanya modul yang sebenarnya Anda butuhkan, menghapus kode kembung yang memperlambat Divi 4.
• Sistem tata letak Flexbox lengkap sekarang termasuk templat baris baru, pemusatan vertikal otomatis, pembungkus konten, dan distribusi jarak melalui kontrol visual.
• Pembangun loop baru yang mengulangi modul, kelompok, atau bagian dengan konten dinamis dan mendukung loop bersarang untuk struktur data yang kompleks.
• Warna relatif dengan HSL memberikan kontrol warna dinamis berdasarkan nilai rona, saturasi, dan cahaya.
• Sistem berbasis HTML-5 menggantikan shortcode sepenuhnya , yang berarti lebih sedikit bug dan kompatibilitas WordPress yang lebih baik.
• Antarmuka Visual Builder mendapat makeover lengkap, dengan mode terang dan gelap, panel dockable, jendela tab, pintasan keyboard, dan tampilan lapisan yang ditingkatkan dengan remah roti.
• Breakpoint responsif yang dapat disesuaikan menggantikan tiga yang tetap divi 4, memberi Anda lebih banyak kontrol dengan penskalaan kanvas untuk melihat dengan tepat bagaimana desain terlihat pada ukuran layar yang berbeda.
• Grup modul bekerja seperti wadah serbaguna yang menggabungkan elemen terkait sehingga Anda dapat menata mereka sebagai unit atau memindahkannya tanpa kehilangan hubungan.
• Variabel desain memungkinkan Anda mengatur warna, font, angka, gambar, teks, dan URL secara global di seluruh situs Anda.
• Preset grup opsi menyimpan properti desain spesifik seperti tipografi atau bayangan yang bekerja di berbagai jenis modul.
• Unit CSS canggih sekarang mendukung fungsi klem (), calc (), min (), dan max () melalui antarmuka visual tanpa menulis kode.
• Sistem interaksi menciptakan popup, rogen, efek gulir, dan efek gerakan mouse tanpa plugin eksternal.

Apa yang akan terjadi…

• Modul WooCommerce dibangun kembali dari awal menggunakan arsitektur Divi 5 dengan kompatibilitas preset dan variabel penuh.
• Inspektur elemen akan menyediakan alat debugging dan pengembangan baru untuk pengguna tingkat lanjut.
• Demikian juga, Grup Carousel Module dapat membantu Anda membuat korsel yang terdiri dari grup, kemudian mengembangkan konten untuk setiap slide dengan memanfaatkan set lengkap elemen Divi untuk merancang gaya korsel apa pun yang Anda inginkan.

Membangun palet yang menskalakan diri dengan Divi 5

Pemetik warna Anda menjadi berantakan saat Anda membutuhkan lusinan variasi warna merek Anda. Divi 5 memperbaiki ini dengan menghubungkan setiap warna ke satu warna dasar. Langkah -langkah di bawah ini menunjukkan kepada Anda cara membangun sistem warna yang dapat diskalakan dan dapat dipelihara.

1. Menyiapkan fondasi warna utama Anda

Buka pembangun visual dan temukan ikon manajer variabel di bilah sisi kiri. Klik untuk melihat fondasi warna situs Anda. Divi 5 dilengkapi dengan variabel warna preset yang sudah menunggu Anda: primer, sekunder, tajuk, dan warna tubuh.

Anda tidak dapat menghapus variabel preset ini, tetapi Anda dapat mengubah nilainya. Ini berfungsi dengan baik karena keempat warna ini menangani sebagian besar situs web. Klik variabel warna utama dan masukkan warna utama merek Anda. Ini menjadi fondasi untuk setiap variasi warna lainnya di situs Anda.

Variabel warna utama Anda harus mencerminkan versi warna merek Anda yang paling jenuh. Anggap saja sebagai versi murni dan murni sebelum Anda membuat latar belakang yang lebih ringan atau menambahkan efek transparansi. Ini memberi Anda kisaran terbanyak saat membangun variasi nanti.

Warna sekunder bekerja dengan baik untuk aksen, tombol, atau sorotan yang perlu menonjol dari warna merek utama Anda. Atur warna judul Anda ke sesuatu yang berbunyi dengan baik di latar belakang Anda. Warna tubuh biasanya tetap abu -abu gelap atau hitam untuk dibaca.

Keempat variabel preset ini terhubung ke seluruh sistem Divi. Saat Anda membangun modul, warna -warna ini muncul sebagai opsi cepat. Ubah primer Anda dari biru ke hijau di sini, dan setiap modul menggunakan pembaruan variabel utama secara instan di seluruh situs Anda.

Hindari membuat variabel khusus yang berlebihan sejak dini. Sebaliknya, mulailah dengan empat preset ini. Sebagian besar situs web mungkin hanya membutuhkan warna -warna dasar ini, dengan variasi yang dibuat melalui kontrol warna relatif Divi 5. Tapi tentu saja, jika Anda membutuhkan, Anda dapat menambahkan sebanyak mungkin variabel.

2. Membuat warna warna dengan kontrol HSL

Sekarang, tambahkan variabel warna lain. Kali ini, Anda akan membangun naungan dari warna utama Anda alih -alih mengatur warna dasar baru. Di pemetik warna, pilih variabel warna utama Anda dari daftar.

Sekarang Anda melihat tiga slider: rona, saturasi, dan cahaya. Ini mengontrol bagaimana warna dasar Anda berubah.

Hue bergerak di sekitar roda warna dari 0 hingga 360 derajat. Biarkan ini sendiri saat membuat nuansa dengan warna yang sama. Saturasi berubah dari 0% menjadi 100% dan mengontrol seberapa jelas warna Anda. Pada 0%, warna apa pun menjadi abu -abu. Pada 100%, Anda mendapatkan intensitas penuh.

Lightness berjalan dari 0% hingga 100%. Slider ini menciptakan nuansa Anda yang sebenarnya. Pada 0, Anda mendapatkan bentuk murni warna Anda. Pindahkan hingga 50% untuk nuansa yang lebih ringan. Jatuhkan ke -20% untuk nuansa yang lebih gelap.

Anda dapat mencampur dan mencocokkan warna HSL ini untuk membangun warna dan variasi baru sesuai kebutuhan.

Mari kita buat dua variasi warna utama kita. Tambahkan variabel, dan beri nama naungan baru Anda sesuatu yang jelas seperti "cahaya primer" atau "gelap primer." Ulangi proses ini untuk membuat banyak warna. Pengaturan khas menggunakan primer dasar Anda pada 30% cahaya untuk latar belakang dan semacamnya, dan gelap pada -15% cahaya.

Anda juga dapat menambahkan warna yang lebih ringan dan lebih gelap untuk warna sekunder Anda.

3. Membangun variabel warna bersarang

Anda membuat cahaya primer dan gelap primer pada langkah 2. Sekarang Anda dapat membangun lebih banyak warna dari nuansa itu.

Buat variabel baru yang disebut "Bayangan Latar Belakang Kartu". Pilih lampu utama Anda dari daftar. Jatuhkan opacity menjadi 50%. Ini memberi Anda warna yang nyaris tidak ada untuk latar belakang kartu. Selanjutnya, buat "tombol melayang." Pilih gelap primer. Jatuhkan cahaya 10% lagi untuk membuatnya lebih gelap. Sekarang, tombol Anda bisa menjadi warna yang lebih gelap ketika orang melayang di atasnya.

Anda dapat membangun warna khusus dari nuansa Anda juga. Buat "Bayangan Teks" dengan mengambil tombol Picking. Atur opacity menjadi 15%. Sekarang Shadow Teks Anda Terhubung ke Button Hover, yang terhubung ke Dark Primary, yang terhubung ke Primer.

Coba "aksen perbatasan" dari cahaya primer. Saturasi benjolan hingga 100% untuk membuatnya lebih banyak. Ini memberi Anda perbatasan yang cerah yang masih cocok dengan merek Anda. Setiap rantai menjadi lebih lama. Kelima warna melacak kembali ke satu pilihan utama.

Tambahkan nuansa serupa untuk warna sekunder Anda untuk pilihan warna yang bagus untuk dipilih.

4. Menerapkan warna relatif ke situs Anda

Anda membangun fondasi warna Anda dan menciptakan semua nuansa itu. Sekarang hadir bagian praktis: Menerapkannya di situs web Anda.

Buka modul apa pun di pembangun visual. Klik opsi warna untuk latar belakang, teks, atau perbatasan. Variabel warna yang Anda simpan muncul tepat di dalam pemetik warna. Anda tidak perlu mengingat nama atau kode hex.

Pilih warna utama Anda untuk tombol utama. Pilih Lampu Primer untuk Latar Belakang Bagian. Gunakan gelap primer untuk perbatasan dan aksen halus seperti tombol CTA. Setiap pilihan menghubungkan kembali ke sistem warna dasar Anda.

Variabel warna Anda berfungsi di mana -mana: header, footer, tata letak blog, dan halaman produk. Anggota tim dan klien Anda dapat memilih warna tanpa menebak. Mereka melihat "cahaya primer" alih -alih kode hex acak di pemilih. Nama yang jelas berarti lebih sedikit kesalahan dan pekerjaan desain yang lebih cepat. Semua orang tahu warna mana yang melayani tujuan apa.

Sistem berbasis variabel ini mencegah ketidakkonsistenan visual. Anda tidak perlu menyimpan lusinan blues serupa atau bertanya -tanya naungan mana yang akan digunakan untuk efek hover. Variabel Anda memberi Anda struktur sambil menjaga fleksibilitas desain.

5. Memperbarui warna saat dibutuhkan

Klien Anda memutuskan bahwa mereka menginginkan Midnight Blue, bukan hanya biru. Dengan manajemen warna tradisional, ini berarti berjam -jam menyaring modul dan memperbarui setiap warna secara manual atau memperbarui banyak warna global sekaligus. Dengan warna relatif Divi 5, Anda mengubah satu variabel, dan yang lainnya mengikuti.

Latar belakang cahaya utama Anda menjadi hijau muda. Perbatasan gelap primer bergeser ke hijau gelap. Button Hover Warna Sesuaikan dengan biru yang lebih gelap. Semua hubungan bersarang yang Anda bangun tetap utuh.

Bayangan latar belakang kartu Anda memiliki opacity cahaya primer 15%. Ini menjadi 15% opacity dari lampu primer hijau baru tanpa Anda menyentuhnya. Bayangan teks Anda menghubungkan ke tombol hover, yang terhubung ke gelap primer, yang terhubung ke primer.

Cara lama berarti menciptakan kembali harmoni warna dari awal setiap saat. Anda melestarikan hubungan saat mengubah fondasi, dan desain Anda tetap seimbang.

Warna Anda, Aturan Anda

Penggunaan warna yang tidak konsisten merusak desain yang bagus. Anda telah menyimpan nuansa acak dengan nama -nama yang tidak berarti, berburu melalui modul untuk pembaruan, dan membangun kembali palet dari awal setiap kali klien berubah pikiran.

Warna relatif Divi 5 mengakhiri mimpi buruk alur kerja ini. Bangun sekali dari warna dasar dan secara otomatis menonton setiap pembaruan variasi di seluruh situs Anda. Sistem ini menangani kompatibilitas browser, mempertahankan hubungan, dan menjaga pemetik warna Anda terorganisir, sehingga Anda tidak perlu bermain dengan CSS.

Proyek Anda berikutnya layak mendapatkan manajemen warna yang lebih baik. Unduh Divi 5 dan lihat seperti apa rasanya desain terorganisir.