.png)
Memo2007Ultra
Discover, Collect, Modify, Create, Share, Inspire,
through Art, Games, and Learning
cOwOlor
by XR_XharpRazor & Eikyuu_KuroiKitsune
RGB, HSL, CMYK, all in one place, Generate Color Palettes
#RRGGBB
RGB
HSV
CMYK
CMY
YIQ
conversions, HOW !?
how everything works behind the scene
a few Notations and Revisions
LERP_MAPPING is heavily used when it comes to color conversion
function LERP_MAPPING( Vin , Ain , Bin , Aout , Bout )
{
t = ( Vin - Ain ) / ( Bin - Ain )
return ( Bout - Ain ) * t + Aout
}
a lot of explaination uses the concept of length
therefore, sometimes we may use "strips" or "meters" to represent the strength or an amount of the channel
the "=" is used to represent the positive part,
the "." is used to represent the compliment part
strength : 000- ---- ---- ---- ---- ---- ---- -255
RED : ==== ==== ==== ==== ==== ==== ==== ====
GREEN : ==== ==== ==== ==== ==== ==== .... ....
BLUE : .... .... .... .... .... .... .... ....
which is equivalent to RGB(255,192,0) or #FFC000
from RGB to HSV
assume that the RGB input is :
R1 : ==== ==== ==== ==== ==== ==== .... ....
G1 : ==== ==== ==== ==== .... .... .... ....
B1 : ==== ==== .... .... .... .... .... ....
the Max Channel is actually V, in this example, it's Red
Vout = max(R1, G1, B1)
|--- ---- --- V --- ---- ---|
R1 : ==== ==== ==== ==== ==== ==== .... ....
G1 : ==== ==== ==== ==== .... .... .... ....
B1 : ==== ==== .... .... .... .... .... ....
now we will stretch R and G and B until the max channel reaches 255
we will do this stretching by multiplying every channel by a number, say "factorStretchV"
before :
R1 : ==== ==== ==== ==== ==== ==== .... ....
G1 : ==== ==== ==== ==== .... .... .... ....
B1 : ==== ==== .... .... .... .... .... ....
after :
R2 : ==== ==== ==== ==== ==== ==== ==== ====
G2 : ==== ==== ==== ==== ==== =... .... ....
B2 : ==== ==== ===. .... .... .... .... ....
but we need to know, what is factorStretchV
MaxCannel * factorStretchV = 255
factorStretchV = 255 / MaxChannel
R2 = R1 * factorStretchV
G2 = G1 * factorStretchV
B2 = B1 * factorStretchV
//MaxChannel is V is well
Warning
If MaxChannel is 0, this means that no RGB at all, which means this color is black.
If we ignore this fact, then we are diving by 0
here, if we take the compliment of each channel, the Max is S ,
in this example, it's Blue's Compliment
R2p : ==== ==== ==== ==== ==== ==== ==== ==== : R2n
G2p : ==== ==== ==== ==== ==== =... .... .... : G2n
B2p : ==== ==== ===. .... .... .... .... .... : B2n
| ---- ---- - S ---- ---|
Sout = 255 - min( R2p , G2p , B2p )
or
Sout = max( 255 - R2p , 255 - G2p , 255 - B2p )
or
R2n = 255 - R2p
G2n = 255 - G2p
B2n = 255 - B2p
Sout = max(R2n , G2n , B2n)
in this case, we can introduce the concept of a "wanderer" :
the color channel that is not the max or min, it is in between, "walking around" between the other 2 channels
at this point
among R2, G2, B2, one of them is 255, one of them is the minimum, one of them is in between
based on who is the wanderer, who is the max, who is the min, the Hue can be determined
if ( R is max , G = B ){
Hue = 0 (red)
}
else if ( R is max , G is wander , B is min ){
when G is B , then Hue is 0
when G is R , then Hue is 60 (yellow)
use LERP_MAPPING
}
else if ( R = G , B is min ){
Hue = 60 (yellow)
}
else if ( R is wander , G is max , B is min ){
when R is G , then Hue is 60 (yellow)
when R is B , then Hue is 120 (green)
use LERP_MAPPING
}
else if ( R = B , G is max ){
Hue = 120 (green)
}
else if ( R is min , G is max , B is wander ){
when B is R , then Hue is 120 (green)
when B is G , then Hue is 180 (cyan)
use LERP_MAPPING
}
else if ( R is min , G = B ){
Hue = 180 (cyan)
}
else if ( R is min , G is wander , B is max ){
when G is B , then Hue is 180 (cyan)
when G is R , then Hue is 240 (blue)
use LERP_MAPPING
}
else if ( R = G , B is max ){
Hue = 240 (blue)
}
else if ( R is wander , G is min , B is max ){
when R is G , then Hue is 240 (blue)
when R is B , then Hue is 300 (magenta)
use LERP_MAPPING
}
else if ( R = B , G is min ){
Hue = 300 (magenta)
}
else if ( R is max , G is min , B is wander ){
when B is R , then Hue is 300 (magenta)
when B is G , then Hue is 360 (red)
use LERP_MAPPING
}
to convert from HSV to RGB
back at we were converting RGB to HSV,
recall the following :
V = max(R1, G1, B1)
factorStretchV = 255 / V
R2p = R1 * factorStretchV
G2p = G1 * factorStretchV
B2p = B1 * factorStretchV
R2n = 255 - R2p
G2n = 255 - G2p
B2n = 255 - B2p
S = max(R2n, G2n, B2n)
H = BIG_SELECT_CASE_LERP_MAPPING(R1, G1, B1)
|--- ---- --- V --- ---- ---|
R1 : ==== ==== ==== ==== ==== ==== .... ....
G1 : ==== ==== ==== ==== .... .... .... ....
B1 : ==== ==== .... .... .... .... .... ....
R2p : ==== ==== ==== ==== ==== ==== ==== ==== : R2n
G2p : ==== ==== ==== ==== ==== =... .... .... : G2n
B2p : ==== ==== ===. .... .... .... .... .... : B2n
| ---- ---- - S ---- ---|
first we need to determine who is max, who is wanderer, who is min by using the Hue
note that min is 255 - Saturation
if ( Hue = 60 ){
R2p is 255
G2p is min
B2p is min
}
else if ( 0 < Hue < 60 ){
R2p is 255
B2p is min
G2p is in between, use LERP_MAPPING
}
else if ( Hue = 60 ){
R2p is 255
G2p is 255
B2p is min
}
else if ( 60 < Hue < 120 ){
use LERP_MAPPING
R2p is in between, use LERP_MAPPING
G2p is 255
B2p is min
}
else if ( Hue = 120 ){
R2p is min
G2p is 255
B2p is min
}
else if ( 120 < Hue < 180 ){
R2p is min
G2p is 255
B2p is in between, use LERP_MAPPING
}
else if ( Hue = 180 ){
R2p is min
G2p is 255
B2p is 255
}
else if ( 180 < Hue < 240 ){
R2p is min
G2p is in between, use LERP_MAPPING
B2p is 255
}
else if ( R = G , B is max ){
Hue = 240 (blue)
}
else if ( R is wander , G is min , B is max ){
use LERP_MAPPING
R2p is in between, use LERP_MAPPING
G2p is min
B2p is 255
}
else if ( Hue = 300 ){
R2p is 255
G2p is min
B2p is 255
}
else if ( 300 < Hue < 360 ){
R2p is 255
G2p is min
B2p is in between, use LERP_MAPPING
}
with all the R2p and G2p and B2p found, R1, G1, B1 can be found by using factorStretchV
from RGB to CMYK
assume that the RGB input is :
Rp : ==== ==== ==== ==== ==== ==== .... .... : Rn
Gp : ==== ==== ==== ==== .... .... .... .... : Gn
Bp : ==== ==== .... .... .... .... .... .... : Bn
here the MaxChannel is Red
Black is 255 - MaxChannel
|--- ---- -- Max -- ---- ---| |-- K --|
Rp : ==== ==== ==== ==== ==== ==== .... .... : Rn
Gp : ==== ==== ==== ==== .... .... .... .... : Gn
Bp : ==== ==== .... .... .... .... .... .... : Bn
note that :
Cyan is "not Red"
Magenta is "not Green"
Yellow is "not Blue"
C = Max - Rp (C is 0 in this example)
M = Max - Gp
Y = Max - Bp
|--- ---- ---- -- 255 -- ---- ---- ---|
|=== ==== = R:max = ==== ===| |== K ==|
|=== === G === ===| |== M ==| .... ....
|== B ==| |=== === Y === ===| .... ....
to convert from CMYK to RGB
first we need to know what is max base on K
|--- ---- ---- -- 255 -- ---- ---- ---|
|=R? ==== ===| |=== ==== =C=| |== K ==|
|=G? ==== ===| |=== ==== =M=| |== K ==|
|=B? ==== ===| |=== ==== =Y=| |== K ==|
then based on the given C and M and Y
we can then calculate R and G and B
in this case, one of C, M, Y has to be 0
or otherwise, the Max wont be the Max
|--- ---- ---- -- 255 -- ---- ---- ---|
|=== ==== = R:max = ==== ===| |== K ==|
|=== === G === ===| |== M ==| |== K ==|
|== B ==| |=== === Y === ===| |== K ==|