Skip to main content

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




From Wikipedia, the free encyclopedia

< Wikipedia:WikiProject Color





Jump to navigation
Jump to search












Sample colour Information Box
 

About these coordinates     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%)
SourceSample 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.












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


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:






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































Hue Angles of the 12 Major Colors of the HSV (RGB) Color Wheel
Anglecolor

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.


















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)

  • Blender 3D editor

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



Retrieved from "https://en.wikipedia.org/w/index.php?title=Wikipedia:WikiProject_Color/Normalized_Color_Coordinates&oldid=884447096"










Navigation menu


























(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"););

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript