Zonua website makers logo

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.

How to Find Your HTML Colour Code (Hex Colour)

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.

  1. Go to Pixlr.com

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

    Open Image from URL in Pixlr
  2. 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:

    Get image link
  3. Open the Image

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

    Image Opens in Pixlr
  4. Click 'Set Main Colour'

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

    Click on the last thing in the menu

    You'll then see this pop up:

    Color Selector
  5. 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:

    Colour Picker
  6. 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.

    Get Your Logo Hex Colour

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

  7. 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.

    Calculate Logo Hex Colour

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

  8. Check the Other Colour(s)

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

    Get the HTML Colour Code

    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.

Dorcas RĂ©amonn

Hi, I'm Dorcas. I make websites. I lecture in Digital Marketing and related stuff in the UCD Smurfit School, and also work with the UCD Innovation Academy. I love education, learning and all things creative, which could cover anything from coding to filmography to dancing! I take photos (personal Insta @dorcasz). I do consultancy. I do talks. I've written popular books on WordPress (available here and and here. Visit my personal site here.

Facebook Twitter Zonua on Skype Zonua on Pinterest Zonua on Vine Zonua on LinkedIn Google Plus Instagram

comments powered by Disqus