WordPress Website Tutorials for BeginnersHow 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.

Best colors for a website

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 #190FC8; #0073E7a; #37A2E6;

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 #190FC8)

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 #190FC8;”>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>

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

Wealthy Affiliate Profile

best colors for a website

How to make round pictures with borders

affiliate disclosure

(Visited 52 times, 1 visits today)
  1. Jewel Carol says:

    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

    • Loes says:

      Hello Jewel, thank you for your enthusiastic compliment, glad to be of help, see you and all your friends around:) greetings Loes

  2. website design services says:

    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?

    • Loes says:

      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

  3. Milla says:

    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.

  4. Peggy Menke says:

    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!

    • Loes says:

      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

  5. Geoff-n-jane says:

    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.

    • Loes says:

      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

  6. Bob says:

    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

  7. Gordon Dodd says:

    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.

    • Loes says:

      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

  8. rajashri says:

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

    • Loes says:

      Thanks for the compliment Rajashri, I must have it in my genes 🙂 My Dad was a teacher, enjoy playing around with it! Loes

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>