Alterna · учебный материал
RGB Color and Color Models
Color models RGB, CMYK, HSV, LAB. Additive and subtractive mixer: Interactive color mixer.
Что в этом материале
- Mini-test: 5 questions
Содержание и основные понятия
By table of contents
Alterna chapter 20.1
RGB Color and Color Models
Additive and subtractive mix, color depth, HEX and RGB codes.
Color models: how colour is encoded
Color Model
This is a way to describe the color of a set of numbers (canals). The choice of the model depends on the way the output is made: the screen uses an additive model, the seal is a subtractive model.
🖥 RGB (Red, Green, Blue)
Additive
The color is the color of the light. All channels are white, all is black. It's used in screens, cameras, web.
Each channel: 0.255 (8 bits). Three canals = 24 bits = 16.7 million flowers
🖨 CMYK (Cyan, Magenta, Yellow, Key)
Subtractive
The color is derived from subtracting light from the white surface. It is used in polygraphy: paint absorbs part of the white spectrum.
Black (Key) is added for depths and savings of coloured ink.
🎨 HSV / HSL
User model:
Hue
— shade (0-360°),
Saturation
- saturation,
Value
(glare) or
Lightness
Suitable for color selection in design.
HSV: cone, HSL: double cone. Photoshop, Figma, GIMP uses HSV slideers
🔬 LAB (L*, a*, b*)
Hard independent model:
L
- lightning (0...100),
a
- Red green axis,
b
It's a blue yellow axis.
Acceptable
A color independent of the device.
ΔE is the color difference in LAB.
🎨
Interactive RGB mixer (additive mixing)
Additive (RGB)
The sum of R + G + B = the light. Move the slider and observe the result.
R
128
G
128
B
128
#808080
rgb(128, 128, 128)
Subtractive (CMYK)
Subtracting from white. C absorbs red, M is green, and Y is blue.
C
M
Y
K
#FFFFFF
rgb(255, 255, 255)
🔬
Color image diagram
Select a color scheme -- how the image will look in different models.
Model: RGB - additative mixing
🌈
CIE 1931 — Colorability Diagram
CIE 1931 xyY
- Two-dimensional projection of the LAB space.
x
and
y
describe the colour (cotch and saturation) and
Y
The subcool curve (spectral locus) limits all the colors visible to the human eye:
purple
(380 nm) to
Red
The straight line between purple and red is the "Purple Line".
What is needed is to show what color the device (monitoring, printer) can play and how different it is from the ideal. The more the triangle of coverage, the bigger the colors.
● R
● G
● B
● D65
▲ sRGB
▲ Adobe
XyY coordinates:
x
0.31
y
0.33
Y
0.50
Brilliance (Y):
5%
50%
100%
Color coverage (press to show):
The clicks on the chart are for the exact coordinates, and the Spectra curve is the boundary of visible colors.
Color depth
Deep = how many bits are assigned to encode the color of one pixel.
N = 2
i
where i is the depth of the bits.
I = X × Y × i
- in
Chapter 9.4
.
Deep
Channels to canal
Formula
Max. Flowers.
Example
1 bit
—
monochrome
2
N/A fax, 1-bit scan
4 bits
—
2
4
16
Old game consoles (NES)
8 bits
1 byte per pixel
2
8
256
Grayscale, web chart, indexed PNG
16 bits
5+5+5 (RGB565) or 5+6+5
2
16
65 536
HighColor, phone photo.
24 bits
8+8+8 (on 256 levels)
2
24
16 777 216
TrueColor, JPEG, typical photos
32 bits
8+8+8+8 (RGBA)
2
32
4 294 967 296
PNG with alpha canal, HDR screens
48 bits
16+16+16 (on 65536)
2
48
281 trillion
Professional scanner, RAW, laboratory seal
Objective: The volume of images
Image 1920×1080, depth 24 bits. By volume = 1920 x 1080 x 24 = 49,766,400 bits = 6,220,800 byte ~ 5.94 MB.
I = X × Y × i
— Chapter 9.4.
Formulas from Chapter 9.4
An expanse of the raster image:
I = X x Y x i (bit)
Where X, Y is the resolution (pixels), i is the depth of the color (beat/pixel)
Subtitles bytes
I
Byte
= I
bt
/ 8
Palitar and depth connections:
N = 2
i
📷
Camera: real-time color analysis
Dominant Color
#808080
rgb(128, 128, 128)
Pale of frame
Histogram of Brightness
Press "Super Camera" to access the webcam
🎯
Mini-test: 5 questions
XP: 0