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.
First, go to your company website. For this demo, I will use our website pilcro.com.
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).
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.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.
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.
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
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.
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.
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.