Coding colors

Maggie Chiu Yee Chan
3 min readMay 1, 2017

--

Josef Alber’s Interaction of Color

I was probably 6 years old when I created my first colour wheel, learning about primary, secondary, and tertiary colours. I began with tempera, watercolours, acrylics, oil paints to create colours — dabbling a bit of red into the yellow to make orange. My love for colours and aesthetics in general brought me to my first career as a graphic designer and then later a digital product designer.

Sample Pantone colour chart

In design school, I discovered many aspects of design. I discovered many different ways of thinking about colour (RGB (red, green, blue), CMYK (cyan, yellow, magenta, black), Pantone, HSL(Hue, Saturation, Lightness, etc.). In my second year of university, I was introduced to coding with guidance from a professor of mine.

Processing was my first exposure to interacting with colour using code.

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

It’s a programming language based on Java. I stopped defining colours as dabbles with my paintbrush, or eyedroppers in Photoshop and started defining colours as parameters to be manipulated.

Generative Design — book
Pink Cloud — interactive installation by Everyware

Fast forward a few years and I now find myself dedicating more time to coding by taking a 9 week immersive bootcamp in web development with Hackeryou.

In the first week, we covered CSS and the ways that colour is defined to create the colours we see on the internet.

http://colours.neilorangepeel.com/

RGBA is a flexible way of defining colour. Each colour is composed of 4 values (Red, Green, Blue, Alpha) that range from 0–255. RGBA is an additive color model where the colour gets lighter as the “RGB” values all approach the highest value — 255; colours get darker as the values approach zero. The “A” value stands for Alpha, also known as transparency. The Alpha value is defined on a scale of zero to 1 where zero is completely transparent and 1 is completely opaque. For example, the RGBA value for a fully opaque Black is (0,0,0, 1) and for a 10% opaque white would be (255, 255, 255, 0.1), a red with a 50% transparency would be (255,0,0,0.5).

Hexadecimals are also commonly used to define colours— they’re actually composed of RGB values.

More on how HEX colours are made up here: https://skillcrush.com/2012/05/07/hexadecimal/. I can already start to imagine the ways you can programmatically manipulate colours on the web using HEX codes. You’ll see that they are used for many major digital products that we interact with on a daily basis

Google’s Material Design colour palette

As I become more familiar with web development, I hope to soon be able to creatively use colour in my web projects!

--

--

Maggie Chiu Yee Chan

Master student at CMU studying HCI. Designer, Coder, Researcher | Interests: arts, data visualization, civic tech, creative coding, and design strategy.