How to Find Your HTML Colour Code (Hex Colour)
24th August 2015
1st January 1970
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:
Move Your Mouse
Note that the cursor (you'd most commonly know this to be shaped like an arrow or pointing hand) has now changed to what's called a colour-picker, like this:
Click On the Colour You Want
In the case of the logo in this example, it looks like we have two colours. So let's click on the dark blue. When you click there, note that the hex (A hex colour always starts with the hash symbol) colour changes.
So, as simple as that, let's record that colour, #1379bd.
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.comments powered by Disqus