Apa itu HSL dan mengapa desainer harus menguasainya

Warna adalah salah satu alat paling kuat dalam toolkit perancang, tetapi bekerja dengan sistem tradisional seperti Hex dan RGB kadang -kadang bisa merasa terbatas. Format ini berhasil, tetapi mereka tidak mencerminkan bagaimana kita benar -benar melihat atau memikirkan warna. Butuh naungan yang lebih ringan atau ingin mencocokkan saturasi di berbagai warna? Anda menebak.

Di situlah Hue, Saturation, dan Lightness (HSL) masuk. Ini membuat penyesuaian warna lebih visual dan dapat diprediksi, dan Divi 5 sekarang mendukungnya secara asli berkat warna relatif & rilis fitur HSL. Mari kita jelajahi cara kerjanya dan mengapa Anda ingin menguasainya.

Mengapa sebagian besar desainer berjuang dengan pilihan warna

Alat warna sering tidak cocok dengan cara kita memikirkan warna secara alami. Anda melihat warna biru yang Anda sukai, tetapi satu -satunya cara untuk menangkapnya adalah melalui kode hex seperti #4A90E2. Surat dan angka itu tidak ada artinya bagi otak Anda.

Warna hex dibuat dengan mencampur nilai merah, hijau, dan biru. Setiap pasangan (seperti 4A, 90, E2) menunjukkan berapa banyak masing -masing warna yang digunakan, dari 0 hingga 255. Bersama -sama, mereka membuat warna akhir #4A90E2.

Anda mungkin kesulitan mencari tahu angka mana yang akan diubah ketika Anda membutuhkan versi yang lebih ringan dari merek biru Anda. Haruskah Anda meningkatkan semua nilai RGB secara setara? Atau sesuaikan hanya satu saluran RGB (merah, hijau, atau biru)? Angka -angka tidak cocok dengan apa yang diharapkan mata Anda, jadi Anda menyesuaikan dan melihat pratinjau sampai terasa benar.

Sistem warna tradisional menciptakan masalah yang lebih besar ketika Anda bekerja di berbagai konteks. Membuat variasi warna menjadi dugaan murni. Anda menginginkan lima warna yang bekerja bersama, tetapi tidak ada sistem untuk itu. Lightening #4A90E2 ke #6BA3E8 mungkin terlihat benar, atau mungkin terlihat hanyut. Anda tidak akan tahu sampai Anda melihatnya.

Mendapatkan nuansa dengan mengubah kode hex tidak sederhana. Nilai hex baru ( #6ba3e8) dipilih dengan cermat di sebelah kiri untuk membuat warna yang lebih ringan dari #4A90E2. Di sebelah kanan, hanya membuat perubahan nominal (#3B99E5) tidak meringankan warna tetapi benar -benar mengubahnya.

Alur kerja yang lambat dan manual ini membutuhkan waktu berjam -jam untuk menyelesaikannya. Anda mengubah nilai, memeriksa pratinjau, dan mengubah lagi, melawan alat alih -alih merancang. Perhatian Anda tersedot ke detail teknis ketika harus fokus pada bagaimana warna membuat orang merasakan.

Banyak desainer akhirnya menghindari eksperimen warna karena prosesnya terasa sangat kikuk. Anda tetap dengan pilihan yang aman atau menyalin palet dari situs lain. Alat yang seharusnya membantu Anda menjelajahi kreativitas warna sebenarnya membatasi itu.

Masalah dengan nilai RGB statis

Nilai RGB tidak selalu berperilaku seperti yang Anda harapkan. Hijau tampak jauh lebih terang dari biru pada pengaturan yang sama, tetapi sistem memperlakukannya secara setara. RGB (128, 128, 128) adalah abu -abu sedang yang sempurna, tetapi bagaimana tampilannya dapat bervariasi tergantung pada layar, pencahayaan, atau profil warna yang digunakan.

Ingin versi yang lebih ringan dari warna merek Anda? Anda dapat mencoba meningkatkan nilai RGB, dan kadang -kadang, Anda mendapatkan apa yang Anda harapkan. Di lain waktu, Anda mendapatkan sesuatu yang terlihat hancur dan aneh. Tidak ada cara untuk mengetahui sebelumnya.

Warna biru merek dengan nilai-nilai RGB meningkat secara setara dengan +50, menghasilkan warna yang dicuci, yang bukan nada lebih ringan yang diharapkan. Ini menunjukkan bahwa menambahkan jumlah yang sama ke setiap saluran RGB tidak selalu menghasilkan warna warna yang dapat diprediksi atau seimbang.

Warna RGB juga bergeser di antara berbagai program. Ini terjadi karena perbedaan dalam profil warna, mesin rendering, dan bagaimana browser menafsirkan nilai -nilai tersebut. Pilih warna yang sempurna di Photoshop, salin kode hex ke situs web Anda, dan mungkin masih terlihat sedikit berbeda. Pedoman merek menjadi lebih sulit untuk ditegakkan ketika kode warna yang sama terlihat sedikit berbeda di seluruh browser dan alat desain.

Setiap warna berubah dengan caranya sendiri saat Anda mencoba mencerahkan atau menggelapkannya. Karena RGB tidak menyesuaikan warna secara merata, beberapa warna memudar lebih cepat atau bergeser dengan cara yang tidak terduga. Beberapa warna desaturat lebih cepat daripada yang lain ketika cahaya meningkat. Biru Anda berubah menjadi abu -abu sementara merah Anda tetap bersemangat. Ungu Anda menjadi berlumpur saat jeruk Anda tetap bersih.

Pekerjaan warna berubah menjadi coba-coba alih-alih desain yang disengaja.

Apa sistem Hue, Saturation, dan Lightness (HSL)?

Hue, Saturation, dan Lightness (HSL) memecah warna menjadi tiga bagian yang cocok dengan bagaimana otak Anda sebenarnya berpikir tentang warna. Hue memilih warna dasar dari roda 360 opsi. Saturation mengontrol seberapa bersemangat atau abu -abu warna itu terlihat. Lightness memutuskan apakah gelap, cerah, atau di suatu tempat.

Ketika Anda berpikir, "Saya ingin hijau gelap," Anda sudah memikirkan istilah HSL. Anda tahu Anda ingin hijau (rona), mungkin cukup kaya (saturasi), dan di sisi yang lebih gelap (cahaya).

Bagaimana ketiga komponen bekerja sama

Hue berfungsi seperti potongan roda warna dari spektrum cahaya yang terlihat. Ujung -ujungnya menghubungkan merah ke magenta, menciptakan lingkaran yang halus dari setiap warna yang mungkin. Ingin oranye yang sempurna? Mulailah dengan warna merah (0 derajat) dan bergerak ke arah kuning sekitar 30 derajat.

Saturasi mengukur kemurnian warna sebagai persentase. Nol persen menghilangkan semua warna, meninggalkan abu -abu. Seratus persen memberikan versi yang paling jelas mungkin. Pikirkan saturasi sebagai perbedaan antara tanda neon dan cat air yang diredam.

Bagaimana Warna HSL Bekerja, Terinspirasi oleh Grafik di Wikipedia tentang topik yang sama

Lightness berkisar dari 0% (hitam murni) hingga 50% (netral) hingga 100% (putih murni). Warna paling bermanfaat hidup antara 20% dan 80% ringan. Ini cocok dengan bagaimana Anda secara alami berpikir tentang membuat warna lebih ringan atau lebih gelap.

Mengapa Pembangun Halaman biasanya menghindari HSL

Sebagian besar pembangun halaman tetap dengan kode hex dan RGB karena alasan praktis, bukan karena sistem ini bekerja lebih baik. Pengembang pembangun menghadapi rintangan teknis yang nyata. Pengguna sudah tahu kode hex dari Photoshop dan alat desain lainnya. Konversi antar sistem warna membutuhkan pemrosesan tambahan.

Mendukung HSL berarti membangun antarmuka baru dan mendidik pengguna tentang konsep yang tidak dikenal, kecuali jika pemetik warna HSL dipaku dengan sempurna. Pendekatan konservatif ini masuk akal dari perspektif bisnis, bahkan jika itu membatasi kemungkinan kreatif.

Buat variasi warna yang sempurna dengan kontrol HSL baru Divi 5

HSL terdengar hebat secara teori, tetapi teori tidak membangun situs web. Anda memerlukan alat yang mendukung pendekatan ini. Sebagian besar pembangun halaman memaksa Anda kembali ke kode hex dan dugaan RGB. Divi 5 mengubah segalanya tentang cara Anda bekerja dengan warna. Tapi pertama -tama:

Apa itu Divi?

Divi adalah pembangun halaman yang bekerja secara berbeda dari pembangun halaman WordPress lainnya. Anda mendapatkan alat desain visual dicampur dengan kontrol tipografi yang serius. Editor langsung menunjukkan perubahan Anda secara instan. Sesuaikan ukuran font, tweak line spacing, dan saksikan pembaruan halaman Anda di sana.

Anda dapat menjatuhkan 200+ modul di mana pun yang Anda inginkan. Blok teks, tajuk utama, dan potongan konten khusus yang dimainkan semuanya dengan baik.

Inilah yang membuat Divi Special: 2000+ tata letak siap pakai yang dibangun untuk bisnis nyata. Kita berbicara desain yang sebenarnya, bukan templat pemula dasar. Butuh sesuatu untuk restoran Anda? Ada tata letak untuk itu. Menjalankan studio fotografi? Kami telah membantu Anda. Konsultan dan startup teknologi juga mendapatkan desain sendiri.

Setiap tata letak mengetahui industri Anda. Warna, jarak, dan aliran konten semua masuk akal untuk bagaimana pelanggan Anda berpikir dan menjelajah.

Ambil Kontrol Situs Lengkap

Pembuat tema menempatkan setiap bagian dari gaya teks situs Anda di tangan Anda. Bangun header khusus yang berbicara bahasa merek Anda. Desain halaman blog yang membuat artikel panjang mudah dibaca. 404 halaman kesalahan Anda dapat menjaga font dan gaya yang sama seperti situs lainnya.

Divi Ai membawa kecerdasan buatan langsung ke dalam alur kerja Anda. Hasilkan berita utama yang terdengar seperti Anda menulisnya. Buat salinan produk yang persis cocok dengan suara merek Anda.

Ini membangun seluruh bagian halaman yang memahami bisnis Anda.

Menulis cuplikan kode saat Anda membutuhkannya.

Divi AI juga berfungsi dengan gambar Anda tepat di dalam pembangun. Jelaskan apa yang perlu diperbaiki dalam gambar apa pun dan bagaimana hal itu membuat perubahan itu.

Bahkan menghasilkan gambar yang benar -benar baru sesuai permintaan.

Lewati masalah halaman kosong dengan situs cepat divi

Situs cepat Divi memperbaiki masalah halaman kosong yang menghentikan banyak proyek sebelum mulai. Situs starter profesional datang dengan tipografi yang sudah diatur. Tim desain kami membangun templat ini dengan gambar dan karya seni unik yang tidak akan Anda lihat di tempat lain.

Situs cepat divi dengan Divi AI juga dapat membangun tata letak khusus berdasarkan deskripsi bisnis Anda. Ceritakan tentang praktik konsultasi atau restoran Anda, dan itu membuat halaman yang relevan dengan salinan yang sesuai untuk industri Anda.

Ini hanya melampaui kerangka gambar. Anda mendapatkan berita utama, salinan tubuh, dan gambar yang masuk akal untuk bisnis Anda. Anda dapat mengatur font dan warna merek Anda di muka atau membiarkan AI memilih untuk Anda.

Setelah itu, semuanya tetap dapat diedit sepenuhnya, sehingga Anda dapat memperbaiki tipografi agar sesuai dengan visi Anda.

Apa yang baru di Divi 5?

Divi 5 adalah versi berikutnya dari pembangun halaman, saat ini dalam pengujian alpha dan siap untuk proyek situs web baru. Kami fokus pada perbaikan praktis yang mempercepat pekerjaan sehari -hari Anda dan membuat situs bangunan lebih menyenangkan.

Bagian terbaik divi saat ini tetap bertahan sementara kami membangun kembali yang lainnya. Desain antarmuka segar memenuhi kinerja yang lebih baik di bawah tenda. Praktik pengkodean modern memberi daya pada seluruh sistem sekarang.
Halaman memuat lebih cepat dari sebelumnya. Kontrol merespons lebih cepat saat Anda mengkliknya. Tipografi tetap konsisten di seluruh situs Anda tanpa pekerjaan manual tambahan.

Berikut beberapa sorotan:

• Kerangka Kerja Lengkap Membangun kembali Sistem kode pendek lama. Semuanya berjalan pada arsitektur berbasis blok modern yang menangani browser jauh lebih baik.
• Sistem Flexbox Divi 5 memberi Anda kontrol langsung untuk membangun tata letak yang modern dan responsif, dengan mudah mengelola penyelarasan, jarak, dan pembungkus tanpa kode khusus.
• Sistem warna HSL membawa kontrol warna yang cocok dengan cara berpikir desainer. Sesuaikan rona, saturasi, dan cahaya alih -alih menebak dengan kode hex.
• Tujuh breakpoint khusus mengganti batas tiga ukuran lama. Tipografi Anda terlihat sempurna di setiap perangkat yang digunakan pengunjung.
• Fungsi CSS bawaan berarti calc (), clamp (), min (), dan max () bekerja tepat di editor visual. Bangun teks responsif yang berskala secara alami tanpa kode.
• Variabel desain global menyimpan font, warna, dan jarak di satu tempat. Ubah font judul utama Anda sekali. Setiap H1 di seluruh situs Anda pembaruan secara otomatis.
• Sistem desain berbasis preset mencakup preset elemen untuk modul individual plus preset grup opsi untuk gaya tipografi lengkap. Untuk menjaga hal -hal konsisten, gunakan ini di berbagai modul.
• Antarmuka pembangun visual baru mendapat panel dockable, jendela tab, pintasan keyboard, dan tampilan lapisan yang lebih baik dengan remah roti. Navigasi menjadi jauh lebih mudah.
• Baris bersarang menempatkan baris di dalam baris lain untuk tata letak yang kompleks. Bangun pengaturan tata letak lanjutan tanpa jenis bagian khusus.
• Grup modul menggabungkan elemen yang berbeda menjadi satuan tunggal. Ini membuat mengelola tata letak teks yang kompleks lebih mudah, dan Anda juga dapat membangun modul khusus.
• Ruang kerja multi-panel menggerakkan panel ke mana pun bekerja paling baik. Jaga agar kontrol tipografi tetap terbuka sambil menyesuaikan barang -barang desain lainnya.
• Salinan manajemen atribut , pasta, dan mengatur ulang gaya tipografi antar elemen. Pilih atribut spesifik untuk ditransfer alih -alih menyalin semuanya.
• Mode antarmuka terang/gelap mengurangi ketegangan mata selama sesi desain panjang.
• Canvas Scaling menunjukkan bagaimana tipografi terlihat pada ukuran layar yang berbeda tanpa meninggalkan editor.

Temukan semua rilis fitur Divi 5

Cara membuat warna hsl dengan divi 5

Seperti yang disebutkan, Divi 5 membangun kembali pemetik warna dari awal. Antarmuka baru menjatuhkan kode hex untuk kontrol HSL yang bekerja seperti otak Anda berpikir tentang warna. Tiga slider menangani pekerjaan:

• Hue menerima 0–360 derajat, dan nilai negatif dibungkus (misalnya, -60 menjadi 300). Roda warna terhubung di kedua ujungnya. Zero, 360, dan negatif 360 semuanya memberi Anda merah yang sama. Butuh warna pelengkap? Atur rona ke 180 derajat dari titik awal Anda.
• Saturasi berjalan dari 0% hingga 100% dan mengontrol seberapa jelas warna Anda. Nol persen menghilangkan semua intensitas warna, meninggalkan abu -abu. Seratus persen memberikan warna full-blast.
• Lightness bekerja dalam kisaran persentase yang sama. Nol membuat hitam, 100% menciptakan putih, dan 50% menunjukkan bentuk murni dari rona apa pun yang Anda pilih.

Pembaruan kontrol secara langsung saat Anda menyeret. Terapkan tombol atau penundaan refresh tidak akan mengganggu alur kerja Anda.

1. Membangun warna relatif dari warna global

Warna relatif memungkinkan Anda membuat warna baru berdasarkan warna global yang ada dengan mengubah komponen HSL individu. Mulailah di Manajer Variabel Desain dengan menambahkan warna baru.

Menggunakan pemetik warna, atur warna dasar Anda (ini bisa menjadi warna merek) agar sesuai dengan warna global primer yang ada.

Mari kita atur warna sekunder dengan menggunakan shift rona utama Anda untuk membuat warna yang saling melengkapi. Ambil warna utama Anda, dengan cahaya diatur ke 25%.

Anda bahkan dapat bermain -main dengan rona atau saturasi untuk membuat warna baru sebagai warna sekunder.

Color Swatch menunjukkan informasi penting kepada Anda. Anda dapat mengetahui apakah sesuatu menggunakan variabel desain dan melihat bagaimana filter HSL memodifikasi warna dasar. Umpan balik visual ini membantu Anda memahami apa yang terjadi dengan hubungan warna Anda.

Demikian juga, buat nuansa yang lebih gelap untuk warna teks heading dan warna teks tubuh warna global menggunakan warna primer sebagai dasar.

Anda dapat, tentu saja, membuat warna dekoratif yang lebih dekoratif di sini, dan Anda masih dapat memasukkan hex, RGB, atau nilai warna bernama secara manual.

2. Kelola hubungan variabel desain multi-lapisan

Variabel desain dapat menumpuk di atas satu sama lain untuk sistem warna yang kompleks. Berdasarkan yang utama, Anda dapat membuat warna dekoratif tambahan, seperti lumut yang terbakar. Kemudian, kurangi opacity lumut yang terbakar untuk membangun warna bayangan.

Hubungan bersarang ini menunjukkan bagaimana Divi 5 menangani hierarki warna yang kompleks. Saat Anda menyesuaikan warna primer, pembaruan warna lumut yang terbakar terlebih dahulu, memicu warna bayangan untuk diperbarui. Seluruh rantai tetap terhubung.

Pendekatan ini mengubah manajemen warna dari menebak secara acak menjadi sistem yang dapat diprediksi. Palet warna situs web Anda tetap harmonis tanpa penyesuaian manual di setiap elemen.

3. Terapkan warna HSL ke situs Anda

Tekan modul teks apa pun dan buka pemetik warna. Variabel yang Anda simpan muncul dengan indikator. Klik "Warna Sekunder," dan itu akan mengisi latar belakang suatu bagian. Warna yang sama berfungsi untuk tombol, latar belakang, dan perbatasan.

Tipografi berfungsi saat Anda tetap pada satu rona tetapi mengubah cahaya. Berita utama dapat menggunakan warna primer pada -25% cahaya. Teks tubuh menjadi sedikit lebih ringan di -15%. Tautan duduk di -45%. Semuanya berhubungan tetapi tetap jelas.

Latar belakang membutuhkan warna merek Anda kencang. Dorong ringan hingga 95%. Jatuhkan saturasi menjadi 15%. Sekarang Anda memiliki latar belakang bermerek yang tidak melawan konten. Tombol bekerja dengan saturasi penuh. Arahkan melayang menyatakan ringan di bawah takik. Warna yang sama, intensitas berbeda.

Teks terang membutuhkan latar belakang gelap. Angka -angka ringan memberi tahu Anda apa yang berhasil. Teks pada 50% pasangan cahaya dengan latar belakang di bawah -30% dari cahaya.

Bagian dengan teks gelap pada latar belakang cahaya membalikkan nilai. Warna yang sama, saturasi yang sama. Tukar nilai cahaya dan Anda selesai. Dan tentu saja, semua warna ini mempertahankan tautannya bahkan setelah diterapkan. Ubah satu variabel dan semuanya beradaptasi. Semudah itu!

4. Simpan warna HSL Anda sebagai preset yang dapat digunakan kembali

Setelah Anda membuat modul dan menerapkan variabel desain warna, preset warna -warna ini menjadi gaya yang dapat digunakan kembali. Divi 5 menawarkan dua jenis preset yang bekerja bersama:

Preset grup opsi mengontrol aspek desain spesifik di semua modul. Gaya judul Anda dengan variabel desain warna teks heading. Tambahkan bayangan ke kolom Anda menggunakan lumut terbakar dan opacity 50%. Arahkan ikon modul grup opsi di modul apa pun, label dengan tepat, dan simpan.

Hal yang sama berfungsi untuk latar belakang, jarak, animasi, dan teks. Tambahkan jari -jari perbatasan melalui variabel desain angka, dan atur preset merujuk variabel angka ini. Setiap kelompok opsi menangani wilayah desainnya sendiri dan dapat diterapkan silang, yaitu, jari-jari perbatasan kolom dapat diterapkan pada ajakan bertindak Anda.

Untuk mendaftar, buka opsi yang sesuai dan pilih preset.

Preset Elemen Simpan gaya modul lengkap. Gaya modul tombol dengan warna sekunder Anda pada cahaya 80%. Klik pemilih preset di kanan atas pengaturan modul. Buat preset baru yang disebut "Tombol Warna Merek." Ini menyimpan semua pengaturan tombol, termasuk warna HSL Anda.

Sekarang, ketika Anda menambahkan tombol baru, terapkan preset ini, dan mewarisi seluruh gaya. Untuk memotong pekerjaan Anda untuk Anda, ambil preset khusus (grup opsi atau elemen) yang telah Anda buat dan klik ikon bintang di sampingnya. Preset itu menjadi default untuk semua contoh baru elemen atau grup opsi tersebut.

Hubungan HSL Anda tetap utuh dalam preset. Saat Anda memperbarui warna, setiap modul dan preset menggunakan pembaruan warna itu juga. Bangun perpustakaan preset untuk bagian cahaya, bagian gelap, dan momen merek khusus. Nilai -nilai HSL melakukan perjalanan dengan setiap preset, menjaga sistem warna Anda konsisten di seluruh proyek.

Bangun sistem warna untuk situs web Anda dengan Divi 5

Pekerjaan warna yang digunakan untuk membutuhkan waktu berhari -hari. Anda akan gelisah dengan kode hex, menyalin nilai -nilai antar program, dan berdoa sesuatu tampak layak.

HSL membuat warna menjadi menyenangkan lagi. Anda melihat naungan yang Anda sukai dan tahu persis cara membuatnya kembali. Hue memilih warna, saturasi mengontrol seberapa jelas itu, dan cahaya membuatnya lebih cerah atau lebih gelap. Sekarang, penyegaran merek membutuhkan waktu beberapa menit, bukan jam.

Ini adalah kontrol desain nyata. Divi 5 mewujudkannya hari ini.