🌈Color

Color 🌈

Colors are a foundational element of any visual art. On computers, there are different ways of representing colors in code. The main models are:

RGB: Red 🔴 Green 🟢 Blue 🔵

This model is additive, meaning we are adding light-based colors.

CMYK: Cyan 🚙 Magenta 💗 Yellow 🌞 blacK (or Key) 🐈‍⬛

This model is subtractive, meaning we are "taking away" light. It's popularized in the printing world, as using ink in these four color can generate a wide range of colors. Some software programs use CMYK

HSB Hue, Saturation, Brightness (sometimes Lightness or Value)

This model was created in the 1970s by computer graphics researchers to approximate the way the human eye sees color.

Web Colors 🎨

Web colors use the RGB (red-green-blue) model and are represented as three bytes (six hexadecimal characters):

Byte 1: 🔴 Red 00-FF Byte 2: 🟢 Green 00-FF Byte 3: 🔵 Blue 00-FF

https://en.wikipedia.org/wiki/Web_colors https://processing.org/tutorials/color

https://www.w3schools.com/colors/colors_picker.asp

Inspiration 💡

Palette Generators 💭

• https://coolors.co/

• https://paletton.com/

• https://material.io/design/color/the-color-system.html#tools-for-picking-colors

Traditional Colors of Japan 🎎

Japan has a rich art history. Consider using some of these palettes in your project!

• https://en.wikipedia.org/wiki/Traditional_colors_of_Japan

• https://www.colordic.org/w

• http://kidorakujapan.com/know/others_color.html

• https://irononamae.web.fc2.com/wa/

Tools for checking accessibility of colors 👩🏻‍🔧

Creating exciting color combinations can be great. Let's also ensure that we pick colors that make it easy for others to understand our creations, especially when using text. Here are some great articles and tools:

• https://webaim.org/resources/contrastchecker/

• https://webaim.org/articles/contrast/

• How to use the Contrast Checker in Chrome DevTools