Addressing the color space

The entire time I was at college I didn't understand the Adobe color picker. Until this past week when a profess walked students though the history of how computers render color and now I have a new dimention of understanding. So here is a quck summery of what I found helpful.

Color Pickers #

When learning about visual design in school high school and college I was always introduced to color through the traditional color wheel. Which broke colors into three main sections Primary, Secondary, and Tertiary.

Image of Color Wheel.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/81d37a59-cefa-48ce-8558-2be3f11f98dc/proxy.duckduckgo.jpg

REF: are.na/block/5203270

First you learn the primary colors, then you mix those to get the secondary colors, and then you learn about hue and saturation. And so on. Over time you develop a mental model for navigating the color space. One example might look like this Key Chart.

Primary vs secondary

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5c614289-7729-4bd3-8be5-02115792f3f3/original_357a8f4dbc5e8a2e1586306514e6e257.jpg

REF: https://www.are.na/block/2698631

Or picking the color of your highlighter in a book or pen color for annotating a screen shot

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a9b8a272-1b91-468d-9d86-b9b9e084f95f/RPReplay_Final1571285082.mp4

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/51aa7a09-2149-4658-99cd-383e4b21e5e6/IMG_3DFEE8135627-1.jpeg

This proved useful for year when making digital and physical things. You can just pop into keynote and bam you have basically a digital color wheel.

Color Wheel.

But then if you go to design school you meet the color cube, which adds a 3rd dimension to the color wheel you have known and loved.

Adobe was the go to tools when I started school, 2 years in I moved to sketch and I now move again to Figma. But suddenly I’m left with the cube and all these little boxes labeled HSB and RGB and CMYK. All these new ways to index the my mental space of color.

Until last week, I never updated my mental map of color to this cube. I just changed verables and moved my eye dropper around until I found what I was looking for. This Adobe color picker is well engineered. It’s perhaps the most well ... way to show color. But its not built for how humans are thought about or how they naturally perceive color.

SideNotes:

If you look at island cultures and native people’s they often have a much right service of vocabulary for the colors around them then we do today. For example if you lived on and island a few hunndrad years ago you might have 5 words just to describe the blueness Of the water. But of you lived in a land lock reen of the county you might only have 2 words for blue but 5 words for different greens or tans. Interestingly tho all of these culture tent to have once share word for blood red. More on this Here:

The Secret Lives of Color - 99% Invisible

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6c109c48-c97d-4b76-b60f-9152bfd6cfe7/340_The_Secret_Lives_of_Color_pt_01.mp3

Ok so why is a creative tool use such a different way to reference color? Well we need to breakdown the color cube. Lets think of the cube in terms of 3 axis.

Image of exploaded cube form Z?

Now lets move through each axis and see how the color changes:

Red

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/62054ebd-f376-4c31-9894-192bbf74d61e/Animated_GIF-downsized_large.gif

Green

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9e62e17d-6c99-4452-b20b-c53a4484e299/Animated_GIF-downsized_large-2.gif

Blue

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a7454677-4075-4c04-8028-075ded9d8d22/Animated_GIF-downsized_large-3.gif

Now here is what those same movements look like on a traditional color wheel

This is a living post and is peripdically udpates it was last updated 0000 00 00, you can see all the perisious versions here.

Other possible topics

  • Computers and color
  • Humans and color
  • Mapping the color space

https://youtu.be/kapQfn7K0fQ

https://s3.us-west-2.amazonaws.com/secure.notion-static.com/df81ccd2-3ac4-4ffb-ae93-ddeb4521dbed/IMG_3DFEE8135627-3.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20200619%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20200619T144753Z&X-Amz-Expires=86400&X-Amz-Signature=9eb079b77e391fa3e634e616ab9b52a17616904d76743405a2177d544497d085&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22IMG_3DFEE8135627-3.jpeg%22


Webmentions (WIP)

No mentions yet.

Get: daily updates on twitter, weekly updates over RSS and monthly newsletter.