Colour By Numbers

Design Matters

posted on April 10, 2023

by Vizability

< Prev <Home> Next >

When you read the title you probably thought of those pictures that are all divided into sections and given numbers, each number being a different colour. Well working with colours as someone who can't see uses numbers in a different way. Each colour has a unique hex value that represents what it looks like, two digits for red, two for green, and two for blue.

Using these values, I can "see" that one colour is lighter or darker than another, more green, more blue, more red, find the opposite of a colour, all based on the hex value. For example, I can tell that this text is Amethyst on a light purple background; this text is Topaz text on it's opposite shade of blue; and that this text is Sapphire and pops on a silver background.

It may seem like something simple, but for someone who can't see the colours they are putting on the page, these hex values are one of the most useful things in my toolbox of tricks. Like my post on how I see web pages in code: What Do You See, being able to see the code behind the colour helps my designs come to life in a way that even I can see them.

If you are interested in seeing the actual numbers behind the colours to see what I'm talking about, I've included then all in a nice little table below:

ColoursTextBackground
Obsidian/Fuchsia#445055#FF00FF
Topaz/Dark Cerulean#FFC87C#003783
Jade/Light Green#00A86B#33DB9E
Onyx/Hot Pink#353839#FF69B4
Amethyst/Light Purple#9966CC#CC99FF
Sapphire/Silver0F52BA#C0C0C0
Emerald/Light Green#009B7733CEAA
Ruby/Rich Black#CC0066#010203
Diamond/Seal Brown#B9F2FF#460D00
< Prev <Home> Next >

Comments

Add Comment