Editing HSL and HSV (section)

==Use in end-user software==
{{see also|Color picker|Image editing}}

[[File:hsl-hsv-colorpickers.svg|thumb|right|300px|Fig 16a–g. By the 1990s, HSL and HSV color selection tools were ubiquitous. The screenshots above are taken from: {{ordered list | list-style-type = lower-alpha
| SGI [[IRIX]] 5, {{Circa|1995}};
| [[Adobe Photoshop]], {{Circa|1990}};
| IBM [[OS/2#The "Warp" years|OS/2 Warp]] 3, {{Circa|1994}};
| Apple Macintosh [[System 7]], {{Circa|1996}};
| Fractal Design [[Corel Painter|Painter]], {{Circa|1993}};
| Microsoft [[Windows 3.1x|Windows 3.1]], {{Circa|1992}};
| [[NeXTSTEP]], {{Circa|1995}}.
}} These are undoubtedly based on earlier examples, stretching back to PARC and NYIT in the mid-1970s.{{refn|group=upper-alpha |See [[#Smith|Smith (1978)]]. Many of these screenshots were taken from the [http://www.guidebookgallery.org/ GUIdebook], and the rest were gathered from image search results.}}]]

The original purpose of HSL and HSV and similar models, and their most common current application, is in [[color tool|color selection tools]]. At their simplest, some such color pickers provide three sliders, one for each attribute. Most, however, show a two-dimensional slice through the model, along with a slider controlling which particular slice is shown. The latter type of GUI exhibits great variety, because of the choice of cylinders, hexagonal prisms, or cones/bicones that the models suggest (see the diagram near the [[#top|top of the page]]). Several color choosers from the 1990s are shown to the right, most of which have remained nearly unchanged in the intervening time: today, nearly every computer color chooser uses HSL or HSV, at least as an option. Some more sophisticated variants are designed for choosing whole sets of colors, basing their suggestions of compatible colors on the HSL or HSV relationships between them.{{refn|group=upper-alpha |For instance, a tool in [[Adobe Illustrator|Illustrator]] CS4, and Adobe's related web tool, [[Adobe Kuler|Kuler]], both allow users to define color schemes based on HSV relationships, but with a hue circle modified to better match the [[RYB color model|RYB model]] used traditionally by painters. The web tools [http://www.colorjack.com/sphere/ ColorJack], [http://www.colorsontheweb.com/colorwizard.asp Color Wizard], and [http://www.colorblender.com/ ColorBlender] all pick color schemes with reference to HSL or HSV.}}

Most web applications needing color selection also base their tools on HSL or HSV, and pre-packaged open source color choosers exist for most major web front-end [[JavaScript library|frameworks]]. The [[Cascading Style Sheets|CSS 3]] specification allows web authors to specify colors for their pages directly with HSL coordinates.{{refn|group=upper-alpha |Try a web search for "''[framework name]'' color picker" for examples for a given framework, or "[[JavaScript]] color picker" for general results.}}<ref>Tantek Çelik, Chris Lilley, and L. David Baron (July 2008). [http://www.w3.org/TR/2008/WD-css3-color-20080721/#hsl-color "CSS3 Color Module Level 3"].</ref>

HSL and HSV are sometimes used to define gradients for [[data visualization]], as in maps or medical images. For example, the popular [[Geographic information system|GIS]] program [[ArcGIS]] historically applied customizable HSV-based gradients to numerical geographical data.<!-- Several studies have been done on color scheme choices for such data display, and the use of HSL- and HSV-based schemes has -->{{refn|group=upper-alpha |ArcGIS calls its map-symbol gradients "color ramps". Current versions of ArcGIS can use CIELAB instead for defining them.<ref>{{cite web |date=January 2008 |url=http://webhelp.esri.com/arcgisdesktop/9.2/index.cfm?TopicName=Working_with_color_ramps |title=Working with color ramps |publisher=[[Environmental Systems Research Institute]] |access-date=August 30, 2017}}</ref>}}

{| class="wikitable" style="clear:right; float:right; margin:0.8em 0 0 1.0em;"
| <!--Deleted image removed: rowspan="2"--> border="0" | [[File:Xv hsv-modification.png|none|100px]]<div style="width:90px; font-size: smaller;" class="thumbcaption">Fig. 17. [[xv (software)|xv]]'s HSV-based color modifier.</div>
| border="0" | [[File:PS 2.5 hue-saturation tool.png|none|210px]]<div style="width:200px; font-size: smaller;" class="thumbcaption">Fig. 18. The hue/saturation tool in [[Adobe Photoshop|Photoshop]] 2.5, ca. 1992.</div>
<!--Deleted image removed:|-
| border="0" | Deleted image removed: [[File:Avid-hsl.png|none|210px]] <div style="width:200px; font-size: smaller;" class="thumbcaption">Fig. 19. [[Avid Technology|Avid]]'s video color adjustment tool, based on HSL or a similar model.</div>-->
|}
[[Image editing]] software also commonly includes tools for adjusting colors with reference to HSL or HSV coordinates, or to coordinates in a model based on the "intensity" or luma [[#Lightness|defined above]]. In particular, tools with a pair of "hue" and "saturation" sliders are commonplace, dating to at least the late-1980s, but various more complicated color tools have also been implemented. For instance, the [[Unix]] image viewer and color editor [[xv (software)|xv]] allowed six user-definable hue (''H'') ranges to be rotated and resized, included a [[dial (measurement)|dial]]-like control for saturation (''S''<sub>''HSV''</sub>), and a [[curve (tonality)|curves]]-like interface for controlling value (''V'') – see fig. 17. The image editor [[Picture Window|Picture Window Pro]] includes a "color correction" tool which affords complex remapping of points in a hue/saturation plane relative to either HSL or HSV space.{{refn|group=upper-alpha |For instance, the first version of Photoshop had an HSL-based tool; see [http://www.guidebookgallery.org/apps/photoshop/huesaturation "Photoshop hue/saturation"] in the GUIdebook for screenshots.<ref>{{cite web|first1=John |last1=Bradley |date=1994 |url=http://www.trilon.com/xv/manual/xv-3.10a/color-editor-2.html |title=The HSV Modification Tools |website=John's World of XV and Other Cool Stuff}}</ref><ref>{{cite web|first1=Kiril |last1=Sinkel |date=January 2010 |url=http://www.dl-c.com/Temp/downloads/PW%20Doc/PW70.pdf |title=User Guide for Picture Window and Picture Window Pro Digital Light & Color |archive-url=https://web.archive.org/web/20140512231703/http://www.dl-c.com/Temp/downloads/PW%20Doc/PW70.pdf |archive-date=2014-05-12}}</ref>}}

[[Non-linear editing system|Video editors]] also use these models. For example, both [[Avid Technology|Avid]] and [[Final Cut Pro]] include color tools based on HSL or a similar geometry for use adjusting the color in video. With the Avid tool, users pick a vector by clicking a point within the hue/saturation circle to shift all the colors at some lightness level (shadows, mid-tones, highlights) by that vector.

Since version 4.0, Adobe Photoshop's "Luminosity", "Hue", "Saturation", and "Color" [[blend modes]] composite layers using a luma/chroma/hue color geometry. These have been copied widely, but several imitators use the HSL (e.g. [[Ulead PhotoImpact|PhotoImpact]], [[Corel Paint Shop Pro|Paint Shop Pro]]) or HSV geometries instead.{{refn|group=upper-alpha |Photoshop's documentation explains that, e.g., "Luminosity: Creates a result color with the hue and saturation of the base color and the luminance of the blend color."<ref>{{cite web |url=https://helpx.adobe.com/photoshop/using/blending-modes.html |title=Blending Modes |work=Photoshop User Guide |date=February 15, 2017 |publisher=Adobe Systems Incorporated}}</ref>}}<!-- could use a ref about photoimpact, PSP, GIMP-->{{refn|group=upper-alpha |The HSL-style mode (with a Rec. 601 Luminosity) are also standardized in [[CSS]] from a documentation contributed by Adobe and Canon.<ref>{{cite web |title=Compositing and Blending Level 1 |url=https://www.w3.org/TR/compositing-1 |website=www.w3.org}}</ref> GIMP 2.10 has switched to [[CIELAB_color_space#Cylindrical model|LCH(ab)]] from its older HSV geometry.<ref>{{cite web |title=GIMP's LCH Blend Modes |url=https://ninedegreesbelow.com/photography/gimp-lch-blend-modes.html |website=Nine Degrees Below}}</ref>}}
{{clear left}}