Wikipedia:WikiProject Color/Normalized Color Coordinates
| Sample color Information Box | |
|---|---|
 Color coordinates | |
| Hex triplet | #FFA500 |
| sRGBB (r, g, b) | (255, 165, 0) |
| HSV (h, s, v) | (39°, 100%, 100%) |
| CIELChuv (L, C, h) | (75, 105, 45°) |
| Source | Sample source |
| B: Normalized to [0–255] (byte) H: Normalized to [0–100] (hundred) | |
Wikipedia uses a standardized set of color coordinate systems in color infobox (sample shown) and also in articles such as List of colors. Color coordinate ranges are a matter of choice and there is no universal standard range for many color spaces (though some ranges may be prevalent). A box having all of the different possible coordinate ranges would be impractical. Therefore, Wikipedia has chosen standard ranges for the coordinate systems, so as to have consistent coordinates in all color articles. This article describes the chosen systems and provides instructions for conversion to other ranges which might be needed by particular color environments.
Recommended color systems
editsRGB
editsRGB has been the standard version of RGB for the web since 1996. As an RGB system, it describes the amounts of red, green, and blue light which are added together in order to create a particular color. Every color infobox on Wikipedia must have one such parameter to, at the very least, show on the screen an idea of what the color looks like.
In the infobox, the coordinates are presented as three numbers separated by commas, as in this example for the color orange:
- (255, 165, 0)
The coordinates within the parenthesis provide, in order, 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. (The numbers 0 through 255 fit naturally within one byte and are therefore used to directly drive graphics cards.)
Most image editing programs accept this range. Therefore, RGB should be entered into image editing programs wherever possible because it rarely (if ever) requires conversion.
It is assumed 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. This color space is not linear. Middle-grey sRGB values (with „middle“ defined as „emitting half as much visible light per area as a maximum brightness white“ and „grey“ defined as „having the same chromacity as the standard illuminant D65“) are near 188,188,188, assuming the γ (gamma) correction formula from the sRGB standard is in use.
Hex triplet
editThis 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:
style="background-color:#FFA500;"
Gamut mapping
editCreated to describe a typical 1990s CRT screen, sRGB has a limited gamut and is unable to describe every real color. As Wikipedia templates take a hex triplet as input, all colors must have a value in the sRGB range. Fitting a color into the range is known as gamut mapping. The current practice is to use an scRGB interpretation scaled to 0-255.
CIELChuv coordinates
editCIELChuv is a perceptually uniform color space consisting of lightness, chroma and hue coordinates. It is derived from the CIELUV space, usually based on the 2° observer and the standard Illuminant D65 representing daylight.
huv is an angle that is normally given in degrees. L* is in the range 0 to +100. C*uv describes the colorfulness and can range from 0 to a couple hundreds.
Colors out of the sRGB gamut should specify a CIELChuv value. A CIELChuv value is enough to describe any color possible under daylight. Sources may specify colors in some other uniform color space, which can be converted to CIELChuv using established algorithms such as those provided by the python package "colour".
Systems conditionally used
editCMYK coordinates
editThe 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 orange:
- (0, 35, 100, 0)
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, due to the reason below.)
CMYK is not recommended in new articles except for colors only meaningful in CMYK (e.g. rich black). There are simply too many versions of CMYK around, with differences between inks (what does "cyan" look like?), paper (how much dot gain, what color paper), machine, plus flexibilities in color blending. CMYK colors used in Wikipedia must come with a source and what kind of configuration the source is referring to.
| 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. |
Systems that should not be used
editHSV coordinates
editThe 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 orange:
- (39°, 100%, 100%)
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 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%.
HSV should not be used on new articles because it does not provide any information beyond sRGB. See also HSL and HSV § Disadvantages.
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
editMany 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.[1] These values are only a computer workaround and should never be used in the context of Wikipedia. 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.
If a source truly only provides a Microsoft HSL input and if you cannot find an alternate, convert it to sRGB. First divide the H by 2⁄3, and the S and L by 2.4 to obtain normal HSL values. Then use any online tool (such as [1]) to convert HSL to sRGB.
See also
edit- ^ Chen, Raymond (13 October 2015). "Why do Saturation and Luminance go all the way to 240, but Hue goes only to 239? And why 239 anyway?". The Old New Thing.