Best colors for a website, DIY

How to use colors on your website.

It is not that difficult to use specific colors on your website, you just have to know how. The theme of your website and your header have colors already. You choose them because you liked these colors. And to get a unity on your website and the best colors for a website, we are taking a screenshot first.

1. Go to Imagecolorpicker Online and load up your screenshot.

2. Pick every color on your website header and text.

3. Write your codes down.

The best colors for my website are:

Blue #3069b0; #053877; #316AB0;

Green #92C7BD; ACCFCB;

Rust #782F26;

Light pink #E7D2F3;

Text #242424;

How to use the best colors for a website in borders and text.

I have used the xmp tag to prevent the codes I display are executed by the theme. So you can copy them.

<xmp>Copy from here<div style=”width: 200px; height: 100px; border: 8px inset #ff0000;”>I have used the xmp tag to prevent the codes I display are executed by the theme. So you can copy them</div>until here</xmp>

Border codes you can use:

solid, dotted, dashed, double, groove, ridge, inset, outset, and mixed

Change Text color

When you use the A , you can’t fill in a hexa color number, so just click any number, go over to your text editor and change it into the hexa color code you want it to be.

<xmp>Copy from here<div style=”width: 200px; height: 300px; border: 3px dashed #ff0000;”><h2>Change Text color</h2>
When you use the A , you can’t fill in a hexa color number, so just click any number, go over to your text editor and change it into the hexa color code you want it to be.</div>until here</xmp>

SOLID (For changing text color, select word and choose #3069B0)

For this box I have used “solid blue # color, you can change the border px, width&height

<xmp>Copy from here <div style=”width: 200px; height: 100px; border: 3px solid #3069B0;”>For this box I have used “solid blue # color, you can change the border px, width&height</div> until here</xmp>

DOTTED (For changing text color, select word and choose your color, mine is #92C7BD)

This box has a dotted green html border. You see I have changed some values

<xmp>Copy from here<div style=”width: 700px; height: 50px; border: 6px dotted #92C7BD;”>This box has a dotted green html border. You see I have changed some values</div>until here</xmp>

MIXED (For changing text color, Select word and change color, #782F26)

In this box I have mixed a few to create this border. By using solid, dashed, dotted, and double. This way you can play around with all kind of effects.

<xmp>Copy from here<div style=”width: 200px; height: 200px; border-width: 6px; border-color: #782F26; border-style: dotted dashed solid double;”>In this box I have mixed a few to create this border. By using solid, dashed, dotted, and double. This way you can play around with all kind of effects.</div>until here</xmp>

CHANGE POSITION #0073E7

class=”alignleft”

class=”aligncenter”

class=”alignright”

class=”alignnone”

For this box I have used “outset blue # color, you can change the border px, width&height

<xmp>Copy from here<div class=”aligncenter” style=”width: 200px; height: 150px; border: 20px outset #190FC8;”>For this box I have used “outset blue # color, you can change the border px, width&height</div>until here</xmp>

Click here for additional information from a fellow blogger, “What Is Color Psychology And Why Is It Important In Marketing?”

If you liked this tutorial about best color for a website, can you please leave a comment below?

Comments

Best colors for a website, DIY — 16 Comments

Jewel Carol on May 14, 2015 at 6:30 am said:

Dear Loes

I just love yr clean website, it is such a delight to visit. 🙂

Loes, this is a such great place for people looking for free website tools, free images, html codes, etc. I will certainly recommend friends and associate to visit yr resourceful website often!!

Thank you very much for yr blog post on “best colors for a website”, it definitely helps me. 🙂

Jewel Carol

Reply ↓
- Loes on May 14, 2015 at 11:02 am said:
  
  Hello Jewel, thank you for your enthusiastic compliment, glad to be of help, see you and all your friends around:) greetings Loes
  
  Reply ↓
website design services on May 13, 2015 at 9:49 am said:

Hi there, it is my third visit here. I rarely come here, but after reading it, I’ll definitely save it to pocket app so that I can visit here constantly to read awesome writings like this. Will you please tell me in which topic you’ll write next and most probably when?

Reply ↓
- Loes on May 16, 2015 at 9:15 pm said:
  
  Thanks for your 3rd visit, and that you like my work, unfortunately I can’t tell you which and when my next topic will be, I work on inspiration, it is as much a surprise for me as it will be for you, greetings Loes
  
  Reply ↓
Milla on May 13, 2015 at 7:44 am said:

fantastic,I was thinking how to keep the website uniformed,and it’s best to be achieved with colors. thank you so much for that tutorial,so handy,
very easy to follow instructions. you have one of the best teaching skills.

Reply ↓
- Loes on May 13, 2015 at 7:49 am said:
  
  Thanks Milla, it is really handy to know how you can pick your own colors, nice reply, Loes
  
  Reply ↓
Peggy Menke on May 13, 2015 at 6:11 am said:

Hi, Loes. I love you website, it looks so professional. You have great information to help all of us that are building our website. Thanks for sharing!

Reply ↓
- Loes on May 13, 2015 at 7:19 am said:
  
  Hello Peggy, you are welcome, I hope to help a lot of people who are creating a website, who do not want to mess around with Css and the editor, Loes
  
  Reply ↓
Geoff-n-jane on May 13, 2015 at 1:48 am said:

Hi Loes,
You have a great looking website.
We love the way you show and explain everything so well.
We will bookmark this for later.
Thank you.

Reply ↓
- Loes on May 13, 2015 at 7:17 am said:
  
  Hi Geoff and Jane, thanks for your compliment and visit, you are allways very welcome to come back, I am very sure I will find new stuff to blog about, see you later, Loes
  
  Reply ↓
Bob on May 12, 2015 at 4:21 pm said:

Thanks Loes, you have done it again. You have some great information that I can use here. I have a folder fully of just your stuff.

Have a great day!
Bob

Reply ↓
- Loes on May 12, 2015 at 4:26 pm said:
  
  Hi Bob, thanks! really nice to know you keep track of all my work! See you later! Loes
  
  Reply ↓
Gordon Dodd on May 12, 2015 at 3:06 pm said:

Since following your border tutorials Loes i am beginning to learn a lot about different designs and colours, cant thank you enough for your self commitment to this fantastic community, well done and please keep it up, there are a lot of members here that benefit from all of your tutorials.

Reply ↓
- Loes on May 12, 2015 at 3:16 pm said:
  
  Hi Gordon, thanks a lot for your nice reply, I will share anything I learn, not only with the Wealthy Affiliate Community, but also with the rest of the world 🙂 Have a nice day, Loes
  
  Reply ↓
rajashri on May 12, 2015 at 3:05 pm said:

Awesome Loes. Your clarity and simplicity in explanations is astonishing. I just got my inertia out to try DIY. Thank you so much!!!!!

Reply ↓
- Loes on May 12, 2015 at 3:14 pm said:
  
  Thanks for the compliment Rajashri, I must have it in my genes 🙂 My Dad was a teacher, enjoy playing around with it! Loes
  
  Reply ↓