Color

Posted on | In
Theory

Related notes: [[DTA]], [[/res/]]

Human Perception

The way we perceive colors depends on our biology. Human vision is non-linear. About 64% of cone cells are red-sensitive, ~32% are green-sensitive, and ~2% are blue-sensitive. Blue cones are the most sensitive but are predominantly found outside the fovea, the central area of the retina.

Human Color Perception

Trichromatic Vision: Humans perceive color through three types of cone cells sensitive to different ranges of wavelengths:

  • L (long wavelengths, red), M (medium wavelengths, green), and S (short wavelengths, blue).
  • The sensitivity curves of M and L cones overlap significantly, enhancing sensitivity to yellows and greens, while S cones contribute less to brightness perception due to their sparse distribution.

Opponent Process Theory: Color perception also relies on neural mechanisms that compare signals:

  • R-G, B-Y, and B&W channels. These comparisons allow for the perception of complex colors and brightness levels.

Visible Range: Humans can detect light in the wavelength range of ~400–700 nanometers (nm).

  • S cones peak around 420 nm (blue), M cones around 530 nm (green), and L cones around 560 nm (red).
  • Aging Effects: Over time, the eye lens yellows, reducing sensitivity to blue.

Environmental Factors

  • Environment: The perception of color is influenced by lighting, display calibration, and surrounding context. /
  • Surface Color: The perceived color of an object depends on how it reflects or emits light at different wavelengths.

Color

Color Mixing

  • RYB - Subtractive. Mixing get darker (ink CMYK) Primary: Red, Yellow, Blue sec: Orange (Red+Yellow), Purple (Red + Blue), Green (Yellow + Blue). For mixing pigments and light filters.

  • RGB - Additive. mixing get white (light RGB) Primary: Red, Green, Blue, sec: Cyan (blue + green), Magenta (red + blue), Yellow (Red+green). For Light.

  • Middle Gray: Reflecting ~19% of incident light, middle gray is used as a standard reference point in photography, design, and printing for neutral balance.

Color pickers

triangle

Color harmony

Colors are relative there are only relationships. Focus on relationships, context, and the functional roles of each color. Complementary colors tend to vibrate.

Avoid saturating to much Natural colors allow highlights to pop up. - When working with highly saturated colors, consider their natural value-chroma relationship to maintain harmony and realism. Avoid pushing hues beyond their natural intensity.

Chroma and Value Interplay - Every color reaches highest intensity (chroma) at different values:

  • Yellow, green, cyan achieve maximum chroma at high lightness values.
  • Red, pink, violet peak at medium lightness values.
  • Blue peaks at the lowest lightness values.

Some colors with the same brightness have different perceived values - colors of “equal brightness” might not visually balance:

  • Perceived brightness (luminance) of a color depends on its hue. For example:
    • Yellow has the highest luminance, even at low saturation.
    • Blue has lower luminance and appears darker by comparison, even if physically at the same brightness.

Spatial Perception of Colors - Certain colors pop up, others recede:

  • Warm, saturated colors (e.g., red, yellow) tend to advance, appearing closer to the viewer.
  • Cool, desaturated colors (e.g., blue, gray) tend to recede, appearing further away.

Increasing saturation decrees value

Composition

Tonic (Main Color) ~60% (Neutral Dominant) sets the overall mood and emotional foundation. helps create a stable, cohesive look.

  • Definition: The tonic color establishes the overall tone or emotional anchor of an image. It sets the foundational mood and conveys the primary emotional message to the viewer.
  • Role: It often dominates the entire composition and reflects the intended atmosphere (e.g., calm, energetic, professional).

Dominant Color ~30%: Secondary Color (Neutral or Complementary) holds the structure and balance supporting the primary color without overwhelming it.

  • Definition: The dominant color occupies the largest area in the composition and sets the visual balance. It supports the tonic color while helping to create harmony and structure.
  • Role: This color is essential in organizing the composition and guiding the viewer’s eye across the design. It should not overpower the tonic but maintain balance.

Accent Color ~10% provide interest and focal points.

  • Definition: Accent colors are used sparingly to add contrast or draw attention to focal points. These colors are often bright or intense, and used in small doses to highlight specific areas.
  • Role: Accent colors create visual interest, direct attention to key elements, and enhance the overall energy of the design. They provide emphasis without overwhelming the viewer.

Compose Colors

   
Monochrome 1 color.
Analogous Similar
Complimentary Opposites. not both saturated. One should be desaturated
Split-Complementary (dominant & support + accent),
Triad 3
Tetradic 4

Blending colors

You want to blend colors on hsv usually? And bspline not linear Gradients in linear space aren’t better
Björn Ottosson -

Blending color modes

| | | | ——- | — | | Lighter | Max | | Darker | Min | blend in gradient to material = (gradient_curve * strength ) + ( (strength/2) * -1)

Compose Patterns
  • Relative Luminance: depend on how much receptors reacts: Cyan appear most light then: Green > Yellow > red > blue appear as darkest. (blue receptor response least)
  • Grays communicate with each other
  • Color temperature vs neutral colors (W&B and gray)
  • Natural - not over saturated monochrome like not too much excitement. tend to gentle light gray
  • Value high key painting has a high-value scale (light) vs low-value scale (dark).
KEY

LOW KEY

  • human better see darker colors
  • This relates to how rod cells in the human retina are more sensitive to light intensity (brightness) in low-light conditions. In design terms, darker colors provide stronger contrast and are often perceived as “anchoring” elements in a composition.
  • Design Implication: Darker colors can emphasize mood, depth, and grounding in a composition.
Warm / Cold

Inherent Color Temperature - Every color has an inherent temperature:

  • Colors are naturally perceived as warm (reds, oranges, yellows) or cool (blues, greens, purples). This is a psychological and contextual interpretation.
  • Design Implication: Use warm colors to draw attention or evoke energy and cool colors for calmness or depth. Combining warm and cool colors creates dynamic tension or balance.
Teal and orange

https://youtu.be/ruOWrEUDhcE

Some principles:

  • color temperature balance
    • power of color varies by wavelength. longer wavelength grab more attention. in composition we strike for a balance
  • Color Compensation
    • Only focal point have saturated warm colors.
    • Colors with less intensity require less colors to compensate
  • Characteristics of light coloration
    • GI
  • Color range
    • use only half of color range
  • Color Transitions
    • yellow and pink are far
    • gray harmonize with all of colors
  • Color rhythm
    • intriquet more advanced
    • enriching colors should not distort value
  • Theme Colors
  • value and contrast < low will allow color to work more

What we want to achieve:

  • striking color combinations
  • color balance
  • expressing emotions

Digital Representing

  • Gamut /(of a device or process) is that portion of the color space that can be represented, or reproduced. Generally, the color gamut is ..
  • Color spaces - In rendering colors are sometimes supersaturated. RGB cannot deal with it. Process those colors relayabley by transform fn

  • Spectral Locus - The curved edge of the gamut. plotting all visible colors can show how much sRGB is limited. rec2020 (much vide color space)

  • Gamma encoding is applied to imgaes itself: sRGB. So pixel values dont represent light intensity.
  • classic workflow: ignore problem.

  • linear workflow: before adjustment we are fixing data to linear.

  • sRGB - on monitor looks like even distribution but is not / math in sRGB is not working
  • linear - look vanished
  • 19% of light intensity is perceived by us as half . (and 50% of sRGB is 21% linear so after gamma applied is appealing and natural for eye)

sRGB =
if (Linear < 0.0031308) Linear * 12.92
else (1.055 * pow(Linear, 0.41666) - 0.055)

Linear =
if (sRGB < 0.04045) sRGB * 0.0773993808
else (pow(sRGB * 0.9478672986 + 0.0521327014, 2.4))

Tone mapper

ACES - Film Academy tone mapper give more contrast and saturation. Its not the best choice for games. In opose to the LUT, we are trying to preserve as much information as we can.

Slope.

  • darks remaped to see less infromations, because eye dont differ as much
  • light values should have more informations

Work with colors

for correction:

  • wrong naming: Shadows / mid / light. Never use in linear !!!!
  • for sRgb: Lift - mostly in darks / Gamma - mostly in midtones / Gain - mostly in ligt
  • linear space: offset / power / slope.

Color management

is about consistance.

  • Displace how react to signal
  • Software how is handle color

Formats

Color spaces

         
RYB CMY CMYK   Subtractive (paint)
RGB sRGB (gamma 2.2 curve) Linear sRGB A98 RGB Addditive (light)
XYZ        
LUV        
LAB OKLab Jzazbz ICtCp  
LCH JzCzhz OKLCH   LCHuv
HSL HSV OKHSV OKHSL HSLuv

Color correction Eye dont see liminance in linear way, but camera do so we correct it with gamma curve

RGB

  • sRBG - used for images online. Non linear (gamma 2.2 curve)
  • Linear RGB

HSV & HSL

HSV blending is usually better, yes, but it has its share of problems too. not every pair of colors are neighbors so you can end up transitioning through weird hues, also the V in HSV (or L in HSL) do not properly represent the true luminance of a color.

  • They are not actually color spaces, they are ways of remapping RGB color spaces to parameters that are easier to work with.
  • HSV to manage Chroma and Valor .
    • Hue (0-360) - perceived colors. dependent on its dominant wavelength and independent of intensity or lightness. Hue is angle on circle on Chromacity diagram based on CIR based on LMS is white in middle. we calculate HSV from there.
    • Saturation (Chroma) (0-100) - the strength or dominance of the hue.
    • Value (Valor) (0-100) - Lightness/Luminance or darkness of the hue.
  • HSL to manage Chroma and Lightness .

    HCL

    In HCL, the concept of “Chroma” is used instead of saturation. Chroma represents the colorfulness of a color, but it is more perceptually uniform than saturation. Perceptual uniformity means that a certain amount of change in chroma is perceived as the same amount of change in color,

    Oklab

    photoshop “Perceptual”, is actually using Oklab Oklab space, above, is similar in that regard to HUSL - Human-friendly HSL but with much better methodology

  • YT Oklab

    ACES

  • aces is linear with wide color gamut
Painter:

you need file config.ocio witth setup dfor every application . In painter OPEN IO https://youtu.be/WrFqBNI6Tx4

Solve:

  • data sets to convert cameras from cameras.

Symbolism / Color psychology

  • Culture play role in color perception. Age / gender as well.
  • recognise by crossmodal correspondence (affiliate color with world like hot red and cold blue ) visual perception connected to perc of temp.
  • synesthesia - asociate things with color
  • mcgunka effect - percive base on visuals
  • bouba kiki - interactive in way we hear names

| | | |–|–| | B&W | death evil / good pure innocent divine | Red | Passion Blood Love Warning Danger - stimulate most (forming memory loops) | Yellow | Cheery Warm Happy Energetic Excitement Change | Green | Luck Growth Healing Health Nature Weath Tranquility | Blue | Security Roylaity luxury Brown Masculine serious black luxurious

   
Pastele colors Openness relaxation Calmnes - Soft feeling
Vivd(saturated) Agressive Acctivity - Hard feeling

Red button can be more effective even by 21%

Warm colors - stimulators Cool colors - depresants

VEX

Color Randomizer https://twitter.com/allexceptn/status/1439253876041998346

@Cd = rgbtohsv(@Cd);
@Cd.r += chf('rotateHue');
@Cd = hsvtorgb(@Cd);

vector orginalCd = @Cd ;

if (@Cd.g>(@Cd.b+@Cd.r)/2*chf('tol')){
    @Cd.g = (@Cd.b+@Cd.r)/2*chf('tol');
    }
else {
@Cd.g= @Cd.g;
}

@Cd==length(orginalCd=@Cd)*chv('tint')*chf('luma');

@Cd = rgbtohsv(@Cd);
@Cd.r += chf('rotateHue');
@Cd = hsvtorgb(@Cd);

saturation:

@Cd = length(@Cd)+((@Cd-length(@Cd))*chf('saturation'));

grading tool:

pow( (((((x-blackpoint) / (whitepoint-blackpoint) ) * ((gain*multiply)-lift)) +lift)+offset) , (1/gamma) )

Palets

CIE

  • normalized for luminnace

David. J.C. Briggs, dimensions of Colour - wiki
Okhsv and Okhsl - Two new color spaces for color picking
YT SIGGRAPH University - “Applying Color Theory to Digital Media and Visualization”
In Depth Color technology - Color matching fn

https://www.alanzucconi.com/2016/01/06/colour-interpolation/
https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/
https://hg2dc.com/