Wikipedia:WikiProject Color/Normalized Color Coordinates

From Wikipedia, the free encyclopedia
Jump to: navigation, search
Sample color Information Box
About these coordinates     Color coordinates
Hex triplet #FFA500
sRGBB  (rgb) (255, 165, 0)
CMYKH   (c, m, y, k) (0, 35, 100, 0)
HSV       (h, s, v) (39°, 100%, 100%)
Source Sample source
B: Normalized to [0–255] (byte)
H: Normalized to [0–100] (hundred)

Wikipedia uses a normalized set of color coordinate systems in the color Information Box (sample at right) and also in articles such as List of colors.

Color coordinate ranges are a matter of designer choice and there is no universal standard range for many color 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 color articles. This article describes the chosen systems and also provides instructions for conversion to other ranges which might be needed by particular color environments.

Decimal sRGB coordinates[edit]

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 orange:

(255, 165, 0)

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 value is near 195,195,195 instead of 127,127,127.

Hex triplet[edit]

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:


CMYK coordinates[edit]

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 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.)

CMYK is generally something of a disaster, except as used in the internals of a printer driver. Unlike RGB, which is well-standardized as RGB and which generally has a 1:1 mapping between coordinates and colors, CMYK is a device-specific mess. 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 maximize the use of black to save ink costs and avoid soggy paper, or minimize the use of black to reduce speckles. Printing oddities, such as dot gain and paper variations, serve to make the situation quite hopeless.

CMYK Coordinate System Variations
Coordinate Group Usage Converting from Wikipedia coordinates
0-1.0, 0-1.0, 0-1.0, 0-1.0
  • Mathematic basis
      (see CMYK article)
Divide each of the Wikipedia coordinates by 100.
0-100, 0-100, 0-100, 0-100
  • Wikipedia coordinates
None needed.

HSV coordinates[edit]

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 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 following table shows the correspondence between major colors and the angle:

Primary, secondary, and tertiary colors on the RGB (HSV) color wheel.

Hue Angles of the 12 Major Colors of the HSV (RGB) Color Wheel
Angle color
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.

HSV Coordinate System Variations
Coordinate Group Usage Converting from Wikipedia coordinates
0°-360°, 0-1.0, 0-1.0
  • Mathematic basis
      (see HSV article)
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%
  • Wikipedia coordinates
  • Gimp image editor
  • Photoshop image editor
  • Apple image editors
None needed.
0-255, 0-255, 0-255
  • Linux image editors
  • KDE image editor
Multiply hue by 0.71; multiply saturation and value each by 2.55
0-1.0, 0-1.0, 0-1.0
  • Java AWT (development kit)
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[edit]

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[edit]