Create and convert [RGB, HSL, CMYK, HSV] colors

How to use this web system

The color you want can be specified by dragging or clicking the slider bar, or by directly entering numbers. When a color is specified, all colors and numbers, and the position of the slider bar are automatically recalculated and updated. The generated color is automatically calculated by RGB hexadecimal notation, RGB decimal notation, HSL, CMYK, HSV (HSB). Since RGB hexadecimal notation and RGB decimal notation and HSL are displayed in a format that can be used directly by CSS, they can be used by copying them to the clipboard. In addition, since RGB, HSL, CMYK, and HSV (HSB) are automatically recalculated, they can also be used as color conversion tools on Web. We tested on smartphones and "Google Chrome" and "Mozilla Firefox". "Microsoft Edge" and "Microsoft Internet Explorer" have slight differences in slider bar colors etc., but there is no problem in use. (Since we want to use a beautiful button by CSS3, it does not correspond completely to the display of "Microsoft Edge" and "Microsoft Internet Explorer", but it will be solved in the near future.) When [Set the background color to the specified color] option is checked (default is checked), the background color is automatically updated to"the specified color". When you don't check it, the background color is white.

What is RGB?

The "three primary colors of light" are "red", "green" and "blue". RGB is a color that expresses all colors using the strength of the three primary colors of red (0 to 255), green (0 to 255), and blue (0 to 255). RGB is usually used 8 bits to represent the color intensity, and combination of three RGB colors produces the color. There are 256 colors that can be expressed in 8 bits, and the combination of the three RGB colors is 256 × 256 × 256, which is about 16.7 million colors.Therefore, the color intensity is expressed in 256 steps from 0 to 255. In hexadecimal, there are 256 levels from "0" to "FF". Also, since RGB is light (as opposed to CMYK), the more colors you mix, the brighter it gets and it approaches white. Therefore, it is called "additive color mixture".

What is HSL?

HSL expresses the color by the three elements of “Hue” (0 to 360), “Saturation” (0% to 100%), and “Lightness” (0% to 100%) . Hue represents the type of color and is specified by an angle of 0 degrees to 360 degrees. 0 degrees represents red, 120 degrees green, and 240 degrees blue. The color on the other side is complementary color. Saturation represents the vividness of the color, with 100% being the most vivid, decreasing in value as the color fades and 0% representing gray. The brightness represents brightness, and 100% is white, 50% is pure, and 0% is black.

What is CMYK?

The "three primary colors" are "Cyan", "Magenta", and "Yellow". In CMYK, "Cyan" (0% to 100%), "Magenta" (0% to 100%) and "Yellow" (0% to 100%), which are "three primary colors", and "key plate color"(usually black) are userd to represent all colors. It is commonly used in the printing industry because it represents colors using the three primary colors ("cyan", "magenta", "yellow"). Since in RGB, the color is light , the more colors you mix, the brighter it gets and it approaches white. Therefore, it is called "additive color mixture". On the other hand, in the case of CMYK, since the color is a pigment or a dye, the more it is mixed, the darker the color becomes, and in the theory the color approaches black. Therefore, it is called "subtractive color mixture". You may think that it may be possible to express all colors with "Cyan (C)", "Magenta (M)" and "Yellow (Y)" of "the three primary colors". But when three colors of "cyan", "magenta" and "yellow" are mixed, they do not become beautiful black, but only dull dark black at best.For this reason, as a purpose of expressing black more beautifully with a printer, "Key plate (K)" (usually black) ink is mixed to express clear black. There are other reasons to add "key plate (K)" (black). One reason is the amount of ink required to express black decreases and the printing cost decreases. In addition, there is an advantage that drying time is quick and suitable for high speed printing. In this Web system, when "key plate (K)" (black) is set to 0 and RGB and CMYK are compared, you can see the values of "Cyan (C)", "Magenta (M)" and "Yellow (Y)" are the opposite of those of "Red (R)", "Green (G)" and "Blue (B)". In fact, "cyan (C)" is the complementary color of "red (R)", "magenta (M)" is the complementary color of "green (G)", and "yellow (Y)" is the complementary color of "blue (B )".

What is HSV(HSB)?

HSV (HSB) has three colors: “Hue” (0 to 360), “Saturation” (0% to 100%), and “Value” (0% to 100%). It is also called HSB (B is Brightness). Hue represents the type of color and is specified by an angle of 0 degrees to 360 degrees. 0 degrees represents red, 120 degrees green, and 240 degrees blue. The color on the other side is complementary. Saturation represents the vividness of the color, with 100% being the most vivid, decreasing in value as the color fades and 0% representing gray. Lightness represents the lightness of a color.