Wikipedia:WikiProject Color/Normalized Color Coordinates Contents Decimal sRGB coordinates Hex triplet CMYK coordinates HSV coordinates Microsoft HSL inputs See also Navigation menu
WikiProject Color
normalisedcoordinate systemsList of colorscolour spacesredgreenbluelightaddedbytegraphics cardssRGBgamma functiongammahexadecimalHTMLwebpagescyanmagentayellowblackpigmentsinkssubtractivelysRGBgamma functiondot gainHSV color spacehuedegreessaturationvaluepercentagesbrightnessAmbergreyRGB color spaceHSL color spaceHSLluminance
Wikipedia:WikiProject Color/Normalized Color Coordinates
Jump to navigation
Jump to search
Sample colour Information Box | |
---|---|
Color coordinates | |
Hex triplet | #55dd33 |
sRGBB (r, g, b) | (255, 174, 201) |
CMYKH (c, m, y, k) | (j, 0, 76.9, 13.3) |
HSV (h, s, v) | (108°, 76.9%, 86.7%) |
Source | Sample source (SGBUS Green) |
B: Normalized to [0–255] (byte) H: Normalized to [0–100] (hundred) |
Wikipedia uses a normalised set of colour coordinate systems in the colour Information Box (sample at right) and also in articles such as List of colors.
Colour coordinate ranges are a matter of designer choice and there is no universal standard range for many colour spaces (though some ranges may be prevalent). A box with all of the different possible coordinate ranges would be too large and confusing.
Therefore, Wikipedia has chosen standard ranges for each of the coordinate systems, so as to have consistent coordinates in all colour articles. This article describes the chosen systems and also provides instructions for conversion to other ranges which might be needed by particular colour environments.
Contents
1 Decimal sRGB coordinates
2 Hex triplet
3 CMYK coordinates
4 HSV coordinates
5 Microsoft HSL inputs
6 See also
Decimal sRGB coordinates
Every manufacturer has its own color definitions. As such, this is an internationally acceptable practice.
The RGB coordinates describe the amounts of each of red, green, and blue light which are added together in order to create a particular color. In Wikipedia, the coordinates are presented as three numbers separated by commas, as in this example for the color SGBUS Green:
- (85, 221, 51)
The coordinates within the parenthesis provide, from left-to-right, the relative values of red, green, and blue light. The number in each position ranges from 0 (no color added) to 255 (100% color added). This range was chosen because it is the most commonly used in computer color selection dialogs. (This is because the numbers 0 through 255 fit naturally within one byte and are therefore used to directly drive graphics cards.)
Most image editing programs should accept this range. Therefore, RGB should be entered into image editing programs wherever possible because it rarely (if ever) requires conversion.
We generally assume that the exact meaning of the primary colors ("red" for example) is that of the sRGB standard, and that the sRGB gamma function is in use. Note that this color space is not linear. A middle-grey RGB values are near 195,195,195, assume the γ (gamma) value is 2.6, where (1/2)(1/2.6)∗255=195displaystyle (1/2)^(1/2.6)*255=195, instead of (1/2)∗255=127displaystyle (1/2)*255=127.
Hex triplet
This is a compact representation of sRGB, using hexadecimal numbering. The hex triplet is based upon the standard format for representing colors within HTML, which is used to construct webpages. This coordinate system should not require any conversion; it should be able to be used directly in HTML source as, for example, in this style attribute:
55DD33;"
CMYK coordinates
The CMYK coordinates describe the amounts of each of cyan, magenta, yellow and key (black) pigments (such as inks) which are mixed subtractively in order to create a particular color. In Wikipedia, the coordinates are presented as four numbers separated by commas, as in this example for the color SGBUS Green:
- (61.5, 0, 76.9, 13.3)
The coordinates within the parenthesis provide, from left-to-right, the relative values of cyan, magenta, yellow, and key. The number in each position ranges from 0 (no pigment used) to 100 (maximum = 100% pigment coverage).
However, the ranges shown for Wikipedia do not correspond to the range normally used as the mathematic basis for computing CMYK, and may not correspond to those accepted by any given color selection dialog. (Probably few, if any, color selection dialogs provide direct access to this coordinate group.)
CMYK is generally something of a disaster, except as used in the internals of a printer driver. Unlike RGB, which is well-standardized as sRGB and which generally has a 1:1 mapping between coordinates and colors, CMYK is device-specific. Even if we assume that two devices will use the same value range and gamma function, we have the problem of radically different notions of what the primary colors actually look like. Not every "cyan" looks exactly the same. Multiple CMYK values will map to the same perceived color. One may minimize the use of black to save ink costs and avoid soggy paper, or maximize the use of black to reduce speckles. Printing oddities, such as dot gain and paper variations, serve to make the situation quite hopeless.
Coordinate Group | Usage | Converting from Wikipedia coordinates |
---|---|---|
0-1.0, 0-1.0, 0-1.0, 0-1.0 |
| Divide each of the Wikipedia coordinates by 100. |
0-100, 0-100, 0-100, 0-100 |
| None needed. |
HSV coordinates
The HSV color space coordinates describe a color in terms of the hue, given as degrees, combined with a saturation and a value, both represented as percentages. (Value is similar to brightness in this usage.) In Wikipedia, the HSV coordinates are represented as three numbers separated by commas and identified as either degrees or percentage, as in this example for the color SGBUS Green:
- (108°, 76.9%, 86.7%)
The coordinates within the parentheses provide, from left-to-right, the relative values of hue, saturation, and value.
The first number, the hue, ranges from 0° to 359°. This defines the overall hue of the color. The following table shows the correspondence between major colors and the angle:
Angle | color |
---|---|
0° | Red |
30° | Orange |
60° | Yellow |
90° | Chartreuse green |
120° | Green |
150° | Spring green |
180° | Cyan |
210° | Azure |
240° | Blue |
270° | Violet |
300° | Magenta |
330° | Rose |
Angles falling between these major color points yield colors intermediate to the bracketing angles; the color Amber, for example, falls at 45°, between orange and yellow. For angles increasing above 300° (magenta), colors become progressively redder as if red resided at 360°.
The second number, the saturation (color intensity), ranges from 0% to 100%, with 100% indicating a very intense color and 0% indicating grey (that is, being completely neutral or without hue).
The third number, the value (or brightness), ranges from 0 to 100%, with 0% indicating black and 100% indicating the brightest possible intensity of a color, whether white or otherwise, as limited by a maximum in RGB color space. In HSL color space, on the other hand, only white can have a lightness of 100%.
This coordinate system is problematic, because programs that accept this system use several different ranges of numbers on input. Some of these are listed in the table below.
Coordinate Group | Usage | Converting from Wikipedia coordinates |
---|---|---|
0°-360°, 0-1.0, 0-1.0 |
| Strictly speaking, this conforms to the Wikipedia range, since 100% = 1.0. Divide saturation and value coordinates each by 100. |
0°-360°, 0%-100%, 0%-100% |
| None needed. |
0-255, 0-255, 0-255 |
| Multiply hue by 0.71; multiply saturation and value each by 2.55 |
0-1.0, 0-1.0, 0-1.0 |
| Divide hue by 360; divide saturation and value each by 100 |
Most image editing programs probably accept the RGB value, which should also be more easily used.
Microsoft HSL inputs
Many Microsoft Windows programs (such as Microsoft Paint) provide inputs to accept HSL (hue, saturation, lightness) color coordinates in the range 0-240, 0-240, 0-240. These can be approximated by multiplying the hue of the HSV coordinates by 0.67 and multiplying the saturation and value each by 2.4; then using the value coordinate as input to the luminance coordinate. However, HSL does not exactly correspond to HSV, so the result may be not be an accurate color rendition. (Proper conversion from HSV to HSL is complex.)
However, most (if not all) of these programs also accept RGB, which can typically be entered without conversion. Therefore, it is usually best in these programs to use the RGB coordinate.
See also
- Wikipedia:WikiProject Color/Sources for Color Coordinates
Categories:
- WikiProject Color
(window.RLQ=window.RLQ||[]).push(function()mw.config.set("wgPageParseReport":"limitreport":"cputime":"0.068","walltime":"0.165","ppvisitednodes":"value":340,"limit":1000000,"ppgeneratednodes":"value":0,"limit":1500000,"postexpandincludesize":"value":5357,"limit":2097152,"templateargumentsize":"value":399,"limit":2097152,"expansiondepth":"value":7,"limit":40,"expensivefunctioncount":"value":0,"limit":500,"unstrip-depth":"value":0,"limit":20,"unstrip-size":"value":74,"limit":5000000,"entityaccesscount":"value":0,"limit":400,"timingprofile":["100.00% 44.297 1 Template:Infobox_color","100.00% 44.297 1 -total"," 84.12% 37.261 1 Template:Infobox"," 5.64% 2.500 4 Template:Nowrap"," 5.35% 2.369 1 Template:Template_other"],"scribunto":"limitreport-timeusage":"value":"0.011","limit":"10.000","limitreport-memusage":"value":876151,"limit":52428800,"cachereport":"origin":"mw1330","timestamp":"20190404140836","ttl":2592000,"transientcontent":false);mw.config.set("wgBackendResponseTime":95,"wgHostname":"mw1323"););