Cara Menerapkan Palet Warna ke Situs Web Divi Anda (20 contoh!)

Dalam tutorial Divi hari ini, kami akan membagikan beberapa palet warna menakjubkan yang dapat Anda gunakan di situs web berikutnya yang Anda buat dengan Divi. Menggunakan warna yang tepat untuk situs web Anda adalah salah satu hal utama yang akan menentukan bagaimana tampilan dan nuansa situs web Anda secara keseluruhan.

Selain berbagi beberapa palet warna yang menakjubkan dengan Anda, kami juga akan menunjukkan cara yang solid untuk menambahkan palet warna ini ke situs web Anda. Jika ragu, Anda selalu dapat mengikuti langkah-langkah dasar ini yang akan membantu Anda menciptakan hasil yang indah.

Tips Umum

1. Tentukan Situs Web Berwarna Gelap atau Berwarna Terang

Dalam palet warna yang akan Anda gunakan, Anda pasti akan memiliki warna terang dan gelap. Kontras wajib dalam palet warna agar konten tertulis tidak hilang.

Sekarang, itu membawa kita langsung ke pertanyaan pertama yang harus Anda tanyakan pada diri sendiri ketika ingin menerapkan palet warna ke situs web Anda; apakah Anda ingin membuat situs web berwarna gelap atau berwarna terang? Hanya karena Anda memilih satu tidak berarti Anda tidak dapat menggabungkannya, tetapi membuat pilihan membantu Anda memilih palet warna dengan lebih mudah.

2. Pilihan Warna

Secara teori, Anda dapat menentukan sendiri berapa banyak warna yang Anda inginkan dari palet warna Anda. Tidak ada cara standar untuk menerapkan atau menentukan palet warna. Namun, untuk menciptakan keseimbangan warna yang bagus dengan Divi, sebaiknya gunakan lima warna.

Untuk membantu Anda menerapkan palet warna dengan lima warna ke situs web Anda, kami memilih satu jenis metode yang akan kami terapkan secara konsisten ke tata letak yang sama saat menampilkan palet warna yang berbeda. Tapi sebelum kita masuk ke dalamnya, mari kita lihat berbagai jenis warna yang perlu Anda miliki di palet warna Anda jika Anda ingin mengikuti metode kami.

2 Warna Latar Belakang

Pastikan warna latar belakang yang Anda pilih cocok satu sama lain. Anda akan menggunakan warna latar belakang ini berdekatan satu sama lain dan untuk mendapatkan hasil yang indah; mereka harus memiliki harmoni tertentu.

1 Warna Huruf

Hal berikutnya yang harus Anda pilih adalah warna font. Logikanya, warna font tergantung pada warna background yang Anda pilih. Jika Anda telah memilih warna latar belakang berwarna terang, pastikan warna font Anda berwarna gelap dan sebaliknya.

1 Warna Hyperlink & CTA

Warna hyperlink yang Anda pilih adalah salah satu warna yang menghidupkan situs web Anda. Pastikan warna ini menonjol dari warna lain di palet Anda karena Anda akan menggunakannya untuk ajakan bertindak yang Anda sertakan di situs web Anda.

1 Warna Untuk Sentuhan Akhir

Last but not least, Anda dapat memilih warna out-of-the-box lain yang membawa warna ke situs web Anda. Meskipun warna ini tidak sepenting warna hyperlink, ini akan membantu Anda melengkapi keseimbangan warna di situs web Anda.

3. Pastikan Kontrasnya Cukup

Seperti yang disebutkan sebelumnya; sangat penting untuk memberikan kontras antara beberapa warna dalam palet warna Anda. Jika Anda menggunakan palet warna untuk situs web, kontras ini terutama akan membantu Anda membuat konten tertulis yang Anda bagikan dapat dibaca. Karena; jika konten Anda tidak mudah dibaca; apa tujuannya setelah semua?

4. Temukan Warna yang Tepat Gunakan Keseimbangan

Ada berbagai cara untuk menentukan seberapa sering Anda ingin menggunakan warna tertentu dalam palet warna Anda. Menciptakan keseimbangan warna yang baik diperlukan jika Anda tidak ingin mereka merasa kewalahan dengan warna yang Anda gunakan di situs web Anda.

Pastikan Anda sering menggunakan warna yang lebih netral dalam palet warna Anda dan gunakan warna lain untuk menonjolkan konten yang Anda berikan.

Panduan: Menambahkan Palet Warna ke Situs Web Anda

Di bagian selanjutnya dari posting ini, kami akan memandu Anda menerapkan palet warna ke situs web Anda. Kami akan menangani berbagai langkah yang kami ambil saat menambahkan warna ke tata letak situs web. Setelah panduan ini, Anda akan sampai ke bagian di mana kami berbagi palet warna. Kami tidak hanya berbagi warna, tetapi kami juga menggunakannya pada tata letak Divi untuk mempraktikkan panduannya.

Tanpa batas waktu lebih lanjut, mari kita lihat langkah-langkah proses yang berbeda.

1. Putuskan Bagaimana Anda Akan Menambahkan Warna

Anda dapat menambahkan palet warna dengan dua cara:

• Menambahkan semua warna bagian demi bagian
• Lengkapi warna situs web Anda dengan warna

Meskipun Anda mungkin akan mencampur dua metode ini satu sama lain, kami sarankan untuk memulai dengan melengkapi warna situs web Anda dengan warna. Dengan begitu, Anda tidak perlu menyalin dan menempelkan kode warna yang berbeda secara terus-menerus. Anda menyalin setiap warna satu kali dan kemudian beralih ke yang lain.

2. Tambahkan Warna Latar Belakang

Setelah Anda memutuskan bagaimana Anda akan memasukkan warna, Anda bisa mulai dengan warna latar belakang. Salah satu alasan mengapa memulai dengan warna latar belakang adalah ide yang bagus, karena Anda akan segera melihat hasilnya. Anda sedang mengatur dasar warna yang Anda gunakan di situs web Anda.

Jika Anda telah memilih untuk membuat situs web berwarna terang; mulailah dengan menambahkan warna paling terang ke latar belakang bagian kedua dan ikuti dengan warna paling terang kedua di bagian ketiga Anda.

3. Tambahkan Warna Teks

Setelah Anda menambahkan warna latar belakang untuk situs web Anda, Anda dapat mulai menambahkan warna teks ke situs web Anda. Semua konten tertulis di situs web Anda harus memiliki warna ini (terlepas dari hyperlink dan ajakan bertindak).

4. Tambahkan Warna Hyperlink & CTA ke Situs Web Anda

Selanjutnya, hal berikutnya yang dapat Anda lakukan adalah membuat hyperlink dan ajakan bertindak di situs web Anda menonjol. Mereka menarik perhatian orang dan membuat mereka penasaran tentang apa tautan atau ajakan bertindak itu.

Pastikan semua hal yang dapat diklik di situs web Anda mengandung warna ini. Dengan berpegang pada konsistensi ini, pengunjung Anda akan dengan mudah mengenali di mana mereka dapat mengeklik untuk melanjutkan kunjungan mereka di situs Anda.

5. Tambahkan Warna Sentuhan Terakhir

Hal terakhir yang perlu Anda lakukan adalah menambahkan warna sentuhan akhir ke situs web. Dalam contoh dan palet warna yang telah kami buat, kami menggunakan warna sentuhan akhir ini di tiga tempat: warna lingkaran uraian, teks header dari modul orang dan bilah menu utama.

Meskipun warna sentuhan akhir bukanlah warna utama yang akan Anda gunakan di situs web Anda, itu akan memungkinkan Anda untuk membawa sedikit warna ekstra yang dibutuhkan situs web Anda. Anda tidak ingin situs web Anda terlihat monoton atau sangat serius.

Palet Warna

Sekarang setelah kami menganalisis langkah-langkah yang diperlukan untuk menerapkan palet warna ke situs web Anda, saatnya untuk mulai menjelajahi beberapa palet warna yang menakjubkan. Selain menampilkan hasil dari contoh layout yang telah kita buat, kita juga akan membagikan kode warna yang kita gunakan untuk mencapai hasil tersebut.

1. Ubin Untuk Hari

Palet warna pertama yang kami pilih sebagian besar berisi jenis warna yang lebih lembut (dan sedikit pastel). Karena kami telah memilih untuk situs web yang ringan, warna-warna yang lebih terang dalam palet warna memenuhi sebagian besar situs web. Warna yang lebih gelap dalam palet warna kami, bagaimanapun, pastikan bahwa situs web berisi keseimbangan warna yang dibutuhkan.

Warna yang digunakan dalam contoh ini adalah sebagai berikut (kiri ke kanan):

• #EBE8E2
• #768A95
• #B98077
• #007193
• #E2D7D7

2. Gurun

Palet warna berikutnya dalam daftar disebut Desert. Keseimbangan warna palet warna ini sedikit condong ke arah situs web yang berwarna lebih gelap. Warna yang mendominasi dalam contoh ini adalah warna biru. Tapi ada juga satu warna teks yang sangat terang yang memastikan kontras yang dibutuhkan ada di sana.

Warna-warna yang digunakan dalam palet ini adalah sebagai berikut (dari kiri ke kanan):

• #507782
• #7C8E93
• #D89C79
• #443F3C
• #FFE8D8

3. Festival

Palet warna berikutnya bukanlah yang sering Anda lihat. Warnanya tidak sering muncul dalam palet warna yang sama, tetapi cukup menarik. Jika Anda ingin situs web Anda terlihat unik, palet ini adalah caranya.

Warna-warna yang digunakan dalam palet ini adalah (kiri ke kanan):

• #E6EBD1
• #A59E4C
• #544C4D
• #AF3D4B
• #CED3BC

4. Janji Pinky

Palet warna berikutnya di baris adalah pilihan yang sangat baik jika Anda ingin membuat situs web berwarna gelap. Nuansa hitam dan nuansa merah muda dikenal sebagai kombinasi yang baik. Mereka memberikan sentuhan ekstra yang menyenangkan ke situs web tanpa terlihat terlalu feminin. Nuansa hitam memastikan bahwa tampilan dan nuansa situs web Anda masih mengandung kedalaman yang dibutuhkan.

Warna yang digunakan dalam palet ini adalah (dari kiri ke kanan):

• #33383A
• #ECC9C8
• #E2566D
• #4F575A
• #D3D8DA

5. Santorini

Dalam palet berikutnya, Anda dapat dengan jelas melihat bahwa warna biru mendominasi warna lainnya. Dengan palet warna ini, Anda segera mendapatkan jenis perasaan yang ringan dan positif. Biru dikenal sebagai salah satu warna yang disukai orang saat membuat situs web. Ini adalah warna standar yang mencerminkan profesionalisme. Namun, nuansa biru yang digunakan dalam palet warna ini juga menunjukkan sisi playful.

Palet warna yang kami gunakan dalam contoh ini adalah (kiri ke kanan):

• #1198EA
• #0A5785
• #A85A4D
• #F1F5FA
• #C5DFF8

6. Kesenangan Ungu

Warna yang mendominasi pada palet warna ini jelas ungu. Meskipun sering dianggap sebagai warna yang menyedihkan, palet warna ini dan penggunaannya di situs web tampaknya berbeda. Jika dipadukan dengan warna yang lebih cerah, warna ungu dapat memberikan hasil yang memukau.

Warna-warna yang digunakan dalam palet warna ini adalah sebagai berikut:

• #D7D7ED
• #52517B
• #737172
• #FCFCFC
• #F0F1A

7. Halus

Palet warna berikutnya yang ingin kami bagikan cukup netral dan dalam gaya yang sama dengan palet warna Festival. Anda juga tidak sering melihatnya di sekitar tempat itu tetapi terlihat sangat bersih.

Warna yang digunakan dalam contoh ini adalah (kiri ke kanan):

• #DAE2D5
• #4B7263
• #A8A461
• #494949
• #CCCCCC

8. Perusahaan

Palet warna berikutnya yang ingin kami bagikan sangat ideal untuk semua jenis situs web bisnis. Warna-warna yang digunakan mencerminkan kepositifan dan kemudaan tertentu. Warna latar belakang yang terang memungkinkan warna kuning dan biru kehijauan memberikan nilai tambah bagi situs web.

Warna yang digunakan dalam palet ini adalah (kiri ke kanan):

• #181242
• #4ABDAC
• #DBDBDB
• #F7B733
• #FCFCFC

9. Mawar

Siapa yang tidak suka warna mawar? Palet warna berikutnya membawa faktor feminin ke situs web Anda. Warna-warna terang mendominasi situs web, tetapi mereka memastikan warna yang lebih gelap juga diberdayakan.

Warna-warna yang digunakan dalam palet ini adalah (kiri ke kanan):

• #152038
• #DDA199
• #FF614C
• #F5F5F5
• #E2E2E2

10. Cokelat

Palet warna berikutnya yang ingin kita soroti adalah Cokelat. Hal yang menyenangkan tentang palet warna ini adalah bahwa warna latar belakang dan warna teks berada dalam kategori warna yang sama. Itu memberi ruang bagi dua warna lain untuk membedakan diri dari warna-warna ini dan menarik perhatian.

Warna yang digunakan dalam palet ini adalah (kiri ke kanan):

• #FFF4E8
• #FFE2C4
• #822317
• #935B3B
• #346E70

11. Canggih

Kombinasi warna berikutnya adalah sesuatu yang tidak Anda harapkan pada pandangan pertama. Ungu dan kuning hijau tidak sering digunakan bersama-sama, tetapi seperti yang Anda lihat pada hasilnya; mereka cocok dengan cukup baik. Untuk menjaga fokus pada dua warna ini, warna latar belakang dan warna teks agak netral.

Warna-warna yang digunakan dalam palet ini adalah (kiri ke kanan):

• #88H317
• #4F2649
• #FCFCFC
• #EFEFEF
• #080816

12. Olivia

Olivia adalah palet warna yang tidak perlu banyak dijelaskan. Jenis warna zaitun dan kuning berpadu dengan sangat baik. Menjaga warna yang lebih terang lebih netral memungkinkan warna-warna ini mencuri perhatian.

Warna yang digunakan dalam palet ini adalah (kiri ke kanan):

• #778E3B
• #FFD902
• #132819
• #EFEFEF
• #FCFCFC

13. Gerbang Emas

Warna krem ​​lembut memungkinkan situs web Anda mencerminkan semacam eksklusivitas. Sementara palet warna terlihat cukup sederhana, warna pirus ungu dalam palet warna ini berhasil menghadirkan kehangatan yang dibutuhkan situs web.

Warna yang digunakan dalam palet warna ini adalah (kiri ke kanan):

• #373737
• #F3F4E8
• #ADA075
• #EDE4C9
• #A685BC

14. Kapten

Palet ini mungkin adalah palet yang paling terlihat profesional dalam daftar. Dua warna biru tua dalam palet ini adalah alasan utamanya. Warna merah, bagaimanapun, melakukan pekerjaan yang baik untuk memecahkan kebekuan dan menambahkan beberapa keragaman ke situs web.

Warna yang digunakan dalam posting ini adalah (kiri ke kanan):

• #3B578E
• #DB2323
• #D7DEED
• #F7F9FF
• #201C44

15. Lingkungan

Palet warna berikutnya yang ingin kami bagikan adalah Lingkungan. Namanya menunjukkan bahwa hijau mendominasi palet warna ini. Warna hijau lembut ini sangat cocok dengan warna pirus lembut yang disediakan dalam palet ini.

Warna dalam palet ini adalah (dari kiri ke kanan):

• #C2D3DO
• #56776A
• #42B7A7
• #EDEFF4
• #26423E

16. Lembut kaya

Dalam palet berikutnya, kita dapat dengan jelas melihat kombinasi yang bagus antara krem ​​​​dan merah. Mereka memberikan rasa kedewasaan untuk semua jenis situs web. Dengan menambahkan warna hijau mencolok lainnya, tampilan dan nuansa situs web Anda juga akan terlihat awet muda.

Warna dalam palet ini adalah (kiri ke kanan):

• #984B43
• #233237
• #B7A97C
• #F9F0D4
• #527C40

17. Mempesona

Palet berikutnya dalam baris adalah situs web berwarna gelap lainnya. Warna yang mendominasi adalah ungu tua dan abu-abu. Namun, warna yang lebih terang berhasil membawa kehangatan ke situs web.

Warna dalam palet ini adalah (dari kiri ke kanan):

• #D0B6D6
• #3CC203D
• #898989
• #F2F2F2
• #F9AEBD

18. Mint

Palet warna Mint menghadirkan rasa segar ke situs web Anda. Meskipun sangat sadar pada pandangan pertama, warna oranye dan ungu berhasil memberikan perasaan segar dan terlahir kembali ke situs web.

Warna yang digunakan dalam palet ini adalah (dari kiri ke kanan):

• #31190A
• #B4BCA7
• #F99A53
• #54468E
• #E3EDE5

19. Kuning Lembut

Palet warna unik ini sebagian besar berisi warna-warna hangat. Meskipun kami memiliki warna gelap dan terang sebagai warna latar belakang, perasaan keseluruhan condong lebih dekat ke situs web berwarna terang.

Warna dalam palet ini adalah (kiri ke kanan):

• #DDCF30
• #437468
• #F1FFD1
• #4A4C49
• #FCFAD9

20. Misteri

Palet warna terakhir di baris ini adalah palet berwarna gelap lain yang dapat Anda gunakan untuk situs web Anda. Warna latar belakang yang digunakan dalam palet ini sederhana dan memungkinkan warna-warna cerah lainnya dalam palet muncul.

Warna-warna dalam palet ini adalah:

• #131517
• #13828A
• #35363A
• #EEF5F7
• #AF8300

Pikiran Akhir

Dalam posting ini, kami telah membagikan beberapa tips tentang cara menerapkan palet warna yang Anda pilih ke situs web Anda. Selain itu, kami juga telah menunjukkan kepada Anda 20 palet warna cantik yang dapat membantu Anda menghadirkan keanggunan ke situs web Anda. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Dan saat Anda di sana, beri tahu kami; Manakah dari palet warna ini yang menjadi favorit Anda?

Gambar Unggulan oleh EDGOR_21 / shutterstock.com