CSS & HTML

How to Find Your HTML Colour Code (Hex Colour)

If you want to go beyond the most basic customisation on many online profiles (e.g. Twitter, Paypal), then you need to know your hex colours, or your HTML colour codes. This tuturial shows you how to pick hex colours, using Pixlr.

Typically, you would want the hex colour codes from your logo, and use these colours repeatedly in all of your branding. We’re going to use the logo of Pedreschi Electrical & Alarms, who uploaded their logo to our Facebook page so we could use it as an example.

I’ve blogged about Pixlr before. It’s such a brilliant website. So, today we’re going to see how to use Pixlr to figure out what your hex colours are.

Update: See the video below to see a similar tutorial, scroll below the video to see the text and image tutorial is below.

Go to Pixlr.com

Click on Editor, so you should be on a page like this:

Get the Image URL

If you have the image already on your computer, but for the sake of this example, I’m going to choose ‘Open Image From URL’ … so let’s do that real quick.

In the case of our example using Pedreschi’s logo, it was uploaded to our Facebook page. I’m using Firefox, so if I right-click and choose ‘Copy Image URL’ then the exact link of that image will automatically be copied:

Open the Image

The image will then open up and Pixlr will look like this:

Click ‘Set Main Colour

See the menu on the left hand side? Look towards the bottom and click (see image below)

You’ll then see this pop up:

So, as simple as that, let’s record that colour, #1379bd.

Check

It looks like the same colour, #1379bd is used in the blue text, Pedreschi . . . but let’s check.

As before, I’m just clicking on the colour I want to see the hex for – and the hex value changes to match this.

Note that I’m clicking in the centre of the area in which I am checking the colour.

Check the Other Colour(s)

This logo has two colours, so let’s check what is the hex value of the light blue:

So, our light blue is #91aed9 – read that as “hex 9 1 a e d 9”.

To summarise, the two blues in this logo are #91aed9 and #1379bd – if we wanted to verify that the background colour was white, then we just need to click in white area and the hex value should be #ffffff – which is ‘exactly white’.

As usual … if you have any questions, or can’t figure it out after this tuturial, please do ask in the Comments below or on any of our Social Media.