COLOR.md

Color 🌈

Understanding Web Colors 🤔

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

Resources 🛠️

Articles

• https://refactoringui.com/previews/building-your-color-palette/ ⭐️ HIGHLY RECOMMENDED ⭐️

Palette Generators 🎨

• https://coolors.co/
• https://paletton.com/
• https://material.io/design/color/the-color-system.html#tools-for-picking-colors
• https://colorhunt.co/

Traditional Colors of Japan 🏯

• 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/

Famous Colors

• http://brandcolors.net/
• https://visme.co/blog/website-color-schemes/

Pickers

• ColorZilla Color Picker

Gradients 📐

• https://cssgradient.io/
• https://coolors.co/gradient-maker/8de9d5-32c4c0

Blending 🎛️

• https://colorkit.io/
• TryColors Blending Tool

Color Theory Basics 🌈

Definitions [1]

Hue A pure color (no black or white added)

Tint A pure color plus white ⚪️

Tone A pure color plus grey

Shade A pure color plus black ⚫️

Saturation intensity of a color [2]

Color Systems

RGB 🔴🟢🔵 Red-Green-Blue

This system is "additive", meaning light is added. When all three colors are combined, we get white ⚪️.

CMYK - Cyan Magenta Yellow blacK (or Key)

This system is popularitized in printmaking and uses the "subtractive" system, where light is removed.

HSB (Hue Saturation Brightness)

Color Schemes

Here are some color schemes inspired by the color wheel.

Monochromatic

A range of colors within a single color family. E.g. various blues. 🔵📘🚙💙🐋🫐

Triadic

Tetradic

Analogous

Adjacent colors in the color wheel.

Example: Greens and blues 💚🍏🐉🔵🚙💙🐋🫐

Complementary

Opposite colors from the color wheel

Example: Purple and yellow 💜🟪💛⭐️✨

References

1. https://www.colorsexplained.com/shade-tint-tone/
2. https://www.techopedia.com/definition/1968/color-saturation