Color Theory
Color Wheel
Primary Colors
Colors that cannot be created from other colors.
- In the RGB model, they are Red, Green, and Blue
- In the CMYK model, they are Cyan, Magenta, and Yellow
Secondary Colors
Colors formed by mixing two primary colors.
- RGB:
- CMYK:
Tertiary Colors
Result from mixing a primary color with a secondary color.
Color Relationships
Complementary Colors
Colors that are opposite each other on the color wheel. They are used to create contrast.
Analogous Colors
Colors that are next to each other on the color wheel. Used for harmony.
Triadic Colors
Three colors that are equidistant on the color wheel, forming a triangle.
Color Perception
Simultaneous Contrast
An effect in which the perception of a color is altered by the presence of adjacent colors.
Lighting and Color
Ambient light can alter the perception of color. Different light sources (such as sunlight, incandescent light) produce different effects.
Color Composition
The mixing of several colors can be calculated using a weighted average.
where
Linear Interpolation
LERP (Linear Interpolation), which calculates an intermediate point between two colors
Where
Lab produces more natural results, as it is designed to ensure that the distances between colors are perceptually uniform.
Color Models
RGB (Red, Green, Blue)
An additive model based on mixing light of different colors. Used in screens and electronic devices.
where
CMYK (Cyan, Magenta, Yellow, Black)
A subtractive model used in printing. It is based on the absorption of light.
HSL (Hue, Saturation, Lightness)
A color model that describes colors in terms of their hue, saturation, and lightness.
HSB (Hue, Saturation, Brightness)
A variation of the HSL model. The main difference is that the “Value” in HSV defines the maximum brightness of the color, which is useful in graphical interfaces for controlling light intensity.
LAB
A color model based on human perception. It is designed to be perceptually uniform (compared to RGB or HSL).
XYZ (CIE 1931)
One of the first attempts to create a color space based on human perception. It is an abstract mathematical representation of visible colors, where
represents a mix of red and green colors. represents brightness. represents a mix of blue and green colors.
YUV
Chrominance (UV), allows for better processing and compression of video signals.
: Luminance (brightness). , : Chrominance (colors).
This model allows compressing color information without significantly affecting visual perception in humans.
Color Conversions
CMYK
RGB to CMYK
where
CMYK to RGB
The reverse conversion is:
HSL
RGB to HSL
- Calculate the maximum (Cmax) and minimum (Cmin) values of
. - Lightness:
- Saturation:
- Hue:
HSL to RGB
The steps for the reverse conversion are:
- If
, then the color is a shade of gray:
If
: - Calculate
and :
- Convert the hue to RGB values using the helper function
for each channel:
- Calculate
Use
and the results to get , , :
XYZ
RGB to XYZ
The conversion from RGB to XYZ involves transformation matrices that depend on the reference system and the RGB color space used. For example, with the D65 matrix
XYZ to RGB
XYZ to RGB (Reverse conversion)
The reverse conversion requires the inverse matrix of the transformation from RGB to XYZ:
Before applying this formula, the values of
Lab
XYZ to LAB:
where
LAB to XYZ
For the reverse conversion from LAB to XYZ:
- Calculate
:
- Then, the values
, , are obtained as follows:
Binary Color Representation
HEX is expressed as a value of 6 hexadecimal characters
Each pair of hexadecimal characters represents the value of red (
For example:
represents .
RGBA (Red, Green, Blue, Alpha)
Alpha (
The alpha property is interpreted as follows:
: completely transparent. (or 255): completely opaque.
Typical values for
RGB
RGB888
A color system that uses 8 bits for each component (red, green, and blue), totaling 24 bits per pixel.
Commonly used in high-quality graphics, video games, and applications that require a wide range of colors and detail.
Value Range Each component can have a value between 0 and 255.
- Where
are values in the range of 0 to 255.
RGB565
A color system that uses 5 bits for red, 6 bits for green, and 5 bits for blue, totaling 16 bits per pixel.
Usage Frequently used in embedded devices and LCD displays, where a balance between image quality and efficient memory usage is required.
- Red:
(5 bits) - Green:
(6 bits) - Blue:
(5 bits)
- Where
are values in the range of 0 to 31 for red and blue, and from 0 to 63 for green.
RGB444
A system that uses 4 bits for each component, totaling 12 bits per pixel.
- Red:
- Green:
- Blue:
RGB332
A system that uses 3 bits for red, 3 bits for green, and 2 bits for blue, totaling 8 bits per pixel.
- Red:
- Green:
- Blue:
Conversion Between RGB Color Representations
RGB888 to HEX
You must convert each
Where:
Example:
→
HEX to RGB888
Simply convert the pairs of hexadecimal characters to their decimal values.
Example:
→
From RGB888 to RGB565
The conversion reduces the range of each component and adjusts the values to align with the bit capacity of RGB565.
From RGB565 to RGB888
When converting, the range of each component is expanded to fit the full range of 0 to 255.