All Color spaces convertible in all other color spaces.
On the left side, you can choose what color you want to change. It's called also Color Layer. There are two reasons why there's more complex Viewer instead of a simple solid rectangle:
You can also modify Html Source Code of the Sample. It's possible to add even more layers. All modifications are stored in a local cookie in your browser.
If you broke the View, just press Reset All Data.
Changes of a single slider will emmitted to every other slider in realtime. Feel free to modify sliders from different color space, just to find the perfect color or to understand the relationships.
Alpha Blending is applied to every color. The background color is the parent color of the selected Color Layer. You can merge a blend via Merge Button.
Drag & Drop Colors to another slot. The selected slot is the current Color you're editing. All Colors are stored in a local cookie your browser.
In the Color Theme tab, you can see the following color combinations: Complementary, Triad, Square, Analogic, Split-Complementary, Rectangle and All.
In the Shading Tab, you can choose the perfect shading color.
I spend lot's of hours to create this tool. If you like it, you can buy me a coffee (if you want). Check the main page for the link.
All algorithms are taken from well known sources. But there's no garantee that all conversions nor the displayed colors are correct. Every display/printer/device would display colors different. There's no implemented color correction managemnt. Use this at your own risk.
The RGB (Red, Green, Blue) color model is the most known, and the most used every day. It defines a color space in terms of three components:
The RGB color model is an additive one. In other words, Red,
Green and Blue values (known as the three primary
colors) are combined to reproduce other colors.
For example, the color "Red" can be represented as [R=255, G=0, B=0], "Violet" as
[R=238, G=130, B=238], etc.
Its common graphic representation is the following image:
The HSB (Hue, Saturation, B rightness) color model defines a color space in terms of three constituent components:
Its common graphic representation is the following image:
The HSB model is also known as HSV (Hue, Saturation, Value) model. The HSV model was created in 1978 by Alvy Ray Smith . It is a nonlinear transformation of the RGB color space. In other words, color is not defined as a simple combination (addition/substraction) of primary colors but as a mathematical transformation.
Note: HSV and HSB are the same, but HSL is different.
All this said, a HSB structure can be :
The HSL color space, also called HLS or HSI , stands for:
Its common graphic representation is the following image:
HSL is similar to HSB. The main difference is that HSL is symmetrical to lightness and darkness. This means that:
For my part, HSL offers a more accurate (even if it's not absolute) color approximation than HSB.
The CMYK color space, also known as CMJN, stands for:
It is a subtractive color model used in color printing. CMYK works
on an optical illusion that is based on light absorption.
The principle is to superimpose three images; one for cyan, one for magenta and
one for yellow; which will reproduce colors.
Its common graphic representation is the following image:
Like the RGB color model, CMYK is a combination
of primary colors (cyan, magenta, yellow and black). It is, probably, the only thing
they have in common.
CMYK suffers from a lack of color shades that causes holes in the
color spectrum it can reproduce. That's why there are often differencies when someone
convert a color between CMYK to RGB.
Why using this model? Why black is used? you can tell me... Well it's only for practical purpose. Wikipedia said:
The YUV model defines a color space in terms of one luma and two chrominance components and is similar to YPbPr and YCbCr. The YUV color model is used in the PAL, NTSC, and SECAM composite color video standards.
YUV models human perception of color more closely than the standard RGB model used in computer graphics hardware.
The YUV color space stands for:
A graphic representation is the following image: