Month: November 2012

How hex codes work

You might be familiar with hex codes if you’ve ever tinkered about with HTML or CSS while working on a website – they’re the six-character alphanumeric strings preceded by a hash symbol which reference a particular colour; #000000 for black, for example.

But despite having known about them and having used them for years I realised that I had never looked into how they worked. I’m also nursing a stupid cold and who among you HASN’T become obsessed with something you’ve used in CSS when feeling under the weather? EXACTLY.

**Now let’s begin**

The “hex” in hex codes is short for hexadecimal. This means that you are working with a base-16 system and explains why you see letters as well as numbers in the codes — in day to day counting we use a base-10 system which means that for base-16 we need to find a way of representing an extra six digits. As such the numbers 0-15 become the characters 0, 1 ,2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F in hexadecimal.

The six digits of each hex code are divided into three pairs, which correspond to the amount of red, green and blue needed to create the colour. The first two digits ALWAYS deal with the amount of red, the second two with the green and the final two with the blue. There are 256 different combinations of digits in each pair (16×16) so each different permutation can represent one of 256 possible intensities of that colour channel with 00 being the least intense and FF being the most. That’s why #000000 shows up as black as all the colour channels are on their lowest intensity and #FFFFFF maps to white — everything is on maximum strength.

256 different possible values for each of the RGB colour channels means over 16 million potential colours at your disposal. However, back in the day, not all electronic displays could make sense of all these different options — as it goes, even the human eye struggles to distinguish more than 10 million of them — so web-safe colours were introduced to offer a level of standardisation.

You can tell web-safe colours at a glance because they only use the digits 0, 3, 6, 9, C and F, and each pair of digits matches (#33FF99, for example). They correspond to 0%, 20%, 40%, 60%, 80% and 100% intensity of each channel. As a result there are only 6 possible values for each colour channel and 216 potential colours — perfect for monitors limited to a palette of only 256 colours.

It wasn’t a foolproof system but generally provided a decent solution. In case you were wondering there was actually an even smaller colour palette devised of super-duper web-safe colours to prevent mishaps but nowadays it seems a little redundant because advances in technology mean that most electronic displays you encounter on a regular basis are more than capable of dealing with a wider range of colours. That said, it’s always good design practice to remember not everyone has up-to-the-moment tech at their disposal!

I use hex codes most often in CSS when I’m tweaking the look of a blog. In CSS you can actually use a shorthand form of hex code which only involves three digits. These triple digit codes only shorten pairs of identical digits though, hence #4499CC would become #49C but #80FF00 would need to remain as a six digit code. CSS also allows you to use all manner of different systems to tell it which colours you fancy using but I love the modularity of hex codes and find them strangely beautiful so I always use them for preference.

**And finally**

If you ever want to translate RGB numerical values (such as rgb (255,0,0) which is bright red) into a hex code you can do it as follows:

  1. Take the red value first
  2. Work out how many 16s are in the number (this is basically primary school division – you want whole numbers and remainders NOT decimal places)
  3. Translate the whole number into a 0-F digit. This will be the first digit in the pair.
  4. Translate the remainder into a 0-F digit. This is the second digit in the pair.
  5. Repeat for the green and blue values.
  6. When you have your three pairs of digits list them in RGB order after a # symbol. Voila!

To go the other way and translate a hex code into numerical RBG values you reverse the process:

  1. Divide the code into three pairs of digits.
  2. Starting with the red pair, convert each digit in the pair to a decimal number (0-9 stay the same while A-F map to 10-15)
  3. Multiply the first number in the pair by 16 and then add the second number.
  4. Repeat for the green and blue values.
  5. You then represent the numerical values you get from this process in the format rgb(255,0,0)

This website: The making of…

My friend Tom kindly bought me a domain name on a whim.

However, this meant that my public persona until I worked out how to use the damn thing was one which he had set up for me — a powerful combination of Lorem ipsum and Nyan cat.

As someone looking for freelance editorial work which rather depends on being able to produce non-generic copy, lorem ipsum was not the ideal scenario. Plus Nyan cat is now dead so the pictures of him were making me sad.

As such I decided to set up some kind of website for myself. How hard can this stuff be? — I know what a server is. I’ve used HTML. I can make a motherfucking GIF! I can do ANYTHING! — I will confess that I had had two mugs of mulled wine by this point in the evening.

Three minutes later I was typing “How the fuck am I supposed to deal with web hosting?” into Google. The first search result looked relevant but entirely hinged around WordPress – did I even want WordPress? Was this the equivalent of researching snazzy frontend space travel without bothering to evolve from the primordial folder tree slime I suspected I might be?

The other results were even less helpful:

  • Wolverine (comics) – Wikipedia, the free encyclopedia
  • Fight Club (1999) – Memorable quotes
  • What’ s so funny about Gangnam Style? – The Guardian
  • The 5 Worst Ways To Break Up With Someone. – @TremendousNews!

This is one of the perils of assuming Google has reached the point where you can angrily type questions at it as if it were a friend at the pub. Previous search queries lurking in my browser history include “What’s so great about yachts?” and “Show me really good owls”. I have never discovered what’s so great about yachts and the owls have been pretty hit and miss.

Some more keyword friendly search phrases yielded information by the ton. I could see all of that helpful information on the screen in front of me, glowing and shining and generally beckoning me to a glorious future where I was a dot com millionaire. But there didn’t seem to be any way to bridge the gap between the words on the screen and the part of my brain marked “modern shit that you need to know if you ever hope to eclipse your parents’ generation”.

SIDENOTE: Eclipsing my parents’ generation at anything would probably be a lot easier if I cut down on the “Show me really good owls” search engine visits.

The feeling I had at this point was of being a leopard standing at the bottom of a chrome-plated tree, unable to gain a foothold on the shiny bark to get at the succulent meaty leaves above. Or, perhaps, the feeling of knowing there was a salient point buried in that last idiotic metaphor but finding myself without any of the requisite tools for digging it out and presenting it to you.

I love to learn – really love it in fact – but without a frame of reference I couldn’t find any hooks upon which to hang the explanations. It’s a strange quality of search engines and the internet – they’re so busy trying to refine what you’re asking for it can be harder to get a big picture. All the results listings felt in such a rush to get to the fine detail there wasn’t time for the basic shape of what I was aiming at to crystallise.

At this point I had closed the browser window entirely and was typing “HELP HELP HELP HELP” into Twitter.

Before hitting send I realised that this was both unlikely to elicit helpful information and also very likely to provoke panic in any friends who haven’t quite got to grips with the whirling morass of hyperbole that is Twitter. I deleted it and tried again.

“Anyone fancy talking to me about domain hosting and the like?”

I was pleased at how grown up and knowledgeable that tweet made me sound — the outside world would never need to know that I was currently dealing with the realities of domain hosting by trying to drown out the feelings of inadequacy with Whitney Houston’s Greatest Hits.

Unfortunately my joy was short-lived as I spent the next few minutes responding that I actually meant “How do I use the space I currently have” rather than “How do I get the space in the first place”.

But then something wonderful happened.

She later told me that my tweet had hit just the right note of bewilderment, sparking a kind of sympathetic “Yes, what does one even Google?” moment. Whatever it was, I found myself in the company of Jenn Frank, being guided ably and enthusiastically through the confusion of systems and setups which had sent me running to Twitter just moments before.

Finding out exactly how distant our computers were from one another (five thousand miles, give or take) as we tried to untangle the mess I had created — did I forget to tell you that in addition to this domain and hosting I also own philippawarr.com thanks to a moment of drunken plan-free optimism which is technically locked to a different service? — gave me a rush of warmth towards Twitter. Honest to God, at its best it is the most helpful, friendly, kind-spirited entity on the internet. Anyway, I digress.

As we talked we seemed to play a digital version of “The hip bone is connected to the leg bone”. It turned out I knew an awful lot of the disparate pieces, just very little about how they came together — the hallmark of someone who deals with the “content” part of the content management system and the “why is the content management system broken” part of the IT helpdesk, perhaps?

For over two hours we typed, me sporadically microwaving my mug of sugary wine so as to have something to keep my fingers warm, and her enjoying an entirely different kind of muggy stickiness over in the wilds of Texas. (I have literally no idea whereabouts in Texas so my brain just filled in the gaps. There were also at least five ten gallon hats. That’s FIFTY gallons of hats.)

Eventually I had set up all the basic permissions, installed WordPress, collected a small heap of plugins — like Jetpack; a kind of mad Swiss army knife of an add-on whose functionality seemed to ping off in all directions– and tried to make the whole enterprise as functionally secure as possibly without securing it from my own access. A kind of sweet spot between idiot-proof and attack-proof.

I won’t go into detail on those fronts (or at least not yet) because there was a certain amount of trial and error and asking lots of questions and reading lots of answers. The information itself is still settling into shape in my brain but the basic ideas are there — I think the main thing I realised was how easy it had been to forget the structure of the digital world as soon as I stopped using the DOS interface to engage with it. No doubt more and more of it will crystallise or regroup as I tackle the next part — the FTP business.

The rest was my home turf — a soothing cocktail of faffing about in Photoshop, playing with colour schemes, poking at the CSS until it did something akin to my bidding and doodling octopus tentacles.

The results of this whole learning curve are what you see before you — my new online home.

I hope you like it!