✨
WWCode Tokyo Creative Coding Study Session
  • 🏠README
  • 🗓️Sessions
    • 🎨Session 1: "Great Artists Steal (With Permission)"
    • 🔳Session 2: CSS Art
    • 🖌️Session 3: Developer Tooling
    • Bonus Session: WWCode Connect
    • ⚙️Session 4: Processing
    • 😂Session 5: Emoji
    • 📖Session 6: Tech Zines
    • 🐙Session 7: GitHub Profile Customization
    • 🍡Session 8: Create a "Collection" Website
    • 🤖A.I. for Humor
  • 🧰Resources
    • 🌈Color
    • 🛠️Tools
    • 😊Unicode: Emoji, Symbols, and more
    • 🖼️Imagery & Assets
    • 👯‍♀️Member Show and Tell
  • ❔F.A.Q.s
    • 🪙What about NFTs?
Powered by GitBook
On this page
  • Color 🌈
  • Web Colors 🎨
  • Inspiration 💡
Edit on GitHub
  1. Resources

Color

PreviousA.I. for HumorNextTools

Last updated 3 years ago

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:

: Red 🔴 Green 🟢 Blue 🔵

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

: 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

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

Inspiration 💡

Palette Generators 💭

Traditional Colors of Japan 🎎

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

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:

🧰
🌈
RGB
CMYK
HSB
https://en.wikipedia.org/wiki/Web_colors
https://processing.org/tutorials/color
https://www.w3schools.com/colors/colors_picker.asp
https://coolors.co/
https://paletton.com/
https://material.io/design/color/the-color-system.html#tools-for-picking-colors
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/
https://webaim.org/resources/contrastchecker/
https://webaim.org/articles/contrast/
How to use the Contrast Checker in Chrome DevTools