Har du svårt att bestämma dig för färgschemat för din website?
Genom att välja rätt färgkombination kan du göra din website mer tilltalande, förbättra upplevelsen för användarna, skapa en varumärkesidentitet och öka försäljningen och konverteringen.
I den här artikeln visar vi dig hur du enkelt väljer ett perfekt färgschema för din WordPress site.
Förstå färgernas psykologi
Det är en väl undersökt teori att färger kan påverka mänsklig responsive. Färger har en känslomässig dragningskraft på de beslut och val vi gör i vår vardag. Detta anropas färgpsykologi.
Stora företag spenderar miljontals dollar på att bygga upp en väl genomarbetad image och identitet för sina produkter. De anlitar experter för att välja den perfekta kombinationen av färger för sina varumärken, produkter och websites.
De färger som du använder för din WordPress blogg är en viktig del av din varumärkes image, eftersom de kan skapa känslor och känslor hos dina användare.
Genom att använda komplementfärger strategiskt kan du skapa en minnesvärd identitet för your varumärke som går hem hos målgruppen. Detta kan också skapa förtroende mellan dig och dina kunder.
Så hur kommer du fram till vilka färger du ska använda och vilka känslor du vill skapa hos dina användare?
Som tur är för you har marknadsförare och psykologer redan gjort massor av forskning.
Till exempel använder många matbloggar och restauranger färgerna rött, orange eller gult eftersom de förknippas med hunger. Rött är en färg som fångar uppmärksamheten, medan gult och orange stimulerar spänningen och skapar en varm och välkomnande atmosfär.
På samma sätt använder de flesta banker färgen blå eftersom den symboliserar förtroende, lugn och tillförlitlighet.
För att få ytterligare förståelse för färger och deras betydelser kan du titta på den här infografiken:
- Röd: Ungdomens och glädjens färg. Den återspeglar djärvhet och självförtroende.
- Grön: Skapar en lugnande och rogivande effekt. Den framkallar en fridfull, progressiv och lugn känslomässig response.
- Blå: Det återspeglar förtroende, styrka och tillförlitlighet.
- Svart: Genererar en sofistikerad, solid, säker känslomässig response.
- Vitt: Klarhet och enkelhet är de två viktigaste effekterna av vitt.
- Gul: Optimismens, värmens och vänlighetens färg.
- Orange: Skapar en rolig, vänlig, självsäker och glad effekt.
- Rosa: Sensualitet, femininitet, romantik och kärlek är de känslor som förknippas med rosa.
Andra saker att tänka på när du väljer ett färgschema för WordPress
Färger behöver ett sammanhang för att fungera på det sätt som du vill att de ska fungera. Your brand or product may already have certain associations that may may or ej work with the colors you are choosing.
Det finns några saker du bör tänka på innan du väljer ett färgschema för din WordPress website.
Först måste du överväga den befintliga varumärkets image. Om du redan har en logga och annat marknadsföringsmaterial kan du använda de befintliga färgerna på din website.
You need also to consider which colors will look good for the website design.
En ljusblå färg kan till exempel se bra ut i verkligheten, men är inte den bästa bakgrundsfärgen på din vy.
Du måste också tänka på andra medier, som sliders, videoklipp, images och call-to-action-knappar på din site. Se till att välja en bakgrund som kompletterar de färger som du använder för din CTA-knapp, textfärg och sliders.
Slutligen bör du också tänka på tillgängligheten. Ett bra färgschema har tillräckligt med kontrast för att det ska vara lätt att läsa även om dina besökare har nedsatt syn, vilket många människor runt om i världen har.
För ytterligare instruktioner, se vår Step-by-Step guide för att förbättra tillgängligheten på din WordPress site.
Video Tutorial
Om du föredrar skriftliga instruktioner eller behöver mer details, fortsätt då att Läsa.
Skapa ett färgschema för WordPress
När du har valt rätt färger för din WordPress website finns det flera tools online som du kan använda för att generera ett obegränsat antal färgpaletter.
Vi rekommenderar att du väljer minst två kontrasterande färger som representerar ditt varumärke och den response du vill få från användarna.
Med det sagt, låt oss ta en titt på de online tools som du kan använda för att generera rätt färgschema för din webbplats.
1. Adobe Färg CC
Adobe Color CC, tidigare känt som Kuler, är ett bra verktyg för att generera färgpaletter.
Verktyget har en utvald färghjul som kan användas för att välja färger från ett spektrum. Du kan även välja färgregler innan du snurrar på hjulet för att skapa visuellt tilltalande färgscheman. Dessa regler inkluderar komplementära, triadiska, analoga och monokromatiska.
Dessutom kan du manuellt justera varje färg i paletten, och resten av färgerna kommer automatiskt att ändras för att matcha färgregeln. Du kan också generera färgpaletter genom att uploada foton och extrahera olika färger från dem.
Utöver det erbjuder Adobe Color CC också ett stort bibliotek som du kan använda för att välja Pre-Made färgscheman för att öka ditt varumärkesigenkänning.
2. FOTOCOPA av COLOURLovers
COLOURLovers är en av de mest populära destinationerna för färgval och idéer. De har några bra tools för att generera färgscheman. Ett av dem är PHOTOCOPA, som tillåter dig att designa ett färgschema från foton.
Verktyget låter dig uploada en image och använder en färgväljare för att välja specifika färger från imagen för att skapa en palett.
Du kan också använda tools som COPASO av COLOURlovers för att generera mer avancerade färgpaletter för websites from scratch eller genom att använda befintliga paletter som laddats upp av andra användare.
3. Materialpalett
Material Palette är inspirerat av Googles materialdesignkoncept och är ett användarvänligt verktyg som tillåter dig att generera färgscheman med hjälp av designregler.
Den innehåller cirka 19 primärfärger och deras nyanser, tillsammans med ett färgväljarverktyg som hjälper användare att välja valfri nyans, mättnad och ljusstyrka för paletten.
Det erbjuder färdiga färgscheman och låter dig även skapa customize-färger genom att mata in RGB- eller HEX-koderna.
Materialpaletten aktiverar dig också för preview av färgpalettdesign på en website eller på en mobil device i realtid.
4. Kylare
Coolors är en välkänd generator för färgscheman. Det skapar ett färgschema baserat på användarens val, till exempel monokromatiskt, analogt, triadiskt, komplementärt och andra.
Med toolet kan du skapa en gradient mellan två färger. Det medföljer även en kontrastkontroll som ger förslag på hur paletten kan göras mer tillgänglig för användare med synnedsättning.
Det kan också integreras med populära designverktyg som Sketch, Photoshop och Illustrator för att skapa ett färgschema.
Med Coolor kan du också save, exportera och dela dina färgpaletter med andra användare på internet.
Bonus: Ändra färgschemat för administratörer i WordPress
Förutom att skapa ett attraktivt färgschema för din site kan du också ändra färgschemat för admin för att skapa en custom WordPress dashboard för dig och ditt team.
Om du till exempel runar en restaurang och godkänner order online för den, kanske du vill använda färger som rött, gult eller orange på WordPress back-end för att representera din website.
På samma sätt, om du har en membership site där användare kan logga in på din WordPress dashboard, kan du använda ett attraktivt färgschema för att förbättra användarupplevelsen.
You can easily change the colorschema for your admin area by visiting the Users ” Profile page.
Därefter rullar du ner till sektionen ”Admin Color Scheme” och väljer något av de 9 färdiga färgscheman för din website.
När du har gjort det, glöm inte att klicka på knappen ”Update Profile” för att lagra dina inställningar.
För detaljerade instruktioner, se vår tutorial om hur du ändrar admin färgschema i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du väljer det perfekta färgschemat för din WordPress webbplats. Du kanske också vill kontrollera vår Beginner’s guide om hur du customize färger på din WordPress website och våra expertval för de bästa gratis WordPress themes för bloggar.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dayo Olobayo says
I never realized how much thought goes into choosing a color scheme for a website. I’m going to try out some of the online tools you mentioned to see if I can come up with a better color scheme for my own site.
Dennis Muthomi says
I personally use a tool called Realtime Colors to help me out. It’s got a simple interface that lets you see how different color palettes would actually look on a real website. Makes it way easier to visualize and experiment with different options.
definitely recommend checking it out if you’re struggling with finding the perfect colors for your site
Mrteesurez says
Thanks for your recommendation, I am really struggling with finding colour combination, although I like blue but don’t know what perfect colour to use for links, heading and others that will be perfect fit and agreeable manner with blue.
Dennis Muthomi says
hi…thanks for checking out my recommendation sir.![:-)](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
For my site, I went with blue as the primary color too. You need to also focus on the CTA color.
Here’s what I did: to make my call-to-action buttons really pop, I used a contrasting color that’s opposite blue on the color wheel. Canva has a great color wheel tool that shows those complementary colors
For blue, a nice vibrant yellow-orange works wonders to grab attention for the CTA buttons. Maybe give that a try and see if you can find a combo you like
Mrteesurez says
Thanks, Dennis, I appreciate your guidance. I will try using the Canva tool you mentioned to find the perfect colour for my CTAs. I also used blue as the primary color on my site.
Jiří Vaněk says
Hi Dennis. Thanks for the tip. I checked out the tool you recommend, and it somewhat reminds me of Figma, which I experimented with for my design. I also needed something where I could see the colors for the web design in real time and adjust them a bit so the combinations fit together perfectly. I’ll take a closer look at your tool. It looks very promising.
THANKGOD JONATHAN says
Color scheme is very important to match with any website design. Please how can I change the text color of my blog posts and pages? The theme I am using doesn’t have it in the ”Customize”
WPBeginner Support says
Our guide below covers a few different options you can use
https://www.wpbeginner.com/wp-tutorials/how-to-change-the-text-color-in-wordpress-easy-methods/
Administratör
Moinuddin Waheed says
Having a good color combination for any website gives a sense of consistency and branding.
I have noticed wpbeginner, there is consistent color every where and it gives a sense of branding.
I have used coolers for my websites to get a color combination.
Thanks for giving all the lists of possible options to explore color scheme for a websites.
WPBeginner Support says
Glad we could help share some color theory
Administratör
Andy says
Hey everyone! I really wanted to make my site by myself – taking into account my preferences. But I also wanted the design of my site to appeal to visitors. I have tried many patterns and combinations. Thanks for your advice guys! With this article, I found a solution that I really like!
WPBeginner Support says
Glad you found our recommendations helpful
Administratör
Rudy SMT says
Thanks for the article, I took the psychology of colors to heart.
I just complete the recoloring of my website, I didn’t use professional software like Adobe or PhotoShop but instead an online palette generator and some other trick.
I wrote down step by step how I picked the color and implemented on my website in less than 20 minutes without any professional design software.
i love to keep things simple; I hope it will help others.
filzakhan says
its awesome themes collection . verry nice and really funky coloring .. and i love it
Donnamarie says
Thank you for the color theory and tools! I’m about to create my first website and really want to use a black background with pastel colored, not white, fonts. I prefer this schemata because it’s way easier on my eyes with the reduced glare. I’ve been using the net for almost 20 years and see very few sites with dark backgrounds. Some white font on black is fine, but pages of it is too much contrast for me too. I’ve noticed a trend of light grey font on white backgrounds and when I see a site with that scheme, I bounce because it’s too straining to read. I’d love comments on the following 2 questions:
Does using a dark background really turn off the majority of potential subscribers?
I’ve heard that most webpages are white because at first they were emulating books…why is the majority of pages white?
Bryce Munger says
One thing to consider with sites is how they will look to everyone. I am red/green colorblind and what looks sharp and crisp to you may drive my eyes bonkers. The same applies in reverse, a combo I like may not look good to others. I would recommend finding some friends or associates that are colorblind (or vice verse) and have them review your work.
WPBeginner Support says
That’s a great tip Bryce, thanks for sharing.
Administratör
Muhammad Imran says
Very nice collection and great free resources.Thanks
ميسرة says
Thanks wpbeginner stuff
Adrienne says
Good stuff! Color and how you use it is everything.
Melanie Lewis says
Great resource!!! Thanks so much!