Contribute
follow

Hugo Woodhead

founder @ pilcro.com

A Quick Trick To Find Your Brand Colours Without Asking Your Teammates

I often find myself asking “where are the brand colours saved?” if I need to make a presentation at work. So here’s a neat trick to help you find your brand colours from your company website. Without having to ask that same annoying question.

I learnt this trick when I started developing. At the time, my co-founder started to get annoyed. I would ask him, repeatedly, for simple components I needed for our website while I was developing. “Where’s the latest logo?” or “what colour should I use for the call-to-action buttons?”

The response from him was never to give me what I wanted. Instead he would always show me where to find what I needed. This blog shows you what I learnt.

How to find your brand colours?
  1. First, go to your company website. For this demo, I will use our website pilcro.com.

pilcro homepagepilcro homepage

screenshot of the pilcro.com homepage

2. Find a component on your website that is in the colour that you need for your presentation. The one I am looking for today is the pink colour that fills the call-to-action buttons on the Pilcro website saying “TRY IT FREE”.

3. In the menu at the top of the screen, navigate to the ‘View’ menu and open Developer tools (the shortcut is cmd+alt+i).

open developer toolsopen developer tools

How to open developer tools on the pilcro.com homepage

4. Once the developer tools are open, your screen will look like the screenshot below. The Developer tools may pop up at the side of your screen or at the bottom. (I should mention that I am using the Google Chrome browser for this demo)

Pilcro with dev tools openPilcro with dev tools open

pilcro.com homepage with Developer tools open

5. I assume you’ve chosen which element of your website that you are going to choose your colour from. To highlight this element, click on the small icon, (an arrow cursor in a box) at the top left of the Developer tools window, as shown below.

pilcropilcro

Element highlighter tool

6. This very helpful tool lets you select a single element of your website. I’m going to select the pink button by clicking it after clicking the arrow in step 5. You will see that the button is now highlighted.

pilcropilcro

selecting the main call to action button on the pilcro.com homepage

7. After I have clicked on the TRY IT FREE button, the right-hand pain of the developer tools shows the styling for the element I have clicked on.

8. I can see that the hex code for the pink colour is displayed in the developer tools. I can double-click it to copy the hex code and paste it into Google Slides or wherever I am making my presentation

pilcropilcro

9. It seems complicated but once you have done it once you will find it super easy. It’s one neat trick to find your colours so you never need to ask again.

Well, actually that’s not quite it

If you want to store your colours somewhere, so that you don’t have to go digging around in a tool designed for developers each time you are making a new presentation, you can store them in Pilcro and access them in one click from your Mac menu bar, rather than repeating the above 9 steps.

pilcropilcro

Screenshot of the Pilcro menu bar app

Please follow us on twitter if you want to keep up to date with the action. You can find updates, some (hopefully amusing) anecdotes and find out more about Pilcro - free brand management software for G-Suite.

A Day in the Life of a Pilcro User

Patrick Woodhead

Brand consistency: growth hacking doesn’t work without it

Patrick Woodhead

Could Your Brand Asset Software Be Much Simpler?

William Woodhead

© copyright Pilcro - take the pen limited 2019

Product

Company