Skip to content

Color

November 8, 2023
December 17, 2014

Color Matters welcomes you to the world of color: Symbolism, design, vision, science, marketing and more!

Color Theory

理论知识 - YouTube
Basic Color Theory
Basic Color Theory for Web Developers - DEV Community 👩‍💻👨‍💻
The fundamentals of understanding color theory - 99designs
Understanding Color - YouTube
Color Theory for Noobs | Beginner Guide - YouTube
Color Theory - A Beginners Guide - YouTube

The Amazing Math behind Colors! - YouTube ❗!important, CIE XYZ colorspace
Your Colors Suck (it's not your fault) - YouTube CIE XYZ colorspace
Color: From Hexcodes to Eyeballs

Human's perception of Color

optical-illusion#Color Constancy
optical-illusion#Color Assimilation/Chromatic Adaptation

Colourful in Theory - That Irks Me - YouTube
Color — Method of Action testing your perception and your monitor's rendering of color

Is This Banana Really Yellow? - YouTube

Light source, Color Rendering Index
The Weird World in RGB - YouTube
TC2: More RGB Weirdness - YouTube
Brown; color is weird - YouTube

人眼是如何看到颜色的?紫色不存在吗? - YouTube
这个世界上根本不存在紫色! - YouTube
There's no purple light - YouTube
草莓是什么颜色的?眼见一定为实吗? - YouTube

Color Palette/Scheme

Coolors - The super fast color schemes generator!
Color Hex - ColorHexa.com
Adobe Color CC

Realtime Colors
I updated Realtime Colors - YouTube

Color meanings: color names and symbolism | Canva Colors

Is there a science to picking colors that work well together or is it just subjective? - Quora
Which Colors Look Good on Black and White? - DEV Community 👩‍💻👨‍💻
Designing accessible color systems

Color Palette Toolkit : WebSemantics from image
websemantics/Color-Palette-Toolkit: Turns color values from an Image or PhotoShop ACO file into a list of named colors, lighter and darker shades, css classes and a beautiful style guide.

Color Tool - Material Design

[1509.03700] Good Colour Maps: How to Design Them
A detailed guide to colors in data vis style guides - Datawrapper Blog
What Are Data Visualization Style Guidelines? | by Amy Cesal | Nightingale | Medium

holoviz/colorcet: A set of useful perceptually uniform colormaps for plotting scientific data Python
kbinani/colormap-shaders: A collection of shaders to draw color maps. C/OpenGL

Tools

Color Tools And Resources — Smashing Magazine
Color Tool - Material Design

Paletton - The Color Scheme Designer
Happy Hues - Curated colors in context.
Color Leap - History's Palettes
Coolors.co - The super fast color schemes generator single hue
Data Viz Color Palette Generator (for Charts & Dashboards) palette, single hue, divergent
Color shades generator single hue
CopyPalette | Seamless color palette generation
chroma.js palette helper
Chroma.js Color Scale Helper
colors.lol - Overly descriptive color palettes

google/palette.js: Script for generating colour palettes for use with graphs, charts and cartography.
bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript
Qix-/color: Javascript color conversion and manipulation library

WebAIM: Contrast Checker
Coblis — Color Blindness Simulator – Colblindor

ColorZilla - Eyedropper, Color Picker, Gradient Generator and more

8 Awesome Color Picking Tools for Linux

gcolor2 - GTK+2 Color Selector

Jack12816/colorpicker: Click on a pixel on your screen and print its color value in RGB. Written for X11. colorpicker --preview --short
Picking Colors From Anywhere On Your Linux System - YouTube

wojtekmaj/color-utils: A collection of color-related utilities.

Trivia

太空照片的顏色是真的嗎?| James Webb Telescope - YouTube

Colors

https://xkcd.com/color/rgb/ HTML color names

Pigments

How We Make (and Made) Color - [A Collaboration with Google Arts and Culture] - YouTube
人類為了好色,到底做過哪些重口味的事情…… | 總裁聊聊 - YouTube

Tyrian purple - Wikiwand
In Ancient Rome, Purple Dye Was Made from Snails | Smart News | Smithsonian Magazine
Why is the color purple associated with royalty? | Live Science
Why Tyrian Purple Dye Is So Expensive | So Expensive | Insider Business - YouTube

Mummy brown - Wikiwand
The life and death of Mummy Brown - Journal of ART in SOCIETY
Was This Masterpiece Painted With Ground Mummy?

Han purple and Han blue - Wikiwand
矽酸銅鋇 - Wikiwand
Han Purple - Collections - Asian Art Museum
Man-made blue and purple barium copper silicate pigments and the pabstite (BaSnSi3O9) mystery of ancient Chinese wall paintings from Luoyang | Heritage Science | Full Text
This 2000-Year-Old Pigment Can Eliminate The Third Dimension
秦始皇帝陵博物院

Colorspace

List of color spaces and their uses - Wikiwand
What are the differences between RGB, HSV and CIE-Lab? - Quora

The HSB Color System: A Practitioner's Primer – Learn UI Design

色域转换都发生了什么?SRGB 出图需要用广色域链路吗?究竟是否需要买广色域显示器?风光和人像打印可以用一样的设置吗?什么是黑场补偿,相对比色,可感知渲染意图? - YouTube
相對比色 only map colors out of the target colorspace, keeping colors in intersection intact
可感知 scale all colors to target colorspace to keep gradients in the original colorspace
Workspace in full colorspace (Adobe RGB) to prevent clipping (overflow/underflow) in operations

Awesome Colour

Data Color Picker – Learn UI Design
nschloe/colorio: Tools for color models

Jente Hidskes' website - Gcolor3: a color selection dialog written in GTK+ 3
Hjdskes/gcolor3: A simple color chooser written in GTK3 (like gcolor2) -- moved to GNOME GitLab

There are several standards regulating the YUV colorspace:

EBU

Y' =  0.299*R' + 0.587*G' + 0.114*B'
U' = -0.147*R' - 0.289*G' + 0.436*B' = 0.493*(B' - Y')
V' =  0.615*R' - 0.515*G' - 0.100*B' = 0.877*(R' - Y')

R' =  Y' + 0.000*U' + 1.140*V'
G' =  Y' - 0.396*U' - 0.581*V'
B' =  Y' + 2.029*U' + 0.000*V'

ITU.BT-601

Y' =  0.299*R' + 0.587*G' + 0.114*B'
Cb = -0.169*R' - 0.331*G' + 0.500*B' = 0.564(B - Y')
Cr =  0.500*R' - 0.419*G' - 0.081*B' = 0.713(R - Y')

R' =  Y' + 0.000*U' + 1.403*V'
G' =  Y' - 0.344*U' - 0.714*V'
B' =  Y' + 1.773*U' + 0.000*V'

ITU.BT-709

Y' =  0.2215*R' + 0.7154*G' + 0.0721*B'
Cb = -0.1145*R' - 0.3855*G' + 0.5000*B'
Cr =  0.5016*R' - 0.4556*G' - 0.0459*B'

R' =  Y' + 0.0000*Cb + 1.5701*Cr
G' =  Y' - 0.1870*Cb - 0.4664*Cr
B' =  Y' - 1.8556*Cb + 0.0000*Cr

yCbCr<-->rgb (ITU.BT-565?)

Y’  = 0.257*R' + 0.504*G' + 0.098*B' + 16
Cb' = -0.148*R' - 0.291*G' + 0.439*B' + 128
Cr' = 0.439*R' - 0.368*G' - 0.071*B' + 128

R' = 1.164*(Y’-16) + 1.596*(Cr'-128)
G' = 1.164*(Y’-16) - 0.813*(Cr'-128) - 0.392*(Cb'-128)
B' = 1.164*(Y’-16) + 2.017*(Cb'-128)

Packaging and colorspace

Packaging is defined by fourcc and independent of the colorspace.

Add principles: additive and subtractive
JavaScript 进行 RGB 和 HEX(16 进制)颜色转换 - 进击的程序媛,Laker's blog

Node.js

MoOx/color-convert
substack/mrcolor
Automattic/Color.js

Python

Colour Science for Python | Colour Science
colour-science/colour: Colour Science for Python
Colour Manual — Colour 0.3.14 documentation

Colour Management

硬科普——什么是图片后期的亮度再分配 by Photoshop?(亮度、对比度、宽容度、层次、细节、通透) - YouTube

Colour management, part 1
Colour management, part 2
Colour management, part 3
Colour management, part 4

Android Color Management: What Developers and Designers Need to Know in Android Oreo
Understanding Color (Google I/O '17) - YouTube

References

http://en.wikipedia.org/wiki/YUV
http://www.fourcc.org/fccyvrgb.php
http://www.fourcc.org/yuv.php
http://www.martinreddy.net/gfx/faqs/colorconv.faq
http://blog.weisu.org/2008/01/ycbcr-yuv-sampling.html
http://discoverybiz.net/enu0/faq/faq_YUV_YCbCr_YPbPr.html