Divi Web Sitenize Renk Paletleri Nasıl Uygulanır (20 örnek!)

Bugünün Divi eğitiminde, Divi ile oluşturacağınız sonraki web sitelerinde kullanabileceğiniz bazı harika renk paletlerini paylaşacağız. Web siteniz için doğru renkleri kullanmak, web sitenizin genel olarak nasıl görüneceğini ve nasıl hissettireceğini belirleyecek birincil şeylerden biridir.

Sizinle bazı harika renk paletlerini paylaşmanın yanı sıra, bu renk paletlerini web sitenize eklemenin sağlam bir yolunu da göstereceğiz. Şüphe duyduğunuzda, güzel sonuçlar elde etmenize yardımcı olacak bu temel adımları her zaman takip edebilirsiniz.

Genel ipuçları

1. Koyu Renkli veya Açık Renkli Web Sitesine Karar Verin

Kullanacağınız renk paletinde şüphesiz açık ve koyu renklere sahip olacaksınız. Yazılı içeriğin kaybolmaması için bir renk paletinde kontrast zorunludur.

Şimdi, bu bizi hemen web sitenize bir renk paleti uygulamak istediğinizde kendinize sormanız gereken ilk soruya götürüyor; koyu renkli mi yoksa açık renkli bir web sitesi mi oluşturmak istiyorsunuz? Birini seçmeniz onları birleştiremeyeceğiniz anlamına gelmez, ancak seçim yapmak renk paletinizi daha kolay seçmenize yardımcı olur.

2. Renk Seçimi

Teoride, renk paletinizde kaç renk olmasını istediğinizi kendiniz belirleyebilirsiniz. Renk paletlerini uygulamanın veya belirlemenin standart bir yolu yoktur. Ancak Divi ile güzel bir renk dengesi oluşturmak için beş renk kullanmanızı öneririz.

Beş renkli renk paletlerini web sitenize uygulamanıza yardımcı olmak için, farklı renk paletlerini sergilerken sürekli olarak aynı düzene uygulayacağımız bir tür yöntem seçtik. Ama buna dalmadan önce, bizim yöntemimizi takip etmek istiyorsanız, renk paletinizde olması gereken farklı renk türlerine bir göz atalım.

2 Arka Plan Rengi

Seçtiğiniz arka plan renklerinin birbiriyle uyumlu olduğundan emin olun. Bu arka plan renklerini birbirine yakın ve güzel sonuçlar elde etmek için kullanacaksınız; belli bir uyum içinde olmaları gerekir.

1 Yazı Tipi Rengi

Seçmeniz gereken bir sonraki şey yazı tipi rengidir. Mantıksal olarak, yazı tipi rengi seçtiğiniz arka plan renklerine bağlıdır. Açık renkli arka plan renkleri seçtiyseniz, yazı tipi renginizin koyu renkli olduğundan emin olun ve bunun tersi de geçerlidir.

1 Köprü ve CTA Rengi

Seçtiğiniz köprü rengi, web sitenize hayat veren renklerden biridir. Web sitenize eklediğiniz harekete geçirici mesajlar için kullanacağınız için bu rengin paletinizdeki diğer renklerden farklı olduğundan emin olun.

Son Dokunuşlar İçin 1 Renk

Son olarak, web sitenize renk katan, kullanıma hazır başka bir renk seçebilirsiniz. Bu renk köprü rengi kadar önemli olmasa da web sitenizdeki renk dengesini tamamlamanıza yardımcı olacaktır.

3. Yeterli Kontrast Olduğundan Emin Olun

Önceden belirtildiği üzere; renk paletinizdeki bazı renkler arasında kontrast sağlamak önemlidir. Bir web sitesi için renk paleti kullanıyorsanız, bu kontrast öncelikle paylaştığınız yazılı içeriği okunabilir hale getirmenize yardımcı olacaktır. Çünkü; içeriğinizin okunması kolay değilse; sonuçta amacı ne?

4. Doğru Renk Kullanım Dengesini Bulun

Renk paletinizde belirli bir rengi ne sıklıkla kullanmak istediğinizi belirlemenin farklı yolları vardır. Web sitenizde kullandığınız renkler tarafından boğulmuş hissetmelerini istemiyorsanız, iyi bir renk dengesi oluşturmak gereklidir.

Renk paletinizde çoğu zaman daha nötr renkler kullandığınızdan emin olun ve sağladığınız içeriği vurgulamak için diğer renkleri kullanın.

İzlenecek yol: Renk Paletini Web Sitenize Ekleme

Bu yazının sonraki bölümünde, web sitenize renk paletleri uygulama konusunda size yol göstereceğiz. Renkleri bir web sitesi düzenine eklerken attığımız farklı adımları ele alacağız. Bu adımdan sonra, renk paletlerini paylaştığımız kısma geleceksiniz. Sadece renkleri paylaşmakla kalmadık, aynı zamanda izlenecek yolu uygulamaya koymak için onları bir Divi düzeninde kullandık.

Daha fazla gecikmeden, sürecin farklı adımlarına bir göz atalım.

1. Renkleri Nasıl Ekleyeceğinize Karar Verin

Renk paletini iki şekilde ekleyebilirsiniz:

• Tüm renkleri bölüm bölüm ekleme
• Web sitenizi renge göre tamamlayın

Muhtemelen bu iki yöntemi birbiriyle karıştıracak olsanız da, web sitenizi renk renk tamamlayarak başlamanızı öneririz. Bu şekilde, farklı renk kodlarını sürekli olarak kopyalayıp yapıştırmanız gerekmeyecek. Her rengi bir kez kopyalar ve ardından diğerine geçersiniz.

2. Arka Plan Renklerini Ekleyin

Renkleri nasıl ekleyeceğinize karar verdikten sonra, arka plan renkleriyle başlayabilirsiniz. Arka plan renkleriyle başlamanın iyi bir fikir olmasının nedenlerinden biri, sonuçları hemen görmenizdir. Web sitenizde kullandığınız renklerin temelini oluşturuyorsunuz.

Açık renkli bir web sitesi oluşturmayı seçtiyseniz; ikinci bölümün arka planına en açık rengi ekleyerek başlayın ve üçüncü bölümdeki en açık ikinci rengi takip edin.

3. Metin Rengini Ekleyin

Web siteniz için arka plan renklerini ekledikten sonra, metin rengini web sitenize eklemeye başlayabilirsiniz. Web sitenizdeki tüm yazılı içeriğin bu renge sahip olması gerekir (köprüler ve harekete geçirici mesajlar dışında).

4. Web Sitenize Köprü ve CTA Rengini Ekleyin

Devam edersek, yapabileceğiniz bir sonraki şey, web sitenizdeki köprüleri ve harekete geçirici mesajları öne çıkarmaktır. İnsanların dikkatini çeker ve bir bağlantının veya harekete geçirici mesajın ne hakkında olduğunu merak etmelerini sağlar.

Web sitenizdeki tüm tıklanabilir şeylerin bu rengi içerdiğinden emin olun. Bu tutarlılığa bağlı kalarak, ziyaretçileriniz sitenizde kalmaya devam etmek için nereye tıklayabileceklerini kolayca anlayacaklardır.

5. Son Dokunuş Rengini Ekleyin

Yapmanız gereken son şey, web sitesine son dokunuş rengini eklemek. Yaptığımız örneklerde ve renk paletlerinde, bu son dokunuş rengini üç yerde kullanıyoruz: tanıtım yazısı daire rengi, kişi modülünün başlık metni ve birincil menü çubuğu.

Son dokunuş rengi, web sitenizde kullanacağınız ana renk olmasa da, web sitenizin ihtiyaç duyduğu fazladan rengi getirmenize olanak tanır. Sonuçta web sitenizin monoton veya can sıkıcı derecede ciddi görünmesini istemezsiniz.

Renk Paletleri

Renk paletini web sitenize uygulamak için gereken adımları analiz ettiğimize göre, şimdi bazı harika renk paletlerini keşfetmeye başlamanın zamanı geldi. Yaptığımız örnek yerleşimin sonucunu size göstermenin yanı sıra, o sonuca ulaşmak için kullandığımız renk kodlarını da paylaşacağız.

1. Günlerce Fayans

Seçtiğimiz ilk renk paleti, çoğunlukla daha yumuşak (ve biraz pastel) renkler içeriyor. Hafif bir web sitesi için seçtiğimiz için, renk paletindeki daha açık renkler web sitesinin çoğunu kaplıyor. Ancak renk paletimizdeki daha koyu renkler, web sitesinin gerekli renk dengesini içerdiğinden emin olun.

Bu örnekte kullanılan renkler şunlardır (soldan sağa):

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

2. Çöl

Listedeki bir sonraki renk paletinin adı Desert. Bu renk paletinin renk dengesi, biraz daha koyu renkli bir web sitesine doğru eğilir. Bu örnekte hakim olan renk mavi renktir. Ancak, gerekli kontrastın orada olmasını sağlayan çok açık bir metin rengi de var.

Bu palette kullanılan renkler şunlardır (soldan sağa):

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

3. Festival

Bir sonraki renk paleti, etrafta sıkça göreceğiniz bir renk paleti değil. Renkler genellikle aynı renk paletinde ortaya çıkmaz, ancak oldukça ilgi çekicidir. Web sitenizin benzersiz görünmesini istiyorsanız, bu palet gitmenin yoludur.

Bu palette kullanılan renkler (soldan sağa):

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

4. Pinky Sözü

Koyu renkli bir web sitesi yapmak istiyorsanız, sıradaki bir sonraki renk paleti mükemmel bir seçenektir. Siyah tonları ve pembe tonları iyi bir kombinasyon olarak bilinir. Çok kadınsı görünmeden web sitesine ekstra eğlenceli bir dokunuş katıyorlar. Siyah tonlar, web sitenizin görünümünün ve hissinin hala gerekli derinliği içermesini sağlar.

Bu palette kullanılan renkler (soldan sağa):

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

5. Santorini

Bu sonraki palette, mavinin diğer renklere hakim olduğunu açıkça fark edebilirsiniz. Bu renk paleti ile anında hafif ve pozitif bir his elde edersiniz. Mavi, insanların bir web sitesi oluştururken tercih ettiği renklerden biri olarak bilinir. Profesyonelliği yansıtan standart bir renktir. Ancak bu renk paletinde kullanılan mavi tonları aynı zamanda eğlenceli bir yanı da gösteriyor.

Bu örnekte kullandığımız renk paleti (soldan sağa):

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

6. Mor Zevk

Bu renk paletinde hakim olan renk kesinlikle mor. Sıklıkla iç karartıcı bir renk olarak algılansa da, bu renk paleti ve bunun bir web sitesinde kullanımı farklılık gösteriyor. Mor renk, daha parlak renklerle birleştiğinde çarpıcı sonuçlar verebilir.

Bu renk paletinde kullanılan renkler şunlardır:

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

7. İnce

Paylaşmak istediğimiz bir sonraki renk paleti oldukça nötr ve Festival renk paleti ile aynı tarzda. Bunu da pek sık görmüyorsunuz ama çok temiz görünüyor.

Bu örnekte kullanılan renkler (soldan sağa):

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

8. Kurumsal

Paylaşmak istediğimiz bir sonraki renk paleti, her türlü işletme web sitesi için idealdir. Kullanılan renkler belli bir pozitifliği ve gençliği yansıtıyor. Açık zemin renkleri, sarı ve turkuaz renklerin siteye katma değer getirmesini sağlar.

Bu palette kullanılan renkler (soldan sağa):

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

9. Gül

Gül rengini kim sevmez ki? Bu sonraki renk paleti, web sitenize kadınsı bir faktör getiriyor. Açık renkler web sitesine hakimdir, ancak daha koyu renklerin de güçlendirilmesini sağlar.

Bu palette kullanılan renkler (soldan sağa):

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

10. Çikolata

Öne çıkarmak istediğimiz bir sonraki renk paleti Çikolata. Bu renk paletinin güzel yanı, arka plan renkleri ve metin renginin kendilerini aynı renk kategorisinde bulmalarıdır. Bu, diğer iki rengin kendilerini bu renklerden ayırt etmelerine ve dikkat çekmelerine olanak tanır.

Bu palette kullanılan renkler (soldan sağa):

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

11. Sofistike

Bu sonraki renk kombinasyonu, ilk bakışta beklemeyeceğiniz bir şey. Mor ve sarı yeşil çok sık birlikte kullanılmaz ama sonuçta da göreceğiniz gibi; oldukça yakışıyorlar. Bu iki renge odaklanmak için arka plan renkleri ve metin rengi oldukça nötrdür.

Bu palette kullanılan renkler (soldan sağa):

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

12. Olivia

Olivia, fazla açıklamaya ihtiyaç duymayan bir renk paleti. Zeytin ve sarı renk çeşitleri çok güzel birleşiyor. Daha açık renkleri daha nötr tutmak, bu renklerin gösteriyi çalmasını sağlar.

Bu palette kullanılan renkler (soldan sağa):

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

13. Altın Kapı

Yumuşak bej renkler, web sitenizin bir tür ayrıcalık yansıtmasını sağlar. Renk paleti oldukça sade görünse de, bu renk paletindeki mor turkuaz renk, web sitesinin ihtiyaç duyduğu sıcaklığı getirmeyi başarıyor.

Bu renk paletinde kullanılan renkler (soldan sağa):

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

14. Kaptan

Bu palet muhtemelen listedeki en profesyonel görünümlü palettir. Bu paletteki iki lacivert renk bunun ana nedenidir. Ancak kırmızı renk, buzu kırma ve web sitesine biraz çeşitlilik katma konusunda harika bir iş çıkarıyor.

Bu gönderide kullanılan renkler (soldan sağa):

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

15. Çevresel

Paylaşmak istediğimiz bir sonraki renk paleti Çevresel. İsim, yeşilin bu renk paletine hakim olduğunu gösteriyor. Bu yumuşak yeşil renkler, bu palette sağlanan yumuşatılmış turkuaz renkle mükemmel uyum sağlar.

Bu paletteki renkler (soldan sağa):

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

16. Yumuşak zengin

Bu sonraki palette, bej ve kırmızının ne kadar iyi bir kombinasyon olduğunu açıkça görebiliriz. Her tür web sitesine olgunluk duygusu verirler. Göze çarpan başka bir yeşil renk ekleyerek, web sitenizin görünümü ve hissi de biraz gençleşecektir.

Bu paletteki renkler (soldan sağa):

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

17. Büyüleyici

Sıradaki bir sonraki palet, başka bir koyu renkli web sitesidir. Hakim renkler koyu mor ve gridir. Ancak, daha açık renkler web sitesine biraz sıcaklık getirmeyi başarıyor.

Bu paletteki renkler (soldan sağa):

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

18. Nane

Mint renk paleti, web sitenize tazelik duygusu getirir. İlk bakışta çok ayık görünse de, turuncu ve mor renk, web sitesine taze ve yeniden doğmuş bir his vermeyi başarıyor.

Bu palette kullanılan renkler (soldan sağa):

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

19. Yumuşak Sarı

Bu eşsiz renk paleti çoğunlukla sıcak renkler içerir. Arka plan rengi olarak hem koyu hem de açık renge sahip olmamıza rağmen, genel his açık renkli bir web sitesine daha yakındır.

Bu paletteki renkler (soldan sağa):

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

20. Gizem

Sıradaki son renk paleti, web siteniz için kullanabileceğiniz başka bir koyu renk paletidir. Bu palette kullanılan arka plan renkleri sadedir ve paletteki diğer parlak renklerin öne çıkmasını sağlar.

Bu paletteki renkler:

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

Son düşünceler

Bu gönderide, seçtiğiniz renk paletini web sitenize nasıl uygulayacağınıza dair bazı ipuçları paylaştık. Bunun yanı sıra, size web sitenize zarafet getirmenize yardımcı olabilecek 20 güzel renk paleti de gösterdik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Ve oradayken bize bildirin; Bu renk paletlerinden sizin favoriniz hangisi?

EDGOR_21 / Shutterstock.com tarafından Öne Çıkan Görsel