HSL and HSV - Wikipedia

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>HSL and HSV - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"51a35057-f90f-40f5-8f3b-01a97decefb8","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"HSL_and_HSV","wgTitle":"HSL and HSV","wgCurRevisionId":1258384559,"wgRevisionId":1258384559,"wgArticleId":252814,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Webarchive template wayback links","Articles with short description","Short description is different from Wikidata","CS1 errors: periodical ignored","Color space"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"HSL_and_HSV","wgRelevantArticleId":252814,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive": false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":90000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q376492","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={ "ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","ext.math.styles":"ready","ext.tmh.player.styles":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","mediawiki.page.media","ext.tmh.player","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init", "ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.math.styles%7Cext.tmh.player.styles%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Hsl-hsv_models.svg/1200px-Hsl-hsv_models.svg.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="1200"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Hsl-hsv_models.svg/800px-Hsl-hsv_models.svg.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="800"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Hsl-hsv_models.svg/640px-Hsl-hsv_models.svg.png"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="640"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="HSL and HSV - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/HSL_and_HSV"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=HSL_and_HSV&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/HSL_and_HSV"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-HSL_and_HSV rootpage-HSL_and_HSV skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Main menu </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z">Main page</a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia">Contents</a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events">Current events</a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x">Random article</a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works">About Wikipedia</a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia">Contact us</a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia">Help</a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia">Learn to edit</a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors">Community portal</a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r">Recent changes</a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia">Upload file</a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"> Search </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Appearance </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en" class="">Donate</a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=HSL+and+HSV" title="You are encouraged to create an account and log in; however, it is not mandatory" class="">Create account</a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=HSL+and+HSV" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class="">Log in</a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Personal tools </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en">Donate</a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=HSL+and+HSV" title="You are encouraged to create an account and log in; however, it is not mandatory"> Create account</a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=HSL+and+HSV" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"> Log in</a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing">learn more</a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y">Contributions</a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n">Talk</a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-Basic_principle" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Basic_principle"> <div class="vector-toc-text"> 1 Basic principle </div> </a> <ul id="toc-Basic_principle-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Motivation" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Motivation"> <div class="vector-toc-text"> 2 Motivation </div> </a> <ul id="toc-Motivation-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Formal_derivation" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Formal_derivation"> <div class="vector-toc-text"> 3 Formal derivation </div> </a> <button aria-controls="toc-Formal_derivation-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Formal derivation subsection </button> <ul id="toc-Formal_derivation-sublist" class="vector-toc-list"> <li id="toc-Color-making_attributes" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Color-making_attributes"> <div class="vector-toc-text"> 3.1 Color-making attributes </div> </a> <ul id="toc-Color-making_attributes-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-General_approach" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#General_approach"> <div class="vector-toc-text"> 3.2 General approach </div> </a> <ul id="toc-General_approach-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Hue_and_chroma" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Hue_and_chroma"> <div class="vector-toc-text"> 3.3 Hue and chroma </div> </a> <ul id="toc-Hue_and_chroma-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Lightness" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Lightness"> <div class="vector-toc-text"> 3.4 Lightness </div> </a> <ul id="toc-Lightness-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Saturation" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Saturation"> <div class="vector-toc-text"> 3.5 Saturation </div> </a> <ul id="toc-Saturation-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Examples" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Examples"> <div class="vector-toc-text"> 3.6 Examples </div> </a> <ul id="toc-Examples-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Use_in_end-user_software" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Use_in_end-user_software"> <div class="vector-toc-text"> 4 Use in end-user software </div> </a> <ul id="toc-Use_in_end-user_software-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Use_in_image_analysis" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Use_in_image_analysis"> <div class="vector-toc-text"> 5 Use in image analysis </div> </a> <ul id="toc-Use_in_image_analysis-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Disadvantages" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Disadvantages"> <div class="vector-toc-text"> 6 Disadvantages </div> </a> <ul id="toc-Disadvantages-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Other_cylindrical-coordinate_color_models" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Other_cylindrical-coordinate_color_models"> <div class="vector-toc-text"> 7 Other cylindrical-coordinate color models </div> </a> <ul id="toc-Other_cylindrical-coordinate_color_models-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Color_conversion_formulae" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Color_conversion_formulae"> <div class="vector-toc-text"> 8 Color conversion formulae </div> </a> <button aria-controls="toc-Color_conversion_formulae-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Color conversion formulae subsection </button> <ul id="toc-Color_conversion_formulae-sublist" class="vector-toc-list"> <li id="toc-To_RGB" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#To_RGB"> <div class="vector-toc-text"> 8.1 To RGB </div> </a> <ul id="toc-To_RGB-sublist" class="vector-toc-list"> <li id="toc-HSL_to_RGB" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#HSL_to_RGB"> <div class="vector-toc-text"> 8.1.1 HSL to RGB </div> </a> <ul id="toc-HSL_to_RGB-sublist" class="vector-toc-list"> <li id="toc-HSL_to_RGB_alternative" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#HSL_to_RGB_alternative"> <div class="vector-toc-text"> 8.1.1.1 HSL to RGB alternative </div> </a> <ul id="toc-HSL_to_RGB_alternative-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-HSV_to_RGB" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#HSV_to_RGB"> <div class="vector-toc-text"> 8.1.2 HSV to RGB </div> </a> <ul id="toc-HSV_to_RGB-sublist" class="vector-toc-list"> <li id="toc-HSV_to_RGB_alternative" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#HSV_to_RGB_alternative"> <div class="vector-toc-text"> 8.1.2.1 HSV to RGB alternative </div> </a> <ul id="toc-HSV_to_RGB_alternative-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-HSI_to_RGB" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#HSI_to_RGB"> <div class="vector-toc-text"> 8.1.3 HSI to RGB </div> </a> <ul id="toc-HSI_to_RGB-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Luma,_chroma_and_hue_to_RGB" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Luma,_chroma_and_hue_to_RGB"> <div class="vector-toc-text"> 8.1.4 Luma, chroma and hue to RGB </div> </a> <ul id="toc-Luma,_chroma_and_hue_to_RGB-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Interconversion" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Interconversion"> <div class="vector-toc-text"> 8.2 Interconversion </div> </a> <ul id="toc-Interconversion-sublist" class="vector-toc-list"> <li id="toc-HSV_to_HSL" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#HSV_to_HSL"> <div class="vector-toc-text"> 8.2.1 HSV to HSL </div> </a> <ul id="toc-HSV_to_HSL-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-HSL_to_HSV" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#HSL_to_HSV"> <div class="vector-toc-text"> 8.2.2 HSL to HSV </div> </a> <ul id="toc-HSL_to_HSV-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-From_RGB" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#From_RGB"> <div class="vector-toc-text"> 8.3 From RGB </div> </a> <ul id="toc-From_RGB-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Swatches" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Swatches"> <div class="vector-toc-text"> 9 Swatches </div> </a> <button aria-controls="toc-Swatches-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Swatches subsection </button> <ul id="toc-Swatches-sublist" class="vector-toc-list"> <li id="toc-HSL" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#HSL"> <div class="vector-toc-text"> 9.1 HSL </div> </a> <ul id="toc-HSL-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-HSV" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#HSV"> <div class="vector-toc-text"> 9.2 HSV </div> </a> <ul id="toc-HSV-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> 10 See also </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Notes" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Notes"> <div class="vector-toc-text"> 11 Notes </div> </a> <ul id="toc-Notes-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> 12 References </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Bibliography" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Bibliography"> <div class="vector-toc-text"> 13 Bibliography </div> </a> <ul id="toc-Bibliography-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-External_links" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#External_links"> <div class="vector-toc-text"> 14 External links </div> </a> <ul id="toc-External_links-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Toggle the table of contents </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading">HSL and HSV</h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 21 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-21" aria-hidden="true" > 21 languages </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%81%D8%B6%D8%A7%D8%A1_%D8%A7%D9%84%D9%84%D9%88%D9%86%D9%8A_(%D9%86_%D8%B4_%D8%B6)_%D9%88_(%D9%86_%D8%B4_%D9%82)" title="الفضاء اللوني (ن ش ض) و (ن ش ق) – Arabic" lang="ar" hreflang="ar" data-title="الفضاء اللوني (ن ش ض) و (ن ش ق)" data-language-autonym="العربية" data-language-local-name="Arabic" class="interlanguage-link-target">العربية</a></li><li class="interlanguage-link interwiki-az mw-list-item"><a href="https://az.wikipedia.org/wiki/HSL_v%C9%99_HSV" title="HSL və HSV – Azerbaijani" lang="az" hreflang="az" data-title="HSL və HSV" data-language-autonym="Azərbaycanca" data-language-local-name="Azerbaijani" class="interlanguage-link-target">Azərbaycanca</a></li><li class="interlanguage-link interwiki-cs mw-list-item"><a href="https://cs.wikipedia.org/wiki/HSV" title="HSV – Czech" lang="cs" hreflang="cs" data-title="HSV" data-language-autonym="Čeština" data-language-local-name="Czech" class="interlanguage-link-target">Čeština</a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/HSV-Farbraum" title="HSV-Farbraum – German" lang="de" hreflang="de" data-title="HSV-Farbraum" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target">Deutsch</a></li><li class="interlanguage-link interwiki-et mw-list-item"><a href="https://et.wikipedia.org/wiki/HSV-v%C3%A4rvimudel" title="HSV-värvimudel – Estonian" lang="et" hreflang="et" data-title="HSV-värvimudel" data-language-autonym="Eesti" data-language-local-name="Estonian" class="interlanguage-link-target">Eesti</a></li><li class="interlanguage-link interwiki-eo mw-list-item"><a href="https://eo.wikipedia.org/wiki/HSV_(kolorsistemo)" title="HSV (kolorsistemo) – Esperanto" lang="eo" hreflang="eo" data-title="HSV (kolorsistemo)" data-language-autonym="Esperanto" data-language-local-name="Esperanto" class="interlanguage-link-target">Esperanto</a></li><li class="interlanguage-link interwiki-eu badge-Q70893996 mw-list-item" title=""><a href="https://eu.wikipedia.org/wiki/HSL_eta_HSV" title="HSL eta HSV – Basque" lang="eu" hreflang="eu" data-title="HSL eta HSV" data-language-autonym="Euskara" data-language-local-name="Basque" class="interlanguage-link-target">Euskara</a></li><li class="interlanguage-link interwiki-fa mw-list-item"><a href="https://fa.wikipedia.org/wiki/%D8%A7%DA%86%E2%80%8C%D8%A7%D8%B3%E2%80%8C%D8%A7%D9%84_%D9%88_%D8%A7%DA%86%E2%80%8C%D8%A7%D8%B3%E2%80%8C%D9%88%DB%8C" title="اچ‌اس‌ال و اچ‌اس‌وی – Persian" lang="fa" hreflang="fa" data-title="اچ‌اس‌ال و اچ‌اس‌وی" data-language-autonym="فارسی" data-language-local-name="Persian" class="interlanguage-link-target">فارسی</a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re" title="Teinte saturation lumière – French" lang="fr" hreflang="fr" data-title="Teinte saturation lumière" data-language-autonym="Français" data-language-local-name="French" class="interlanguage-link-target">Français</a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/HSL%EA%B3%BC_HSV" title="HSL과 HSV – Korean" lang="ko" hreflang="ko" data-title="HSL과 HSV" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target">한국어</a></li><li class="interlanguage-link interwiki-id mw-list-item"><a href="https://id.wikipedia.org/wiki/HSL_dan_HSV" title="HSL dan HSV – Indonesian" lang="id" hreflang="id" data-title="HSL dan HSV" data-language-autonym="Bahasa Indonesia" data-language-local-name="Indonesian" class="interlanguage-link-target">Bahasa Indonesia</a></li><li class="interlanguage-link interwiki-it mw-list-item"><a href="https://it.wikipedia.org/wiki/Hue_Saturation_Brightness" title="Hue Saturation Brightness – Italian" lang="it" hreflang="it" data-title="Hue Saturation Brightness" data-language-autonym="Italiano" data-language-local-name="Italian" class="interlanguage-link-target">Italiano</a></li><li class="interlanguage-link interwiki-kk mw-list-item"><a href="https://kk.wikipedia.org/wiki/%D0%A2%D2%AF%D1%81-%D2%9B%D0%B0%D0%BD%D0%B0%D2%9B%D1%82%D1%8B%D0%BB%D1%8B%D2%9B-%D0%B6%D0%B0%D1%80%D1%8B%D2%9B%D1%82%D1%8B%D2%9B_%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D1%96" title="Түс-қанақтылық-жарықтық моделі – Kazakh" lang="kk" hreflang="kk" data-title="Түс-қанақтылық-жарықтық моделі" data-language-autonym="Қазақша" data-language-local-name="Kazakh" class="interlanguage-link-target">Қазақша</a></li><li class="interlanguage-link interwiki-lt mw-list-item"><a href="https://lt.wikipedia.org/wiki/ACC" title="ACC – Lithuanian" lang="lt" hreflang="lt" data-title="ACC" data-language-autonym="Lietuvių" data-language-local-name="Lithuanian" class="interlanguage-link-target">Lietuvių</a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/HSL%E8%89%B2%E7%A9%BA%E9%96%93%E3%81%A8HSV%E8%89%B2%E7%A9%BA%E9%96%93" title="HSL色空間とHSV色空間 – Japanese" lang="ja" hreflang="ja" data-title="HSL色空間とHSV色空間" data-language-autonym="日本語" data-language-local-name="Japanese" class="interlanguage-link-target">日本語</a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikipedia.org/wiki/HSL_ve_HSV" title="HSL ve HSV – Turkish" lang="tr" hreflang="tr" data-title="HSL ve HSV" data-language-autonym="Türkçe" data-language-local-name="Turkish" class="interlanguage-link-target">Türkçe</a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/HSL_%D1%96_HSV" title="HSL і HSV – Ukrainian" lang="uk" hreflang="uk" data-title="HSL і HSV" data-language-autonym="Українська" data-language-local-name="Ukrainian" class="interlanguage-link-target">Українська</a></li><li class="interlanguage-link interwiki-ur mw-list-item"><a href="https://ur.wikipedia.org/wiki/%D8%A7%DB%8C%DA%86_%D8%A7%DB%8C%D8%B3_%D8%A7%DB%8C%D9%84_%D8%A7%D9%88%D8%B1_%D8%A7%DB%8C%DA%86_%D8%A7%DB%8C%D8%B3_%D9%88%DB%8C" title="ایچ ایس ایل اور ایچ ایس وی – Urdu" lang="ur" hreflang="ur" data-title="ایچ ایس ایل اور ایچ ایس وی" data-language-autonym="اردو" data-language-local-name="Urdu" class="interlanguage-link-target">اردو</a></li><li class="interlanguage-link interwiki-vi mw-list-item"><a href="https://vi.wikipedia.org/wiki/Kh%C3%B4ng_gian_m%C3%A0u_HSB" title="Không gian màu HSB – Vietnamese" lang="vi" hreflang="vi" data-title="Không gian màu HSB" data-language-autonym="Tiếng Việt" data-language-local-name="Vietnamese" class="interlanguage-link-target">Tiếng Việt</a></li><li class="interlanguage-link interwiki-zh-yue mw-list-item"><a href="https://zh-yue.wikipedia.org/wiki/HSV%E3%80%81HSL%E3%80%81HSB_%E8%89%B2%E5%BD%A9%E6%A8%A1%E5%BC%8F" title="HSV、HSL、HSB 色彩模式 – Cantonese" lang="yue" hreflang="yue" data-title="HSV、HSL、HSB 色彩模式" data-language-autonym="粵語" data-language-local-name="Cantonese" class="interlanguage-link-target">粵語</a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4" title="HSL和HSV色彩空间 – Chinese" lang="zh" hreflang="zh" data-title="HSL和HSV色彩空间" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target">中文</a></li> </ul> <div class="after-portlet after-portlet-lang"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q376492#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/HSL_and_HSV" title="View the content page [c]" accesskey="c">Article</a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:HSL_and_HSV" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t">Talk</a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >English </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/HSL_and_HSV">Read</a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=HSL_and_HSV&action=edit" title="Edit this page [e]" accesskey="e">Edit</a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=HSL_and_HSV&action=history" title="Past revisions of this page [h]" accesskey="h">View history</a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >Tools </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/HSL_and_HSV">Read</a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=HSL_and_HSV&action=edit" title="Edit this page [e]" accesskey="e">Edit</a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=HSL_and_HSV&action=history">View history</a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/HSL_and_HSV" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j">What links here</a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/HSL_and_HSV" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u">Upload file</a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q">Special pages</a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=HSL_and_HSV&oldid=1258384559" title="Permanent link to this revision of this page">Permanent link</a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=HSL_and_HSV&action=info" title="More information about this page">Page information</a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=HSL_and_HSV&id=1258384559&wpFormIdentifier=titleform" title="Information on how to cite this page">Cite this page</a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHSL_and_HSV">Get shortened URL</a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHSL_and_HSV">Download QR code</a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=HSL_and_HSV&action=show-download-screen" title="Download this page as a PDF file">Download as PDF</a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=HSL_and_HSV&printable=yes" title="Printable version of this page [p]" accesskey="p">Printable version</a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-commons mw-list-item"><a href="https://commons.wikimedia.org/wiki/Category:HSL_and_HSV" hreflang="en">Wikimedia Commons</a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q376492" title="Structured data on this page hosted by Wikidata [g]" accesskey="g">Wikidata item</a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">Alternative representations of the RGB color model</div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Hsl-hsv_models.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Hsl-hsv_models.svg/290px-Hsl-hsv_models.svg.png" decoding="async" width="290" height="290" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Hsl-hsv_models.svg/435px-Hsl-hsv_models.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Hsl-hsv_models.svg/580px-Hsl-hsv_models.svg.png 2x" data-file-width="1000" data-file-height="1000" /></a><figcaption>Fig. 1. HSL (a–d) and HSV (e–h). Above (a, e): cut-away 3D models of each. Below: two-dimensional plots showing two of a model's three parameters at once, holding the other constant: cylindrical shells (b, f) of constant saturation, in this case the outside surface of each cylinder; horizontal cross-sections (c, g) of constant HSL lightness or HSV value, in this case the slices halfway down each cylinder; and rectangular vertical cross-sections (d, h) of constant hue, in this case of hues 0° red and its complement 180° cyan.</figcaption></figure> HSL and HSV are the two most common <a href="/wiki/Cylindrical_coordinate_system" title="Cylindrical coordinate system">cylindrical-coordinate</a> representations of points in an <a href="/wiki/RGB_color_model" title="RGB color model">RGB color model</a>. The two representations rearrange the geometry of RGB in an attempt to be more intuitive and <a href="/wiki/Color_vision" title="Color vision">perceptually</a> relevant than the <a href="/wiki/Cartesian_coordinate_system" title="Cartesian coordinate system">cartesian</a> (cube) representation. Developed in the 1970s for <a href="/wiki/Computer_graphics" title="Computer graphics">computer graphics</a> applications, HSL and HSV are used today in <a href="/wiki/Color_tool" class="mw-redirect" title="Color tool">color pickers</a>, in <a href="/wiki/Image_editing" title="Image editing">image editing</a> software, and less commonly in <a href="/wiki/Image_analysis" title="Image analysis">image analysis</a> and <a href="/wiki/Computer_vision" title="Computer vision">computer vision</a>. HSL stands for hue, saturation, and lightness, and is often also called HLS. HSV stands for hue, saturation, and value, and is also often called HSB (B for brightness). A third model, common in computer vision applications, is HSI, for hue, saturation, and intensity. However, while typically consistent, these definitions are not standardized, and any of these abbreviations might be used for any of these three or several other related cylindrical models. (For technical definitions of these terms, see <a href="#Color-making_attributes">below</a>.) In each cylinder, the angle around the central vertical axis corresponds to "<a href="/wiki/Hue" title="Hue">hue</a>", the distance from the axis corresponds to "<a href="/wiki/Colorfulness" title="Colorfulness">saturation</a>", and the distance along the axis corresponds to "<a href="/wiki/Lightness" title="Lightness">lightness</a>", "value" or "<a href="/wiki/Brightness" title="Brightness">brightness</a>". Note that while "hue" in HSL and HSV refers to the same attribute, their definitions of "saturation" differ dramatically. Because HSL and HSV are simple transformations of device-dependent RGB models, the physical colors they define depend on the colors of the red, green, and blue <a href="/wiki/Primary_color" title="Primary color">primaries</a> of the device or of the particular RGB space, and on the <a href="/wiki/Gamma_correction" title="Gamma correction">gamma correction</a> used to represent the amounts of those primaries. Each unique RGB device therefore has unique HSL and HSV spaces to accompany it, and numerical HSL or HSV values describe a different color for each basis RGB space.<a href="#cite_note-1">[1]</a> Both of these representations are used widely in computer graphics, and one or the other of them is often more convenient than RGB, but both are also criticized for not adequately separating color-making attributes, or for their lack of perceptual uniformity. Other more computationally intensive models, such as <a href="/wiki/CIELAB" class="mw-redirect" title="CIELAB">CIELAB</a> or <a href="/wiki/CIECAM02" title="CIECAM02">CIECAM02</a> are said to better achieve these goals. <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Basic_principle">Basic principle</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=1" title="Edit section: Basic principle">edit</a>]</div> <style data-mw-deduplicate="TemplateStyles:r1237032888/mw-parser-output/.tmulti">.mw-parser-output .tmulti .multiimageinner{display:flex;flex-direction:column}.mw-parser-output .tmulti .trow{display:flex;flex-direction:row;clear:left;flex-wrap:wrap;width:100%;box-sizing:border-box}.mw-parser-output .tmulti .tsingle{margin:1px;float:left}.mw-parser-output .tmulti .theader{clear:both;font-weight:bold;text-align:center;align-self:center;background-color:transparent;width:100%}.mw-parser-output .tmulti .thumbcaption{background-color:transparent}.mw-parser-output .tmulti .text-align-left{text-align:left}.mw-parser-output .tmulti .text-align-right{text-align:right}.mw-parser-output .tmulti .text-align-center{text-align:center}@media all and (max-width:720px){.mw-parser-output .tmulti .thumbinner{width:100%!important;box-sizing:border-box;max-width:none!important;align-items:center}.mw-parser-output .tmulti .trow{justify-content:center}.mw-parser-output .tmulti .tsingle{float:none!important;max-width:100%!important;box-sizing:border-box;text-align:center}.mw-parser-output .tmulti .tsingle .thumbcaption{text-align:left}.mw-parser-output .tmulti .trow>.thumbcaption{text-align:center}}@media screen{html.skin-theme-clientpref-night .mw-parser-output .tmulti .multiimageinner img{background-color:white}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .tmulti .multiimageinner img{background-color:white}}</style><div class="thumb tmulti tright"><div class="thumbinner multiimageinner" style="width:402px;max-width:402px"><div class="trow"><div class="tsingle" style="width:199px;max-width:199px"><div class="thumbimage"><a href="/wiki/File:HSL_color_solid_cylinder_saturation_gray.png" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6b/HSL_color_solid_cylinder_saturation_gray.png/197px-HSL_color_solid_cylinder_saturation_gray.png" decoding="async" width="197" height="148" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/6b/HSL_color_solid_cylinder_saturation_gray.png/296px-HSL_color_solid_cylinder_saturation_gray.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/6b/HSL_color_solid_cylinder_saturation_gray.png/394px-HSL_color_solid_cylinder_saturation_gray.png 2x" data-file-width="1600" data-file-height="1200" /></a></div><div class="thumbcaption">Fig. 2a. HSL cylinder.</div></div><div class="tsingle" style="width:199px;max-width:199px"><div class="thumbimage"><a href="/wiki/File:HSV_color_solid_cylinder_saturation_gray.png" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/33/HSV_color_solid_cylinder_saturation_gray.png/197px-HSV_color_solid_cylinder_saturation_gray.png" decoding="async" width="197" height="148" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/33/HSV_color_solid_cylinder_saturation_gray.png/296px-HSV_color_solid_cylinder_saturation_gray.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/33/HSV_color_solid_cylinder_saturation_gray.png/394px-HSV_color_solid_cylinder_saturation_gray.png 2x" data-file-width="1600" data-file-height="1200" /></a></div><div class="thumbcaption">Fig. 2b. HSV cylinder.</div></div></div></div></div> HSL and HSV are both cylindrical geometries (fig. 2), with hue, their angular dimension, starting at the <a href="/wiki/Red" title="Red">red</a> <a href="/wiki/Primary_color" title="Primary color">primary</a> at 0°, passing through the <a href="/wiki/Green" title="Green">green</a> primary at 120° and the <a href="/wiki/Blue" title="Blue">blue</a> primary at 240°, and then wrapping back to red at 360°. In each geometry, the central vertical axis comprises the neutral, achromatic, or gray colors ranging, from top to bottom, white at lightness 1 (value 1) to black at lightness 0 (value 0). In both geometries, the <a href="/wiki/Additive_color" title="Additive color">additive</a> primary and <a href="/wiki/Secondary_color" title="Secondary color">secondary colors</a> – red, <a href="/wiki/Yellow" title="Yellow">yellow</a>, green, <a href="/wiki/Cyan" title="Cyan">cyan</a>, blue and <a href="/wiki/Magenta" title="Magenta">magenta</a> – and linear mixtures between adjacent pairs of them, sometimes called pure colors, are arranged around the outside edge of the cylinder with saturation 1. These saturated colors have lightness 0.5 in HSL, while in HSV they have value 1. Mixing these pure colors with black – producing so-called <a href="/wiki/Tints_and_shades" class="mw-redirect" title="Tints and shades">shades</a> – leaves saturation unchanged. In HSL, saturation is also unchanged by <a href="/wiki/Tints_and_shades" class="mw-redirect" title="Tints and shades">tinting</a> with white, and only mixtures with both black and white – called tones – have saturation less than 1. In HSV, tinting alone reduces saturation. <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1237032888/mw-parser-output/.tmulti"><div class="thumb tmulti tright"><div class="thumbinner multiimageinner" style="width:402px;max-width:402px"><div class="trow"><div class="tsingle" style="width:199px;max-width:199px"><div class="thumbimage"><a href="/wiki/File:HSL_color_solid_dblcone_chroma_gray.png" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b3/HSL_color_solid_dblcone_chroma_gray.png/197px-HSL_color_solid_dblcone_chroma_gray.png" decoding="async" width="197" height="148" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b3/HSL_color_solid_dblcone_chroma_gray.png/296px-HSL_color_solid_dblcone_chroma_gray.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b3/HSL_color_solid_dblcone_chroma_gray.png/394px-HSL_color_solid_dblcone_chroma_gray.png 2x" data-file-width="1600" data-file-height="1200" /></a></div></div><div class="tsingle" style="width:199px;max-width:199px"><div class="thumbimage"><a href="/wiki/File:HSV_color_solid_cone_chroma_gray.png" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/0/00/HSV_color_solid_cone_chroma_gray.png/197px-HSV_color_solid_cone_chroma_gray.png" decoding="async" width="197" height="148" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/00/HSV_color_solid_cone_chroma_gray.png/296px-HSV_color_solid_cone_chroma_gray.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/00/HSV_color_solid_cone_chroma_gray.png/394px-HSV_color_solid_cone_chroma_gray.png 2x" data-file-width="1600" data-file-height="1200" /></a></div></div></div><div class="trow" style="display:flex"><div class="thumbcaption">Fig. 3a–b. If we plot hue and (a) HSL lightness or (b) HSV value against chroma (<a href="/wiki/Range_(statistics)" title="Range (statistics)">range</a> of RGB values) rather than saturation (chroma over maximum chroma for that slice), the resulting solid is a <a href="/wiki/Bicone" title="Bicone">bicone</a> or <a href="/wiki/Cone" title="Cone">cone</a>, respectively, not a cylinder. Such diagrams often claim to represent HSL or HSV directly, with the chroma dimension confusingly labeled "saturation".</div></div></div></div> Because these definitions of saturation – in which very dark (in both models) or very light (in HSL) near-neutral colors are considered fully saturated (for instance,   from the bottom right in the sliced HSL cylinder or   from the top right) – conflict with the intuitive notion of color purity, often a <a href="/wiki/Cone" title="Cone">conic</a> or <a href="/wiki/Bicone" title="Bicone">biconic</a> solid is drawn instead (fig. 3), with what this article calls <a href="/wiki/Colorfulness" title="Colorfulness">chroma</a> as its radial dimension (equal to the <a href="/wiki/Range_(statistics)" title="Range (statistics)">range</a> of the RGB values), instead of saturation (where the saturation is equal to the chroma over the maximum chroma in that slice of the (bi)cone). Confusingly, such diagrams usually label this radial dimension "saturation", blurring or erasing the distinction between saturation and chroma.<a href="#cite_note-2">[A]</a> <a href="#Formal_derivation">As described below</a>, computing chroma is a helpful step in the derivation of each model. Because such an intermediate model – with dimensions hue, chroma, and HSV value or HSL lightness – takes the shape of a cone or bicone, HSV is often called the "hexcone model" while HSL is often called the "bi-hexcone model" (<a href="#Color-making_attributes">fig. 8</a>).<a href="#cite_note-3">[B]</a> <div style="clear:both;" class=""></div> <div class="mw-heading mw-heading2"><h2 id="Motivation">Motivation</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=2" title="Edit section: Motivation">edit</a>]</div> <style data-mw-deduplicate="TemplateStyles:r1236090951">.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}</style><div role="note" class="hatnote navigation-not-searchable">See also: <a href="/wiki/Color_theory" title="Color theory">Color theory</a>, <a href="/wiki/RGB_color_model" title="RGB color model">RGB color model</a>, and <a href="/wiki/RGB_color_space" class="mw-redirect" title="RGB color space">RGB color space</a></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1237032888/mw-parser-output/.tmulti"><div class="thumb tmulti tright"><div class="thumbinner multiimageinner" style="width:408px;max-width:408px"><div class="trow"><div class="tsingle" style="width:202px;max-width:202px"><div class="thumbimage"><a href="/wiki/File:Tint-tone-shade.svg" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tint-tone-shade.svg/200px-Tint-tone-shade.svg.png" decoding="async" width="200" height="150" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tint-tone-shade.svg/300px-Tint-tone-shade.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tint-tone-shade.svg/400px-Tint-tone-shade.svg.png 2x" data-file-width="800" data-file-height="600" /></a></div><div class="thumbcaption">Fig. 4. Painters long mixed colors by combining relatively bright pigments with black and white. Mixtures with white are called tints, mixtures with black are called shades, and mixtures with both are called tones. See <a href="/wiki/Tints_and_shades" class="mw-redirect" title="Tints and shades">Tints and shades</a>.<a href="#cite_note-Levkowitz-4">[2]</a></div></div><div class="tsingle" style="width:202px;max-width:202px"><div class="thumbimage"><a href="/wiki/File:Ostwald.svg" class="mw-file-description"><img alt="Several paint mixing terms can be arranged into a triangular arrangement: the left edge of the triangle shows white at its top and black at its bottom with gray between the two, each in its respective oval. A pure color (in this case, a bright blue-green) lies at the right corner of the triangle. On the edge between the pure color and black is a shade (a darker blue-green), between the pure color and white is a tint (a lighter, faded blue-green), and a tone lies in the middle of the triangle (a muted blue-green)." src="//upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Ostwald.svg/200px-Ostwald.svg.png" decoding="async" width="200" height="150" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Ostwald.svg/300px-Ostwald.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Ostwald.svg/400px-Ostwald.svg.png 2x" data-file-width="400" data-file-height="300" /></a></div><div class="thumbcaption">Fig. 5. This 1916 color model by German chemist <a href="/wiki/Wilhelm_Ostwald" title="Wilhelm Ostwald">Wilhelm Ostwald</a> exemplifies the "mixtures with white and black" approach, organizing 24 "pure" colors into a <a href="/wiki/Color_circle" class="mw-redirect" title="Color circle">hue circle</a>, and colors of each hue into a triangle. The model thus takes the shape of a bicone.<a href="#cite_note-5">[3]</a><a href="#cite_note-6">[4]</a></div></div></div></div></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1237032888/mw-parser-output/.tmulti"><div class="thumb tmulti tright"><div class="thumbinner multiimageinner" style="width:408px;max-width:408px"><div class="trow"><div class="tsingle" style="width:202px;max-width:202px"><div class="thumbimage"><a href="/wiki/File:RGB_Cube_Show_lowgamma_cutout_a.png" class="mw-file-description"><img alt="The RGB cube has black at its origin, and the three dimensions R, G, and B pointed in orthogonal directions away from black. The corner in each of those directions is the respective primary color (red, green, or blue), while the corners further away from black are combinations of two primaries (red plus green makes yellow, red plus blue makes magenta, green plus blue makes cyan). At the cube's corner farthest from the origin lies white. Any point in the cube describes a particular color within the gamut of RGB." src="//upload.wikimedia.org/wikipedia/commons/thumb/0/05/RGB_Cube_Show_lowgamma_cutout_a.png/200px-RGB_Cube_Show_lowgamma_cutout_a.png" decoding="async" width="200" height="150" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/05/RGB_Cube_Show_lowgamma_cutout_a.png/300px-RGB_Cube_Show_lowgamma_cutout_a.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/05/RGB_Cube_Show_lowgamma_cutout_a.png/400px-RGB_Cube_Show_lowgamma_cutout_a.png 2x" data-file-width="1600" data-file-height="1200" /></a></div><div class="thumbcaption">Fig. 6a. The RGB gamut can be arranged in a cube.</div></div><div class="tsingle" style="width:202px;max-width:202px"><div class="thumbimage"><a href="/wiki/File:RGB_Cube_Show_lowgamma_cutout_b.png" class="mw-file-description"><img alt="The same image, with a portion removed for clarity." src="//upload.wikimedia.org/wikipedia/commons/thumb/8/83/RGB_Cube_Show_lowgamma_cutout_b.png/200px-RGB_Cube_Show_lowgamma_cutout_b.png" decoding="async" width="200" height="150" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/83/RGB_Cube_Show_lowgamma_cutout_b.png/300px-RGB_Cube_Show_lowgamma_cutout_b.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/83/RGB_Cube_Show_lowgamma_cutout_b.png/400px-RGB_Cube_Show_lowgamma_cutout_b.png 2x" data-file-width="1600" data-file-height="1200" /></a></div><div class="thumbcaption">Fig. 6b. The same image, with a portion removed for clarity.</div></div></div></div></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1237032888/mw-parser-output/.tmulti"><div class="thumb tmulti tright"><div class="thumbinner multiimageinner" style="width:304px;max-width:304px"><div class="trow"><div class="tsingle" style="width:302px;max-width:302px"><div class="thumbimage"><a href="/wiki/File:Tektronix-hsl-patent-diagram.png" class="mw-file-description"><img alt="In classic patent application style, this is a black-and-white diagram with the patent name, inventor name, and patent number listed at the top, shaded by crosshatching. This diagram shows a three-dimensional view of Tektronix's biconic HSL geometry, made up of horizontal circular slices along a vertical axis expanded for ease of viewing. Within each circular slice, saturation goes from zero at the center to one at the margins, while hue is an angular dimension, beginning at blue with hue zero, through red with hue 120 degrees and green with hue 240 degrees, and back to blue." src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Tektronix-hsl-patent-diagram.png/300px-Tektronix-hsl-patent-diagram.png" decoding="async" width="300" height="452" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Tektronix-hsl-patent-diagram.png/450px-Tektronix-hsl-patent-diagram.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Tektronix-hsl-patent-diagram.png/600px-Tektronix-hsl-patent-diagram.png 2x" data-file-width="1782" data-file-height="2682" /></a></div><div class="thumbcaption">Fig. 7. Tektronix graphics terminals used the earliest commercial implementation of HSL, in 1979. This diagram, from a patent filed in 1983, shows the bicone geometry underlying the model.<a href="#cite_note-7">[5]</a></div></div></div></div></div> Most televisions, computer displays, and projectors produce colors by combining red, green, and blue light in varying intensities – the so-called <a href="/wiki/RGB_color_model" title="RGB color model">RGB</a> <a href="/wiki/Additive_color" title="Additive color">additive</a> <a href="/wiki/Primary_color" title="Primary color">primary colors</a>. The resulting mixtures in <a href="/wiki/RGB_color_space" class="mw-redirect" title="RGB color space">RGB color space</a> can reproduce a wide variety of colors (called a <a href="/wiki/Gamut" title="Gamut">gamut</a>); however, the relationship between the constituent amounts of red, green, and blue light and the resulting color is unintuitive, especially for inexperienced users, and for users familiar with <a href="/wiki/Subtractive_color" title="Subtractive color">subtractive color</a> mixing of paints or traditional artists' models based on tints and shades (fig. 4). Furthermore, neither additive nor subtractive color models define color relationships the same way the <a href="/wiki/Color_vision" title="Color vision">human eye</a> does.<a href="#cite_note-11">[C]</a> For example, imagine we have an RGB display whose color is controlled by three <a href="/wiki/Slider_(computing)" title="Slider (computing)">sliders</a> ranging from 0–255, one controlling the intensity of each of the red, green, and blue primaries. If we begin with a relatively colorful <a href="/wiki/Orange_(colour)" title="Orange (colour)">orange</a>  , with <a href="/wiki/SRGB" title="SRGB">sRGB</a> values R = 217, G = 118, B = 33, and want to reduce its colorfulness by half to a less saturated orange  , we would need to drag the sliders to decrease R by 31, increase G by 24, and increase B by 59, as pictured below. <a href="/wiki/File:Unintuitive-rgb.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Unintuitive-rgb.png/300px-Unintuitive-rgb.png" decoding="async" width="300" height="48" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Unintuitive-rgb.png/450px-Unintuitive-rgb.png 1.5x, //upload.wikimedia.org/wikipedia/commons/5/5d/Unintuitive-rgb.png 2x" data-file-width="500" data-file-height="80" /></a> Beginning in the 1950s, <a href="/wiki/Color_television" title="Color television">color television</a> broadcasts used a <a href="/wiki/Color_television#Compatible_color" title="Color television">compatible color</a> system whereby "<a href="/wiki/Luma_(video)" title="Luma (video)">luminance</a>" and "<a href="/wiki/Chrominance" title="Chrominance">chrominance</a>" signals were encoded separately, so that existing unmodified black-and-white televisions could still receive color broadcasts and show a monochrome image.<a href="#cite_note-12">[9]</a> In an attempt to accommodate more traditional and intuitive color mixing models, computer graphics pioneers at <a href="/wiki/PARC_(company)" title="PARC (company)">PARC</a> and <a href="/wiki/New_York_Institute_of_Technology" title="New York Institute of Technology">NYIT</a> introduced the HSV model for computer display technology in the mid-1970s, formally described by <a href="/wiki/Alvy_Ray_Smith" title="Alvy Ray Smith">Alvy Ray Smith</a><a href="#cite_note-Smith-13">[10]</a> in the August 1978 issue of <a href="/wiki/Computer_Graphics_(publication)" class="mw-redirect" title="Computer Graphics (publication)">Computer Graphics</a>. In the same issue, Joblove and Greenberg<a href="#cite_note-Joblove-14">[11]</a> described the HSL model – whose dimensions they labeled hue, relative chroma, and intensity – and compared it to HSV (fig. 1). Their model was based more upon how colors are organized and conceptualized in <a href="/wiki/Color_vision" title="Color vision">human vision</a> in terms of other color-making attributes, such as hue, lightness, and chroma; as well as upon traditional color mixing methods – e.g., in painting – that involve mixing brightly colored pigments with black or white to achieve lighter, darker, or less colorful colors. The following year, 1979, at <a href="/wiki/SIGGRAPH" title="SIGGRAPH">SIGGRAPH</a>, <a href="/wiki/Tektronix" title="Tektronix">Tektronix</a> introduced graphics terminals using HSL for color designation, and the Computer Graphics Standards Committee recommended it in their annual status report (fig. 7). These models were useful not only because they were more intuitive than raw RGB values, but also because the conversions to and from RGB were extremely fast to compute: they could run in real time on the hardware of the 1970s. Consequently, these models and similar ones have become ubiquitous throughout image editing and graphics software since then. Some of their uses are described <a href="#Use_in_end-user_software">below</a>.<a href="#cite_note-15">[12]</a><a href="#cite_note-16">[13]</a><a href="#cite_note-17">[14]</a><a href="#cite_note-18">[15]</a> <div style="clear:both;" class=""></div> <div class="mw-heading mw-heading2"><h2 id="Formal_derivation">Formal derivation</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=3" title="Edit section: Formal derivation">edit</a>]</div> <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:Hsl-and-hsv.svg" class="mw-file-description"><img alt="A flow-chart–like diagram shows the derivation of HSL, HSV, and a luma/chroma/hue model. At the top lies an RGB "color cube", which as a first step is tilted onto its corner so that black lies at the bottom and white at the top. At the next step, the three models diverge, and the height of red, yellow, green, cyan, blue, and magenta is set based on the formula for lightness, value, or luma: in HSV, all six of these are placed in the plane with white, making an upside-down hexagonal pyramid; in HSL, all six are placed in a plane halfway between white and black, making a bipyramid; in the luma/chroma/hue model, the height is determined by the approximate formula luma equals 0.3 times red plus 0.6 times green plus 0.1 times blue. At the next step, each horizontal slice of HSL and HSV is expanded to fill a uniform-width hexagonal prism, while the luma/chroma/hue model is simply embedded in that prism without modification. As a final step, all three models' hexagonal prisms are warped into cylinders, reflecting the nature of the definition of hue and saturation or chroma. For full details and mathematical formalism, read the rest of this section." src="//upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Hsl-and-hsv.svg/300px-Hsl-and-hsv.svg.png" decoding="async" width="300" height="510" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Hsl-and-hsv.svg/450px-Hsl-and-hsv.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Hsl-and-hsv.svg/600px-Hsl-and-hsv.svg.png 2x" data-file-width="1000" data-file-height="1700" /></a><figcaption>Fig. 8. The geometric derivation of the cylindrical HSL and HSV representations of an RGB "colorcube".</figcaption></figure> <figure class="mw-halign-right" typeof="mw:File/Thumb"><video id="mwe_player_0" poster="//upload.wikimedia.org/wikipedia/commons/thumb/5/59/RGB_2_HSV_conversion_with_grid.ogg/300px--RGB_2_HSV_conversion_with_grid.ogg.jpg" controls="" preload="none" data-mw-tmh="" class="mw-file-element" width="300" height="335" data-durationhint="15" data-mwtitle="RGB_2_HSV_conversion_with_grid.ogg" data-mwprovider="wikimediacommons" resource="/wiki/File:RGB_2_HSV_conversion_with_grid.ogg"><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/5/59/RGB_2_HSV_conversion_with_grid.ogg/RGB_2_HSV_conversion_with_grid.ogg.480p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="480p.vp9.webm" data-width="430" data-height="480" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/5/59/RGB_2_HSV_conversion_with_grid.ogg/RGB_2_HSV_conversion_with_grid.ogg.720p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="720p.vp9.webm" data-width="644" data-height="720" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/5/59/RGB_2_HSV_conversion_with_grid.ogg/RGB_2_HSV_conversion_with_grid.ogg.1080p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="1080p.vp9.webm" data-width="966" data-height="1080" /><source src="//upload.wikimedia.org/wikipedia/commons/5/59/RGB_2_HSV_conversion_with_grid.ogg" type="video/ogg; codecs="theora"" data-width="1300" data-height="1452" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/5/59/RGB_2_HSV_conversion_with_grid.ogg/RGB_2_HSV_conversion_with_grid.ogg.240p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="240p.vp9.webm" data-width="214" data-height="240" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/5/59/RGB_2_HSV_conversion_with_grid.ogg/RGB_2_HSV_conversion_with_grid.ogg.360p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="360p.vp9.webm" data-width="322" data-height="360" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/5/59/RGB_2_HSV_conversion_with_grid.ogg/RGB_2_HSV_conversion_with_grid.ogg.360p.webm" type="video/webm; codecs="vp8, vorbis"" data-transcodekey="360p.webm" data-width="322" data-height="360" /></video><figcaption>Visualised geometric derivation of the cylindrical HSV representation of an RGB "colorcube"</figcaption></figure> <figure class="mw-halign-right" typeof="mw:File/Thumb"><video id="mwe_player_1" poster="//upload.wikimedia.org/wikipedia/commons/thumb/4/46/RGB_2_HSL_conversion_with_grid.ogg/300px--RGB_2_HSL_conversion_with_grid.ogg.jpg" controls="" preload="none" data-mw-tmh="" class="mw-file-element" width="300" height="335" data-durationhint="15" data-mwtitle="RGB_2_HSL_conversion_with_grid.ogg" data-mwprovider="wikimediacommons" resource="/wiki/File:RGB_2_HSL_conversion_with_grid.ogg"><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/4/46/RGB_2_HSL_conversion_with_grid.ogg/RGB_2_HSL_conversion_with_grid.ogg.480p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="480p.vp9.webm" data-width="430" data-height="480" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/4/46/RGB_2_HSL_conversion_with_grid.ogg/RGB_2_HSL_conversion_with_grid.ogg.720p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="720p.vp9.webm" data-width="644" data-height="720" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/4/46/RGB_2_HSL_conversion_with_grid.ogg/RGB_2_HSL_conversion_with_grid.ogg.1080p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="1080p.vp9.webm" data-width="966" data-height="1080" /><source src="//upload.wikimedia.org/wikipedia/commons/4/46/RGB_2_HSL_conversion_with_grid.ogg" type="video/ogg; codecs="theora"" data-width="1300" data-height="1452" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/4/46/RGB_2_HSL_conversion_with_grid.ogg/RGB_2_HSL_conversion_with_grid.ogg.240p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="240p.vp9.webm" data-width="214" data-height="240" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/4/46/RGB_2_HSL_conversion_with_grid.ogg/RGB_2_HSL_conversion_with_grid.ogg.360p.vp9.webm" type="video/webm; codecs="vp9, opus"" data-transcodekey="360p.vp9.webm" data-width="322" data-height="360" /><source src="//upload.wikimedia.org/wikipedia/commons/transcoded/4/46/RGB_2_HSL_conversion_with_grid.ogg/RGB_2_HSL_conversion_with_grid.ogg.360p.webm" type="video/webm; codecs="vp8, vorbis"" data-transcodekey="360p.webm" data-width="322" data-height="360" /></video><figcaption>Visualised geometric derivation of the cylindrical HSL representation of an RGB "colorcube"</figcaption></figure> <div class="mw-heading mw-heading3"><h3 id="Color-making_attributes">Color-making attributes</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=4" title="Edit section: Color-making attributes">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">See also: <a href="/wiki/Color_vision" title="Color vision">Color vision</a></div> The dimensions of the HSL and HSV geometries – simple transformations of the not-perceptually-based RGB model – are not directly related to the <a href="/wiki/Photometry_(optics)" title="Photometry (optics)">photometric</a> color-making attributes of the same names, as defined by scientists such as the <a href="/wiki/International_Commission_on_Illumination" title="International Commission on Illumination">CIE</a> or <a href="/wiki/ASTM_International" title="ASTM International">ASTM</a>. Nonetheless, it is worth reviewing those definitions before leaping into the derivation of our models.<a href="#cite_note-20">[D]</a> For the definitions of color-making attributes which follow, see:<a href="#cite_note-Fairchild-term-19">[16]</a><a href="#cite_note-Kuehni-21">[17]</a><a href="#cite_note-22">[18]</a><a href="#cite_note-23">[19]</a><a href="#cite_note-Poynton-24">[20]</a><a href="#cite_note-25">[21]</a> <dl><dt><a href="/wiki/Hue" title="Hue">Hue</a></dt> <dd>The "attribute of a visual sensation according to which an area appears to be similar to one of the <a href="/wiki/Unique_hues" title="Unique hues">perceived colors</a>: red, yellow, green, and blue, or to a combination of two of them".<a href="#cite_note-Fairchild-term-19">[16]</a></dd> <dt><a href="/wiki/Radiance" title="Radiance">Radiance</a> (Le,Ω)</dt> <dd>The <a href="/wiki/Radiant_flux" title="Radiant flux">radiant power</a> of light passing through a particular surface per unit <a href="/wiki/Solid_angle" title="Solid angle">solid angle</a> per unit projected area, measured in <a href="/wiki/International_System_of_Units" title="International System of Units">SI units</a> in <a href="/wiki/Watt" title="Watt">watt</a> per <a href="/wiki/Steradian" title="Steradian">steradian</a> per <a href="/wiki/Square_metre" title="Square metre">square metre</a> (W·sr−1·m−2).</dd> <dt><a href="/wiki/Luminance" title="Luminance">Luminance</a> (Y or Lv,Ω)</dt> <dd>The radiance weighted by the effect of each wavelength on a typical human observer, measured in SI units in <a href="/wiki/Candela_per_square_metre" title="Candela per square metre">candela per square meter</a> (cd/m2). Often the term luminance is used for the <a href="/wiki/Relative_luminance" title="Relative luminance">relative luminance</a>, Y/Yn, where Yn is the luminance of the reference <a href="/wiki/White_point" title="White point">white point</a>.</dd> <dt><a href="/wiki/Luma_(video)" title="Luma (video)">Luma</a> (Y′)</dt> <dd>The weighted sum of <a href="/wiki/Gamma_correction" title="Gamma correction">gamma-corrected</a> R′, G′, and B′ values, and used in <a href="/wiki/YCbCr" title="YCbCr">Y′CbCr</a>, for <a href="/wiki/JPEG" title="JPEG">JPEG</a> compression and video transmission.</dd> <dt><a href="/wiki/Brightness" title="Brightness">Brightness (or value)</a></dt> <dd>The "attribute of a visual sensation according to which an area appears to emit more or less light".<a href="#cite_note-Fairchild-term-19">[16]</a></dd> <dt><a href="/wiki/Lightness_(color)" class="mw-redirect" title="Lightness (color)">Lightness</a></dt> <dd>The "brightness relative to the brightness of a similarly illuminated white".<a href="#cite_note-Fairchild-term-19">[16]</a></dd> <dt><a href="/wiki/Colorfulness" title="Colorfulness">Colorfulness</a></dt> <dd>The "attribute of a visual sensation according to which the perceived color of an area appears to be more or less chromatic".<a href="#cite_note-Fairchild-term-19">[16]</a></dd> <dt><a href="/wiki/Chrominance" title="Chrominance">Chroma</a></dt> <dd>The "colorfulness relative to the brightness of a similarly illuminated white".<a href="#cite_note-Fairchild-term-19">[16]</a></dd> <dt><a href="/wiki/Colorfulness#Saturation" title="Colorfulness">Saturation</a></dt> <dd>The "colorfulness of a stimulus relative to its own brightness".<a href="#cite_note-Fairchild-term-19">[16]</a></dd></dl> Brightness and colorfulness are absolute measures, which usually describe the <a href="/wiki/Spectral_power_distribution" title="Spectral power distribution">spectral distribution</a> of light entering the eye, while lightness and chroma are measured relative to some white point, and are thus often used for descriptions of surface colors, remaining roughly constant even as brightness and colorfulness change with different <a href="/wiki/Computer_graphics_lighting" title="Computer graphics lighting">illumination</a>. Saturation can be defined as either the ratio of colorfulness to brightness, or that of chroma to lightness. <div class="mw-heading mw-heading3"><h3 id="General_approach">General approach</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=5" title="Edit section: General approach">edit</a>]</div> HSL, HSV, and related models can be derived via geometric strategies, or can be thought of as specific instances of a "generalized LHS model". The HSL and HSV model-builders took an RGB cube – with constituent amounts of red, green, and blue light in a color denoted R, G, B <a href="/wiki/%E2%88%88" class="mw-redirect" title="∈">∈</a> <a href="/wiki/Unit_interval" title="Unit interval">[0, 1]</a><a href="#cite_note-26">[E]</a> – and tilted it on its corner, so that black rested at the origin with white directly above it along the vertical axis, then measured the hue of the colors in the cube by their angle around that axis, starting with red at 0°. Then they came up with a characterization of brightness/value/lightness, and defined saturation to range from 0 along the axis to 1 at the most colorful point for each pair of other parameters.<a href="#cite_note-Levkowitz-4">[2]</a><a href="#cite_note-Smith-13">[10]</a><a href="#cite_note-Joblove-14">[11]</a> <div class="mw-heading mw-heading3"><h3 id="Hue_and_chroma">Hue and chroma</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=6" title="Edit section: Hue and chroma">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">See also: <a href="/wiki/Hue" title="Hue">Hue</a> and <a href="/wiki/Chrominance" title="Chrominance">Chrominance</a></div> <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:HSL-HSV_hue_and_chroma.svg" class="mw-file-description"><img alt="When an RGB cube, tilted so that its white corner rests vertically above its black corner, is projected into the plane perpendicular to that neutral axis, it makes the shape of a hexagon, with red, yellow, green, cyan, blue, and magenta arranged counterclockwise at its corners. This projection defines the hue and chroma of any color, as described in the caption and article text." src="//upload.wikimedia.org/wikipedia/commons/thumb/5/52/HSL-HSV_hue_and_chroma.svg/300px-HSL-HSV_hue_and_chroma.svg.png" decoding="async" width="300" height="600" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/52/HSL-HSV_hue_and_chroma.svg/450px-HSL-HSV_hue_and_chroma.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/52/HSL-HSV_hue_and_chroma.svg/600px-HSL-HSV_hue_and_chroma.svg.png 2x" data-file-width="350" data-file-height="700" /></a><figcaption>Fig. 9. Both hue and chroma are defined based on the projection of the RGB cube onto a hexagon in the "chromaticity plane". Chroma is the relative size of the hexagon passing through a point, and hue is how far around that hexagon's edge the point lies.</figcaption></figure> In each of our models, we calculate both hue and what this article will call <a href="/wiki/Colorfulness" title="Colorfulness">chroma</a>, after Joblove and Greenberg (1978), in the same way – that is, the hue of a color has the same numerical values in all of these models, as does its chroma. If we take our tilted RGB cube, and <a href="/wiki/3D_projection" title="3D projection">project</a> it onto the "chromaticity <a href="/wiki/Plane_(geometry)" class="mw-redirect" title="Plane (geometry)">plane</a>" <a href="/wiki/Perpendicular" title="Perpendicular">perpendicular</a> to the neutral axis, our projection takes the shape of a hexagon, with red, yellow, green, cyan, blue, and magenta at its corners (fig. 9). Hue is roughly the angle of the <a href="/wiki/Euclidean_vector" title="Euclidean vector">vector</a> to a point in the projection, with red at 0°, while chroma is roughly the distance of the point from the origin.<a href="#cite_note-27">[F]</a><a href="#cite_note-formulasources-28">[G]</a> More precisely, both hue and chroma in this model are defined with respect to the hexagonal shape of the projection. The chroma is the proportion of the distance from the origin to the edge of the hexagon. In the lower part of the adjacent diagram, this is the ratio of lengths OP/OP′, or alternatively the ratio of the radii of the two hexagons. This ratio is the difference between the largest and smallest values among R, G, or B in a color. To make our definitions easier to write, we'll define these maximum, minimum, and chroma component values as M, m, and C, respectively.<a href="#cite_note-29">[H]</a> <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle M=\max(R,G,B)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>M</mi> <mo>=</mo> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle M=\max(R,G,B)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/91c8da981ac7e7dcd4df6decf436256d1dcb20fe" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:19.098ex; height:2.843ex;" alt="{\displaystyle M=\max(R,G,B)}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle m=\min(R,G,B)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>m</mi> <mo>=</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle m=\min(R,G,B)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/99ad060aae160f4cff9a662fafb4b5409f34f0d4" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:18.246ex; height:2.843ex;" alt="{\displaystyle m=\min(R,G,B)}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle C=\operatorname {range} (R,G,B)=M-m}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>C</mi> <mo>=</mo> <mi>range</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mi>M</mi> <mo>−</mo> <mi>m</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle C=\operatorname {range} (R,G,B)=M-m}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/b6c13425f99e08018e250adcebbeb438007eeda3" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:30.08ex; height:2.843ex;" alt="{\displaystyle C=\operatorname {range} (R,G,B)=M-m}"></dd></dl> To understand why chroma can be written as M − m, notice that any neutral color, with R = G = B, projects onto the origin and so has 0 chroma. Thus if we add or subtract the same amount from all three of R, G, and B, we move vertically within our tilted cube, and do not change the projection. Therefore, any two colors of (R, G, B) and (R − m, G − m, B − m) project on the same point, and have the same chroma. The chroma of a color with one of its components equal to zero (m = 0) is simply the maximum of the other two components. This chroma is M in the particular case of a color with a zero component, and M − m in general. The hue is the proportion of the distance around the edge of the hexagon which passes through the projected point, originally measured on the range [0, 1] but now typically measured in <a href="/wiki/Degree_(angle)" title="Degree (angle)">degrees</a> [0°, 360°). For points which project onto the origin in the chromaticity plane (i.e., grays), hue is undefined. Mathematically, this definition of hue is written <a href="/wiki/Piecewise" class="mw-redirect" title="Piecewise">piecewise</a>:<a href="#cite_note-30">[I]</a> <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H'={\begin{cases}\mathrm {undefined} ,&{\text{if }}C=0\\{\frac {G-B}{C}}{\bmod {6}},&{\text{if }}M=R\\{\frac {B-R}{C}}+2,&{\text{if }}M=G\\{\frac {R-G}{C}}+4,&{\text{if }}M=B\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mo>′</mo> </msup> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mi mathvariant="normal">u</mi> <mi mathvariant="normal">n</mi> <mi mathvariant="normal">d</mi> <mi mathvariant="normal">e</mi> <mi mathvariant="normal">f</mi> <mi mathvariant="normal">i</mi> <mi mathvariant="normal">n</mi> <mi mathvariant="normal">e</mi> <mi mathvariant="normal">d</mi> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>C</mi> <mo>=</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mi>G</mi> <mo>−</mo> <mi>B</mi> </mrow> <mi>C</mi> </mfrac> </mrow> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>6</mn> </mrow> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>M</mi> <mo>=</mo> <mi>R</mi> </mtd> </mtr> <mtr> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mi>B</mi> <mo>−</mo> <mi>R</mi> </mrow> <mi>C</mi> </mfrac> </mrow> <mo>+</mo> <mn>2</mn> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>M</mi> <mo>=</mo> <mi>G</mi> </mtd> </mtr> <mtr> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mi>R</mi> <mo>−</mo> <mi>G</mi> </mrow> <mi>C</mi> </mfrac> </mrow> <mo>+</mo> <mn>4</mn> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>M</mi> <mo>=</mo> <mi>B</mi> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H'={\begin{cases}\mathrm {undefined} ,&{\text{if }}C=0\\{\frac {G-B}{C}}{\bmod {6}},&{\text{if }}M=R\\{\frac {B-R}{C}}+2,&{\text{if }}M=G\\{\frac {R-G}{C}}+4,&{\text{if }}M=B\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/6bd5e3543ebfcb589fbb1945b4ce47305fa62e02" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -6.354ex; margin-bottom: -0.317ex; width:32.478ex; height:14.509ex;" alt="{\displaystyle H'={\begin{cases}\mathrm {undefined} ,&{\text{if }}C=0\\{\frac {G-B}{C}}{\bmod {6}},&{\text{if }}M=R\\{\frac {B-R}{C}}+2,&{\text{if }}M=G\\{\frac {R-G}{C}}+4,&{\text{if }}M=B\end{cases}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H=60^{\circ }\times H'}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>H</mi> <mo>=</mo> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo>×</mo> <msup> <mi>H</mi> <mo>′</mo> </msup> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H=60^{\circ }\times H'}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/cca6421f5d6ac21b49ce0d19c8b4d952eca1268a" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:14.17ex; height:2.509ex;" alt="{\displaystyle H=60^{\circ }\times H'}"></dd></dl> Sometimes, neutral colors (i.e. with C = 0) are assigned a hue of 0° for convenience of representation. <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:Hsv-hexagons-to-circles.svg" class="mw-file-description"><img alt="Pictured at left is the hexagonal projection shown earlier. At right, each side of the hexagon has been changed into a 60° arc of a circle with the same radius." src="//upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hsv-hexagons-to-circles.svg/300px-Hsv-hexagons-to-circles.svg.png" decoding="async" width="300" height="130" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hsv-hexagons-to-circles.svg/450px-Hsv-hexagons-to-circles.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/33/Hsv-hexagons-to-circles.svg/600px-Hsv-hexagons-to-circles.svg.png 2x" data-file-width="740" data-file-height="320" /></a><figcaption>Fig. 10. The definitions of hue and chroma in HSL and HSV have the effect of warping hexagons into circles.</figcaption></figure> These definitions amount to a geometric warping of hexagons into circles: each side of the hexagon is mapped linearly onto a 60° arc of the circle (fig. 10). After such a transformation, hue is precisely the angle around the origin and chroma the distance from the origin: the angle and magnitude of the <a href="/wiki/Euclidean_vector" title="Euclidean vector">vector</a> pointing to a color. <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:Hsv-polar-coord-hue-chroma.svg" class="mw-file-description"><img alt="Instead of measuring hue and chroma with reference to the hexagonal edge of the projection of the RGB cube into the plane perpendicular to its neutral axis, we can define chromaticity coordinates alpha and beta in the plane – with alpha pointing in the direction of red, and beta perpendicular to it – and then define hue H2 and chroma C2 as the polar coordinates of these. That is, the tangent of hue is beta over alpha, and chroma squared is alpha squared plus beta squared." src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Hsv-polar-coord-hue-chroma.svg/300px-Hsv-polar-coord-hue-chroma.svg.png" decoding="async" width="300" height="185" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Hsv-polar-coord-hue-chroma.svg/450px-Hsv-polar-coord-hue-chroma.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Hsv-polar-coord-hue-chroma.svg/600px-Hsv-polar-coord-hue-chroma.svg.png 2x" data-file-width="520" data-file-height="320" /></a><figcaption>Fig. 11. Constructing rectangular chromaticity coordinates α and β, and then transforming those into hue H2 and chroma C2 yields slightly different values than computing hexagonal hue H and chroma C: compare the numbers in this diagram to those earlier in this section.</figcaption></figure> Sometimes for image analysis applications, this hexagon-to-circle transformation is skipped, and hue and chroma (we'll denote these H2 and C2) are defined by the usual cartesian-to-polar coordinate transformations (fig. 11). The easiest way to derive those is via a pair of cartesian chromaticity coordinates which we'll call α and β:<a href="#cite_note-Hanbury2002-31">[22]</a><a href="#cite_note-Hanbury2008-32">[23]</a><a href="#cite_note-33">[24]</a> <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle \alpha =R-G\cdot \cos(60^{\circ })-B\cdot \cos(60^{\circ })={\tfrac {1}{2}}(2R-G-B)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>α</mi> <mo>=</mo> <mi>R</mi> <mo>−</mo> <mi>G</mi> <mo>⋅</mo> <mi>cos</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo stretchy="false">)</mo> <mo>−</mo> <mi>B</mi> <mo>⋅</mo> <mi>cos</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="false" scriptlevel="0"> <mfrac> <mn>1</mn> <mn>2</mn> </mfrac> </mstyle> </mrow> <mo stretchy="false">(</mo> <mn>2</mn> <mi>R</mi> <mo>−</mo> <mi>G</mi> <mo>−</mo> <mi>B</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle \alpha =R-G\cdot \cos(60^{\circ })-B\cdot \cos(60^{\circ })={\tfrac {1}{2}}(2R-G-B)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/daadffe2cad4b9951c8b57721d2da37f05ce437f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.171ex; width:54.343ex; height:3.509ex;" alt="{\displaystyle \alpha =R-G\cdot \cos(60^{\circ })-B\cdot \cos(60^{\circ })={\tfrac {1}{2}}(2R-G-B)}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle \beta =G\cdot \sin(60^{\circ })-B\cdot \sin(60^{\circ })={\tfrac {\sqrt {3}}{2}}(G-B)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>β</mi> <mo>=</mo> <mi>G</mi> <mo>⋅</mo> <mi>sin</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo stretchy="false">)</mo> <mo>−</mo> <mi>B</mi> <mo>⋅</mo> <mi>sin</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="false" scriptlevel="0"> <mfrac> <msqrt> <mn>3</mn> </msqrt> <mn>2</mn> </mfrac> </mstyle> </mrow> <mo stretchy="false">(</mo> <mi>G</mi> <mo>−</mo> <mi>B</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle \beta =G\cdot \sin(60^{\circ })-B\cdot \sin(60^{\circ })={\tfrac {\sqrt {3}}{2}}(G-B)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/febe882e7bb498760ea34b07b51ab112a71a3179" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.171ex; width:44.674ex; height:4.176ex;" alt="{\displaystyle \beta =G\cdot \sin(60^{\circ })-B\cdot \sin(60^{\circ })={\tfrac {\sqrt {3}}{2}}(G-B)}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H_{2}=\operatorname {atan2} (\beta ,\alpha )}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </msub> <mo>=</mo> <mi>atan2</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <mi>β</mi> <mo>,</mo> <mi>α</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H_{2}=\operatorname {atan2} (\beta ,\alpha )}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d6fae9354ea0a544d1c46421801f09ea301bb7ea" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:17.431ex; height:2.843ex;" alt="{\displaystyle H_{2}=\operatorname {atan2} (\beta ,\alpha )}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle C_{2}=\operatorname {gmean} (\alpha ,\beta )={\sqrt {\alpha ^{2}+\beta ^{2}}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>C</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </msub> <mo>=</mo> <mi>gmean</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <mi>α</mi> <mo>,</mo> <mi>β</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <msqrt> <msup> <mi>α</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </msup> <mo>+</mo> <msup> <mi>β</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </msup> </msqrt> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle C_{2}=\operatorname {gmean} (\alpha ,\beta )={\sqrt {\alpha ^{2}+\beta ^{2}}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/f8e503f774c6e4ef8987242bfb0b92a8dee70655" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.671ex; width:31.259ex; height:4.843ex;" alt="{\displaystyle C_{2}=\operatorname {gmean} (\alpha ,\beta )={\sqrt {\alpha ^{2}+\beta ^{2}}}}"></dd></dl> (The <a href="/wiki/Atan2" title="Atan2">atan2</a> function, a "two-argument arctangent", computes the angle from a cartesian coordinate pair.) Notice that these two definitions of hue (H and H2) nearly coincide, with a maximum difference between them for any color of about 1.12° – which occurs at twelve particular hues, for instance H = 13.38°, H2 = 12.26° – and with H = H2 for every multiple of 30°. The two definitions of chroma (C and C2) differ more substantially: they are equal at the corners of our hexagon, but at points halfway between two corners, such as H = H2 = 30°, we have C = 1, but <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\textstyle C_{2}={\sqrt {\frac {3}{4}}}\approx 0.866,}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="false" scriptlevel="0"> <msub> <mi>C</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </msub> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <msqrt> <mfrac> <mn>3</mn> <mn>4</mn> </mfrac> </msqrt> </mrow> <mo>≈</mo> <mn>0.866</mn> <mo>,</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\textstyle C_{2}={\sqrt {\frac {3}{4}}}\approx 0.866,}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/2ed8d8ea704a165c77311afd59614d367655d288" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.671ex; width:18.838ex; height:4.843ex;" alt="{\textstyle C_{2}={\sqrt {\frac {3}{4}}}\approx 0.866,}"> a difference of about 13.4%. <div class="mw-heading mw-heading3"><h3 id="Lightness"> Lightness</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=7" title="Edit section: Lightness">edit</a>]</div> <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:Hsl-hsv_chroma-lightness_slices.svg" class="mw-file-description"><img alt="When we plot HSV value against chroma, the result, regardless of hue, is an upside-down isosceles triangle, with black at the bottom, and white at the top bracketed by the most chromatic colors of two complementary hues at the top right and left corners. When we plot HSL lightness against chroma, the result is a rhombus, again with black at the bottom and white at the top, but with the colorful complements at horizontal ends of the line halfway between them. When we plot the component average, sometimes called HSI intensity, against chroma, the result is a parallelogram whose shape changes depending on hue, as the most chromatic colors for each hue vary between one third and two thirds between black and white. Plotting luma against chroma yields a parallelogram of much more diverse shape: blue lies about 10 percent of the way from black to white, while its complement yellow lies 90 percent of the way there; by contrast, green is about 60 percent of the way from black to white while its complement magenta is 40 percent of the way there." src="//upload.wikimedia.org/wikipedia/commons/thumb/0/07/Hsl-hsv_chroma-lightness_slices.svg/300px-Hsl-hsv_chroma-lightness_slices.svg.png" decoding="async" width="300" height="360" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/07/Hsl-hsv_chroma-lightness_slices.svg/450px-Hsl-hsv_chroma-lightness_slices.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/07/Hsl-hsv_chroma-lightness_slices.svg/600px-Hsl-hsv_chroma-lightness_slices.svg.png 2x" data-file-width="500" data-file-height="600" /></a><figcaption>Fig. 12a–d. Four different possible "lightness" dimensions, plotted against chroma, for a pair of complementary hues. Each plot is a vertical cross-section of its three-dimensional color solid.</figcaption></figure> While the definition of hue is relatively uncontroversial – it roughly satisfies the criterion that colors of the same perceived hue should have the same numerical hue – the definition of a lightness or value dimension is less obvious: there are several possibilities depending on the purpose and goals of the representation. Here are four of the most common (fig. 12; three of these are also shown in <a href="#Color-making_attributes">fig. 8</a>): <ul><li>The simplest definition is just the <a href="/wiki/Arithmetic_mean" title="Arithmetic mean">arithmetic mean</a>, i.e. average, of the three components, in the HSI model called intensity (fig. 12a). This is simply the projection of a point onto the neutral axis – the vertical height of a point in our tilted cube. The advantage is that, together with Euclidean-distance calculations of hue and chroma, this representation preserves distances and angles from the geometry of the RGB cube.<a href="#cite_note-Hanbury2008-32">[23]</a><a href="#cite_note-34">[25]</a> <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle I=\operatorname {avg} (R,G,B)={\tfrac {1}{3}}(R+G+B)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>I</mi> <mo>=</mo> <mi>avg</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="false" scriptlevel="0"> <mfrac> <mn>1</mn> <mn>3</mn> </mfrac> </mstyle> </mrow> <mo stretchy="false">(</mo> <mi>R</mi> <mo>+</mo> <mi>G</mi> <mo>+</mo> <mi>B</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle I=\operatorname {avg} (R,G,B)={\tfrac {1}{3}}(R+G+B)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/84ed492d04975707f3ace3bd1cc8b03ed95a7119" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.338ex; width:34.656ex; height:3.676ex;" alt="{\displaystyle I=\operatorname {avg} (R,G,B)={\tfrac {1}{3}}(R+G+B)}"></dd></dl></li> <li>In the HSV "hexcone" model, value is defined as the largest component of a color, our M above (fig. 12b). This places all three primaries, and also all of the "secondary colors" – cyan, yellow, and magenta – into a plane with white, forming a <a href="/wiki/Hexagonal_pyramid" title="Hexagonal pyramid">hexagonal pyramid</a> out of the RGB cube.<a href="#cite_note-Smith-13">[10]</a> <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle V=\max(R,G,B)=M}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>V</mi> <mo>=</mo> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mi>M</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle V=\max(R,G,B)=M}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d238388f7551a69b2e80657a718455d1e883a1b9" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:23.984ex; height:2.843ex;" alt="{\displaystyle V=\max(R,G,B)=M}"></dd></dl></li> <li>In the HSL "bi-hexcone" model, lightness is defined as the average of the largest and smallest color components (fig. 12c), i.e. the <a href="/wiki/Mid-range" title="Mid-range">mid-range</a> of the RGB components. This definition also puts the primary and secondary colors into a plane, but a plane passing halfway between white and black. The resulting color solid is a double-cone similar to Ostwald's, <a href="#Motivation">shown above</a>.<a href="#cite_note-Joblove-14">[11]</a> <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle L=\operatorname {mid} (R,G,B)={\tfrac {1}{2}}(M+m)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>L</mi> <mo>=</mo> <mi>mid</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="false" scriptlevel="0"> <mfrac> <mn>1</mn> <mn>2</mn> </mfrac> </mstyle> </mrow> <mo stretchy="false">(</mo> <mi>M</mi> <mo>+</mo> <mi>m</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle L=\operatorname {mid} (R,G,B)={\tfrac {1}{2}}(M+m)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/ec4d7f3233b1387bb2aaf0827aaf4e90508d1e76" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.171ex; width:31.677ex; height:3.509ex;" alt="{\displaystyle L=\operatorname {mid} (R,G,B)={\tfrac {1}{2}}(M+m)}"></dd></dl></li> <li>A more perceptually relevant alternative is to use <a href="/wiki/Luma_(video)" title="Luma (video)">luma</a>, Y′, as a lightness dimension (fig. 12d). Luma is the <a href="/wiki/Weighted_average" class="mw-redirect" title="Weighted average">weighted average</a> of gamma-corrected R, G, and B, based on their contribution to perceived lightness, long used as the monochromatic dimension in color television broadcast. For <a href="/wiki/SRGB" title="SRGB">sRGB</a>, the <a href="/wiki/Rec._709" title="Rec. 709">Rec. 709</a> primaries yield Y′709, digital <a href="/wiki/NTSC" title="NTSC">NTSC</a> uses Y′601 according to <a href="/wiki/Rec._601" title="Rec. 601">Rec. 601</a> and some other primaries are also in use which result in different coefficients.<a href="#cite_note-35">[26]</a><a href="#cite_note-37">[J]</a> <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle Y'_{\text{601}}=0.299\cdot R+0.587\cdot G+0.114\cdot B}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msubsup> <mi>Y</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>601</mtext> </mrow> <mo>′</mo> </msubsup> <mo>=</mo> <mn>0.299</mn> <mo>⋅</mo> <mi>R</mi> <mo>+</mo> <mn>0.587</mn> <mo>⋅</mo> <mi>G</mi> <mo>+</mo> <mn>0.114</mn> <mo>⋅</mo> <mi>B</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle Y'_{\text{601}}=0.299\cdot R+0.587\cdot G+0.114\cdot B}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/5b76bd62f71509bf61ce3eb43d50d33fb8959f92" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.005ex; width:39.11ex; height:2.843ex;" alt="{\displaystyle Y'_{\text{601}}=0.299\cdot R+0.587\cdot G+0.114\cdot B}"> (SDTV)</dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle Y'_{\text{240}}=0.212\cdot R+0.701\cdot G+0.087\cdot B}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msubsup> <mi>Y</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>240</mtext> </mrow> <mo>′</mo> </msubsup> <mo>=</mo> <mn>0.212</mn> <mo>⋅</mo> <mi>R</mi> <mo>+</mo> <mn>0.701</mn> <mo>⋅</mo> <mi>G</mi> <mo>+</mo> <mn>0.087</mn> <mo>⋅</mo> <mi>B</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle Y'_{\text{240}}=0.212\cdot R+0.701\cdot G+0.087\cdot B}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/9e7d527242b95410a98ccbce56669310dc7581bd" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.005ex; width:39.11ex; height:2.843ex;" alt="{\displaystyle Y'_{\text{240}}=0.212\cdot R+0.701\cdot G+0.087\cdot B}"> <a href="/wiki/Adobe_RGB_color_space" title="Adobe RGB color space">(Adobe)</a></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle Y'_{\text{709}}=0.2126\cdot R+0.7152\cdot G+0.0722\cdot B}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msubsup> <mi>Y</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>709</mtext> </mrow> <mo>′</mo> </msubsup> <mo>=</mo> <mn>0.2126</mn> <mo>⋅</mo> <mi>R</mi> <mo>+</mo> <mn>0.7152</mn> <mo>⋅</mo> <mi>G</mi> <mo>+</mo> <mn>0.0722</mn> <mo>⋅</mo> <mi>B</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle Y'_{\text{709}}=0.2126\cdot R+0.7152\cdot G+0.0722\cdot B}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/540c5e278e65cdf8e82b854c63d16389a91a1ffb" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.005ex; width:42.597ex; height:2.843ex;" alt="{\displaystyle Y'_{\text{709}}=0.2126\cdot R+0.7152\cdot G+0.0722\cdot B}"> <a href="/wiki/Rec._709" title="Rec. 709">(HDTV)</a></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle Y'_{\text{2020}}=0.2627\cdot R+0.6780\cdot G+0.0593\cdot B}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msubsup> <mi>Y</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>2020</mtext> </mrow> <mo>′</mo> </msubsup> <mo>=</mo> <mn>0.2627</mn> <mo>⋅</mo> <mi>R</mi> <mo>+</mo> <mn>0.6780</mn> <mo>⋅</mo> <mi>G</mi> <mo>+</mo> <mn>0.0593</mn> <mo>⋅</mo> <mi>B</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle Y'_{\text{2020}}=0.2627\cdot R+0.6780\cdot G+0.0593\cdot B}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/adf730112885530461ec3d9bde50a6fcdbbaa57e" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.005ex; width:43.419ex; height:2.843ex;" alt="{\displaystyle Y'_{\text{2020}}=0.2627\cdot R+0.6780\cdot G+0.0593\cdot B}"> <a href="/wiki/Rec._2020" title="Rec. 2020">(UHDTV, HDR)</a></dd></dl></li></ul> All four of these leave the neutral axis alone. That is, for colors with R = G = B, any of the four formulations yields a lightness equal to the value of R, G, or B. For a graphical comparison, see <a href="#Disadvantages">fig. 13 below</a>. <div style="clear:both;" class=""></div> <div class="mw-heading mw-heading3"><h3 id="Saturation">Saturation</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=8" title="Edit section: Saturation">edit</a>]</div> <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:Hsl-hsv_saturation-lightness_slices.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Hsl-hsv_saturation-lightness_slices.svg/300px-Hsl-hsv_saturation-lightness_slices.svg.png" decoding="async" width="300" height="360" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Hsl-hsv_saturation-lightness_slices.svg/450px-Hsl-hsv_saturation-lightness_slices.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Hsl-hsv_saturation-lightness_slices.svg/600px-Hsl-hsv_saturation-lightness_slices.svg.png 2x" data-file-width="500" data-file-height="600" /></a><figcaption>Fig. 14a–d. In both HSL and HSV, saturation is simply the chroma scaled to fill the interval [0, 1] for every combination of hue and lightness or value.</figcaption></figure> When encoding colors in a hue/lightness/chroma or hue/value/chroma model (using the definitions from the previous two sections), not all combinations of lightness (or value) and chroma are meaningful: that is, half of the colors denotable using H ∈ [0°, 360°), C ∈ [0, 1], and V ∈ [0, 1] fall outside the RGB gamut (the gray parts of the slices in figure 14). The creators of these models considered this a problem for some uses. For example, in a color selection interface with two of the dimensions in a rectangle and the third on a slider, half of that rectangle is made of unused space. Now imagine we have a slider for lightness: the user's intent when adjusting this slider is potentially ambiguous: how should the software deal with out-of-gamut colors? Or conversely, If the user has selected as colorful as possible a dark purple  , and then shifts the lightness slider upward, what should be done: would the user prefer to see a lighter purple still as colorful as possible for the given hue and lightness  , or a lighter purple of exactly the same chroma as the original color  ?<a href="#cite_note-Joblove-14">[11]</a> To solve problems such as these, the HSL and HSV models scale the chroma so that it always fits into the range [0, 1] for every combination of hue and lightness or value, calling the new attribute saturation in both cases (fig. 14). To calculate either, simply divide the chroma by the maximum chroma for that value or lightness. <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S_{V}={\begin{cases}0,&{\text{if }}V=0\\{\frac {C}{V}},&{\text{otherwise}}\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mn>0</mn> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>V</mi> <mo>=</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>C</mi> <mi>V</mi> </mfrac> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>otherwise</mtext> </mrow> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S_{V}={\begin{cases}0,&{\text{if }}V=0\\{\frac {C}{V}},&{\text{otherwise}}\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/8a2877aeb4f011b2078e8c5d8f27f9cb93ef5644" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.671ex; width:23.16ex; height:6.509ex;" alt="{\displaystyle S_{V}={\begin{cases}0,&{\text{if }}V=0\\{\frac {C}{V}},&{\text{otherwise}}\end{cases}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S_{L}={\begin{cases}0,&{\text{if }}L=1{\text{ or }}L=0\\{\frac {C}{1-|2L-1|}},&{\text{otherwise}}\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mn>0</mn> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>L</mi> <mo>=</mo> <mn>1</mn> <mrow class="MJX-TeXAtom-ORD"> <mtext> or </mtext> </mrow> <mi>L</mi> <mo>=</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>C</mi> <mrow> <mn>1</mn> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> <mn>2</mn> <mi>L</mi> <mo>−</mo> <mn>1</mn> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> </mrow> </mfrac> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>otherwise</mtext> </mrow> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S_{L}={\begin{cases}0,&{\text{if }}L=1{\text{ or }}L=0\\{\frac {C}{1-|2L-1|}},&{\text{otherwise}}\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d17369ca3b68b6e6d4b8de4a6b7a04881bdbf492" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -3.171ex; width:36.224ex; height:7.509ex;" alt="{\displaystyle S_{L}={\begin{cases}0,&{\text{if }}L=1{\text{ or }}L=0\\{\frac {C}{1-|2L-1|}},&{\text{otherwise}}\end{cases}}}"></dd></dl> <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:Hsi_saturation-intensity_slices.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/55/Hsi_saturation-intensity_slices.svg/300px-Hsi_saturation-intensity_slices.svg.png" decoding="async" width="300" height="192" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/55/Hsi_saturation-intensity_slices.svg/450px-Hsi_saturation-intensity_slices.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/55/Hsi_saturation-intensity_slices.svg/600px-Hsi_saturation-intensity_slices.svg.png 2x" data-file-width="500" data-file-height="320" /></a><figcaption>Fig. 15a–b. In HSI, saturation, shown in the slice on the right, is roughly the chroma relative to lightness. Also common is a model with dimensions I, H2, C2, shown in the slice on the left. Notice that the hue in these slices is the same as the hue above, but H differs slightly from H2.</figcaption></figure> The HSI model commonly used for computer vision, which takes H2 as a hue dimension and the component average I ("intensity") as a lightness dimension, does not attempt to "fill" a cylinder by its definition of saturation. Instead of presenting color choice or modification interfaces to end users, the goal of HSI is to facilitate separation of shapes in an image. Saturation is therefore defined in line with the psychometric definition: chroma relative to lightness (fig. 15). See the <a href="#Use_in_image_analysis">Use in image analysis</a> section of this article.<a href="#cite_note-Cheng-38">[28]</a> <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S_{I}={\begin{cases}0,&{\text{if }}I=0\\1-{\frac {m}{I}},&{\text{otherwise}}\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>I</mi> </mrow> </msub> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mn>0</mn> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>I</mi> <mo>=</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd> <mn>1</mn> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>m</mi> <mi>I</mi> </mfrac> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>otherwise</mtext> </mrow> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S_{I}={\begin{cases}0,&{\text{if }}I=0\\1-{\frac {m}{I}},&{\text{otherwise}}\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/7cebfcfcf0c65848f38cbfe56be5ee861c7b3da1" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.505ex; width:26.907ex; height:6.176ex;" alt="{\displaystyle S_{I}={\begin{cases}0,&{\text{if }}I=0\\1-{\frac {m}{I}},&{\text{otherwise}}\end{cases}}}"></dd></dl> Using the same name for these three different definitions of saturation leads to some confusion, as the three attributes describe substantially different color relationships; in HSV and HSI, the term roughly matches the psychometric definition, of a chroma of a color relative to its own lightness, but in HSL it does not come close. Even worse, the word saturation is also often used for one of the measurements we call chroma above (C or C2). <div class="mw-heading mw-heading3"><h3 id="Examples">Examples</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=9" title="Edit section: Examples">edit</a>]</div> All parameter values shown below are given as values in the <a href="/wiki/Interval_(mathematics)" title="Interval (mathematics)">interval</a> [0, 1], except those for H and H2, which are in the interval [0°, 360°).<a href="#cite_note-39">[K]</a> <table class="wikitable" style="text-align:right;" cellpadding="6"> <tbody><tr style="text-align:center;vertical-align:baseline;"> <th>Color </th> <th style="min-width:3.2em;">R </th> <th style="min-width:3.2em;">G </th> <th style="min-width:3.2em;">B </th> <th style="min-width:3.2em;">H </th> <th style="min-width:3.2em;">H2 </th> <th style="min-width:3.2em;">C </th> <th style="min-width:3.2em;">C2 </th> <th style="min-width:3.2em;">V </th> <th style="min-width:3.2em;">L </th> <th style="min-width:3.2em;">I </th> <th style="min-width:3.2em;">Y′601 </th> <th style="min-width:3.2em;">SHSV </th> <th style="min-width:3.2em;">SHSL </th> <th style="min-width:3.2em;">SHSI </th></tr> <tr> <td style="background-color:#FFFFFF; color:#FFFFFF" title="#FFFFFF">#FFFFFF </td> <td>1.000 </td> <td>1.000 </td> <td>1.000 </td> <td style="padding-right:.5em;">n/a </td> <td style="padding-right:.5em;">n/a </td> <td>0.000 </td> <td>0.000 </td> <td>1.000 </td> <td>1.000 </td> <td>1.000 </td> <td>1.000 </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td></tr> <tr> <td style="background-color:#808080; color:#808080" title="#808080">#808080 </td> <td>0.500 </td> <td>0.500 </td> <td>0.500 </td> <td style="padding-right:.5em;">n/a </td> <td style="padding-right:.5em;">n/a </td> <td>0.000 </td> <td>0.000 </td> <td>0.500 </td> <td>0.500 </td> <td>0.500 </td> <td>0.500 </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td></tr> <tr> <td style="background-color:#000000; color:#000000" title="#000000">#000000 </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td> <td style="padding-right:.5em;">n/a </td> <td style="padding-right:.5em;">n/a </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td> <td>0.000 </td></tr> <tr> <td style="background-color:#FF0000; color:#FF0000" title="#FF0000">#FF0000 </td> <td>1.000 </td> <td>0.000 </td> <td>0.000 </td> <td>0.0° </td> <td>0.0° </td> <td>1.000 </td> <td>1.000 </td> <td>1.000 </td> <td>0.500 </td> <td>0.333 </td> <td>0.299 </td> <td>1.000 </td> <td>1.000 </td> <td>1.000 </td></tr> <tr> <td style="background-color:#BFBF00; color:#BFBF00" title="#BFBF00">#BFBF00 </td> <td>0.750 </td> <td>0.750 </td> <td>0.000 </td> <td>60.0° </td> <td>60.0° </td> <td>0.750 </td> <td>0.750 </td> <td>0.750 </td> <td>0.375 </td> <td>0.500 </td> <td>0.664 </td> <td>1.000 </td> <td>1.000 </td> <td>1.000 </td></tr> <tr> <td style="background-color:#008000; color:#008000" title="#008000">#008000 </td> <td>0.000 </td> <td>0.500 </td> <td>0.000 </td> <td>120.0° </td> <td>120.0° </td> <td>0.500 </td> <td>0.500 </td> <td>0.500 </td> <td>0.250 </td> <td>0.167 </td> <td>0.293 </td> <td>1.000 </td> <td>1.000 </td> <td>1.000 </td></tr> <tr> <td style="background-color:#80FFFF; color:#80FFFF" title="#80FFFF">#80FFFF </td> <td>0.500 </td> <td>1.000 </td> <td>1.000 </td> <td>180.0° </td> <td>180.0° </td> <td>0.500 </td> <td>0.500 </td> <td>1.000 </td> <td>0.750 </td> <td>0.833 </td> <td>0.850 </td> <td>0.500 </td> <td>1.000 </td> <td>0.400 </td></tr> <tr> <td style="background-color:#8080FF; color:#8080FF" title="#8080FF">#8080FF </td> <td>0.500 </td> <td>0.500 </td> <td>1.000 </td> <td>240.0° </td> <td>240.0° </td> <td>0.500 </td> <td>0.500 </td> <td>1.000 </td> <td>0.750 </td> <td>0.667 </td> <td>0.557 </td> <td>0.500 </td> <td>1.000 </td> <td>0.250 </td></tr> <tr> <td style="background-color:#BF40BF; color:#BF40BF" title="#BF40BF">#BF40BF </td> <td>0.750 </td> <td>0.250 </td> <td>0.750 </td> <td>300.0° </td> <td>300.0° </td> <td>0.500 </td> <td>0.500 </td> <td>0.750 </td> <td>0.500 </td> <td>0.583 </td> <td>0.457 </td> <td>0.667 </td> <td>0.500 </td> <td>0.571 </td></tr> <tr> <td style="background-color:#A0A424; color:#A0A424" title="#A0A424">#A0A424 </td> <td>0.628 </td> <td>0.643 </td> <td>0.142 </td> <td>61.8° </td> <td>61.5° </td> <td>0.501 </td> <td>0.494 </td> <td>0.643 </td> <td>0.393 </td> <td>0.471 </td> <td>0.581 </td> <td>0.779 </td> <td>0.638 </td> <td>0.699 </td></tr> <tr> <td style="background-color:#411BEA; color:#411BEA" title="#411BEA">#411BEA </td> <td>0.255 </td> <td>0.104 </td> <td>0.918 </td> <td>251.1° </td> <td>250.0° </td> <td>0.814 </td> <td>0.750 </td> <td>0.918 </td> <td>0.511 </td> <td>0.426 </td> <td>0.242 </td> <td>0.887 </td> <td>0.832 </td> <td>0.756 </td></tr> <tr> <td style="background-color:#1EAC41; color:#1EAC41" title="#1EAC41">#1EAC41 </td> <td>0.116 </td> <td>0.675 </td> <td>0.255 </td> <td>134.9° </td> <td>133.8° </td> <td>0.559 </td> <td>0.504 </td> <td>0.675 </td> <td>0.396 </td> <td>0.349 </td> <td>0.460 </td> <td>0.828 </td> <td>0.707 </td> <td>0.667 </td></tr> <tr> <td style="background-color:#F0C80E; color:#F0C80E" title="#F0C80E">#F0C80E </td> <td>0.941 </td> <td>0.785 </td> <td>0.053 </td> <td>49.5° </td> <td>50.5° </td> <td>0.888 </td> <td>0.821 </td> <td>0.941 </td> <td>0.497 </td> <td>0.593 </td> <td>0.748 </td> <td>0.944 </td> <td>0.893 </td> <td>0.911 </td></tr> <tr> <td style="background-color:#B430E5; color:#B430E5" title="#B430E5">#B430E5 </td> <td>0.704 </td> <td>0.187 </td> <td>0.897 </td> <td>283.7° </td> <td>284.8° </td> <td>0.710 </td> <td>0.636 </td> <td>0.897 </td> <td>0.542 </td> <td>0.596 </td> <td>0.423 </td> <td>0.792 </td> <td>0.775 </td> <td>0.686 </td></tr> <tr> <td style="background-color:#ED7651; color:#ED7651" title="#ED7651">#ED7651 </td> <td>0.931 </td> <td>0.463 </td> <td>0.316 </td> <td>14.3° </td> <td>13.2° </td> <td>0.615 </td> <td>0.556 </td> <td>0.931 </td> <td>0.624 </td> <td>0.570 </td> <td>0.586 </td> <td>0.661 </td> <td>0.817 </td> <td>0.446 </td></tr> <tr> <td style="background-color:#FEF888; color:#FEF888" title="#FEF888">#FEF888 </td> <td>0.998 </td> <td>0.974 </td> <td>0.532 </td> <td>56.9° </td> <td>57.4° </td> <td>0.466 </td> <td>0.454 </td> <td>0.998 </td> <td>0.765 </td> <td>0.835 </td> <td>0.931 </td> <td>0.467 </td> <td>0.991 </td> <td>0.363 </td></tr> <tr> <td style="background-color:#19CB97; color:#19CB97" title="#19CB97">#19CB97 </td> <td>0.099 </td> <td>0.795 </td> <td>0.591 </td> <td>162.4° </td> <td>163.4° </td> <td>0.696 </td> <td>0.620 </td> <td>0.795 </td> <td>0.447 </td> <td>0.495 </td> <td>0.564 </td> <td>0.875 </td> <td>0.779 </td> <td>0.800 </td></tr> <tr> <td style="background-color:#362698; color:#362698" title="#362698">#362698 </td> <td>0.211 </td> <td>0.149 </td> <td>0.597 </td> <td>248.3° </td> <td>247.3° </td> <td>0.448 </td> <td>0.420 </td> <td>0.597 </td> <td>0.373 </td> <td>0.319 </td> <td>0.219 </td> <td>0.750 </td> <td>0.601 </td> <td>0.533 </td></tr> <tr> <td style="background-color:#7E7EB8; color:#7E7EB8" title="#7E7EB8">#7E7EB8 </td> <td>0.495 </td> <td>0.493 </td> <td>0.721 </td> <td>240.5° </td> <td>240.4° </td> <td>0.228 </td> <td>0.227 </td> <td>0.721 </td> <td>0.607 </td> <td>0.570 </td> <td>0.520 </td> <td>0.316 </td> <td>0.290 </td> <td>0.135 </td></tr></tbody></table> <div class="mw-heading mw-heading2"><h2 id="Use_in_end-user_software">Use in end-user software</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=10" title="Edit section: Use in end-user software">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">See also: <a href="/wiki/Color_picker" title="Color picker">Color picker</a> and <a href="/wiki/Image_editing" title="Image editing">Image editing</a></div> <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/wiki/File:Hsl-hsv-colorpickers.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/en/thumb/e/ea/Hsl-hsv-colorpickers.svg/300px-Hsl-hsv-colorpickers.svg.png" decoding="async" width="300" height="300" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/e/ea/Hsl-hsv-colorpickers.svg/450px-Hsl-hsv-colorpickers.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/e/ea/Hsl-hsv-colorpickers.svg/600px-Hsl-hsv-colorpickers.svg.png 2x" data-file-width="316" data-file-height="316" /></a><figcaption>Fig 16a–g. By the 1990s, HSL and HSV color selection tools were ubiquitous. The screenshots above are taken from: <div><ol style="list-style-type:lower-alpha"><li>SGI <a href="/wiki/IRIX" title="IRIX">IRIX</a> 5, <abbr title="circa">c.</abbr> 1995;</li><li><a href="/wiki/Adobe_Photoshop" title="Adobe Photoshop">Adobe Photoshop</a>, <abbr title="circa">c.</abbr> 1990;</li><li>IBM <a href="/wiki/OS/2#The_"Warp"_years" title="OS/2">OS/2 Warp</a> 3, <abbr title="circa">c.</abbr> 1994;</li><li>Apple Macintosh <a href="/wiki/System_7" title="System 7">System 7</a>, <abbr title="circa">c.</abbr> 1996;</li><li>Fractal Design <a href="/wiki/Corel_Painter" title="Corel Painter">Painter</a>, <abbr title="circa">c.</abbr> 1993;</li><li>Microsoft <a href="/wiki/Windows_3.1x" class="mw-redirect" title="Windows 3.1x">Windows 3.1</a>, <abbr title="circa">c.</abbr> 1992;</li><li><a href="/wiki/NeXTSTEP" title="NeXTSTEP">NeXTSTEP</a>, <abbr title="circa">c.</abbr> 1995.</li></ol></div> These are undoubtedly based on earlier examples, stretching back to PARC and NYIT in the mid-1970s.<a href="#cite_note-40">[L]</a></figcaption></figure> The original purpose of HSL and HSV and similar models, and their most common current application, is in <a href="/wiki/Color_tool" class="mw-redirect" title="Color tool">color selection tools</a>. 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 <a href="#top">top of the page</a>). 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.<a href="#cite_note-41">[M]</a> 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 <a href="/wiki/JavaScript_library" title="JavaScript library">frameworks</a>. The <a href="/wiki/Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">CSS 3</a> specification allows web authors to specify colors for their pages directly with HSL coordinates.<a href="#cite_note-42">[N]</a><a href="#cite_note-43">[29]</a> HSL and HSV are sometimes used to define gradients for <a href="/wiki/Data_visualization" class="mw-redirect" title="Data visualization">data visualization</a>, as in maps or medical images. For example, the popular <a href="/wiki/Geographic_information_system" title="Geographic information system">GIS</a> program <a href="/wiki/ArcGIS" title="ArcGIS">ArcGIS</a> historically applied customizable HSV-based gradients to numerical geographical data.<a href="#cite_note-45">[O]</a> <table class="wikitable" style="clear:right; float:right; margin:0.8em 0 0 1.0em;"> <tbody><tr> <td><figure class="mw-halign-none" typeof="mw:File"><a href="/wiki/File:Xv_hsv-modification.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/en/thumb/c/cf/Xv_hsv-modification.png/100px-Xv_hsv-modification.png" decoding="async" width="100" height="243" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/c/cf/Xv_hsv-modification.png/150px-Xv_hsv-modification.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/c/cf/Xv_hsv-modification.png/200px-Xv_hsv-modification.png 2x" data-file-width="207" data-file-height="502" /></a><figcaption></figcaption></figure><div style="width:90px; font-size: smaller;" class="thumbcaption">Fig. 17. <a href="/wiki/Xv_(software)" title="Xv (software)">xv</a>'s HSV-based color modifier.</div> </td> <td><figure class="mw-halign-none" typeof="mw:File"><a href="/wiki/File:PS_2.5_hue-saturation_tool.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/en/thumb/2/28/PS_2.5_hue-saturation_tool.png/210px-PS_2.5_hue-saturation_tool.png" decoding="async" width="210" height="107" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/2/28/PS_2.5_hue-saturation_tool.png/315px-PS_2.5_hue-saturation_tool.png 1.5x, //upload.wikimedia.org/wikipedia/en/2/28/PS_2.5_hue-saturation_tool.png 2x" data-file-width="419" data-file-height="214" /></a><figcaption></figcaption></figure><div style="width:200px; font-size: smaller;" class="thumbcaption">Fig. 18. The hue/saturation tool in <a href="/wiki/Adobe_Photoshop" title="Adobe Photoshop">Photoshop</a> 2.5, ca. 1992.</div> </td></tr></tbody></table> <a href="/wiki/Image_editing" title="Image editing">Image editing</a> 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 <a href="#Lightness">defined above</a>. 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 <a href="/wiki/Unix" title="Unix">Unix</a> image viewer and color editor <a href="/wiki/Xv_(software)" title="Xv (software)">xv</a> allowed six user-definable hue (H) ranges to be rotated and resized, included a <a href="/wiki/Dial_(measurement)" title="Dial (measurement)">dial</a>-like control for saturation (SHSV), and a <a href="/wiki/Curve_(tonality)" title="Curve (tonality)">curves</a>-like interface for controlling value (V) – see fig. 17. The image editor <a href="/w/index.php?title=Picture_Window&action=edit&redlink=1" class="new" title="Picture Window (page does not exist)">Picture Window Pro</a> includes a "color correction" tool which affords complex remapping of points in a hue/saturation plane relative to either HSL or HSV space.<a href="#cite_note-48">[P]</a> <a href="/wiki/Non-linear_editing_system" class="mw-redirect" title="Non-linear editing system">Video editors</a> also use these models. For example, both <a href="/wiki/Avid_Technology" title="Avid Technology">Avid</a> and <a href="/wiki/Final_Cut_Pro" title="Final Cut Pro">Final Cut Pro</a> 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" <a href="/wiki/Blend_modes" title="Blend modes">blend modes</a> composite layers using a luma/chroma/hue color geometry. These have been copied widely, but several imitators use the HSL (e.g. <a href="/wiki/Ulead_PhotoImpact" title="Ulead PhotoImpact">PhotoImpact</a>, <a href="/wiki/Corel_Paint_Shop_Pro" class="mw-redirect" title="Corel Paint Shop Pro">Paint Shop Pro</a>) or HSV geometries instead.<a href="#cite_note-50">[Q]</a><a href="#cite_note-53">[R]</a> <div style="clear:left;" class=""></div> <div class="mw-heading mw-heading2"><h2 id="Use_in_image_analysis">Use in image analysis</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=11" title="Edit section: Use in image analysis">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">See also: <a href="/wiki/Computer_vision" title="Computer vision">Computer vision</a> and <a href="/wiki/Image_analysis" title="Image analysis">Image analysis</a></div> HSL, HSV, HSI, or related models are often used in <a href="/wiki/Computer_vision" title="Computer vision">computer vision</a> and <a href="/wiki/Image_analysis" title="Image analysis">image analysis</a> for <a href="/wiki/Feature_detection_(computer_vision)" class="mw-redirect" title="Feature detection (computer vision)">feature detection</a> or <a href="/wiki/Segmentation_(image_processing)" class="mw-redirect" title="Segmentation (image processing)">image segmentation</a>. The applications of such tools include object detection, for instance in <a href="/wiki/Machine_vision" title="Machine vision">robot vision</a>; <a href="/wiki/Object_recognition" class="mw-redirect" title="Object recognition">object recognition</a>, for instance of <a href="/wiki/Facial_recognition_system" title="Facial recognition system">faces</a>, <a href="/wiki/Optical_character_recognition" title="Optical character recognition">text</a>, or <a href="/wiki/Automatic_number_plate_recognition" class="mw-redirect" title="Automatic number plate recognition">license plates</a>; <a href="/wiki/Content-based_image_retrieval" title="Content-based image retrieval">content-based image retrieval</a>; and <a href="/wiki/Medical_imaging" title="Medical imaging">analysis of medical images</a>.<a href="#cite_note-Cheng-38">[28]</a> For the most part, computer vision algorithms used on color images are straightforward extensions to algorithms designed for <a href="/wiki/Grayscale" title="Grayscale">grayscale</a> images, for instance <a href="/wiki/K-means_clustering" title="K-means clustering">k-means</a> or <a href="/wiki/Fuzzy_clustering" title="Fuzzy clustering">fuzzy clustering</a> of pixel colors, or <a href="/wiki/Canny_edge_detector" title="Canny edge detector">canny</a> <a href="/wiki/Edge_detection" title="Edge detection">edge detection</a>. At the simplest, each color component is separately passed through the same algorithm. It is important, therefore, that the <a href="/wiki/Feature_(computer_vision)" title="Feature (computer vision)">features</a> of interest can be distinguished in the color dimensions used. Because the R, G, and B components of an object's color in a digital image are all correlated with the amount of light hitting the object, and therefore with each other, image descriptions in terms of those components make object discrimination difficult. Descriptions in terms of hue/lightness/chroma or hue/lightness/saturation are often more relevant.<a href="#cite_note-Cheng-38">[28]</a> Starting in the late 1970s, transformations like HSV or HSI were used as a compromise between effectiveness for segmentation and computational complexity. They can be thought of as similar in approach and intent to the neural processing used by human color vision, without agreeing in particulars: if the goal is object detection, roughly separating hue, lightness, and chroma or saturation is effective, but there is no particular reason to strictly mimic human color response. John Kender's 1976 master's thesis proposed the HSI model. Ohta et al. (1980) instead used a model made up of dimensions similar to those we have called I, α, and β. In recent years, such models have continued to see wide use, as their performance compares favorably with more complex models, and their computational simplicity remains compelling.<a href="#cite_note-54">[S]</a><a href="#cite_note-Cheng-38">[28]</a><a href="#cite_note-55">[36]</a><a href="#cite_note-56">[37]</a><a href="#cite_note-57">[38]</a> <div class="mw-heading mw-heading2"><h2 id="Disadvantages">Disadvantages</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=12" title="Edit section: Disadvantages">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1237032888/mw-parser-output/.tmulti"><div class="thumb tmulti tright"><div class="thumbinner multiimageinner" style="width:402px;max-width:402px"><div class="trow"><div class="tsingle" style="width:199px;max-width:199px"><div class="thumbimage"><a href="/wiki/File:Srgb-in-cielab.png" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/60/Srgb-in-cielab.png/197px-Srgb-in-cielab.png" decoding="async" width="197" height="167" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/60/Srgb-in-cielab.png/296px-Srgb-in-cielab.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/60/Srgb-in-cielab.png/394px-Srgb-in-cielab.png 2x" data-file-width="575" data-file-height="487" /></a></div><div class="thumbcaption">Fig 20a. The <a href="/wiki/SRGB" title="SRGB">sRGB</a> gamut mapped in CIELAB space. Notice that the lines pointing to the red, green, and blue primaries are not evenly spaced by <a href="/wiki/Hue_angle" class="mw-redirect" title="Hue angle">hue angle</a>, and are of unequal length. The primaries also have different L* values.</div></div><div class="tsingle" style="width:199px;max-width:199px"><div class="thumbimage"><a href="/wiki/File:Adobergb-in-cielab.png" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/33/Adobergb-in-cielab.png/197px-Adobergb-in-cielab.png" decoding="async" width="197" height="167" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/33/Adobergb-in-cielab.png/296px-Adobergb-in-cielab.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/33/Adobergb-in-cielab.png/394px-Adobergb-in-cielab.png 2x" data-file-width="575" data-file-height="487" /></a></div><div class="thumbcaption">Fig 20b. The <a href="/wiki/Adobe_RGB_color_space" title="Adobe RGB color space">Adobe RGB</a> gamut mapped in CIELAB space. Also notice that these two RGB spaces have different gamuts, and thus will have different HSL and HSV representations.</div></div></div></div></div> While HSL, HSV, and related spaces serve well enough to, for instance, choose a single color, they ignore much of the complexity of color appearance. Essentially, they trade off perceptual relevance for computation speed, from a time in computing history (high-end 1970s graphics workstations, or mid-1990s consumer desktops) when more sophisticated models would have been too computationally expensive.<a href="#cite_note-58">[T]</a> HSL and HSV are simple transformations of RGB which preserve symmetries in the RGB cube unrelated to human perception, such that its R, G, and B corners are equidistant from the neutral axis, and equally spaced around it. If we plot the RGB gamut in a more perceptually-uniform space, such as <a href="/wiki/CIELAB" class="mw-redirect" title="CIELAB">CIELAB</a> (see <a href="#Other_cylindrical-coordinate_color_models">below</a>), it becomes immediately clear that the red, green, and blue primaries do not have the same lightness or chroma, or evenly spaced hues. Furthermore, different RGB displays use different primaries, and so have different gamuts. Because HSL and HSV are defined purely with reference to some RGB space, they are not <a href="/wiki/Absolute_color_space" class="mw-redirect" title="Absolute color space">absolute color spaces</a>: to specify a color precisely requires reporting not only HSL or HSV values, but also the characteristics of the RGB space they are based on, including the <a href="/wiki/Gamma_correction" title="Gamma correction">gamma correction</a> in use. If we take an image and extract the hue, saturation, and lightness or value components, and then compare these to the components of the same name as defined by color scientists, we can quickly see the difference, perceptually. For example, examine the following images of a fire breather (fig. 13). The original is in the sRGB colorspace. CIELAB L* is a CIE-defined achromatic lightness quantity (dependent solely on the perceptually achromatic luminance Y, but not the mixed-chromatic components X or Z, of the CIEXYZ colorspace from which the sRGB colorspace itself is derived), and it is plain that this appears similar in perceptual lightness to the original color image. Luma is roughly similar, but differs somewhat at high chroma, where it deviates most from depending solely on the true achromatic luminance (Y, or equivalently L*) and is influenced by the colorimetric chromaticity (x,y, or equivalently, a*,b* of CIELAB). HSL L and HSV V, by contrast, diverge substantially from perceptual lightness. <div style="clear:both;" class=""></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1237032888/mw-parser-output/.tmulti"><div class="thumb tmulti tnone center"><div class="thumbinner multiimageinner" style="width:672px;max-width:672px"><div class="trow"><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Fire_breathing_2_Luc_Viatour.jpg" class="mw-file-description"><img alt="A full-color image shows a high-contrast and quite dramatic scene of a fire breather with a large orange-yellow flame extending from his lips. He wears dark but colorful orange-red clothing." src="//upload.wikimedia.org/wikipedia/commons/thumb/0/02/Fire_breathing_2_Luc_Viatour.jpg/220px-Fire_breathing_2_Luc_Viatour.jpg" decoding="async" width="220" height="162" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/02/Fire_breathing_2_Luc_Viatour.jpg/330px-Fire_breathing_2_Luc_Viatour.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/02/Fire_breathing_2_Luc_Viatour.jpg/440px-Fire_breathing_2_Luc_Viatour.jpg 2x" data-file-width="3288" data-file-height="2416" /></a></div><div class="thumbcaption">Fig. 13a. Color photograph (sRGB colorspace).</div></div><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Fire-breather_CIELAB_L*.jpg" class="mw-file-description"><img alt="A grayscale image showing the CIELAB lightness component of the photograph appears to be a faithful rendering of the scene: it looks roughly like a black-and-white photograph taken on panchromatic film would look, with clear detail in the flame, which is much brighter than the man's outfit or the background." src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Fire-breather_CIELAB_L%2A.jpg/220px-Fire-breather_CIELAB_L%2A.jpg" decoding="async" width="220" height="162" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Fire-breather_CIELAB_L%2A.jpg/330px-Fire-breather_CIELAB_L%2A.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Fire-breather_CIELAB_L%2A.jpg/440px-Fire-breather_CIELAB_L%2A.jpg 2x" data-file-width="3288" data-file-height="2416" /></a></div><div class="thumbcaption">Fig. 13b. CIELAB L* (further transformed back to sRGB for consistent display).</div></div><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Fire-breather_601_Luma_Y%27.jpg" class="mw-file-description"><img alt="A grayscale image showing the luma appears roughly similar to the CIELAB lightness image, but is a bit brighter in areas which were originally very colorful." src="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/Fire-breather_601_Luma_Y%27.jpg/220px-Fire-breather_601_Luma_Y%27.jpg" decoding="async" width="220" height="162" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/28/Fire-breather_601_Luma_Y%27.jpg/330px-Fire-breather_601_Luma_Y%27.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/28/Fire-breather_601_Luma_Y%27.jpg/440px-Fire-breather_601_Luma_Y%27.jpg 2x" data-file-width="3288" data-file-height="2416" /></a></div><div class="thumbcaption">Fig. 13c. Rec. 601 luma Y'.</div></div></div></div></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1237032888/mw-parser-output/.tmulti"><div class="thumb tmulti tnone center"><div class="thumbinner multiimageinner" style="width:672px;max-width:672px"><div class="trow"><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Fire-breather_mean(R,G,B)_I.jpg" class="mw-file-description"><img alt="A grayscale image showing the component average (HSI intensity) of the photograph is much a less convincing facsimile of the color photograph, with reduced contrast, especially with its flame darker than in the original." src="//upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Fire-breather_mean%28R%2CG%2CB%29_I.jpg/220px-Fire-breather_mean%28R%2CG%2CB%29_I.jpg" decoding="async" width="220" height="162" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Fire-breather_mean%28R%2CG%2CB%29_I.jpg/330px-Fire-breather_mean%28R%2CG%2CB%29_I.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Fire-breather_mean%28R%2CG%2CB%29_I.jpg/440px-Fire-breather_mean%28R%2CG%2CB%29_I.jpg 2x" data-file-width="3288" data-file-height="2416" /></a></div><div class="thumbcaption">Fig. 13d. Component average: "intensity" I.</div></div><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Fire-breather_HSV_V.jpg" class="mw-file-description"><img alt="A grayscale image showing the HSV value component of the photograph leaves the flame completely white (in photographer's parlance, "blown out"), and the man's clothing much too bright." src="//upload.wikimedia.org/wikipedia/commons/thumb/4/43/Fire-breather_HSV_V.jpg/220px-Fire-breather_HSV_V.jpg" decoding="async" width="220" height="162" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/4/43/Fire-breather_HSV_V.jpg/330px-Fire-breather_HSV_V.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/4/43/Fire-breather_HSV_V.jpg/440px-Fire-breather_HSV_V.jpg 2x" data-file-width="3288" data-file-height="2416" /></a></div><div class="thumbcaption">Fig. 13e. HSV value V.</div></div><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Fire-breather_HSL_L.jpg" class="mw-file-description"><img alt="A grayscale image showing the HSL lightness component of the photograph renders the flame, as approximately middle gray, and ruins the dramatic effect of the original by radically reducing its contrast." src="//upload.wikimedia.org/wikipedia/commons/thumb/0/06/Fire-breather_HSL_L.jpg/220px-Fire-breather_HSL_L.jpg" decoding="async" width="220" height="162" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/06/Fire-breather_HSL_L.jpg/330px-Fire-breather_HSL_L.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/06/Fire-breather_HSL_L.jpg/440px-Fire-breather_HSL_L.jpg 2x" data-file-width="3288" data-file-height="2416" /></a></div><div class="thumbcaption">Fig. 13f. HSL lightness L.</div></div></div></div></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Hsv-hues-cf-lch-hues.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Hsv-hues-cf-lch-hues.png/220px-Hsv-hues-cf-lch-hues.png" decoding="async" width="220" height="220" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Hsv-hues-cf-lch-hues.png/330px-Hsv-hues-cf-lch-hues.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Hsv-hues-cf-lch-hues.png/440px-Hsv-hues-cf-lch-hues.png 2x" data-file-width="768" data-file-height="768" /></a><figcaption>Fig 20c. 12 points on the HSV color wheel in a <a href="/wiki/CIELAB" class="mw-redirect" title="CIELAB">CIELAB</a> chroma plane, showing HSV's lack of uniformity in hue and saturation.</figcaption></figure> Though none of the dimensions in these spaces match their perceptual analogs, the value of HSV and the saturation of HSL are particular offenders. In HSV, the blue primary   and white   are held to have the same value, even though perceptually the blue primary has somewhere around 10% of the luminance of white (the exact fraction depends on the particular RGB primaries in use). In HSL, a mix of 100% red, 100% green, 90% blue – that is, a very light yellow   – is held to have the same saturation as the green primary  , even though the former color has almost no chroma or saturation by the conventional psychometric definitions. Such perversities led Cynthia Brewer, expert in color scheme choices for maps and information displays, to tell the <a href="/wiki/American_Statistical_Association" title="American Statistical Association">American Statistical Association</a>: <style data-mw-deduplicate="TemplateStyles:r1244412712">.mw-parser-output .templatequote{overflow:hidden;margin:1em 0;padding:0 32px}.mw-parser-output .templatequotecite{line-height:1.5em;text-align:left;margin-top:0}@media(min-width:500px){.mw-parser-output .templatequotecite{padding-left:1.6em}}</style><blockquote class="templatequote">Computer science offers a few poorer cousins to these perceptual spaces that may also turn up in your software interface, such as HSV and HLS. They are easy mathematical transformations of RGB, and they seem to be perceptual systems because they make use of the hue–lightness/value–saturation terminology. But take a close look; don't be fooled. Perceptual color dimensions are poorly scaled by the color specifications that are provided in these and some other systems. For example, saturation and lightness are confounded, so a saturation scale may also contain a wide range of lightnesses (for example, it may progress from white to green which is a combination of both lightness and saturation). Likewise, hue and lightness are confounded so, for example, a saturated yellow and saturated blue may be designated as the same 'lightness' but have wide differences in perceived lightness. These flaws make the systems difficult to use to control the look of a color scheme in a systematic manner. If much tweaking is required to achieve the desired effect, the system offers little benefit over grappling with raw specifications in RGB or CMY.<a href="#cite_note-59">[39]</a></blockquote> If these problems make HSL and HSV problematic for choosing colors or color schemes, they make them much worse for image adjustment. HSL and HSV, as Brewer mentioned, confound perceptual color-making attributes, so that changing any dimension results in non-uniform changes to all three perceptual dimensions, and distorts all of the color relationships in the image. For instance, rotating the hue of a pure dark blue   toward green   will also reduce its perceived chroma, and increase its perceived lightness (the latter is grayer and lighter), but the same hue rotation will have the opposite impact on lightness and chroma of a lighter bluish-green –   to   (the latter is more colorful and slightly darker). In the example below (fig. 21), the image (a) is the original photograph of a <a href="/wiki/Green_turtle" class="mw-redirect" title="Green turtle">green turtle</a>. In the image (b), we have rotated the hue (H) of each color by −30°, while keeping HSV value and saturation or HSL lightness and saturation constant. In the image right (c), we make the same rotation to the HSL/HSV hue of each color, but then we force the CIELAB lightness (L*, a decent approximation of perceived lightness) to remain constant. Notice how the hue-shifted middle version without such a correction dramatically changes the perceived lightness relationships between colors in the image. In particular, the turtle's shell is much darker and has less contrast, and the background water is much lighter. Image (d) uses CIELAB to hue shift; the difference from (c) demonstrates the errors in hue and saturation. <div style="clear:both;" class=""></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1237032888/mw-parser-output/.tmulti"><div class="thumb tmulti tnone center"><div class="thumbinner multiimageinner" style="width:896px;max-width:896px"><div class="trow"><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Hawaii_turtle_2.JPG" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/220px-Hawaii_turtle_2.JPG" decoding="async" width="220" height="165" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/330px-Hawaii_turtle_2.JPG 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Hawaii_turtle_2.JPG/440px-Hawaii_turtle_2.JPG 2x" data-file-width="1632" data-file-height="1224" /></a></div><div class="thumbcaption">Fig. 21a. Color photograph.</div></div><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Hawaii-turtle_hue_shifted.jpg" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Hawaii-turtle_hue_shifted.jpg/220px-Hawaii-turtle_hue_shifted.jpg" decoding="async" width="220" height="165" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Hawaii-turtle_hue_shifted.jpg/330px-Hawaii-turtle_hue_shifted.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Hawaii-turtle_hue_shifted.jpg/440px-Hawaii-turtle_hue_shifted.jpg 2x" data-file-width="1632" data-file-height="1224" /></a></div><div class="thumbcaption">Fig. 21b. HSL/HSV hue of each color shifted by −30°.</div></div><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Hawaii-turtle_hue_shifted_with_constant_L*.jpg" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/75/Hawaii-turtle_hue_shifted_with_constant_L%2A.jpg/220px-Hawaii-turtle_hue_shifted_with_constant_L%2A.jpg" decoding="async" width="220" height="165" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/75/Hawaii-turtle_hue_shifted_with_constant_L%2A.jpg/330px-Hawaii-turtle_hue_shifted_with_constant_L%2A.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/75/Hawaii-turtle_hue_shifted_with_constant_L%2A.jpg/440px-Hawaii-turtle_hue_shifted_with_constant_L%2A.jpg 2x" data-file-width="1632" data-file-height="1224" /></a></div><div class="thumbcaption">Fig. 21c. Hue shifted but CIELAB lightness (L*) kept as in the original.</div></div><div class="tsingle" style="width:222px;max-width:222px"><div class="thumbimage"><a href="/wiki/File:Hawaii_turtle_2_hue_shifted_lch.JPG" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Hawaii_turtle_2_hue_shifted_lch.JPG/220px-Hawaii_turtle_2_hue_shifted_lch.JPG" decoding="async" width="220" height="165" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Hawaii_turtle_2_hue_shifted_lch.JPG/330px-Hawaii_turtle_2_hue_shifted_lch.JPG 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Hawaii_turtle_2_hue_shifted_lch.JPG/440px-Hawaii_turtle_2_hue_shifted_lch.JPG 2x" data-file-width="1632" data-file-height="1224" /></a></div><div class="thumbcaption">Fig. 21d. Hue shifted in CIELch(ab) color space by −30°.</div></div></div></div></div> Because hue is a circular quantity, represented numerically with a discontinuity at 360°, it is difficult to use in statistical computations or quantitative comparisons: analysis requires the use of <a href="/wiki/Directional_statistics" title="Directional statistics">circular statistics</a>.<a href="#cite_note-60">[40]</a> Furthermore, hue is defined piecewise, in 60° chunks, where the relationship of lightness, value, and chroma to R, G, and B depends on the hue chunk in question. This definition introduces discontinuities, corners which can plainly be seen in horizontal slices of HSL or HSV.<a href="#cite_note-61">[41]</a> Charles Poynton, digital video expert, lists the above problems with HSL and HSV in his Color FAQ, and concludes that: <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1244412712"><blockquote class="templatequote">HSB and HLS were developed to specify numerical Hue, Saturation and Brightness (or Hue, Lightness and Saturation) in an age when users had to specify colors numerically. The usual formulations of HSB and HLS are flawed with respect to the properties of color vision. Now that users can choose colors visually, or choose colors related to other media (such as <a href="/wiki/Pantone" title="Pantone">PANTONE</a>), or use perceptually-based systems like <a href="/wiki/CIELUV" title="CIELUV">L*u*v*</a> and <a href="/wiki/CIELAB" class="mw-redirect" title="CIELAB">L*a*b*</a>, HSB and HLS should be abandoned.<a href="#cite_note-62">[42]</a></blockquote> <div class="mw-heading mw-heading2"><h2 id="Other_cylindrical-coordinate_color_models">Other cylindrical-coordinate color models</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=13" title="Edit section: Other cylindrical-coordinate color models">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Main articles: <a href="/wiki/Color_model#Cylindrical-coordinate_color_models" title="Color model">Color model § Cylindrical-coordinate color models</a>, and <a href="/wiki/List_of_color_spaces_and_their_uses#Cylindrical_transformations" title="List of color spaces and their uses">List of color spaces and their uses § Cylindrical transformations</a></div> The creators of HSL and HSV were far from the first to imagine colors fitting into conic or spherical shapes, with neutrals running from black to white in a central axis, and hues corresponding to angles around that axis. Similar arrangements date back to the 18th century, and continue to be developed in the most modern and scientific models. <div class="mw-heading mw-heading2"><h2 id="Color_conversion_formulae">Color conversion formulae</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=14" title="Edit section: Color conversion formulae">edit</a>]</div> To convert from HSL or HSV to RGB, we essentially invert the steps listed <a href="#General_approach">above</a> (as before, R, G, B <a href="/wiki/%E2%88%88" class="mw-redirect" title="∈">∈</a> <a href="/wiki/Unit_interval" title="Unit interval">[0, 1]</a>). First, we compute chroma, by multiplying saturation by the maximum chroma for a given lightness or value. Next, we find the point on one of the bottom three faces of the RGB cube which has the same hue and chroma as our color (and therefore projects onto the same point in the chromaticity plane). Finally, we add equal amounts of R, G, and B to reach the proper lightness or value.<a href="#cite_note-formulasources-28">[G]</a> <div class="mw-heading mw-heading3"><h3 id="To_RGB">To RGB</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=15" title="Edit section: To RGB">edit</a>]</div> <div class="mw-heading mw-heading4"><h4 id="HSL_to_RGB">HSL to RGB</h4>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=16" title="Edit section: HSL to RGB">edit</a>]</div> Given a color with hue H ∈ [0°, 360°), saturation SL ∈ [0, 1], and lightness L ∈ [0, 1], we first find chroma: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle C=(1-\left\vert 2L-1\right\vert )\times S_{L}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>C</mi> <mo>=</mo> <mo stretchy="false">(</mo> <mn>1</mn> <mo>−</mo> <mrow> <mo>|</mo> <mrow> <mn>2</mn> <mi>L</mi> <mo>−</mo> <mn>1</mn> </mrow> <mo>|</mo> </mrow> <mo stretchy="false">)</mo> <mo>×</mo> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle C=(1-\left\vert 2L-1\right\vert )\times S_{L}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/ec76306b5b43e8f499fdf1cd2d57740f2dde5002" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:24.336ex; height:2.843ex;" alt="{\displaystyle C=(1-\left\vert 2L-1\right\vert )\times S_{L}}"></dd></dl> Then we can find a point (R1, G1, B1) along the bottom three faces of the RGB cube, with the same hue and chroma as our color (using the intermediate value X for the second largest component of this color): <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>H</mi> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> </mfrac> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/21087dff4a545a4f972cb9a6c5c08b83b0b36c73" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.005ex; width:10.102ex; height:5.343ex;" alt="{\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X=C\times (1-|H^{\prime }\;{\bmod {2}}-1|)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> <mo>=</mo> <mi>C</mi> <mo>×</mo> <mo stretchy="false">(</mo> <mn>1</mn> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mspace width="thickmathspace" /> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </mrow> <mo>−</mo> <mn>1</mn> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X=C\times (1-|H^{\prime }\;{\bmod {2}}-1|)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/77a7b4217187f84ea9f7236cadfd77ccb4ae122f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:31.071ex; height:3.009ex;" alt="{\displaystyle X=C\times (1-|H^{\prime }\;{\bmod {2}}-1|)}"></dd></dl> In the above equation, the notation <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }\;{\bmod {2}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mspace width="thickmathspace" /> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }\;{\bmod {2}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/b9332c9acbf94b45066943737187490aec135c85" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:10.277ex; height:2.509ex;" alt="{\displaystyle H^{\prime }\;{\bmod {2}}}"> refers to the remainder of the <a href="/wiki/Euclidean_division" title="Euclidean division">Euclidean division</a> of <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/57332722a2df7daf85669f27b3a5e70960079a5f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:2.788ex; height:2.509ex;" alt="{\displaystyle H^{\prime }}"> by 2. <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/57332722a2df7daf85669f27b3a5e70960079a5f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:2.788ex; height:2.509ex;" alt="{\displaystyle H^{\prime }}"> is not necessarily an integer. <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(C,X,0)&{\text{if }}0\leq H^{\prime }<1\\(X,C,0)&{\text{if }}1\leq H^{\prime }<2\\(0,C,X)&{\text{if }}2\leq H^{\prime }<3\\(0,X,C)&{\text{if }}3\leq H^{\prime }<4\\(X,0,C)&{\text{if }}4\leq H^{\prime }<5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <msub> <mi>R</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <msub> <mi>G</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <msub> <mi>B</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>C</mi> <mo>,</mo> <mi>X</mi> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>0</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>1</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>X</mi> <mo>,</mo> <mi>C</mi> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>1</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>2</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>C</mi> <mo>,</mo> <mi>X</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>2</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>3</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>X</mi> <mo>,</mo> <mi>C</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>3</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>4</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>X</mi> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mi>C</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>4</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>5</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>C</mi> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mi>X</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>5</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>6</mn> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(C,X,0)&{\text{if }}0\leq H^{\prime }<1\\(X,C,0)&{\text{if }}1\leq H^{\prime }<2\\(0,C,X)&{\text{if }}2\leq H^{\prime }<3\\(0,X,C)&{\text{if }}3\leq H^{\prime }<4\\(X,0,C)&{\text{if }}4\leq H^{\prime }<5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/7db2c48281ae430498e18a4ad390c3a9a10b416e" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -8.171ex; width:42.668ex; height:17.509ex;" alt="{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(C,X,0)&{\text{if }}0\leq H^{\prime }<1\\(X,C,0)&{\text{if }}1\leq H^{\prime }<2\\(0,C,X)&{\text{if }}2\leq H^{\prime }<3\\(0,X,C)&{\text{if }}3\leq H^{\prime }<4\\(X,0,C)&{\text{if }}4\leq H^{\prime }<5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}"></dd></dl> When <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/57332722a2df7daf85669f27b3a5e70960079a5f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:2.788ex; height:2.509ex;" alt="{\displaystyle H^{\prime }}"> is an integer, the "neighbouring" formula would yield the same result, as <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X=0}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> <mo>=</mo> <mn>0</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X=0}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d519e9e94f279ea82581dfa70a2444e896e2d860" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:6.241ex; height:2.176ex;" alt="{\displaystyle X=0}"> or <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X=C}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> <mo>=</mo> <mi>C</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X=C}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/cf2a6a8d1dff09396b8aa67cf3b1af2768e52907" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:6.845ex; height:2.176ex;" alt="{\displaystyle X=C}">, as appropriate. Finally, we can find R, G, and B by adding the same amount to each component, to match lightness: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle m=L-{\frac {C}{2}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>m</mi> <mo>=</mo> <mi>L</mi> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>C</mi> <mn>2</mn> </mfrac> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle m=L-{\frac {C}{2}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/68dcf8b07d922e3b8e96d922c9cdedde53191084" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.838ex; width:12.165ex; height:5.343ex;" alt="{\displaystyle m=L-{\frac {C}{2}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mo stretchy="false">(</mo> <msub> <mi>R</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo>,</mo> <msub> <mi>G</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo>,</mo> <msub> <mi>B</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d4ccd28bd860ded7648320adfd4cb1aa186b0fbe" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:39.367ex; height:2.843ex;" alt="{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}"></dd></dl> <div class="mw-heading mw-heading5"><h5 id="HSL_to_RGB_alternative">HSL to RGB alternative</h5>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=17" title="Edit section: HSL to RGB alternative">edit</a>]</div> The polygonal piecewise functions can be somewhat simplified by clever use of minimum and maximum values as well as the remainder operation. Given a color with hue <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H\in [0^{\circ },360^{\circ }]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>H</mi> <mo>∈</mo> <mo stretchy="false">[</mo> <msup> <mn>0</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo>,</mo> <msup> <mn>360</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H\in [0^{\circ },360^{\circ }]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/9cf17f990e5505cd5aca4676434f793aebc81fd3" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:13.99ex; height:2.843ex;" alt="{\displaystyle H\in [0^{\circ },360^{\circ }]}">, saturation <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S=S_{L}\in [0,1]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>S</mi> <mo>=</mo> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S=S_{L}\in [0,1]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/732396faa67fae03716d9f55265fa6b6ef77ecb8" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:14.867ex; height:2.843ex;" alt="{\displaystyle S=S_{L}\in [0,1]}">, and lightness <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle L\in [0,1]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>L</mi> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle L\in [0,1]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/94ca2d1c06c3302b08d75f674d5f3bf2b3b324cb" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:9.076ex; height:2.843ex;" alt="{\displaystyle L\in [0,1]}">, we first define the function: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle f(n)=L-a\max(-1,\min(k-3,9-k,1))}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>f</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mi>L</mi> <mo>−</mo> <mi>a</mi> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <mo>−</mo> <mn>1</mn> <mo>,</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>k</mi> <mo>−</mo> <mn>3</mn> <mo>,</mo> <mn>9</mn> <mo>−</mo> <mi>k</mi> <mo>,</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle f(n)=L-a\max(-1,\min(k-3,9-k,1))}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/4ccc18bb2f329377ebd2c27467cec47ae97d832a" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:43.104ex; height:2.843ex;" alt="{\displaystyle f(n)=L-a\max(-1,\min(k-3,9-k,1))}"></dd></dl> where <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle k,n\in \mathbb {R} _{\geq 0}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>k</mi> <mo>,</mo> <mi>n</mi> <mo>∈</mo> <msub> <mrow class="MJX-TeXAtom-ORD"> <mi mathvariant="double-struck">R</mi> </mrow> <mrow class="MJX-TeXAtom-ORD"> <mo>≥</mo> <mn>0</mn> </mrow> </msub> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle k,n\in \mathbb {R} _{\geq 0}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/52aa3db5eb120682f481644a3f8ba593ba95b570" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:10.491ex; height:2.676ex;" alt="{\displaystyle k,n\in \mathbb {R} _{\geq 0}}"> and: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle k=(n+{\frac {H}{30^{\circ }}}){\bmod {1}}2}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>k</mi> <mo>=</mo> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>H</mi> <msup> <mn>30</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> </mfrac> </mrow> <mo stretchy="false">)</mo> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </mrow> <mn>2</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle k=(n+{\frac {H}{30^{\circ }}}){\bmod {1}}2}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/0c9e59dcd9d9d3748131234680d477f72a406196" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.005ex; width:22.575ex; height:5.343ex;" alt="{\displaystyle k=(n+{\frac {H}{30^{\circ }}}){\bmod {1}}2}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle a=S_{L}\min(L,1-L)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>a</mi> <mo>=</mo> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>L</mi> <mo>,</mo> <mn>1</mn> <mo>−</mo> <mi>L</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle a=S_{L}\min(L,1-L)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/95e5c1e12d2eaaefce43de3823f64acd9db7e3ac" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:21.379ex; height:2.843ex;" alt="{\displaystyle a=S_{L}\min(L,1-L)}"></dd></dl> And output R,G,B values (from <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle [0,1]^{3}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <msup> <mo stretchy="false">]</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>3</mn> </mrow> </msup> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle [0,1]^{3}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/6acf30b2833a5dfcfedce1e2ae9bd8e6f68eb885" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:5.707ex; height:3.176ex;" alt="{\displaystyle [0,1]^{3}}">) are: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R,G,B)=(f(0),f(8),f(4))}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mo stretchy="false">(</mo> <mi>f</mi> <mo stretchy="false">(</mo> <mn>0</mn> <mo stretchy="false">)</mo> <mo>,</mo> <mi>f</mi> <mo stretchy="false">(</mo> <mn>8</mn> <mo stretchy="false">)</mo> <mo>,</mo> <mi>f</mi> <mo stretchy="false">(</mo> <mn>4</mn> <mo stretchy="false">)</mo> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R,G,B)=(f(0),f(8),f(4))}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/18c12a3e44d09f42dac217c780be2961104bd72a" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:28.959ex; height:2.843ex;" alt="{\displaystyle (R,G,B)=(f(0),f(8),f(4))}"></dd></dl> The above alternative formulas allow for shorter implementations. In the above formulas the <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle a{\bmod {b}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>a</mi> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mi>b</mi> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle a{\bmod {b}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/5a4080e7a1a76ffc9ccfeecbb0fc726890100d7a" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:7.909ex; height:2.176ex;" alt="{\displaystyle a{\bmod {b}}}"> operation also returns the fractional part of the module e.g. <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle 7.4{\bmod {6}}=1.4}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mn>7.4</mn> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>6</mn> </mrow> </mrow> <mo>=</mo> <mn>1.4</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle 7.4{\bmod {6}}=1.4}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d354cecad86054b7f16f992dcb41b8244032338c" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:15.886ex; height:2.176ex;" alt="{\displaystyle 7.4{\bmod {6}}=1.4}">, and <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle k\in [0,12)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>k</mi> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>12</mn> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle k\in [0,12)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/46ec4660ac64aefbb9e07c3e6b7d2187398dc3d9" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:10.125ex; height:2.843ex;" alt="{\displaystyle k\in [0,12)}">. The base shape <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle T(k)=t(n,H)=\max(\min(k-3,9-k,1),-1)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>T</mi> <mo stretchy="false">(</mo> <mi>k</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>k</mi> <mo>−</mo> <mn>3</mn> <mo>,</mo> <mn>9</mn> <mo>−</mo> <mi>k</mi> <mo>,</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mo>,</mo> <mo>−</mo> <mn>1</mn> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle T(k)=t(n,H)=\max(\min(k-3,9-k,1),-1)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/ae185e6f941bee11799647729043e9fdc365c50e" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:47.478ex; height:2.843ex;" alt="{\displaystyle T(k)=t(n,H)=\max(\min(k-3,9-k,1),-1)}"> is constructed as follows: <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle t_{1}=\min(k-3,9-k)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>t</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>=</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>k</mi> <mo>−</mo> <mn>3</mn> <mo>,</mo> <mn>9</mn> <mo>−</mo> <mi>k</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle t_{1}=\min(k-3,9-k)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/10d6bd46ac1b293c45e0acdf141dfd9227688768" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:22.139ex; height:2.843ex;" alt="{\displaystyle t_{1}=\min(k-3,9-k)}"> is a "triangle" for which values greater or equal to −1 start from k=2 and end at k=10, and the highest point is at k=6. Then by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle t_{2}=\min(t_{1},1)=\min(k-3,9-k,1)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>t</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </msub> <mo>=</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <msub> <mi>t</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mo>=</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>k</mi> <mo>−</mo> <mn>3</mn> <mo>,</mo> <mn>9</mn> <mo>−</mo> <mi>k</mi> <mo>,</mo> <mn>1</mn> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle t_{2}=\min(t_{1},1)=\min(k-3,9-k,1)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/80d215da41b554c5e30c6870eea284737c74677b" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:37.209ex; height:2.843ex;" alt="{\displaystyle t_{2}=\min(t_{1},1)=\min(k-3,9-k,1)}"> we change values bigger than 1 to equal 1. Then by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle t=\max(t_{2},-1)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>t</mi> <mo>=</mo> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <msub> <mi>t</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </msub> <mo>,</mo> <mo>−</mo> <mn>1</mn> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle t=\max(t_{2},-1)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/997cc01eb88800080855acd43fca4d3428a33039" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:15.972ex; height:2.843ex;" alt="{\displaystyle t=\max(t_{2},-1)}"> we change values less than −1 to equal −1. At this point, we get something similar to the red shape from fig. 24 after a vertical flip (where the maximum is 1 and the minimum is −1). The R,G,B functions of <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>H</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/75a9edddcca2f782014371f75dca39d7e13a9c1b" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:2.064ex; height:2.176ex;" alt="{\displaystyle H}"> use this shape transformed in the following way: modulo-shifted on <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/68baa052181f707c662844a465bfeeb135e82bab" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:1.98ex; height:2.176ex;" alt="{\displaystyle X}"> (by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle n}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>n</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle n}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/a601995d55609f2d9f5e233e36fbe9ea26011b3b" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:1.395ex; height:1.676ex;" alt="{\displaystyle n}">) (differently for R,G,B) scaled on <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle Y}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>Y</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle Y}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/961d67d6b454b4df2301ac571808a3538b3a6d3f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.171ex; width:1.773ex; height:2.009ex;" alt="{\displaystyle Y}"> (by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle -a}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo>−</mo> <mi>a</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle -a}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/6e0982b5868a66be1ed3ad7ef4bcd3d3db20f982" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.505ex; width:3.038ex; height:2.176ex;" alt="{\displaystyle -a}">) and shifted on <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle Y}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>Y</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle Y}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/961d67d6b454b4df2301ac571808a3538b3a6d3f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.171ex; width:1.773ex; height:2.009ex;" alt="{\displaystyle Y}"> (by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle L}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>L</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle L}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/103168b86f781fe6e9a4a87b8ea1cebe0ad4ede8" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:1.583ex; height:2.176ex;" alt="{\displaystyle L}">). We observe the following shape properties (Fig. 24 can help to get an intuition about them): <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle t(n,H)=-t(n+6,H)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mo>−</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>6</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle t(n,H)=-t(n+6,H)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/a8c3871267080d3f69ee1ba065be72e0ab897117" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:23.192ex; height:2.843ex;" alt="{\displaystyle t(n,H)=-t(n+6,H)}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle \min \ (t(n,H),t(n+4,H),t(n+8,H))=-1}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo movablelimits="true" form="prefix">min</mo> <mtext> </mtext> <mo stretchy="false">(</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>,</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>4</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>,</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>8</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo stretchy="false">)</mo> <mo>=</mo> <mo>−</mo> <mn>1</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle \min \ (t(n,H),t(n+4,H),t(n+8,H))=-1}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/32dc43b20c8122b6f82ec10333788207289638b8" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:44.218ex; height:2.843ex;" alt="{\displaystyle \min \ (t(n,H),t(n+4,H),t(n+8,H))=-1}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle \max \ (t(n,H),t(n+4,H),t(n+8,H))=+1}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo movablelimits="true" form="prefix">max</mo> <mtext> </mtext> <mo stretchy="false">(</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>,</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>4</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>,</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>8</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo stretchy="false">)</mo> <mo>=</mo> <mo>+</mo> <mn>1</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle \max \ (t(n,H),t(n+4,H),t(n+8,H))=+1}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/481f28cc0188486aef776452da7d25770761b441" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:44.669ex; height:2.843ex;" alt="{\displaystyle \max \ (t(n,H),t(n+4,H),t(n+8,H))=+1}"></dd></dl> <div class="mw-heading mw-heading4"><h4 id="HSV_to_RGB">HSV to RGB</h4>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=18" title="Edit section: HSV to RGB">edit</a>]</div> <figure typeof="mw:File/Thumb"><a href="/wiki/File:HSV-RGB-comparison.svg" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/HSV-RGB-comparison.svg/300px-HSV-RGB-comparison.svg.png" decoding="async" width="300" height="220" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/HSV-RGB-comparison.svg/450px-HSV-RGB-comparison.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5d/HSV-RGB-comparison.svg/600px-HSV-RGB-comparison.svg.png 2x" data-file-width="451" data-file-height="331" /></a><figcaption>Fig. 24. A graphical representation of RGB coordinates given values for HSV. This equation <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle V(1-S)=V-VS}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>V</mi> <mo stretchy="false">(</mo> <mn>1</mn> <mo>−</mo> <mi>S</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mi>V</mi> <mo>−</mo> <mi>V</mi> <mi>S</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle V(1-S)=V-VS}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/f07d32d8b3e2cb5a02cf746ab4d5b9e810c23afd" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:20.111ex; height:2.843ex;" alt="{\displaystyle V(1-S)=V-VS}"> shows origin of marked vertical axis values.</figcaption></figure> Given an HSV color with hue H ∈ [0°, 360°), saturation SV ∈ [0, 1], and value V ∈ [0, 1], we can use the same strategy. First, we find chroma: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle C=V\times S_{V}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>C</mi> <mo>=</mo> <mi>V</mi> <mo>×</mo> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle C=V\times S_{V}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/aa3e803e5b804168553a94412cfe46773fc82104" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.671ex; width:12.413ex; height:2.509ex;" alt="{\displaystyle C=V\times S_{V}}"></dd></dl> Then we can, again, find a point (R1, G1, B1) along the bottom three faces of the RGB cube, with the same hue and chroma as our color (using the intermediate value X for the second largest component of this color): <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>H</mi> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> </mfrac> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/21087dff4a545a4f972cb9a6c5c08b83b0b36c73" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.005ex; width:10.102ex; height:5.343ex;" alt="{\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X=C\times (1-|H^{\prime }{\bmod {2}}-1|)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> <mo>=</mo> <mi>C</mi> <mo>×</mo> <mo stretchy="false">(</mo> <mn>1</mn> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </mrow> <mo>−</mo> <mn>1</mn> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X=C\times (1-|H^{\prime }{\bmod {2}}-1|)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/24edef4d67c314c5aeeea52009f2d3b6188e562a" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:30.426ex; height:3.009ex;" alt="{\displaystyle X=C\times (1-|H^{\prime }{\bmod {2}}-1|)}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(C,X,0)&{\text{if }}0\leq H^{\prime }<1\\(X,C,0)&{\text{if }}1\leq H^{\prime }<2\\(0,C,X)&{\text{if }}2\leq H^{\prime }<3\\(0,X,C)&{\text{if }}3\leq H^{\prime }<4\\(X,0,C)&{\text{if }}4\leq H^{\prime }<5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <msub> <mi>R</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <msub> <mi>G</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <msub> <mi>B</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>C</mi> <mo>,</mo> <mi>X</mi> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>0</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>1</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>X</mi> <mo>,</mo> <mi>C</mi> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>1</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>2</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>C</mi> <mo>,</mo> <mi>X</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>2</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>3</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>X</mi> <mo>,</mo> <mi>C</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>3</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>4</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>X</mi> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mi>C</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>4</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>5</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>C</mi> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mi>X</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>5</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>6</mn> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(C,X,0)&{\text{if }}0\leq H^{\prime }<1\\(X,C,0)&{\text{if }}1\leq H^{\prime }<2\\(0,C,X)&{\text{if }}2\leq H^{\prime }<3\\(0,X,C)&{\text{if }}3\leq H^{\prime }<4\\(X,0,C)&{\text{if }}4\leq H^{\prime }<5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/7db2c48281ae430498e18a4ad390c3a9a10b416e" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -8.171ex; width:42.668ex; height:17.509ex;" alt="{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(C,X,0)&{\text{if }}0\leq H^{\prime }<1\\(X,C,0)&{\text{if }}1\leq H^{\prime }<2\\(0,C,X)&{\text{if }}2\leq H^{\prime }<3\\(0,X,C)&{\text{if }}3\leq H^{\prime }<4\\(X,0,C)&{\text{if }}4\leq H^{\prime }<5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}"></dd></dl> As before, when <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/57332722a2df7daf85669f27b3a5e70960079a5f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:2.788ex; height:2.509ex;" alt="{\displaystyle H^{\prime }}"> is an integer, "neighbouring" formulas would yield the same result. Finally, we can find R, G, and B by adding the same amount to each component, to match value: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle m=V-C}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>m</mi> <mo>=</mo> <mi>V</mi> <mo>−</mo> <mi>C</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle m=V-C}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/97918e88cafcd04ce1e21f8a102ed220addad85d" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.505ex; width:11.533ex; height:2.343ex;" alt="{\displaystyle m=V-C}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mo stretchy="false">(</mo> <msub> <mi>R</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo>,</mo> <msub> <mi>G</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo>,</mo> <msub> <mi>B</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d4ccd28bd860ded7648320adfd4cb1aa186b0fbe" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:39.367ex; height:2.843ex;" alt="{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}"></dd></dl> <div class="mw-heading mw-heading5"><h5 id="HSV_to_RGB_alternative">HSV to RGB alternative</h5>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=19" title="Edit section: HSV to RGB alternative">edit</a>]</div> Given a color with hue <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H\in [0^{\circ },360^{\circ }]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>H</mi> <mo>∈</mo> <mo stretchy="false">[</mo> <msup> <mn>0</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo>,</mo> <msup> <mn>360</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H\in [0^{\circ },360^{\circ }]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/9cf17f990e5505cd5aca4676434f793aebc81fd3" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:13.99ex; height:2.843ex;" alt="{\displaystyle H\in [0^{\circ },360^{\circ }]}">, saturation <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S=S_{V}\in [0,1]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>S</mi> <mo>=</mo> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S=S_{V}\in [0,1]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/65ea08aa03a8e276bb8b64658a2693d8d8f339c0" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:15.012ex; height:2.843ex;" alt="{\displaystyle S=S_{V}\in [0,1]}">, and value <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle V\in [0,1]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>V</mi> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle V\in [0,1]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/6c3f7b41a454e2fe2a6c9b33fbb6b5ba54b94c6b" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:9.28ex; height:2.843ex;" alt="{\displaystyle V\in [0,1]}">, first we define function : <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle f(n)=V-VS\max(0,\min(k,4-k,1))}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>f</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mi>V</mi> <mo>−</mo> <mi>V</mi> <mi>S</mi> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>k</mi> <mo>,</mo> <mn>4</mn> <mo>−</mo> <mi>k</mi> <mo>,</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle f(n)=V-VS\max(0,\min(k,4-k,1))}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/a4d4d5829a18dd1e4339a326d54a9635839a480f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:39.554ex; height:2.843ex;" alt="{\displaystyle f(n)=V-VS\max(0,\min(k,4-k,1))}"></dd></dl> where <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle k,n\in \mathbb {R} _{\geq 0}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>k</mi> <mo>,</mo> <mi>n</mi> <mo>∈</mo> <msub> <mrow class="MJX-TeXAtom-ORD"> <mi mathvariant="double-struck">R</mi> </mrow> <mrow class="MJX-TeXAtom-ORD"> <mo>≥</mo> <mn>0</mn> </mrow> </msub> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle k,n\in \mathbb {R} _{\geq 0}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/52aa3db5eb120682f481644a3f8ba593ba95b570" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:10.491ex; height:2.676ex;" alt="{\displaystyle k,n\in \mathbb {R} _{\geq 0}}"> and: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle k=(n+{\frac {H}{60^{\circ }}}){\bmod {6}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>k</mi> <mo>=</mo> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>H</mi> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> </mfrac> </mrow> <mo stretchy="false">)</mo> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>6</mn> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle k=(n+{\frac {H}{60^{\circ }}}){\bmod {6}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/7e96c674651471f7510a63d840cf11dc915757de" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.005ex; width:21.413ex; height:5.343ex;" alt="{\displaystyle k=(n+{\frac {H}{60^{\circ }}}){\bmod {6}}}"></dd></dl> And output R,G,B values (from <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle [0,1]^{3}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <msup> <mo stretchy="false">]</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>3</mn> </mrow> </msup> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle [0,1]^{3}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/6acf30b2833a5dfcfedce1e2ae9bd8e6f68eb885" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:5.707ex; height:3.176ex;" alt="{\displaystyle [0,1]^{3}}">) are: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R,G,B)=(f(5),f(3),f(1))}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mo stretchy="false">(</mo> <mi>f</mi> <mo stretchy="false">(</mo> <mn>5</mn> <mo stretchy="false">)</mo> <mo>,</mo> <mi>f</mi> <mo stretchy="false">(</mo> <mn>3</mn> <mo stretchy="false">)</mo> <mo>,</mo> <mi>f</mi> <mo stretchy="false">(</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R,G,B)=(f(5),f(3),f(1))}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/9c00bf44b618717966e6c03b70cf149005e35e93" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:28.959ex; height:2.843ex;" alt="{\displaystyle (R,G,B)=(f(5),f(3),f(1))}"></dd></dl> Above alternative equivalent formulas allow shorter implementation. In above formulas the <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle a{\bmod {b}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>a</mi> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mi>b</mi> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle a{\bmod {b}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/5a4080e7a1a76ffc9ccfeecbb0fc726890100d7a" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:7.909ex; height:2.176ex;" alt="{\displaystyle a{\bmod {b}}}"> returns also fractional part of module e.g. the formula <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle 7.4{\bmod {6}}=1.4}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mn>7.4</mn> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>6</mn> </mrow> </mrow> <mo>=</mo> <mn>1.4</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle 7.4{\bmod {6}}=1.4}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d354cecad86054b7f16f992dcb41b8244032338c" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:15.886ex; height:2.176ex;" alt="{\displaystyle 7.4{\bmod {6}}=1.4}">. The values of <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle k\in \mathbb {R} \land k\in [0,6)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>k</mi> <mo>∈</mo> <mrow class="MJX-TeXAtom-ORD"> <mi mathvariant="double-struck">R</mi> </mrow> <mo>∧</mo> <mi>k</mi> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>6</mn> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle k\in \mathbb {R} \land k\in [0,6)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/1a0d072af481774880bf6cf85376842fc4b5531f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:17.275ex; height:2.843ex;" alt="{\displaystyle k\in \mathbb {R} \land k\in [0,6)}">. The base shape <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle t(n,H)=T(k)=\max(0,\min(k,4-k,1))}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mi>T</mi> <mo stretchy="false">(</mo> <mi>k</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>k</mi> <mo>,</mo> <mn>4</mn> <mo>−</mo> <mi>k</mi> <mo>,</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle t(n,H)=T(k)=\max(0,\min(k,4-k,1))}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/c8be812159aa4d549780752466b7b623f9496054" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:41.667ex; height:2.843ex;" alt="{\displaystyle t(n,H)=T(k)=\max(0,\min(k,4-k,1))}"></dd></dl> is constructed as follows: <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle t_{1}=\min(k,4-k)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>t</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>=</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>k</mi> <mo>,</mo> <mn>4</mn> <mo>−</mo> <mi>k</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle t_{1}=\min(k,4-k)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/149dfb2c3c343e2fdb04459da1676dc4e2ef1a0d" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:18.136ex; height:2.843ex;" alt="{\displaystyle t_{1}=\min(k,4-k)}"> is "triangle" for which non-negative values starts from k=0, highest point at k=2 and "ends" at k=4, then we change values bigger than one to one by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle t_{2}=\min(t_{1},1)=\min(k,4-k,1)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>t</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </msub> <mo>=</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <msub> <mi>t</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <mn>1</mn> <mo stretchy="false">)</mo> <mo>=</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>k</mi> <mo>,</mo> <mn>4</mn> <mo>−</mo> <mi>k</mi> <mo>,</mo> <mn>1</mn> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle t_{2}=\min(t_{1},1)=\min(k,4-k,1)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/df866c2f8d75925abc17feb0d8bfdde49251679f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:33.206ex; height:2.843ex;" alt="{\displaystyle t_{2}=\min(t_{1},1)=\min(k,4-k,1)}">, then change negative values to zero by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle t=\max(t2,0)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>t</mi> <mo>=</mo> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <mi>t</mi> <mn>2</mn> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle t=\max(t2,0)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/00c2c60d3861d44f2a34ebcbdbc9a848bb8826ba" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:14.272ex; height:2.843ex;" alt="{\displaystyle t=\max(t2,0)}"> – and we get (for <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle n=0}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle n=0}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/26819344e55f5e671c76c07c18eb4291fcec85ae" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:5.656ex; height:2.176ex;" alt="{\displaystyle n=0}">) something similar to green shape from Fig. 24 (which max value is 1 and min value is 0). The R,G,B functions of <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>H</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/75a9edddcca2f782014371f75dca39d7e13a9c1b" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:2.064ex; height:2.176ex;" alt="{\displaystyle H}"> use this shape transformed in following way: modulo-shifted on <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/68baa052181f707c662844a465bfeeb135e82bab" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:1.98ex; height:2.176ex;" alt="{\displaystyle X}"> (by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle n}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>n</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle n}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/a601995d55609f2d9f5e233e36fbe9ea26011b3b" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:1.395ex; height:1.676ex;" alt="{\displaystyle n}">) (differently for R,G,B) scaled on <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle Y}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>Y</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle Y}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/961d67d6b454b4df2301ac571808a3538b3a6d3f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.171ex; width:1.773ex; height:2.009ex;" alt="{\displaystyle Y}"> (by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle -VS}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo>−</mo> <mi>V</mi> <mi>S</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle -VS}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/70efdcc1249522e75c7bae2dd313e30db57d1b5d" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.505ex; width:5.095ex; height:2.343ex;" alt="{\displaystyle -VS}">) and shifted on <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle Y}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>Y</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle Y}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/961d67d6b454b4df2301ac571808a3538b3a6d3f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.171ex; width:1.773ex; height:2.009ex;" alt="{\displaystyle Y}"> (by <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle V}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>V</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle V}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/af0f6064540e84211d0ffe4dac72098adfa52845" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:1.787ex; height:2.176ex;" alt="{\displaystyle V}">). We observe following shape properties(Fig. 24 can help to get intuition about this): <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle t(n,H)=1-t(n+3,H)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mn>1</mn> <mo>−</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>3</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle t(n,H)=1-t(n+3,H)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/840d518b9d31cb804ee4ef8762a91408f2926824" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:25.387ex; height:2.843ex;" alt="{\displaystyle t(n,H)=1-t(n+3,H)}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle \min(t(n,H),t(n+2,H),t(n+4,H))=0}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>,</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>2</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>,</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>4</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo stretchy="false">)</mo> <mo>=</mo> <mn>0</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle \min(t(n,H),t(n+2,H),t(n+4,H))=0}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/9e26ca301aa41a1136f9a80d86475784fe2b182d" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:41.443ex; height:2.843ex;" alt="{\displaystyle \min(t(n,H),t(n+2,H),t(n+4,H))=0}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle \max(t(n,H),t(n+2,H),t(n+4,H))=1}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>,</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>2</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo>,</mo> <mi>t</mi> <mo stretchy="false">(</mo> <mi>n</mi> <mo>+</mo> <mn>4</mn> <mo>,</mo> <mi>H</mi> <mo stretchy="false">)</mo> <mo stretchy="false">)</mo> <mo>=</mo> <mn>1</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle \max(t(n,H),t(n+2,H),t(n+4,H))=1}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/776c50cbaa1b6821e44343969c7eb92fd8495b74" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:41.893ex; height:2.843ex;" alt="{\displaystyle \max(t(n,H),t(n+2,H),t(n+4,H))=1}"></dd></dl> <div class="mw-heading mw-heading4"><h4 id="HSI_to_RGB">HSI to RGB</h4>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=20" title="Edit section: HSI to RGB">edit</a>]</div> Given an HSI color with hue H ∈ [0°, 360°), saturation SI ∈ [0, 1], and intensity I ∈ [0, 1], we can use the same strategy, in a slightly different order: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>H</mi> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> </mfrac> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/21087dff4a545a4f972cb9a6c5c08b83b0b36c73" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.005ex; width:10.102ex; height:5.343ex;" alt="{\displaystyle H^{\prime }={\frac {H}{60^{\circ }}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle Z=1-|H^{\prime }\;{\bmod {2}}-1|}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>Z</mi> <mo>=</mo> <mn>1</mn> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mspace width="thickmathspace" /> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </mrow> <mo>−</mo> <mn>1</mn> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle Z=1-|H^{\prime }\;{\bmod {2}}-1|}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/b875eec10c360315c61deb0b724f25c8fe264fd5" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:24.355ex; height:3.009ex;" alt="{\displaystyle Z=1-|H^{\prime }\;{\bmod {2}}-1|}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle C={\frac {3\cdot I\cdot S_{I}}{1+Z}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>C</mi> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mn>3</mn> <mo>⋅</mo> <mi>I</mi> <mo>⋅</mo> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>I</mi> </mrow> </msub> </mrow> <mrow> <mn>1</mn> <mo>+</mo> <mi>Z</mi> </mrow> </mfrac> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle C={\frac {3\cdot I\cdot S_{I}}{1+Z}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/a8bafd46aa7f5b76f47fe2ac3376e938afafd224" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.005ex; width:13.879ex; height:5.509ex;" alt="{\displaystyle C={\frac {3\cdot I\cdot S_{I}}{1+Z}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X=C\cdot Z}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> <mo>=</mo> <mi>C</mi> <mo>⋅</mo> <mi>Z</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X=C\cdot Z}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/08ec7792d5b4c556332d7b8d6c48d7b95e9986da" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:10.204ex; height:2.176ex;" alt="{\displaystyle X=C\cdot Z}"></dd></dl> Where <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle C}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>C</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle C}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/4fc55753007cd3c18576f7933f6f089196732029" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:1.766ex; height:2.176ex;" alt="{\displaystyle C}"> is the chroma. Then we can, again, find a point (R1, G1, B1) along the bottom three faces of the RGB cube, with the same hue and chroma as our color (using the intermediate value X for the second largest component of this color): <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1\leq H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2\leq H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3\leq H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4\leq H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <msub> <mi>R</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <msub> <mi>G</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <msub> <mi>B</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext> is undefined</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>C</mi> <mo>,</mo> <mi>X</mi> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>0</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>1</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>X</mi> <mo>,</mo> <mi>C</mi> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>1</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>2</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>C</mi> <mo>,</mo> <mi>X</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>2</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>3</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>X</mi> <mo>,</mo> <mi>C</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>3</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>4</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>X</mi> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mi>C</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>4</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>5</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>C</mi> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mi>X</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>5</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>6</mn> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1\leq H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2\leq H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3\leq H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4\leq H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/e2ac250cd0a826e7c05b5ad959e2962cbe5d8381" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -9.671ex; width:46.033ex; height:20.509ex;" alt="{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1\leq H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2\leq H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3\leq H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4\leq H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}"></dd></dl> Overlap (when <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/57332722a2df7daf85669f27b3a5e70960079a5f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:2.788ex; height:2.509ex;" alt="{\displaystyle H^{\prime }}"> is an integer) occurs because two ways to calculate the value are equivalent: <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X=0}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> <mo>=</mo> <mn>0</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X=0}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d519e9e94f279ea82581dfa70a2444e896e2d860" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:6.241ex; height:2.176ex;" alt="{\displaystyle X=0}"> or <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X=C}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> <mo>=</mo> <mi>C</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X=C}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/cf2a6a8d1dff09396b8aa67cf3b1af2768e52907" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:6.845ex; height:2.176ex;" alt="{\displaystyle X=C}">, as appropriate. Finally, we can find R, G, and B by adding the same amount to each component, to match lightness: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle m=I\cdot (1-S_{I})}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>m</mi> <mo>=</mo> <mi>I</mi> <mo>⋅</mo> <mo stretchy="false">(</mo> <mn>1</mn> <mo>−</mo> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>I</mi> </mrow> </msub> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle m=I\cdot (1-S_{I})}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/09659b4f3989c4ebe91dc02081a9231c5d75ef9e" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:16.288ex; height:2.843ex;" alt="{\displaystyle m=I\cdot (1-S_{I})}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mo stretchy="false">(</mo> <msub> <mi>R</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo>,</mo> <msub> <mi>G</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo>,</mo> <msub> <mi>B</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d4ccd28bd860ded7648320adfd4cb1aa186b0fbe" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:39.367ex; height:2.843ex;" alt="{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}"></dd></dl> <div class="mw-heading mw-heading4"><h4 id="Luma,_chroma_and_hue_to_RGB">Luma, chroma and hue to RGB</h4>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=21" title="Edit section: Luma, chroma and hue to RGB">edit</a>]</div> Given a color with hue H ∈ [0°, 360°), chroma C ∈ [0, 1], and luma Y′601 ∈ [0, 1],<a href="#cite_note-63">[U]</a> we can again use the same strategy. Since we already have H and C, we can straightaway find our point (R1, G1, B1) along the bottom three faces of the RGB cube: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle {\begin{aligned}H^{\prime }&={\frac {H}{60^{\circ }}}\\X&=C\times (1-|H^{\prime }{\bmod {2}}-1|)\end{aligned}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mrow class="MJX-TeXAtom-ORD"> <mtable columnalign="right left right left right left right left right left right left" rowspacing="3pt" columnspacing="0em 2em 0em 2em 0em 2em 0em 2em 0em 2em 0em" displaystyle="true"> <mtr> <mtd> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> </mtd> <mtd> <mi></mi> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>H</mi> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> </mfrac> </mrow> </mtd> </mtr> <mtr> <mtd> <mi>X</mi> </mtd> <mtd> <mi></mi> <mo>=</mo> <mi>C</mi> <mo>×</mo> <mo stretchy="false">(</mo> <mn>1</mn> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mrow class="MJX-TeXAtom-ORD"> <mo lspace="thickmathspace" rspace="thickmathspace">mod</mo> <mrow class="MJX-TeXAtom-ORD"> <mn>2</mn> </mrow> </mrow> <mo>−</mo> <mn>1</mn> <mrow class="MJX-TeXAtom-ORD"> <mo stretchy="false">|</mo> </mrow> <mo stretchy="false">)</mo> </mtd> </mtr> </mtable> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle {\begin{aligned}H^{\prime }&={\frac {H}{60^{\circ }}}\\X&=C\times (1-|H^{\prime }{\bmod {2}}-1|)\end{aligned}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/5a4aebd698da3ef06f364deb373ef9329273904d" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -3.671ex; width:31.985ex; height:8.509ex;" alt="{\displaystyle {\begin{aligned}H^{\prime }&={\frac {H}{60^{\circ }}}\\X&=C\times (1-|H^{\prime }{\bmod {2}}-1|)\end{aligned}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1\leq H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2\leq H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3\leq H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4\leq H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <msub> <mi>R</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <msub> <mi>G</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>,</mo> <msub> <mi>B</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext> is undefined</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>C</mi> <mo>,</mo> <mi>X</mi> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>0</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>1</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>X</mi> <mo>,</mo> <mi>C</mi> <mo>,</mo> <mn>0</mn> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>1</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>2</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>C</mi> <mo>,</mo> <mi>X</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>2</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>3</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mn>0</mn> <mo>,</mo> <mi>X</mi> <mo>,</mo> <mi>C</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>3</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>4</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>X</mi> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mi>C</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>4</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo>≤</mo> <mn>5</mn> </mtd> </mtr> <mtr> <mtd> <mo stretchy="false">(</mo> <mi>C</mi> <mo>,</mo> <mn>0</mn> <mo>,</mo> <mi>X</mi> <mo stretchy="false">)</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mn>5</mn> <mo>≤</mo> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> <mo><</mo> <mn>6</mn> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1\leq H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2\leq H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3\leq H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4\leq H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/e2ac250cd0a826e7c05b5ad959e2962cbe5d8381" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -9.671ex; width:46.033ex; height:20.509ex;" alt="{\displaystyle (R_{1},G_{1},B_{1})={\begin{cases}(0,0,0)&{\text{if }}H{\text{ is undefined}}\\(C,X,0)&{\text{if }}0\leq H^{\prime }\leq 1\\(X,C,0)&{\text{if }}1\leq H^{\prime }\leq 2\\(0,C,X)&{\text{if }}2\leq H^{\prime }\leq 3\\(0,X,C)&{\text{if }}3\leq H^{\prime }\leq 4\\(X,0,C)&{\text{if }}4\leq H^{\prime }\leq 5\\(C,0,X)&{\text{if }}5\leq H^{\prime }<6\end{cases}}}"></dd></dl> Overlap (when <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H^{\prime }}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msup> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msup> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H^{\prime }}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/57332722a2df7daf85669f27b3a5e70960079a5f" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:2.788ex; height:2.509ex;" alt="{\displaystyle H^{\prime }}"> is an integer) occurs because two ways to calculate the value are equivalent: <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X=0}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> <mo>=</mo> <mn>0</mn> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X=0}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d519e9e94f279ea82581dfa70a2444e896e2d860" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:6.241ex; height:2.176ex;" alt="{\displaystyle X=0}"> or <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X=C}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>X</mi> <mo>=</mo> <mi>C</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X=C}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/cf2a6a8d1dff09396b8aa67cf3b1af2768e52907" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.338ex; width:6.845ex; height:2.176ex;" alt="{\displaystyle X=C}">, as appropriate. Then we can find R, G, and B by adding the same amount to each component, to match luma: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle m=Y_{601}^{\prime }-(0.30R_{1}+0.59G_{1}+0.11B_{1})}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>m</mi> <mo>=</mo> <msubsup> <mi>Y</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>601</mn> </mrow> <mrow class="MJX-TeXAtom-ORD"> <mi class="MJX-variant" mathvariant="normal">′</mi> </mrow> </msubsup> <mo>−</mo> <mo stretchy="false">(</mo> <mn>0.30</mn> <msub> <mi>R</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mn>0.59</mn> <msub> <mi>G</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mn>0.11</mn> <msub> <mi>B</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle m=Y_{601}^{\prime }-(0.30R_{1}+0.59G_{1}+0.11B_{1})}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/fcc67dd572d6c30b99af4f28a1a195dac105bc78" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.005ex; width:40.438ex; height:3.009ex;" alt="{\displaystyle m=Y_{601}^{\prime }-(0.30R_{1}+0.59G_{1}+0.11B_{1})}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mo stretchy="false">(</mo> <msub> <mi>R</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo>,</mo> <msub> <mi>G</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo>,</mo> <msub> <mi>B</mi> <mrow class="MJX-TeXAtom-ORD"> <mn>1</mn> </mrow> </msub> <mo>+</mo> <mi>m</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d4ccd28bd860ded7648320adfd4cb1aa186b0fbe" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:39.367ex; height:2.843ex;" alt="{\displaystyle (R,G,B)=(R_{1}+m,G_{1}+m,B_{1}+m)}"></dd></dl> <div class="mw-heading mw-heading3"><h3 id="Interconversion">Interconversion</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=22" title="Edit section: Interconversion">edit</a>]</div> <div class="mw-heading mw-heading4"><h4 id="HSV_to_HSL">HSV to HSL</h4>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=23" title="Edit section: HSV to HSL">edit</a>]</div> Given a color with hue <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H_{V}\in [0^{\circ },360^{\circ })}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> <mo>∈</mo> <mo stretchy="false">[</mo> <msup> <mn>0</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo>,</mo> <msup> <mn>360</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H_{V}\in [0^{\circ },360^{\circ })}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/aff327fcec55292ba1e44fda747e07f701188fce" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:15.612ex; height:2.843ex;" alt="{\displaystyle H_{V}\in [0^{\circ },360^{\circ })}">, saturation <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S_{V}\in [0,1]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S_{V}\in [0,1]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/56fb4fd539b3e55e9ffba906e3f6232fc01eaf9c" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:10.414ex; height:2.843ex;" alt="{\displaystyle S_{V}\in [0,1]}">, and value <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle V\in [0,1]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>V</mi> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle V\in [0,1]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/6c3f7b41a454e2fe2a6c9b33fbb6b5ba54b94c6b" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:9.28ex; height:2.843ex;" alt="{\displaystyle V\in [0,1]}">, <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H_{L}=H_{V}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> <mo>=</mo> <msub> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H_{L}=H_{V}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/caa862597cf1b16bebeb22dbf17865fb70847368" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.671ex; width:9.808ex; height:2.509ex;" alt="{\displaystyle H_{L}=H_{V}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S_{L}={\begin{cases}0&{\text{if }}L=0{\text{ or }}L=1\\{\frac {V-L}{\min(L,1-L)}}&{\text{otherwise}}\\\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mn>0</mn> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>L</mi> <mo>=</mo> <mn>0</mn> <mrow class="MJX-TeXAtom-ORD"> <mtext> or </mtext> </mrow> <mi>L</mi> <mo>=</mo> <mn>1</mn> </mtd> </mtr> <mtr> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mi>V</mi> <mo>−</mo> <mi>L</mi> </mrow> <mrow> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>L</mi> <mo>,</mo> <mn>1</mn> <mo>−</mo> <mi>L</mi> <mo stretchy="false">)</mo> </mrow> </mfrac> </mrow> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>otherwise</mtext> </mrow> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S_{L}={\begin{cases}0&{\text{if }}L=0{\text{ or }}L=1\\{\frac {V-L}{\min(L,1-L)}}&{\text{otherwise}}\\\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/0a0083cfd36b5b5b736b2f062cdb479b8519064e" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -3.171ex; width:37.336ex; height:7.509ex;" alt="{\displaystyle S_{L}={\begin{cases}0&{\text{if }}L=0{\text{ or }}L=1\\{\frac {V-L}{\min(L,1-L)}}&{\text{otherwise}}\\\end{cases}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle L=V\left(1-{\frac {S_{V}}{2}}\right)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>L</mi> <mo>=</mo> <mi>V</mi> <mrow> <mo>(</mo> <mrow> <mn>1</mn> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> <mn>2</mn> </mfrac> </mrow> </mrow> <mo>)</mo> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle L=V\left(1-{\frac {S_{V}}{2}}\right)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/7324c2a10847594e207077cb1c2ca6b12e97116c" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.505ex; width:18.037ex; height:6.176ex;" alt="{\displaystyle L=V\left(1-{\frac {S_{V}}{2}}\right)}"></dd></dl> <div class="mw-heading mw-heading4"><h4 id="HSL_to_HSV">HSL to HSV</h4>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=24" title="Edit section: HSL to HSV">edit</a>]</div> Given a color with hue <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H_{L}\in [0^{\circ },360^{\circ })}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> <mo>∈</mo> <mo stretchy="false">[</mo> <msup> <mn>0</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo>,</mo> <msup> <mn>360</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H_{L}\in [0^{\circ },360^{\circ })}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/1eedea9520d45eced3fd8abd0c415a87dd025c2b" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:15.467ex; height:2.843ex;" alt="{\displaystyle H_{L}\in [0^{\circ },360^{\circ })}">, saturation <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S_{L}\in [0,1]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S_{L}\in [0,1]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/15f571ef115b29613a66f80d27302833c60805be" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:10.27ex; height:2.843ex;" alt="{\displaystyle S_{L}\in [0,1]}">, and luminance <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle L\in [0,1]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>L</mi> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle L\in [0,1]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/94ca2d1c06c3302b08d75f674d5f3bf2b3b324cb" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:9.076ex; height:2.843ex;" alt="{\displaystyle L\in [0,1]}">, <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H_{V}=H_{L}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> <mo>=</mo> <msub> <mi>H</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H_{V}=H_{L}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/77d42be12ce2480d575c6f52493f8afebc003807" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.671ex; width:9.808ex; height:2.509ex;" alt="{\displaystyle H_{V}=H_{L}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S_{V}={\begin{cases}0&{\text{if }}V=0\\2\left(1-{\frac {L}{V}}\right)&{\text{otherwise}}\\\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mn>0</mn> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>V</mi> <mo>=</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd> <mn>2</mn> <mrow> <mo>(</mo> <mrow> <mn>1</mn> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>L</mi> <mi>V</mi> </mfrac> </mrow> </mrow> <mo>)</mo> </mrow> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>otherwise</mtext> </mrow> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S_{V}={\begin{cases}0&{\text{if }}V=0\\2\left(1-{\frac {L}{V}}\right)&{\text{otherwise}}\\\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/5e0aed29e07c962851f596239daacddb0f569eae" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -3.171ex; width:30.972ex; height:7.509ex;" alt="{\displaystyle S_{V}={\begin{cases}0&{\text{if }}V=0\\2\left(1-{\frac {L}{V}}\right)&{\text{otherwise}}\\\end{cases}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle V=L+S_{L}\min(L,1-L)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>V</mi> <mo>=</mo> <mi>L</mi> <mo>+</mo> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>L</mi> <mo>,</mo> <mn>1</mn> <mo>−</mo> <mi>L</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle V=L+S_{L}\min(L,1-L)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/9580c7653bf59d6a176176bfd3cdfe1866ef16e4" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:26.359ex; height:2.843ex;" alt="{\displaystyle V=L+S_{L}\min(L,1-L)}"></dd></dl> <div class="mw-heading mw-heading3"><h3 id="From_RGB">From RGB</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=25" title="Edit section: From RGB">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">See also: <a href="#General_approach">§ General approach</a></div> This is a reiteration of the previous conversion. Value must be in range <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle R,G,B\in [0,1]}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo>∈</mo> <mo stretchy="false">[</mo> <mn>0</mn> <mo>,</mo> <mn>1</mn> <mo stretchy="false">]</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle R,G,B\in [0,1]}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/4df509b9bef4211262b8e7f03a4a22614d53245b" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:14.916ex; height:2.843ex;" alt="{\displaystyle R,G,B\in [0,1]}">. With maximum component (i. e. value) <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X_{\text{max}}:=\max(R,G,B)=:V}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>X</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>max</mtext> </mrow> </msub> <mo>:=</mo> <mo movablelimits="true" form="prefix">max</mo> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=:</mo> <mi>V</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X_{\text{max}}:=\max(R,G,B)=:V}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/1f4f7449deb70865b07e9be74f839e893349f1ce" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:28.051ex; height:2.843ex;" alt="{\displaystyle X_{\text{max}}:=\max(R,G,B)=:V}"></dd></dl> and minimum component <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle X_{\text{min}}:=\min(R,G,B)=V-C}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>X</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>min</mtext> </mrow> </msub> <mo>:=</mo> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mi>V</mi> <mo>−</mo> <mi>C</mi> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle X_{\text{min}}:=\min(R,G,B)=V-C}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/d3829e3bbbbadcd55cd4d204b965106c1b376abf" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:31.242ex; height:2.843ex;" alt="{\displaystyle X_{\text{min}}:=\min(R,G,B)=V-C}">,</dd></dl> range (i. e. chroma) <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle C:=X_{\text{max}}-X_{\text{min}}=2(V-L)}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>C</mi> <mo>:=</mo> <msub> <mi>X</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>max</mtext> </mrow> </msub> <mo>−</mo> <msub> <mi>X</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>min</mtext> </mrow> </msub> <mo>=</mo> <mn>2</mn> <mo stretchy="false">(</mo> <mi>V</mi> <mo>−</mo> <mi>L</mi> <mo stretchy="false">)</mo> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle C:=X_{\text{max}}-X_{\text{min}}=2(V-L)}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/e0c1921dd628e5c058a0dd553b747ec19412d975" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -0.838ex; width:30.745ex; height:2.843ex;" alt="{\displaystyle C:=X_{\text{max}}-X_{\text{min}}=2(V-L)}"></dd></dl> and mid-range (i. e. lightness) <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle L:=\operatorname {mid} (R,G,B)={\frac {X_{\text{max}}+X_{\text{min}}}{2}}=V-{\frac {C}{2}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>L</mi> <mo>:=</mo> <mi>mid</mi> <mo>⁡</mo> <mo stretchy="false">(</mo> <mi>R</mi> <mo>,</mo> <mi>G</mi> <mo>,</mo> <mi>B</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <msub> <mi>X</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>max</mtext> </mrow> </msub> <mo>+</mo> <msub> <mi>X</mi> <mrow class="MJX-TeXAtom-ORD"> <mtext>min</mtext> </mrow> </msub> </mrow> <mn>2</mn> </mfrac> </mrow> <mo>=</mo> <mi>V</mi> <mo>−</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>C</mi> <mn>2</mn> </mfrac> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle L:=\operatorname {mid} (R,G,B)={\frac {X_{\text{max}}+X_{\text{min}}}{2}}=V-{\frac {C}{2}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/2c09bfbe1b3cba0b1ea535e73acbb2456a873bfd" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -1.838ex; width:45.651ex; height:5.343ex;" alt="{\displaystyle L:=\operatorname {mid} (R,G,B)={\frac {X_{\text{max}}+X_{\text{min}}}{2}}=V-{\frac {C}{2}}}">,</dd></dl> we get common hue: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle H:={\begin{cases}0,&{\text{if }}C=0\\60^{\circ }\cdot \left({\frac {G-B}{C}}\mod 6\right),&{\text{if }}V=R\\60^{\circ }\cdot \left({\frac {B-R}{C}}+2\right),&{\text{if }}V=G\\60^{\circ }\cdot \left({\frac {R-G}{C}}+4\right),&{\text{if }}V=B\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <mi>H</mi> <mo>:=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mn>0</mn> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>C</mi> <mo>=</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo>⋅</mo> <mrow> <mo>(</mo> <mrow> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mi>G</mi> <mo>−</mo> <mi>B</mi> </mrow> <mi>C</mi> </mfrac> </mrow> <mspace width="0.667em" /> <mi>mod</mi> <mspace width="thinmathspace" /> <mspace width="thinmathspace" /> <mn>6</mn> </mrow> <mo>)</mo> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>V</mi> <mo>=</mo> <mi>R</mi> </mtd> </mtr> <mtr> <mtd> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo>⋅</mo> <mrow> <mo>(</mo> <mrow> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mi>B</mi> <mo>−</mo> <mi>R</mi> </mrow> <mi>C</mi> </mfrac> </mrow> <mo>+</mo> <mn>2</mn> </mrow> <mo>)</mo> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>V</mi> <mo>=</mo> <mi>G</mi> </mtd> </mtr> <mtr> <mtd> <msup> <mn>60</mn> <mrow class="MJX-TeXAtom-ORD"> <mo>∘</mo> </mrow> </msup> <mo>⋅</mo> <mrow> <mo>(</mo> <mrow> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mi>R</mi> <mo>−</mo> <mi>G</mi> </mrow> <mi>C</mi> </mfrac> </mrow> <mo>+</mo> <mn>4</mn> </mrow> <mo>)</mo> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>V</mi> <mo>=</mo> <mi>B</mi> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle H:={\begin{cases}0,&{\text{if }}C=0\\60^{\circ }\cdot \left({\frac {G-B}{C}}\mod 6\right),&{\text{if }}V=R\\60^{\circ }\cdot \left({\frac {B-R}{C}}+2\right),&{\text{if }}V=G\\60^{\circ }\cdot \left({\frac {R-G}{C}}+4\right),&{\text{if }}V=B\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/0652ba7138391433984e0b6e9dadbb83441df3d0" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -7.838ex; width:41.772ex; height:16.843ex;" alt="{\displaystyle H:={\begin{cases}0,&{\text{if }}C=0\\60^{\circ }\cdot \left({\frac {G-B}{C}}\mod 6\right),&{\text{if }}V=R\\60^{\circ }\cdot \left({\frac {B-R}{C}}+2\right),&{\text{if }}V=G\\60^{\circ }\cdot \left({\frac {R-G}{C}}+4\right),&{\text{if }}V=B\end{cases}}}"></dd></dl> and distinct saturations: <dl><dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S_{V}:={\begin{cases}0,&{\text{if }}V=0\\{\frac {C}{V}},&{\text{otherwise}}\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>V</mi> </mrow> </msub> <mo>:=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mn>0</mn> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>V</mi> <mo>=</mo> <mn>0</mn> </mtd> </mtr> <mtr> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>C</mi> <mi>V</mi> </mfrac> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>otherwise</mtext> </mrow> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S_{V}:={\begin{cases}0,&{\text{if }}V=0\\{\frac {C}{V}},&{\text{otherwise}}\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/a0c90deca383208abdbe6b9225805318e0e7d5e4" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -2.671ex; width:23.807ex; height:6.509ex;" alt="{\displaystyle S_{V}:={\begin{cases}0,&{\text{if }}V=0\\{\frac {C}{V}},&{\text{otherwise}}\end{cases}}}"></dd> <dd><math xmlns="http://www.w3.org/1998/Math/MathML" alttext="{\displaystyle S_{L}:={\begin{cases}0,&{\text{if }}L=0{\text{ or }}L=1\\{\frac {C}{1-\left\vert 2V-C-1\right\vert }}={\frac {2(V-L)}{1-\left\vert 2L-1\right\vert }}={\frac {V-L}{\min(L,1-L)}},&{\text{otherwise}}\end{cases}}}"> <semantics> <mrow class="MJX-TeXAtom-ORD"> <mstyle displaystyle="true" scriptlevel="0"> <msub> <mi>S</mi> <mrow class="MJX-TeXAtom-ORD"> <mi>L</mi> </mrow> </msub> <mo>:=</mo> <mrow class="MJX-TeXAtom-ORD"> <mrow> <mo>{</mo> <mtable columnalign="left left" rowspacing=".2em" columnspacing="1em" displaystyle="false"> <mtr> <mtd> <mn>0</mn> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>if </mtext> </mrow> <mi>L</mi> <mo>=</mo> <mn>0</mn> <mrow class="MJX-TeXAtom-ORD"> <mtext> or </mtext> </mrow> <mi>L</mi> <mo>=</mo> <mn>1</mn> </mtd> </mtr> <mtr> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mi>C</mi> <mrow> <mn>1</mn> <mo>−</mo> <mrow> <mo>|</mo> <mrow> <mn>2</mn> <mi>V</mi> <mo>−</mo> <mi>C</mi> <mo>−</mo> <mn>1</mn> </mrow> <mo>|</mo> </mrow> </mrow> </mfrac> </mrow> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mn>2</mn> <mo stretchy="false">(</mo> <mi>V</mi> <mo>−</mo> <mi>L</mi> <mo stretchy="false">)</mo> </mrow> <mrow> <mn>1</mn> <mo>−</mo> <mrow> <mo>|</mo> <mrow> <mn>2</mn> <mi>L</mi> <mo>−</mo> <mn>1</mn> </mrow> <mo>|</mo> </mrow> </mrow> </mfrac> </mrow> <mo>=</mo> <mrow class="MJX-TeXAtom-ORD"> <mfrac> <mrow> <mi>V</mi> <mo>−</mo> <mi>L</mi> </mrow> <mrow> <mo movablelimits="true" form="prefix">min</mo> <mo stretchy="false">(</mo> <mi>L</mi> <mo>,</mo> <mn>1</mn> <mo>−</mo> <mi>L</mi> <mo stretchy="false">)</mo> </mrow> </mfrac> </mrow> <mo>,</mo> </mtd> <mtd> <mrow class="MJX-TeXAtom-ORD"> <mtext>otherwise</mtext> </mrow> </mtd> </mtr> </mtable> <mo fence="true" stretchy="true" symmetric="true"></mo> </mrow> </mrow> </mstyle> </mrow> <annotation encoding="application/x-tex">{\displaystyle S_{L}:={\begin{cases}0,&{\text{if }}L=0{\text{ or }}L=1\\{\frac {C}{1-\left\vert 2V-C-1\right\vert }}={\frac {2(V-L)}{1-\left\vert 2L-1\right\vert }}={\frac {V-L}{\min(L,1-L)}},&{\text{otherwise}}\end{cases}}}</annotation> </semantics> </math><img src="https://wikimedia.org/api/rest_v1/media/math/render/svg/246c304bf5f40e470f7b1df216d85f156867e554" class="mwe-math-fallback-image-inline mw-invert skin-invert" aria-hidden="true" style="vertical-align: -3.171ex; width:63.285ex; height:7.509ex;" alt="{\displaystyle S_{L}:={\begin{cases}0,&{\text{if }}L=0{\text{ or }}L=1\\{\frac {C}{1-\left\vert 2V-C-1\right\vert }}={\frac {2(V-L)}{1-\left\vert 2L-1\right\vert }}={\frac {V-L}{\min(L,1-L)}},&{\text{otherwise}}\end{cases}}}"></dd></dl> <div class="mw-heading mw-heading2"><h2 id="Swatches">Swatches</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=26" title="Edit section: Swatches">edit</a>]</div> Mouse over the <a href="/wiki/Palette_(computing)" title="Palette (computing)">swatches</a> below to see the R, G, and B values for each swatch in a <a href="/wiki/Tooltip" title="Tooltip">tooltip</a>. <div class="mw-heading mw-heading3"><h3 id="HSL">HSL</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=27" title="Edit section: HSL">edit</a>]</div> <table style="background-color:#eeeeee; color:black;"> <tbody><tr><td colspan="2"><div style="float:right;padding-right:1em;"><style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist"><ul><li class="nv-view"><a href="/wiki/Template:Hsl-swatches" title="Template:Hsl-swatches">view</a></li><li class="nv-talk"><a href="/wiki/Template_talk:Hsl-swatches" title="Template talk:Hsl-swatches">talk</a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Hsl-swatches" title="Special:EditPage/Template:Hsl-swatches">edit</a></li></ul></div></div> </td></tr><tr> <td> <table style="background-color:#eeeeee; color:black; padding:1em;"> <tbody><tr> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 180° </th> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 0° </th></tr> <tr> <th scope="col" style="min-width:3em;">L \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><style data-mw-deduplicate="TemplateStyles:r1154941027">.mw-parser-output .frac{white-space:nowrap}.mw-parser-output .frac .num,.mw-parser-output .frac .den{font-size:80%;line-height:0;vertical-align:super}.mw-parser-output .frac .den{vertical-align:sub}.mw-parser-output .sr-only{border:0;clip:rect(0,0,0,0);clip-path:polygon(0px 0px,0px 0px,0px 0px);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}</style>3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#BFFFFF" title="R = 0.750, 
G = 1.000, 
B = 1.000 
(#BFFFFF)">  </td> <td style="color:inherit;background:#C7F7F7" title="R = 0.781, 
G = 0.969, 
B = 0.969 
(#C7F7F7)">  </td> <td style="color:inherit;background:#CFEFEF" title="R = 0.812, 
G = 0.938, 
B = 0.938 
(#CFEFEF)">  </td> <td style="color:inherit;background:#D7E7E7" title="R = 0.844, 
G = 0.906, 
B = 0.906 
(#D7E7E7)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#E7D7D7" title="R = 0.906, 
G = 0.844, 
B = 0.844 
(#E7D7D7)">  </td> <td style="color:inherit;background:#EFCFCF" title="R = 0.938, 
G = 0.812, 
B = 0.812 
(#EFCFCF)">  </td> <td style="color:inherit;background:#F7C7C7" title="R = 0.969, 
G = 0.781, 
B = 0.781 
(#F7C7C7)">  </td> <td style="color:inherit;background:#FFBFBF" title="R = 1.000, 
G = 0.750, 
B = 0.750 
(#FFBFBF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#80FFFF" title="R = 0.500, 
G = 1.000, 
B = 1.000 
(#80FFFF)">  </td> <td style="color:inherit;background:#8FEFEF" title="R = 0.562, 
G = 0.938, 
B = 0.938 
(#8FEFEF)">  </td> <td style="color:inherit;background:#9FDFDF" title="R = 0.625, 
G = 0.875, 
B = 0.875 
(#9FDFDF)">  </td> <td style="color:inherit;background:#AFCFCF" title="R = 0.688, 
G = 0.812, 
B = 0.812 
(#AFCFCF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#CFAFAF" title="R = 0.812, 
G = 0.688, 
B = 0.688 
(#CFAFAF)">  </td> <td style="color:inherit;background:#DF9F9F" title="R = 0.875, 
G = 0.625, 
B = 0.625 
(#DF9F9F)">  </td> <td style="color:inherit;background:#EF8F8F" title="R = 0.938, 
G = 0.562, 
B = 0.562 
(#EF8F8F)">  </td> <td style="color:inherit;background:#FF8080" title="R = 1.000, 
G = 0.500, 
B = 0.500 
(#FF8080)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#40FFFF" title="R = 0.250, 
G = 1.000, 
B = 1.000 
(#40FFFF)">  </td> <td style="color:inherit;background:#58E7E7" title="R = 0.344, 
G = 0.906, 
B = 0.906 
(#58E7E7)">  </td> <td style="color:inherit;background:#70CFCF" title="R = 0.438, 
G = 0.812, 
B = 0.812 
(#70CFCF)">  </td> <td style="color:inherit;background:#87B7B7" title="R = 0.531, 
G = 0.719, 
B = 0.719 
(#87B7B7)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#B78787" title="R = 0.719, 
G = 0.531, 
B = 0.531 
(#B78787)">  </td> <td style="color:inherit;background:#CF7070" title="R = 0.812, 
G = 0.438, 
B = 0.438 
(#CF7070)">  </td> <td style="color:inherit;background:#E75858" title="R = 0.906, 
G = 0.344, 
B = 0.344 
(#E75858)">  </td> <td style="color:inherit;background:#FF4040" title="R = 1.000, 
G = 0.250, 
B = 0.250 
(#FF4040)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#00FFFF" title="R = 0.000, 
G = 1.000, 
B = 1.000 
(#00FFFF)">  </td> <td style="color:inherit;background:#20DFDF" title="R = 0.125, 
G = 0.875, 
B = 0.875 
(#20DFDF)">  </td> <td style="color:inherit;background:#40BFBF" title="R = 0.250, 
G = 0.750, 
B = 0.750 
(#40BFBF)">  </td> <td style="color:inherit;background:#609F9F" title="R = 0.375, 
G = 0.625, 
B = 0.625 
(#609F9F)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#9F6060" title="R = 0.625, 
G = 0.375, 
B = 0.375 
(#9F6060)">  </td> <td style="color:inherit;background:#BF4040" title="R = 0.750, 
G = 0.250, 
B = 0.250 
(#BF4040)">  </td> <td style="color:inherit;background:#DF2020" title="R = 0.875, 
G = 0.125, 
B = 0.125 
(#DF2020)">  </td> <td style="color:inherit;background:#FF0000" title="R = 1.000, 
G = 0.000, 
B = 0.000 
(#FF0000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#00BFBF" title="R = 0.000, 
G = 0.750, 
B = 0.750 
(#00BFBF)">  </td> <td style="color:inherit;background:#18A7A7" title="R = 0.094, 
G = 0.656, 
B = 0.656 
(#18A7A7)">  </td> <td style="color:inherit;background:#308F8F" title="R = 0.188, 
G = 0.562, 
B = 0.562 
(#308F8F)">  </td> <td style="color:inherit;background:#487878" title="R = 0.281, 
G = 0.469, 
B = 0.469 
(#487878)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#784848" title="R = 0.469, 
G = 0.281, 
B = 0.281 
(#784848)">  </td> <td style="color:inherit;background:#8F3030" title="R = 0.562, 
G = 0.188, 
B = 0.188 
(#8F3030)">  </td> <td style="color:inherit;background:#A71818" title="R = 0.656, 
G = 0.094, 
B = 0.094 
(#A71818)">  </td> <td style="color:inherit;background:#BF0000" title="R = 0.750, 
G = 0.000, 
B = 0.000 
(#BF0000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#008080" title="R = 0.000, 
G = 0.500, 
B = 0.500 
(#008080)">  </td> <td style="color:inherit;background:#107070" title="R = 0.062, 
G = 0.438, 
B = 0.438 
(#107070)">  </td> <td style="color:inherit;background:#206060" title="R = 0.125, 
G = 0.375, 
B = 0.375 
(#206060)">  </td> <td style="color:inherit;background:#305050" title="R = 0.188, 
G = 0.312, 
B = 0.312 
(#305050)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#503030" title="R = 0.312, 
G = 0.188, 
B = 0.188 
(#503030)">  </td> <td style="color:inherit;background:#602020" title="R = 0.375, 
G = 0.125, 
B = 0.125 
(#602020)">  </td> <td style="color:inherit;background:#701010" title="R = 0.438, 
G = 0.062, 
B = 0.062 
(#701010)">  </td> <td style="color:inherit;background:#800000" title="R = 0.500, 
G = 0.000, 
B = 0.000 
(#800000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#004040" title="R = 0.000, 
G = 0.250, 
B = 0.250 
(#004040)">  </td> <td style="color:inherit;background:#083838" title="R = 0.031, 
G = 0.219, 
B = 0.219 
(#083838)">  </td> <td style="color:inherit;background:#103030" title="R = 0.062, 
G = 0.188, 
B = 0.188 
(#103030)">  </td> <td style="color:inherit;background:#182828" title="R = 0.094, 
G = 0.156, 
B = 0.156 
(#182828)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#281818" title="R = 0.156, 
G = 0.094, 
B = 0.094 
(#281818)">  </td> <td style="color:inherit;background:#301010" title="R = 0.188, 
G = 0.062, 
B = 0.062 
(#301010)">  </td> <td style="color:inherit;background:#380808" title="R = 0.219, 
G = 0.031, 
B = 0.031 
(#380808)">  </td> <td style="color:inherit;background:#400000" title="R = 0.250, 
G = 0.000, 
B = 0.000 
(#400000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td><td> <table style="background-color:#eeeeee; padding:1em;"> <tbody><tr> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 210° </th> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 30° </th></tr> <tr> <th scope="col" style="min-width:3em;">L \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#BFDFFF" title="R = 0.750, 
G = 0.875, 
B = 1.000 
(#BFDFFF)">  </td> <td style="color:inherit;background:#C7DFF7" title="R = 0.781, 
G = 0.875, 
B = 0.969 
(#C7DFF7)">  </td> <td style="color:inherit;background:#CFDFEF" title="R = 0.812, 
G = 0.875, 
B = 0.938 
(#CFDFEF)">  </td> <td style="color:inherit;background:#D7DFE7" title="R = 0.844, 
G = 0.875, 
B = 0.906 
(#D7DFE7)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#E7DFD7" title="R = 0.906, 
G = 0.875, 
B = 0.844 
(#E7DFD7)">  </td> <td style="color:inherit;background:#EFDFCF" title="R = 0.938, 
G = 0.875, 
B = 0.812 
(#EFDFCF)">  </td> <td style="color:inherit;background:#F7DFC7" title="R = 0.969, 
G = 0.875, 
B = 0.781 
(#F7DFC7)">  </td> <td style="color:inherit;background:#FFDFBF" title="R = 1.000, 
G = 0.875, 
B = 0.750 
(#FFDFBF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#80BFFF" title="R = 0.500, 
G = 0.750, 
B = 1.000 
(#80BFFF)">  </td> <td style="color:inherit;background:#8FBFEF" title="R = 0.562, 
G = 0.750, 
B = 0.938 
(#8FBFEF)">  </td> <td style="color:inherit;background:#9FBFDF" title="R = 0.625, 
G = 0.750, 
B = 0.875 
(#9FBFDF)">  </td> <td style="color:inherit;background:#AFBFCF" title="R = 0.688, 
G = 0.750, 
B = 0.812 
(#AFBFCF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#CFBFAF" title="R = 0.812, 
G = 0.750, 
B = 0.688 
(#CFBFAF)">  </td> <td style="color:inherit;background:#DFBF9F" title="R = 0.875, 
G = 0.750, 
B = 0.625 
(#DFBF9F)">  </td> <td style="color:inherit;background:#EFBF8F" title="R = 0.938, 
G = 0.750, 
B = 0.562 
(#EFBF8F)">  </td> <td style="color:inherit;background:#FFBF80" title="R = 1.000, 
G = 0.750, 
B = 0.500 
(#FFBF80)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#409FFF" title="R = 0.250, 
G = 0.625, 
B = 1.000 
(#409FFF)">  </td> <td style="color:inherit;background:#589FE7" title="R = 0.344, 
G = 0.625, 
B = 0.906 
(#589FE7)">  </td> <td style="color:inherit;background:#709FCF" title="R = 0.438, 
G = 0.625, 
B = 0.812 
(#709FCF)">  </td> <td style="color:inherit;background:#879FB7" title="R = 0.531, 
G = 0.625, 
B = 0.719 
(#879FB7)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#B79F87" title="R = 0.719, 
G = 0.625, 
B = 0.531 
(#B79F87)">  </td> <td style="color:inherit;background:#CF9F70" title="R = 0.812, 
G = 0.625, 
B = 0.438 
(#CF9F70)">  </td> <td style="color:inherit;background:#E79F58" title="R = 0.906, 
G = 0.625, 
B = 0.344 
(#E79F58)">  </td> <td style="color:inherit;background:#FF9F40" title="R = 1.000, 
G = 0.625, 
B = 0.250 
(#FF9F40)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#0080FF" title="R = 0.000, 
G = 0.500, 
B = 1.000 
(#0080FF)">  </td> <td style="color:inherit;background:#2080DF" title="R = 0.125, 
G = 0.500, 
B = 0.875 
(#2080DF)">  </td> <td style="color:inherit;background:#4080BF" title="R = 0.250, 
G = 0.500, 
B = 0.750 
(#4080BF)">  </td> <td style="color:inherit;background:#60809F" title="R = 0.375, 
G = 0.500, 
B = 0.625 
(#60809F)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#9F8060" title="R = 0.625, 
G = 0.500, 
B = 0.375 
(#9F8060)">  </td> <td style="color:inherit;background:#BF8040" title="R = 0.750, 
G = 0.500, 
B = 0.250 
(#BF8040)">  </td> <td style="color:inherit;background:#DF8020" title="R = 0.875, 
G = 0.500, 
B = 0.125 
(#DF8020)">  </td> <td style="color:inherit;background:#FF8000" title="R = 1.000, 
G = 0.500, 
B = 0.000 
(#FF8000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#0060BF" title="R = 0.000, 
G = 0.375, 
B = 0.750 
(#0060BF)">  </td> <td style="color:inherit;background:#1860A7" title="R = 0.094, 
G = 0.375, 
B = 0.656 
(#1860A7)">  </td> <td style="color:inherit;background:#30608F" title="R = 0.188, 
G = 0.375, 
B = 0.562 
(#30608F)">  </td> <td style="color:inherit;background:#486078" title="R = 0.281, 
G = 0.375, 
B = 0.469 
(#486078)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#786048" title="R = 0.469, 
G = 0.375, 
B = 0.281 
(#786048)">  </td> <td style="color:inherit;background:#8F6030" title="R = 0.562, 
G = 0.375, 
B = 0.188 
(#8F6030)">  </td> <td style="color:inherit;background:#A76018" title="R = 0.656, 
G = 0.375, 
B = 0.094 
(#A76018)">  </td> <td style="color:inherit;background:#BF6000" title="R = 0.750, 
G = 0.375, 
B = 0.000 
(#BF6000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#004080" title="R = 0.000, 
G = 0.250, 
B = 0.500 
(#004080)">  </td> <td style="color:inherit;background:#104070" title="R = 0.062, 
G = 0.250, 
B = 0.438 
(#104070)">  </td> <td style="color:inherit;background:#204060" title="R = 0.125, 
G = 0.250, 
B = 0.375 
(#204060)">  </td> <td style="color:inherit;background:#304050" title="R = 0.188, 
G = 0.250, 
B = 0.312 
(#304050)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#504030" title="R = 0.312, 
G = 0.250, 
B = 0.188 
(#504030)">  </td> <td style="color:inherit;background:#604020" title="R = 0.375, 
G = 0.250, 
B = 0.125 
(#604020)">  </td> <td style="color:inherit;background:#704010" title="R = 0.438, 
G = 0.250, 
B = 0.062 
(#704010)">  </td> <td style="color:inherit;background:#804000" title="R = 0.500, 
G = 0.250, 
B = 0.000 
(#804000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#002040" title="R = 0.000, 
G = 0.125, 
B = 0.250 
(#002040)">  </td> <td style="color:inherit;background:#082038" title="R = 0.031, 
G = 0.125, 
B = 0.219 
(#082038)">  </td> <td style="color:inherit;background:#102030" title="R = 0.062, 
G = 0.125, 
B = 0.188 
(#102030)">  </td> <td style="color:inherit;background:#182028" title="R = 0.094, 
G = 0.125, 
B = 0.156 
(#182028)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#282018" title="R = 0.156, 
G = 0.125, 
B = 0.094 
(#282018)">  </td> <td style="color:inherit;background:#302010" title="R = 0.188, 
G = 0.125, 
B = 0.062 
(#302010)">  </td> <td style="color:inherit;background:#382008" title="R = 0.219, 
G = 0.125, 
B = 0.031 
(#382008)">  </td> <td style="color:inherit;background:#402000" title="R = 0.250, 
G = 0.125, 
B = 0.000 
(#402000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td></tr><tr> <td> <table style="background-color:#eeeeee; padding:1em;"> <tbody><tr> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 240° </th> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 60° </th></tr> <tr> <th scope="col" style="min-width:3em;">L \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#BFBFFF" title="R = 0.750, 
G = 0.750, 
B = 1.000 
(#BFBFFF)">  </td> <td style="color:inherit;background:#C7C7F7" title="R = 0.781, 
G = 0.781, 
B = 0.969 
(#C7C7F7)">  </td> <td style="color:inherit;background:#CFCFEF" title="R = 0.812, 
G = 0.812, 
B = 0.938 
(#CFCFEF)">  </td> <td style="color:inherit;background:#D7D7E7" title="R = 0.844, 
G = 0.844, 
B = 0.906 
(#D7D7E7)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#E7E7D7" title="R = 0.906, 
G = 0.906, 
B = 0.844 
(#E7E7D7)">  </td> <td style="color:inherit;background:#EFEFCF" title="R = 0.938, 
G = 0.938, 
B = 0.812 
(#EFEFCF)">  </td> <td style="color:inherit;background:#F7F7C7" title="R = 0.969, 
G = 0.969, 
B = 0.781 
(#F7F7C7)">  </td> <td style="color:inherit;background:#FFFFBF" title="R = 1.000, 
G = 1.000, 
B = 0.750 
(#FFFFBF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#8080FF" title="R = 0.500, 
G = 0.500, 
B = 1.000 
(#8080FF)">  </td> <td style="color:inherit;background:#8F8FEF" title="R = 0.562, 
G = 0.562, 
B = 0.938 
(#8F8FEF)">  </td> <td style="color:inherit;background:#9F9FDF" title="R = 0.625, 
G = 0.625, 
B = 0.875 
(#9F9FDF)">  </td> <td style="color:inherit;background:#AFAFCF" title="R = 0.688, 
G = 0.688, 
B = 0.812 
(#AFAFCF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#CFCFAF" title="R = 0.812, 
G = 0.812, 
B = 0.688 
(#CFCFAF)">  </td> <td style="color:inherit;background:#DFDF9F" title="R = 0.875, 
G = 0.875, 
B = 0.625 
(#DFDF9F)">  </td> <td style="color:inherit;background:#EFEF8F" title="R = 0.938, 
G = 0.938, 
B = 0.562 
(#EFEF8F)">  </td> <td style="color:inherit;background:#FFFF80" title="R = 1.000, 
G = 1.000, 
B = 0.500 
(#FFFF80)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#4040FF" title="R = 0.250, 
G = 0.250, 
B = 1.000 
(#4040FF)">  </td> <td style="color:inherit;background:#5858E7" title="R = 0.344, 
G = 0.344, 
B = 0.906 
(#5858E7)">  </td> <td style="color:inherit;background:#7070CF" title="R = 0.438, 
G = 0.438, 
B = 0.812 
(#7070CF)">  </td> <td style="color:inherit;background:#8787B7" title="R = 0.531, 
G = 0.531, 
B = 0.719 
(#8787B7)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#B7B787" title="R = 0.719, 
G = 0.719, 
B = 0.531 
(#B7B787)">  </td> <td style="color:inherit;background:#CFCF70" title="R = 0.812, 
G = 0.812, 
B = 0.438 
(#CFCF70)">  </td> <td style="color:inherit;background:#E7E758" title="R = 0.906, 
G = 0.906, 
B = 0.344 
(#E7E758)">  </td> <td style="color:inherit;background:#FFFF40" title="R = 1.000, 
G = 1.000, 
B = 0.250 
(#FFFF40)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#0000FF" title="R = 0.000, 
G = 0.000, 
B = 1.000 
(#0000FF)">  </td> <td style="color:inherit;background:#2020DF" title="R = 0.125, 
G = 0.125, 
B = 0.875 
(#2020DF)">  </td> <td style="color:inherit;background:#4040BF" title="R = 0.250, 
G = 0.250, 
B = 0.750 
(#4040BF)">  </td> <td style="color:inherit;background:#60609F" title="R = 0.375, 
G = 0.375, 
B = 0.625 
(#60609F)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#9F9F60" title="R = 0.625, 
G = 0.625, 
B = 0.375 
(#9F9F60)">  </td> <td style="color:inherit;background:#BFBF40" title="R = 0.750, 
G = 0.750, 
B = 0.250 
(#BFBF40)">  </td> <td style="color:inherit;background:#DFDF20" title="R = 0.875, 
G = 0.875, 
B = 0.125 
(#DFDF20)">  </td> <td style="color:inherit;background:#FFFF00" title="R = 1.000, 
G = 1.000, 
B = 0.000 
(#FFFF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#0000BF" title="R = 0.000, 
G = 0.000, 
B = 0.750 
(#0000BF)">  </td> <td style="color:inherit;background:#1818A7" title="R = 0.094, 
G = 0.094, 
B = 0.656 
(#1818A7)">  </td> <td style="color:inherit;background:#30308F" title="R = 0.188, 
G = 0.188, 
B = 0.562 
(#30308F)">  </td> <td style="color:inherit;background:#484878" title="R = 0.281, 
G = 0.281, 
B = 0.469 
(#484878)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#787848" title="R = 0.469, 
G = 0.469, 
B = 0.281 
(#787848)">  </td> <td style="color:inherit;background:#8F8F30" title="R = 0.562, 
G = 0.562, 
B = 0.188 
(#8F8F30)">  </td> <td style="color:inherit;background:#A7A718" title="R = 0.656, 
G = 0.656, 
B = 0.094 
(#A7A718)">  </td> <td style="color:inherit;background:#BFBF00" title="R = 0.750, 
G = 0.750, 
B = 0.000 
(#BFBF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#000080" title="R = 0.000, 
G = 0.000, 
B = 0.500 
(#000080)">  </td> <td style="color:inherit;background:#101070" title="R = 0.062, 
G = 0.062, 
B = 0.438 
(#101070)">  </td> <td style="color:inherit;background:#202060" title="R = 0.125, 
G = 0.125, 
B = 0.375 
(#202060)">  </td> <td style="color:inherit;background:#303050" title="R = 0.188, 
G = 0.188, 
B = 0.312 
(#303050)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#505030" title="R = 0.312, 
G = 0.312, 
B = 0.188 
(#505030)">  </td> <td style="color:inherit;background:#606020" title="R = 0.375, 
G = 0.375, 
B = 0.125 
(#606020)">  </td> <td style="color:inherit;background:#707010" title="R = 0.438, 
G = 0.438, 
B = 0.062 
(#707010)">  </td> <td style="color:inherit;background:#808000" title="R = 0.500, 
G = 0.500, 
B = 0.000 
(#808000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#000040" title="R = 0.000, 
G = 0.000, 
B = 0.250 
(#000040)">  </td> <td style="color:inherit;background:#080838" title="R = 0.031, 
G = 0.031, 
B = 0.219 
(#080838)">  </td> <td style="color:inherit;background:#101030" title="R = 0.062, 
G = 0.062, 
B = 0.188 
(#101030)">  </td> <td style="color:inherit;background:#181828" title="R = 0.094, 
G = 0.094, 
B = 0.156 
(#181828)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#282818" title="R = 0.156, 
G = 0.156, 
B = 0.094 
(#282818)">  </td> <td style="color:inherit;background:#303010" title="R = 0.188, 
G = 0.188, 
B = 0.062 
(#303010)">  </td> <td style="color:inherit;background:#383808" title="R = 0.219, 
G = 0.219, 
B = 0.031 
(#383808)">  </td> <td style="color:inherit;background:#404000" title="R = 0.250, 
G = 0.250, 
B = 0.000 
(#404000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td><td> <table style="background-color:#eeeeee; padding:1em;"> <tbody><tr> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 270° </th> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 90° </th></tr> <tr> <th scope="col" style="min-width:3em;">L \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#DFBFFF" title="R = 0.875, 
G = 0.750, 
B = 1.000 
(#DFBFFF)">  </td> <td style="color:inherit;background:#DFC7F7" title="R = 0.875, 
G = 0.781, 
B = 0.969 
(#DFC7F7)">  </td> <td style="color:inherit;background:#DFCFEF" title="R = 0.875, 
G = 0.812, 
B = 0.938 
(#DFCFEF)">  </td> <td style="color:inherit;background:#DFD7E7" title="R = 0.875, 
G = 0.844, 
B = 0.906 
(#DFD7E7)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#DFE7D7" title="R = 0.875, 
G = 0.906, 
B = 0.844 
(#DFE7D7)">  </td> <td style="color:inherit;background:#DFEFCF" title="R = 0.875, 
G = 0.938, 
B = 0.812 
(#DFEFCF)">  </td> <td style="color:inherit;background:#DFF7C7" title="R = 0.875, 
G = 0.969, 
B = 0.781 
(#DFF7C7)">  </td> <td style="color:inherit;background:#DFFFBF" title="R = 0.875, 
G = 1.000, 
B = 0.750 
(#DFFFBF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#BF80FF" title="R = 0.750, 
G = 0.500, 
B = 1.000 
(#BF80FF)">  </td> <td style="color:inherit;background:#BF8FEF" title="R = 0.750, 
G = 0.562, 
B = 0.938 
(#BF8FEF)">  </td> <td style="color:inherit;background:#BF9FDF" title="R = 0.750, 
G = 0.625, 
B = 0.875 
(#BF9FDF)">  </td> <td style="color:inherit;background:#BFAFCF" title="R = 0.750, 
G = 0.688, 
B = 0.812 
(#BFAFCF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#BFCFAF" title="R = 0.750, 
G = 0.812, 
B = 0.688 
(#BFCFAF)">  </td> <td style="color:inherit;background:#BFDF9F" title="R = 0.750, 
G = 0.875, 
B = 0.625 
(#BFDF9F)">  </td> <td style="color:inherit;background:#BFEF8F" title="R = 0.750, 
G = 0.938, 
B = 0.562 
(#BFEF8F)">  </td> <td style="color:inherit;background:#BFFF80" title="R = 0.750, 
G = 1.000, 
B = 0.500 
(#BFFF80)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#9F40FF" title="R = 0.625, 
G = 0.250, 
B = 1.000 
(#9F40FF)">  </td> <td style="color:inherit;background:#9F58E7" title="R = 0.625, 
G = 0.344, 
B = 0.906 
(#9F58E7)">  </td> <td style="color:inherit;background:#9F70CF" title="R = 0.625, 
G = 0.438, 
B = 0.812 
(#9F70CF)">  </td> <td style="color:inherit;background:#9F87B7" title="R = 0.625, 
G = 0.531, 
B = 0.719 
(#9F87B7)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#9FB787" title="R = 0.625, 
G = 0.719, 
B = 0.531 
(#9FB787)">  </td> <td style="color:inherit;background:#9FCF70" title="R = 0.625, 
G = 0.812, 
B = 0.438 
(#9FCF70)">  </td> <td style="color:inherit;background:#9FE758" title="R = 0.625, 
G = 0.906, 
B = 0.344 
(#9FE758)">  </td> <td style="color:inherit;background:#9FFF40" title="R = 0.625, 
G = 1.000, 
B = 0.250 
(#9FFF40)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#8000FF" title="R = 0.500, 
G = 0.000, 
B = 1.000 
(#8000FF)">  </td> <td style="color:inherit;background:#8020DF" title="R = 0.500, 
G = 0.125, 
B = 0.875 
(#8020DF)">  </td> <td style="color:inherit;background:#8040BF" title="R = 0.500, 
G = 0.250, 
B = 0.750 
(#8040BF)">  </td> <td style="color:inherit;background:#80609F" title="R = 0.500, 
G = 0.375, 
B = 0.625 
(#80609F)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#809F60" title="R = 0.500, 
G = 0.625, 
B = 0.375 
(#809F60)">  </td> <td style="color:inherit;background:#80BF40" title="R = 0.500, 
G = 0.750, 
B = 0.250 
(#80BF40)">  </td> <td style="color:inherit;background:#80DF20" title="R = 0.500, 
G = 0.875, 
B = 0.125 
(#80DF20)">  </td> <td style="color:inherit;background:#80FF00" title="R = 0.500, 
G = 1.000, 
B = 0.000 
(#80FF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#6000BF" title="R = 0.375, 
G = 0.000, 
B = 0.750 
(#6000BF)">  </td> <td style="color:inherit;background:#6018A7" title="R = 0.375, 
G = 0.094, 
B = 0.656 
(#6018A7)">  </td> <td style="color:inherit;background:#60308F" title="R = 0.375, 
G = 0.188, 
B = 0.562 
(#60308F)">  </td> <td style="color:inherit;background:#604878" title="R = 0.375, 
G = 0.281, 
B = 0.469 
(#604878)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#607848" title="R = 0.375, 
G = 0.469, 
B = 0.281 
(#607848)">  </td> <td style="color:inherit;background:#608F30" title="R = 0.375, 
G = 0.562, 
B = 0.188 
(#608F30)">  </td> <td style="color:inherit;background:#60A718" title="R = 0.375, 
G = 0.656, 
B = 0.094 
(#60A718)">  </td> <td style="color:inherit;background:#60BF00" title="R = 0.375, 
G = 0.750, 
B = 0.000 
(#60BF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#400080" title="R = 0.250, 
G = 0.000, 
B = 0.500 
(#400080)">  </td> <td style="color:inherit;background:#401070" title="R = 0.250, 
G = 0.062, 
B = 0.438 
(#401070)">  </td> <td style="color:inherit;background:#402060" title="R = 0.250, 
G = 0.125, 
B = 0.375 
(#402060)">  </td> <td style="color:inherit;background:#403050" title="R = 0.250, 
G = 0.188, 
B = 0.312 
(#403050)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#405030" title="R = 0.250, 
G = 0.312, 
B = 0.188 
(#405030)">  </td> <td style="color:inherit;background:#406020" title="R = 0.250, 
G = 0.375, 
B = 0.125 
(#406020)">  </td> <td style="color:inherit;background:#407010" title="R = 0.250, 
G = 0.438, 
B = 0.062 
(#407010)">  </td> <td style="color:inherit;background:#408000" title="R = 0.250, 
G = 0.500, 
B = 0.000 
(#408000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#200040" title="R = 0.125, 
G = 0.000, 
B = 0.250 
(#200040)">  </td> <td style="color:inherit;background:#200838" title="R = 0.125, 
G = 0.031, 
B = 0.219 
(#200838)">  </td> <td style="color:inherit;background:#201030" title="R = 0.125, 
G = 0.062, 
B = 0.188 
(#201030)">  </td> <td style="color:inherit;background:#201828" title="R = 0.125, 
G = 0.094, 
B = 0.156 
(#201828)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#202818" title="R = 0.125, 
G = 0.156, 
B = 0.094 
(#202818)">  </td> <td style="color:inherit;background:#203010" title="R = 0.125, 
G = 0.188, 
B = 0.062 
(#203010)">  </td> <td style="color:inherit;background:#203808" title="R = 0.125, 
G = 0.219, 
B = 0.031 
(#203808)">  </td> <td style="color:inherit;background:#204000" title="R = 0.125, 
G = 0.250, 
B = 0.000 
(#204000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td></tr><tr> <td> <table style="background-color:#eeeeee; padding:1em;"> <tbody><tr> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 300° </th> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 120° </th></tr> <tr> <th scope="col" style="min-width:3em;">L \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#FFBFFF" title="R = 1.000, 
G = 0.750, 
B = 1.000 
(#FFBFFF)">  </td> <td style="color:inherit;background:#F7C7F7" title="R = 0.969, 
G = 0.781, 
B = 0.969 
(#F7C7F7)">  </td> <td style="color:inherit;background:#EFCFEF" title="R = 0.938, 
G = 0.812, 
B = 0.938 
(#EFCFEF)">  </td> <td style="color:inherit;background:#E7D7E7" title="R = 0.906, 
G = 0.844, 
B = 0.906 
(#E7D7E7)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#D7E7D7" title="R = 0.844, 
G = 0.906, 
B = 0.844 
(#D7E7D7)">  </td> <td style="color:inherit;background:#CFEFCF" title="R = 0.812, 
G = 0.938, 
B = 0.812 
(#CFEFCF)">  </td> <td style="color:inherit;background:#C7F7C7" title="R = 0.781, 
G = 0.969, 
B = 0.781 
(#C7F7C7)">  </td> <td style="color:inherit;background:#BFFFBF" title="R = 0.750, 
G = 1.000, 
B = 0.750 
(#BFFFBF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#FF80FF" title="R = 1.000, 
G = 0.500, 
B = 1.000 
(#FF80FF)">  </td> <td style="color:inherit;background:#EF8FEF" title="R = 0.938, 
G = 0.562, 
B = 0.938 
(#EF8FEF)">  </td> <td style="color:inherit;background:#DF9FDF" title="R = 0.875, 
G = 0.625, 
B = 0.875 
(#DF9FDF)">  </td> <td style="color:inherit;background:#CFAFCF" title="R = 0.812, 
G = 0.688, 
B = 0.812 
(#CFAFCF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#AFCFAF" title="R = 0.688, 
G = 0.812, 
B = 0.688 
(#AFCFAF)">  </td> <td style="color:inherit;background:#9FDF9F" title="R = 0.625, 
G = 0.875, 
B = 0.625 
(#9FDF9F)">  </td> <td style="color:inherit;background:#8FEF8F" title="R = 0.562, 
G = 0.938, 
B = 0.562 
(#8FEF8F)">  </td> <td style="color:inherit;background:#80FF80" title="R = 0.500, 
G = 1.000, 
B = 0.500 
(#80FF80)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#FF40FF" title="R = 1.000, 
G = 0.250, 
B = 1.000 
(#FF40FF)">  </td> <td style="color:inherit;background:#E758E7" title="R = 0.906, 
G = 0.344, 
B = 0.906 
(#E758E7)">  </td> <td style="color:inherit;background:#CF70CF" title="R = 0.812, 
G = 0.438, 
B = 0.812 
(#CF70CF)">  </td> <td style="color:inherit;background:#B787B7" title="R = 0.719, 
G = 0.531, 
B = 0.719 
(#B787B7)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#87B787" title="R = 0.531, 
G = 0.719, 
B = 0.531 
(#87B787)">  </td> <td style="color:inherit;background:#70CF70" title="R = 0.438, 
G = 0.812, 
B = 0.438 
(#70CF70)">  </td> <td style="color:inherit;background:#58E758" title="R = 0.344, 
G = 0.906, 
B = 0.344 
(#58E758)">  </td> <td style="color:inherit;background:#40FF40" title="R = 0.250, 
G = 1.000, 
B = 0.250 
(#40FF40)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#FF00FF" title="R = 1.000, 
G = 0.000, 
B = 1.000 
(#FF00FF)">  </td> <td style="color:inherit;background:#DF20DF" title="R = 0.875, 
G = 0.125, 
B = 0.875 
(#DF20DF)">  </td> <td style="color:inherit;background:#BF40BF" title="R = 0.750, 
G = 0.250, 
B = 0.750 
(#BF40BF)">  </td> <td style="color:inherit;background:#9F609F" title="R = 0.625, 
G = 0.375, 
B = 0.625 
(#9F609F)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#609F60" title="R = 0.375, 
G = 0.625, 
B = 0.375 
(#609F60)">  </td> <td style="color:inherit;background:#40BF40" title="R = 0.250, 
G = 0.750, 
B = 0.250 
(#40BF40)">  </td> <td style="color:inherit;background:#20DF20" title="R = 0.125, 
G = 0.875, 
B = 0.125 
(#20DF20)">  </td> <td style="color:inherit;background:#00FF00" title="R = 0.000, 
G = 1.000, 
B = 0.000 
(#00FF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#BF00BF" title="R = 0.750, 
G = 0.000, 
B = 0.750 
(#BF00BF)">  </td> <td style="color:inherit;background:#A718A7" title="R = 0.656, 
G = 0.094, 
B = 0.656 
(#A718A7)">  </td> <td style="color:inherit;background:#8F308F" title="R = 0.562, 
G = 0.188, 
B = 0.562 
(#8F308F)">  </td> <td style="color:inherit;background:#784878" title="R = 0.469, 
G = 0.281, 
B = 0.469 
(#784878)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#487848" title="R = 0.281, 
G = 0.469, 
B = 0.281 
(#487848)">  </td> <td style="color:inherit;background:#308F30" title="R = 0.188, 
G = 0.562, 
B = 0.188 
(#308F30)">  </td> <td style="color:inherit;background:#18A718" title="R = 0.094, 
G = 0.656, 
B = 0.094 
(#18A718)">  </td> <td style="color:inherit;background:#00BF00" title="R = 0.000, 
G = 0.750, 
B = 0.000 
(#00BF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#800080" title="R = 0.500, 
G = 0.000, 
B = 0.500 
(#800080)">  </td> <td style="color:inherit;background:#701070" title="R = 0.438, 
G = 0.062, 
B = 0.438 
(#701070)">  </td> <td style="color:inherit;background:#602060" title="R = 0.375, 
G = 0.125, 
B = 0.375 
(#602060)">  </td> <td style="color:inherit;background:#503050" title="R = 0.312, 
G = 0.188, 
B = 0.312 
(#503050)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#305030" title="R = 0.188, 
G = 0.312, 
B = 0.188 
(#305030)">  </td> <td style="color:inherit;background:#206020" title="R = 0.125, 
G = 0.375, 
B = 0.125 
(#206020)">  </td> <td style="color:inherit;background:#107010" title="R = 0.062, 
G = 0.438, 
B = 0.062 
(#107010)">  </td> <td style="color:inherit;background:#008000" title="R = 0.000, 
G = 0.500, 
B = 0.000 
(#008000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#400040" title="R = 0.250, 
G = 0.000, 
B = 0.250 
(#400040)">  </td> <td style="color:inherit;background:#380838" title="R = 0.219, 
G = 0.031, 
B = 0.219 
(#380838)">  </td> <td style="color:inherit;background:#301030" title="R = 0.188, 
G = 0.062, 
B = 0.188 
(#301030)">  </td> <td style="color:inherit;background:#281828" title="R = 0.156, 
G = 0.094, 
B = 0.156 
(#281828)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#182818" title="R = 0.094, 
G = 0.156, 
B = 0.094 
(#182818)">  </td> <td style="color:inherit;background:#103010" title="R = 0.062, 
G = 0.188, 
B = 0.062 
(#103010)">  </td> <td style="color:inherit;background:#083808" title="R = 0.031, 
G = 0.219, 
B = 0.031 
(#083808)">  </td> <td style="color:inherit;background:#004000" title="R = 0.000, 
G = 0.250, 
B = 0.000 
(#004000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td><td> <table style="background-color:#eeeeee; padding:1em;"> <tbody><tr> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 330° </th> <th scope="col">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 150° </th></tr> <tr> <th scope="col" style="min-width:3em;">L \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#FFBFDF" title="R = 1.000, 
G = 0.750, 
B = 0.875 
(#FFBFDF)">  </td> <td style="color:inherit;background:#F7C7DF" title="R = 0.969, 
G = 0.781, 
B = 0.875 
(#F7C7DF)">  </td> <td style="color:inherit;background:#EFCFDF" title="R = 0.938, 
G = 0.812, 
B = 0.875 
(#EFCFDF)">  </td> <td style="color:inherit;background:#E7D7DF" title="R = 0.906, 
G = 0.844, 
B = 0.875 
(#E7D7DF)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#D7E7DF" title="R = 0.844, 
G = 0.906, 
B = 0.875 
(#D7E7DF)">  </td> <td style="color:inherit;background:#CFEFDF" title="R = 0.812, 
G = 0.938, 
B = 0.875 
(#CFEFDF)">  </td> <td style="color:inherit;background:#C7F7DF" title="R = 0.781, 
G = 0.969, 
B = 0.875 
(#C7F7DF)">  </td> <td style="color:inherit;background:#BFFFDF" title="R = 0.750, 
G = 1.000, 
B = 0.875 
(#BFFFDF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#FF80BF" title="R = 1.000, 
G = 0.500, 
B = 0.750 
(#FF80BF)">  </td> <td style="color:inherit;background:#EF8FBF" title="R = 0.938, 
G = 0.562, 
B = 0.750 
(#EF8FBF)">  </td> <td style="color:inherit;background:#DF9FBF" title="R = 0.875, 
G = 0.625, 
B = 0.750 
(#DF9FBF)">  </td> <td style="color:inherit;background:#CFAFBF" title="R = 0.812, 
G = 0.688, 
B = 0.750 
(#CFAFBF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#AFCFBF" title="R = 0.688, 
G = 0.812, 
B = 0.750 
(#AFCFBF)">  </td> <td style="color:inherit;background:#9FDFBF" title="R = 0.625, 
G = 0.875, 
B = 0.750 
(#9FDFBF)">  </td> <td style="color:inherit;background:#8FEFBF" title="R = 0.562, 
G = 0.938, 
B = 0.750 
(#8FEFBF)">  </td> <td style="color:inherit;background:#80FFBF" title="R = 0.500, 
G = 1.000, 
B = 0.750 
(#80FFBF)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#FF409F" title="R = 1.000, 
G = 0.250, 
B = 0.625 
(#FF409F)">  </td> <td style="color:inherit;background:#E7589F" title="R = 0.906, 
G = 0.344, 
B = 0.625 
(#E7589F)">  </td> <td style="color:inherit;background:#CF709F" title="R = 0.812, 
G = 0.438, 
B = 0.625 
(#CF709F)">  </td> <td style="color:inherit;background:#B7879F" title="R = 0.719, 
G = 0.531, 
B = 0.625 
(#B7879F)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#87B79F" title="R = 0.531, 
G = 0.719, 
B = 0.625 
(#87B79F)">  </td> <td style="color:inherit;background:#70CF9F" title="R = 0.438, 
G = 0.812, 
B = 0.625 
(#70CF9F)">  </td> <td style="color:inherit;background:#58E79F" title="R = 0.344, 
G = 0.906, 
B = 0.625 
(#58E79F)">  </td> <td style="color:inherit;background:#40FF9F" title="R = 0.250, 
G = 1.000, 
B = 0.625 
(#40FF9F)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#FF0080" title="R = 1.000, 
G = 0.000, 
B = 0.500 
(#FF0080)">  </td> <td style="color:inherit;background:#DF2080" title="R = 0.875, 
G = 0.125, 
B = 0.500 
(#DF2080)">  </td> <td style="color:inherit;background:#BF4080" title="R = 0.750, 
G = 0.250, 
B = 0.500 
(#BF4080)">  </td> <td style="color:inherit;background:#9F6080" title="R = 0.625, 
G = 0.375, 
B = 0.500 
(#9F6080)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#609F80" title="R = 0.375, 
G = 0.625, 
B = 0.500 
(#609F80)">  </td> <td style="color:inherit;background:#40BF80" title="R = 0.250, 
G = 0.750, 
B = 0.500 
(#40BF80)">  </td> <td style="color:inherit;background:#20DF80" title="R = 0.125, 
G = 0.875, 
B = 0.500 
(#20DF80)">  </td> <td style="color:inherit;background:#00FF80" title="R = 0.000, 
G = 1.000, 
B = 0.500 
(#00FF80)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#BF0060" title="R = 0.750, 
G = 0.000, 
B = 0.375 
(#BF0060)">  </td> <td style="color:inherit;background:#A71860" title="R = 0.656, 
G = 0.094, 
B = 0.375 
(#A71860)">  </td> <td style="color:inherit;background:#8F3060" title="R = 0.562, 
G = 0.188, 
B = 0.375 
(#8F3060)">  </td> <td style="color:inherit;background:#784860" title="R = 0.469, 
G = 0.281, 
B = 0.375 
(#784860)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#487860" title="R = 0.281, 
G = 0.469, 
B = 0.375 
(#487860)">  </td> <td style="color:inherit;background:#308F60" title="R = 0.188, 
G = 0.562, 
B = 0.375 
(#308F60)">  </td> <td style="color:inherit;background:#18A760" title="R = 0.094, 
G = 0.656, 
B = 0.375 
(#18A760)">  </td> <td style="color:inherit;background:#00BF60" title="R = 0.000, 
G = 0.750, 
B = 0.375 
(#00BF60)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#800040" title="R = 0.500, 
G = 0.000, 
B = 0.250 
(#800040)">  </td> <td style="color:inherit;background:#701040" title="R = 0.438, 
G = 0.062, 
B = 0.250 
(#701040)">  </td> <td style="color:inherit;background:#602040" title="R = 0.375, 
G = 0.125, 
B = 0.250 
(#602040)">  </td> <td style="color:inherit;background:#503040" title="R = 0.312, 
G = 0.188, 
B = 0.250 
(#503040)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#305040" title="R = 0.188, 
G = 0.312, 
B = 0.250 
(#305040)">  </td> <td style="color:inherit;background:#206040" title="R = 0.125, 
G = 0.375, 
B = 0.250 
(#206040)">  </td> <td style="color:inherit;background:#107040" title="R = 0.062, 
G = 0.438, 
B = 0.250 
(#107040)">  </td> <td style="color:inherit;background:#008040" title="R = 0.000, 
G = 0.500, 
B = 0.250 
(#008040)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#400020" title="R = 0.250, 
G = 0.000, 
B = 0.125 
(#400020)">  </td> <td style="color:inherit;background:#380820" title="R = 0.219, 
G = 0.031, 
B = 0.125 
(#380820)">  </td> <td style="color:inherit;background:#301020" title="R = 0.188, 
G = 0.062, 
B = 0.125 
(#301020)">  </td> <td style="color:inherit;background:#281820" title="R = 0.156, 
G = 0.094, 
B = 0.125 
(#281820)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#182820" title="R = 0.094, 
G = 0.156, 
B = 0.125 
(#182820)">  </td> <td style="color:inherit;background:#103020" title="R = 0.062, 
G = 0.188, 
B = 0.125 
(#103020)">  </td> <td style="color:inherit;background:#083820" title="R = 0.031, 
G = 0.219, 
B = 0.125 
(#083820)">  </td> <td style="color:inherit;background:#004020" title="R = 0.000, 
G = 0.250, 
B = 0.125 
(#004020)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td></tr></tbody></table> <div class="mw-heading mw-heading3"><h3 id="HSV">HSV</h3>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=28" title="Edit section: HSV">edit</a>]</div> <table style="background-color:#eeeeee;color:black;"> <tbody><tr><td colspan="2"><div style="float:right;padding-right:1em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239400231"><div class="navbar plainlinks hlist"><ul><li class="nv-view"><a href="/wiki/Template:Hsv-swatches" title="Template:Hsv-swatches">view</a></li><li class="nv-talk"><a href="/wiki/Template_talk:Hsv-swatches" title="Template talk:Hsv-swatches">talk</a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Hsv-swatches" title="Special:EditPage/Template:Hsv-swatches">edit</a></li></ul></div></div> </td></tr><tr> <td> <table style="background-color:#eeeeee;color:black;padding:1em;"> <tbody><tr> <th scope="col" style="font-weight:normal;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 180° </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 0° </th></tr> <tr> <th style="min-width:3em">V \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#00FFFF" title="R = 0.000, 
G = 1.000, 
B = 1.000 
(#00FFFF)">  </td> <td style="color:inherit;background:#40FFFF" title="R = 0.250, 
G = 1.000, 
B = 1.000 
(#40FFFF)">  </td> <td style="color:inherit;background:#80FFFF" title="R = 0.500, 
G = 1.000, 
B = 1.000 
(#80FFFF)">  </td> <td style="color:inherit;background:#BFFFFF" title="R = 0.750, 
G = 1.000, 
B = 1.000 
(#BFFFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFBFBF" title="R = 1.000, 
G = 0.750, 
B = 0.750 
(#FFBFBF)">  </td> <td style="color:inherit;background:#FF8080" title="R = 1.000, 
G = 0.500, 
B = 0.500 
(#FF8080)">  </td> <td style="color:inherit;background:#FF4040" title="R = 1.000, 
G = 0.250, 
B = 0.250 
(#FF4040)">  </td> <td style="color:inherit;background:#FF0000" title="R = 1.000, 
G = 0.000, 
B = 0.000 
(#FF0000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#00DFDF" title="R = 0.000, 
G = 0.875, 
B = 0.875 
(#00DFDF)">  </td> <td style="color:inherit;background:#38DFDF" title="R = 0.219, 
G = 0.875, 
B = 0.875 
(#38DFDF)">  </td> <td style="color:inherit;background:#70DFDF" title="R = 0.438, 
G = 0.875, 
B = 0.875 
(#70DFDF)">  </td> <td style="color:inherit;background:#A7DFDF" title="R = 0.656, 
G = 0.875, 
B = 0.875 
(#A7DFDF)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#DFA7A7" title="R = 0.875, 
G = 0.656, 
B = 0.656 
(#DFA7A7)">  </td> <td style="color:inherit;background:#DF7070" title="R = 0.875, 
G = 0.438, 
B = 0.438 
(#DF7070)">  </td> <td style="color:inherit;background:#DF3838" title="R = 0.875, 
G = 0.219, 
B = 0.219 
(#DF3838)">  </td> <td style="color:inherit;background:#DF0000" title="R = 0.875, 
G = 0.000, 
B = 0.000 
(#DF0000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#00BFBF" title="R = 0.000, 
G = 0.750, 
B = 0.750 
(#00BFBF)">  </td> <td style="color:inherit;background:#30BFBF" title="R = 0.188, 
G = 0.750, 
B = 0.750 
(#30BFBF)">  </td> <td style="color:inherit;background:#60BFBF" title="R = 0.375, 
G = 0.750, 
B = 0.750 
(#60BFBF)">  </td> <td style="color:inherit;background:#8FBFBF" title="R = 0.562, 
G = 0.750, 
B = 0.750 
(#8FBFBF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#BF8F8F" title="R = 0.750, 
G = 0.562, 
B = 0.562 
(#BF8F8F)">  </td> <td style="color:inherit;background:#BF6060" title="R = 0.750, 
G = 0.375, 
B = 0.375 
(#BF6060)">  </td> <td style="color:inherit;background:#BF3030" title="R = 0.750, 
G = 0.188, 
B = 0.188 
(#BF3030)">  </td> <td style="color:inherit;background:#BF0000" title="R = 0.750, 
G = 0.000, 
B = 0.000 
(#BF0000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#009F9F" title="R = 0.000, 
G = 0.625, 
B = 0.625 
(#009F9F)">  </td> <td style="color:inherit;background:#289F9F" title="R = 0.156, 
G = 0.625, 
B = 0.625 
(#289F9F)">  </td> <td style="color:inherit;background:#509F9F" title="R = 0.312, 
G = 0.625, 
B = 0.625 
(#509F9F)">  </td> <td style="color:inherit;background:#789F9F" title="R = 0.469, 
G = 0.625, 
B = 0.625 
(#789F9F)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#9F7878" title="R = 0.625, 
G = 0.469, 
B = 0.469 
(#9F7878)">  </td> <td style="color:inherit;background:#9F5050" title="R = 0.625, 
G = 0.312, 
B = 0.312 
(#9F5050)">  </td> <td style="color:inherit;background:#9F2828" title="R = 0.625, 
G = 0.156, 
B = 0.156 
(#9F2828)">  </td> <td style="color:inherit;background:#9F0000" title="R = 0.625, 
G = 0.000, 
B = 0.000 
(#9F0000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#008080" title="R = 0.000, 
G = 0.500, 
B = 0.500 
(#008080)">  </td> <td style="color:inherit;background:#208080" title="R = 0.125, 
G = 0.500, 
B = 0.500 
(#208080)">  </td> <td style="color:inherit;background:#408080" title="R = 0.250, 
G = 0.500, 
B = 0.500 
(#408080)">  </td> <td style="color:inherit;background:#608080" title="R = 0.375, 
G = 0.500, 
B = 0.500 
(#608080)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#806060" title="R = 0.500, 
G = 0.375, 
B = 0.375 
(#806060)">  </td> <td style="color:inherit;background:#804040" title="R = 0.500, 
G = 0.250, 
B = 0.250 
(#804040)">  </td> <td style="color:inherit;background:#802020" title="R = 0.500, 
G = 0.125, 
B = 0.125 
(#802020)">  </td> <td style="color:inherit;background:#800000" title="R = 0.500, 
G = 0.000, 
B = 0.000 
(#800000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#006060" title="R = 0.000, 
G = 0.375, 
B = 0.375 
(#006060)">  </td> <td style="color:inherit;background:#186060" title="R = 0.094, 
G = 0.375, 
B = 0.375 
(#186060)">  </td> <td style="color:inherit;background:#306060" title="R = 0.188, 
G = 0.375, 
B = 0.375 
(#306060)">  </td> <td style="color:inherit;background:#486060" title="R = 0.281, 
G = 0.375, 
B = 0.375 
(#486060)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#604848" title="R = 0.375, 
G = 0.281, 
B = 0.281 
(#604848)">  </td> <td style="color:inherit;background:#603030" title="R = 0.375, 
G = 0.188, 
B = 0.188 
(#603030)">  </td> <td style="color:inherit;background:#601818" title="R = 0.375, 
G = 0.094, 
B = 0.094 
(#601818)">  </td> <td style="color:inherit;background:#600000" title="R = 0.375, 
G = 0.000, 
B = 0.000 
(#600000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#004040" title="R = 0.000, 
G = 0.250, 
B = 0.250 
(#004040)">  </td> <td style="color:inherit;background:#104040" title="R = 0.062, 
G = 0.250, 
B = 0.250 
(#104040)">  </td> <td style="color:inherit;background:#204040" title="R = 0.125, 
G = 0.250, 
B = 0.250 
(#204040)">  </td> <td style="color:inherit;background:#304040" title="R = 0.188, 
G = 0.250, 
B = 0.250 
(#304040)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#403030" title="R = 0.250, 
G = 0.188, 
B = 0.188 
(#403030)">  </td> <td style="color:inherit;background:#402020" title="R = 0.250, 
G = 0.125, 
B = 0.125 
(#402020)">  </td> <td style="color:inherit;background:#401010" title="R = 0.250, 
G = 0.062, 
B = 0.062 
(#401010)">  </td> <td style="color:inherit;background:#400000" title="R = 0.250, 
G = 0.000, 
B = 0.000 
(#400000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#002020" title="R = 0.000, 
G = 0.125, 
B = 0.125 
(#002020)">  </td> <td style="color:inherit;background:#082020" title="R = 0.031, 
G = 0.125, 
B = 0.125 
(#082020)">  </td> <td style="color:inherit;background:#102020" title="R = 0.062, 
G = 0.125, 
B = 0.125 
(#102020)">  </td> <td style="color:inherit;background:#182020" title="R = 0.094, 
G = 0.125, 
B = 0.125 
(#182020)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#201818" title="R = 0.125, 
G = 0.094, 
B = 0.094 
(#201818)">  </td> <td style="color:inherit;background:#201010" title="R = 0.125, 
G = 0.062, 
B = 0.062 
(#201010)">  </td> <td style="color:inherit;background:#200808" title="R = 0.125, 
G = 0.031, 
B = 0.031 
(#200808)">  </td> <td style="color:inherit;background:#200000" title="R = 0.125, 
G = 0.000, 
B = 0.000 
(#200000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td><td> <table style="background-color:#eeeeee;color:black;padding:1em;"> <tbody><tr> <th scope="col" style="font-weight:normal;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 210° </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 30° </th></tr> <tr> <th style="min-width:3em">V \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#0080FF" title="R = 0.000, 
G = 0.500, 
B = 1.000 
(#0080FF)">  </td> <td style="color:inherit;background:#409FFF" title="R = 0.250, 
G = 0.625, 
B = 1.000 
(#409FFF)">  </td> <td style="color:inherit;background:#80BFFF" title="R = 0.500, 
G = 0.750, 
B = 1.000 
(#80BFFF)">  </td> <td style="color:inherit;background:#BFDFFF" title="R = 0.750, 
G = 0.875, 
B = 1.000 
(#BFDFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFDFBF" title="R = 1.000, 
G = 0.875, 
B = 0.750 
(#FFDFBF)">  </td> <td style="color:inherit;background:#FFBF80" title="R = 1.000, 
G = 0.750, 
B = 0.500 
(#FFBF80)">  </td> <td style="color:inherit;background:#FF9F40" title="R = 1.000, 
G = 0.625, 
B = 0.250 
(#FF9F40)">  </td> <td style="color:inherit;background:#FF8000" title="R = 1.000, 
G = 0.500, 
B = 0.000 
(#FF8000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#0070DF" title="R = 0.000, 
G = 0.438, 
B = 0.875 
(#0070DF)">  </td> <td style="color:inherit;background:#388BDF" title="R = 0.219, 
G = 0.547, 
B = 0.875 
(#388BDF)">  </td> <td style="color:inherit;background:#70A7DF" title="R = 0.438, 
G = 0.656, 
B = 0.875 
(#70A7DF)">  </td> <td style="color:inherit;background:#A7C3DF" title="R = 0.656, 
G = 0.766, 
B = 0.875 
(#A7C3DF)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#DFC3A7" title="R = 0.875, 
G = 0.766, 
B = 0.656 
(#DFC3A7)">  </td> <td style="color:inherit;background:#DFA770" title="R = 0.875, 
G = 0.656, 
B = 0.438 
(#DFA770)">  </td> <td style="color:inherit;background:#DF8B38" title="R = 0.875, 
G = 0.547, 
B = 0.219 
(#DF8B38)">  </td> <td style="color:inherit;background:#DF7000" title="R = 0.875, 
G = 0.438, 
B = 0.000 
(#DF7000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#0060BF" title="R = 0.000, 
G = 0.375, 
B = 0.750 
(#0060BF)">  </td> <td style="color:inherit;background:#3078BF" title="R = 0.188, 
G = 0.469, 
B = 0.750 
(#3078BF)">  </td> <td style="color:inherit;background:#608FBF" title="R = 0.375, 
G = 0.562, 
B = 0.750 
(#608FBF)">  </td> <td style="color:inherit;background:#8FA7BF" title="R = 0.562, 
G = 0.656, 
B = 0.750 
(#8FA7BF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#BFA78F" title="R = 0.750, 
G = 0.656, 
B = 0.562 
(#BFA78F)">  </td> <td style="color:inherit;background:#BF8F60" title="R = 0.750, 
G = 0.562, 
B = 0.375 
(#BF8F60)">  </td> <td style="color:inherit;background:#BF7830" title="R = 0.750, 
G = 0.469, 
B = 0.188 
(#BF7830)">  </td> <td style="color:inherit;background:#BF6000" title="R = 0.750, 
G = 0.375, 
B = 0.000 
(#BF6000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#00509F" title="R = 0.000, 
G = 0.312, 
B = 0.625 
(#00509F)">  </td> <td style="color:inherit;background:#28649F" title="R = 0.156, 
G = 0.391, 
B = 0.625 
(#28649F)">  </td> <td style="color:inherit;background:#50789F" title="R = 0.312, 
G = 0.469, 
B = 0.625 
(#50789F)">  </td> <td style="color:inherit;background:#788B9F" title="R = 0.469, 
G = 0.547, 
B = 0.625 
(#788B9F)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#9F8B78" title="R = 0.625, 
G = 0.547, 
B = 0.469 
(#9F8B78)">  </td> <td style="color:inherit;background:#9F7850" title="R = 0.625, 
G = 0.469, 
B = 0.312 
(#9F7850)">  </td> <td style="color:inherit;background:#9F6428" title="R = 0.625, 
G = 0.391, 
B = 0.156 
(#9F6428)">  </td> <td style="color:inherit;background:#9F5000" title="R = 0.625, 
G = 0.312, 
B = 0.000 
(#9F5000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#004080" title="R = 0.000, 
G = 0.250, 
B = 0.500 
(#004080)">  </td> <td style="color:inherit;background:#205080" title="R = 0.125, 
G = 0.312, 
B = 0.500 
(#205080)">  </td> <td style="color:inherit;background:#406080" title="R = 0.250, 
G = 0.375, 
B = 0.500 
(#406080)">  </td> <td style="color:inherit;background:#607080" title="R = 0.375, 
G = 0.438, 
B = 0.500 
(#607080)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#807060" title="R = 0.500, 
G = 0.438, 
B = 0.375 
(#807060)">  </td> <td style="color:inherit;background:#806040" title="R = 0.500, 
G = 0.375, 
B = 0.250 
(#806040)">  </td> <td style="color:inherit;background:#805020" title="R = 0.500, 
G = 0.312, 
B = 0.125 
(#805020)">  </td> <td style="color:inherit;background:#804000" title="R = 0.500, 
G = 0.250, 
B = 0.000 
(#804000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#003060" title="R = 0.000, 
G = 0.188, 
B = 0.375 
(#003060)">  </td> <td style="color:inherit;background:#183C60" title="R = 0.094, 
G = 0.234, 
B = 0.375 
(#183C60)">  </td> <td style="color:inherit;background:#304860" title="R = 0.188, 
G = 0.281, 
B = 0.375 
(#304860)">  </td> <td style="color:inherit;background:#485460" title="R = 0.281, 
G = 0.328, 
B = 0.375 
(#485460)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#605448" title="R = 0.375, 
G = 0.328, 
B = 0.281 
(#605448)">  </td> <td style="color:inherit;background:#604830" title="R = 0.375, 
G = 0.281, 
B = 0.188 
(#604830)">  </td> <td style="color:inherit;background:#603C18" title="R = 0.375, 
G = 0.234, 
B = 0.094 
(#603C18)">  </td> <td style="color:inherit;background:#603000" title="R = 0.375, 
G = 0.188, 
B = 0.000 
(#603000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#002040" title="R = 0.000, 
G = 0.125, 
B = 0.250 
(#002040)">  </td> <td style="color:inherit;background:#102840" title="R = 0.062, 
G = 0.156, 
B = 0.250 
(#102840)">  </td> <td style="color:inherit;background:#203040" title="R = 0.125, 
G = 0.188, 
B = 0.250 
(#203040)">  </td> <td style="color:inherit;background:#303840" title="R = 0.188, 
G = 0.219, 
B = 0.250 
(#303840)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#403830" title="R = 0.250, 
G = 0.219, 
B = 0.188 
(#403830)">  </td> <td style="color:inherit;background:#403020" title="R = 0.250, 
G = 0.188, 
B = 0.125 
(#403020)">  </td> <td style="color:inherit;background:#402810" title="R = 0.250, 
G = 0.156, 
B = 0.062 
(#402810)">  </td> <td style="color:inherit;background:#402000" title="R = 0.250, 
G = 0.125, 
B = 0.000 
(#402000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#001020" title="R = 0.000, 
G = 0.062, 
B = 0.125 
(#001020)">  </td> <td style="color:inherit;background:#081420" title="R = 0.031, 
G = 0.078, 
B = 0.125 
(#081420)">  </td> <td style="color:inherit;background:#101820" title="R = 0.062, 
G = 0.094, 
B = 0.125 
(#101820)">  </td> <td style="color:inherit;background:#181C20" title="R = 0.094, 
G = 0.109, 
B = 0.125 
(#181C20)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#201C18" title="R = 0.125, 
G = 0.109, 
B = 0.094 
(#201C18)">  </td> <td style="color:inherit;background:#201810" title="R = 0.125, 
G = 0.094, 
B = 0.062 
(#201810)">  </td> <td style="color:inherit;background:#201408" title="R = 0.125, 
G = 0.078, 
B = 0.031 
(#201408)">  </td> <td style="color:inherit;background:#201000" title="R = 0.125, 
G = 0.062, 
B = 0.000 
(#201000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td></tr><tr> <td> <table style="background-color:#eeeeee;color:black;padding:1em;"> <tbody><tr> <th scope="col" style="font-weight:normal;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 240° </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 60° </th></tr> <tr> <th style="min-width:3em">V \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#0000FF" title="R = 0.000, 
G = 0.000, 
B = 1.000 
(#0000FF)">  </td> <td style="color:inherit;background:#4040FF" title="R = 0.250, 
G = 0.250, 
B = 1.000 
(#4040FF)">  </td> <td style="color:inherit;background:#8080FF" title="R = 0.500, 
G = 0.500, 
B = 1.000 
(#8080FF)">  </td> <td style="color:inherit;background:#BFBFFF" title="R = 0.750, 
G = 0.750, 
B = 1.000 
(#BFBFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#FFFFBF" title="R = 1.000, 
G = 1.000, 
B = 0.750 
(#FFFFBF)">  </td> <td style="color:inherit;background:#FFFF80" title="R = 1.000, 
G = 1.000, 
B = 0.500 
(#FFFF80)">  </td> <td style="color:inherit;background:#FFFF40" title="R = 1.000, 
G = 1.000, 
B = 0.250 
(#FFFF40)">  </td> <td style="color:inherit;background:#FFFF00" title="R = 1.000, 
G = 1.000, 
B = 0.000 
(#FFFF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#0000DF" title="R = 0.000, 
G = 0.000, 
B = 0.875 
(#0000DF)">  </td> <td style="color:inherit;background:#3838DF" title="R = 0.219, 
G = 0.219, 
B = 0.875 
(#3838DF)">  </td> <td style="color:inherit;background:#7070DF" title="R = 0.438, 
G = 0.438, 
B = 0.875 
(#7070DF)">  </td> <td style="color:inherit;background:#A7A7DF" title="R = 0.656, 
G = 0.656, 
B = 0.875 
(#A7A7DF)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#DFDFA7" title="R = 0.875, 
G = 0.875, 
B = 0.656 
(#DFDFA7)">  </td> <td style="color:inherit;background:#DFDF70" title="R = 0.875, 
G = 0.875, 
B = 0.438 
(#DFDF70)">  </td> <td style="color:inherit;background:#DFDF38" title="R = 0.875, 
G = 0.875, 
B = 0.219 
(#DFDF38)">  </td> <td style="color:inherit;background:#DFDF00" title="R = 0.875, 
G = 0.875, 
B = 0.000 
(#DFDF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#0000BF" title="R = 0.000, 
G = 0.000, 
B = 0.750 
(#0000BF)">  </td> <td style="color:inherit;background:#3030BF" title="R = 0.188, 
G = 0.188, 
B = 0.750 
(#3030BF)">  </td> <td style="color:inherit;background:#6060BF" title="R = 0.375, 
G = 0.375, 
B = 0.750 
(#6060BF)">  </td> <td style="color:inherit;background:#8F8FBF" title="R = 0.562, 
G = 0.562, 
B = 0.750 
(#8F8FBF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#BFBF8F" title="R = 0.750, 
G = 0.750, 
B = 0.562 
(#BFBF8F)">  </td> <td style="color:inherit;background:#BFBF60" title="R = 0.750, 
G = 0.750, 
B = 0.375 
(#BFBF60)">  </td> <td style="color:inherit;background:#BFBF30" title="R = 0.750, 
G = 0.750, 
B = 0.188 
(#BFBF30)">  </td> <td style="color:inherit;background:#BFBF00" title="R = 0.750, 
G = 0.750, 
B = 0.000 
(#BFBF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#00009F" title="R = 0.000, 
G = 0.000, 
B = 0.625 
(#00009F)">  </td> <td style="color:inherit;background:#28289F" title="R = 0.156, 
G = 0.156, 
B = 0.625 
(#28289F)">  </td> <td style="color:inherit;background:#50509F" title="R = 0.312, 
G = 0.312, 
B = 0.625 
(#50509F)">  </td> <td style="color:inherit;background:#78789F" title="R = 0.469, 
G = 0.469, 
B = 0.625 
(#78789F)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#9F9F78" title="R = 0.625, 
G = 0.625, 
B = 0.469 
(#9F9F78)">  </td> <td style="color:inherit;background:#9F9F50" title="R = 0.625, 
G = 0.625, 
B = 0.312 
(#9F9F50)">  </td> <td style="color:inherit;background:#9F9F28" title="R = 0.625, 
G = 0.625, 
B = 0.156 
(#9F9F28)">  </td> <td style="color:inherit;background:#9F9F00" title="R = 0.625, 
G = 0.625, 
B = 0.000 
(#9F9F00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#000080" title="R = 0.000, 
G = 0.000, 
B = 0.500 
(#000080)">  </td> <td style="color:inherit;background:#202080" title="R = 0.125, 
G = 0.125, 
B = 0.500 
(#202080)">  </td> <td style="color:inherit;background:#404080" title="R = 0.250, 
G = 0.250, 
B = 0.500 
(#404080)">  </td> <td style="color:inherit;background:#606080" title="R = 0.375, 
G = 0.375, 
B = 0.500 
(#606080)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#808060" title="R = 0.500, 
G = 0.500, 
B = 0.375 
(#808060)">  </td> <td style="color:inherit;background:#808040" title="R = 0.500, 
G = 0.500, 
B = 0.250 
(#808040)">  </td> <td style="color:inherit;background:#808020" title="R = 0.500, 
G = 0.500, 
B = 0.125 
(#808020)">  </td> <td style="color:inherit;background:#808000" title="R = 0.500, 
G = 0.500, 
B = 0.000 
(#808000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#000060" title="R = 0.000, 
G = 0.000, 
B = 0.375 
(#000060)">  </td> <td style="color:inherit;background:#181860" title="R = 0.094, 
G = 0.094, 
B = 0.375 
(#181860)">  </td> <td style="color:inherit;background:#303060" title="R = 0.188, 
G = 0.188, 
B = 0.375 
(#303060)">  </td> <td style="color:inherit;background:#484860" title="R = 0.281, 
G = 0.281, 
B = 0.375 
(#484860)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#606048" title="R = 0.375, 
G = 0.375, 
B = 0.281 
(#606048)">  </td> <td style="color:inherit;background:#606030" title="R = 0.375, 
G = 0.375, 
B = 0.188 
(#606030)">  </td> <td style="color:inherit;background:#606018" title="R = 0.375, 
G = 0.375, 
B = 0.094 
(#606018)">  </td> <td style="color:inherit;background:#606000" title="R = 0.375, 
G = 0.375, 
B = 0.000 
(#606000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#000040" title="R = 0.000, 
G = 0.000, 
B = 0.250 
(#000040)">  </td> <td style="color:inherit;background:#101040" title="R = 0.062, 
G = 0.062, 
B = 0.250 
(#101040)">  </td> <td style="color:inherit;background:#202040" title="R = 0.125, 
G = 0.125, 
B = 0.250 
(#202040)">  </td> <td style="color:inherit;background:#303040" title="R = 0.188, 
G = 0.188, 
B = 0.250 
(#303040)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#404030" title="R = 0.250, 
G = 0.250, 
B = 0.188 
(#404030)">  </td> <td style="color:inherit;background:#404020" title="R = 0.250, 
G = 0.250, 
B = 0.125 
(#404020)">  </td> <td style="color:inherit;background:#404010" title="R = 0.250, 
G = 0.250, 
B = 0.062 
(#404010)">  </td> <td style="color:inherit;background:#404000" title="R = 0.250, 
G = 0.250, 
B = 0.000 
(#404000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#000020" title="R = 0.000, 
G = 0.000, 
B = 0.125 
(#000020)">  </td> <td style="color:inherit;background:#080820" title="R = 0.031, 
G = 0.031, 
B = 0.125 
(#080820)">  </td> <td style="color:inherit;background:#101020" title="R = 0.062, 
G = 0.062, 
B = 0.125 
(#101020)">  </td> <td style="color:inherit;background:#181820" title="R = 0.094, 
G = 0.094, 
B = 0.125 
(#181820)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#202018" title="R = 0.125, 
G = 0.125, 
B = 0.094 
(#202018)">  </td> <td style="color:inherit;background:#202010" title="R = 0.125, 
G = 0.125, 
B = 0.062 
(#202010)">  </td> <td style="color:inherit;background:#202008" title="R = 0.125, 
G = 0.125, 
B = 0.031 
(#202008)">  </td> <td style="color:inherit;background:#202000" title="R = 0.125, 
G = 0.125, 
B = 0.000 
(#202000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td><td> <table style="background-color:#eeeeee;color:black;padding:1em;"> <tbody><tr> <th scope="col" style="font-weight:normal;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 270° </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 90° </th></tr> <tr> <th style="min-width:3em">V \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#8000FF" title="R = 0.500, 
G = 0.000, 
B = 1.000 
(#8000FF)">  </td> <td style="color:inherit;background:#9F40FF" title="R = 0.625, 
G = 0.250, 
B = 1.000 
(#9F40FF)">  </td> <td style="color:inherit;background:#BF80FF" title="R = 0.750, 
G = 0.500, 
B = 1.000 
(#BF80FF)">  </td> <td style="color:inherit;background:#DFBFFF" title="R = 0.875, 
G = 0.750, 
B = 1.000 
(#DFBFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#DFFFBF" title="R = 0.875, 
G = 1.000, 
B = 0.750 
(#DFFFBF)">  </td> <td style="color:inherit;background:#BFFF80" title="R = 0.750, 
G = 1.000, 
B = 0.500 
(#BFFF80)">  </td> <td style="color:inherit;background:#9FFF40" title="R = 0.625, 
G = 1.000, 
B = 0.250 
(#9FFF40)">  </td> <td style="color:inherit;background:#80FF00" title="R = 0.500, 
G = 1.000, 
B = 0.000 
(#80FF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#7000DF" title="R = 0.438, 
G = 0.000, 
B = 0.875 
(#7000DF)">  </td> <td style="color:inherit;background:#8B38DF" title="R = 0.547, 
G = 0.219, 
B = 0.875 
(#8B38DF)">  </td> <td style="color:inherit;background:#A770DF" title="R = 0.656, 
G = 0.438, 
B = 0.875 
(#A770DF)">  </td> <td style="color:inherit;background:#C3A7DF" title="R = 0.766, 
G = 0.656, 
B = 0.875 
(#C3A7DF)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#C3DFA7" title="R = 0.766, 
G = 0.875, 
B = 0.656 
(#C3DFA7)">  </td> <td style="color:inherit;background:#A7DF70" title="R = 0.656, 
G = 0.875, 
B = 0.438 
(#A7DF70)">  </td> <td style="color:inherit;background:#8BDF38" title="R = 0.547, 
G = 0.875, 
B = 0.219 
(#8BDF38)">  </td> <td style="color:inherit;background:#70DF00" title="R = 0.438, 
G = 0.875, 
B = 0.000 
(#70DF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#6000BF" title="R = 0.375, 
G = 0.000, 
B = 0.750 
(#6000BF)">  </td> <td style="color:inherit;background:#7830BF" title="R = 0.469, 
G = 0.188, 
B = 0.750 
(#7830BF)">  </td> <td style="color:inherit;background:#8F60BF" title="R = 0.562, 
G = 0.375, 
B = 0.750 
(#8F60BF)">  </td> <td style="color:inherit;background:#A78FBF" title="R = 0.656, 
G = 0.562, 
B = 0.750 
(#A78FBF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#A7BF8F" title="R = 0.656, 
G = 0.750, 
B = 0.562 
(#A7BF8F)">  </td> <td style="color:inherit;background:#8FBF60" title="R = 0.562, 
G = 0.750, 
B = 0.375 
(#8FBF60)">  </td> <td style="color:inherit;background:#78BF30" title="R = 0.469, 
G = 0.750, 
B = 0.188 
(#78BF30)">  </td> <td style="color:inherit;background:#60BF00" title="R = 0.375, 
G = 0.750, 
B = 0.000 
(#60BF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#50009F" title="R = 0.312, 
G = 0.000, 
B = 0.625 
(#50009F)">  </td> <td style="color:inherit;background:#64289F" title="R = 0.391, 
G = 0.156, 
B = 0.625 
(#64289F)">  </td> <td style="color:inherit;background:#78509F" title="R = 0.469, 
G = 0.312, 
B = 0.625 
(#78509F)">  </td> <td style="color:inherit;background:#8B789F" title="R = 0.547, 
G = 0.469, 
B = 0.625 
(#8B789F)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#8B9F78" title="R = 0.547, 
G = 0.625, 
B = 0.469 
(#8B9F78)">  </td> <td style="color:inherit;background:#789F50" title="R = 0.469, 
G = 0.625, 
B = 0.312 
(#789F50)">  </td> <td style="color:inherit;background:#649F28" title="R = 0.391, 
G = 0.625, 
B = 0.156 
(#649F28)">  </td> <td style="color:inherit;background:#509F00" title="R = 0.312, 
G = 0.625, 
B = 0.000 
(#509F00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#400080" title="R = 0.250, 
G = 0.000, 
B = 0.500 
(#400080)">  </td> <td style="color:inherit;background:#502080" title="R = 0.312, 
G = 0.125, 
B = 0.500 
(#502080)">  </td> <td style="color:inherit;background:#604080" title="R = 0.375, 
G = 0.250, 
B = 0.500 
(#604080)">  </td> <td style="color:inherit;background:#706080" title="R = 0.438, 
G = 0.375, 
B = 0.500 
(#706080)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#708060" title="R = 0.438, 
G = 0.500, 
B = 0.375 
(#708060)">  </td> <td style="color:inherit;background:#608040" title="R = 0.375, 
G = 0.500, 
B = 0.250 
(#608040)">  </td> <td style="color:inherit;background:#508020" title="R = 0.312, 
G = 0.500, 
B = 0.125 
(#508020)">  </td> <td style="color:inherit;background:#408000" title="R = 0.250, 
G = 0.500, 
B = 0.000 
(#408000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#300060" title="R = 0.188, 
G = 0.000, 
B = 0.375 
(#300060)">  </td> <td style="color:inherit;background:#3C1860" title="R = 0.234, 
G = 0.094, 
B = 0.375 
(#3C1860)">  </td> <td style="color:inherit;background:#483060" title="R = 0.281, 
G = 0.188, 
B = 0.375 
(#483060)">  </td> <td style="color:inherit;background:#544860" title="R = 0.328, 
G = 0.281, 
B = 0.375 
(#544860)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#546048" title="R = 0.328, 
G = 0.375, 
B = 0.281 
(#546048)">  </td> <td style="color:inherit;background:#486030" title="R = 0.281, 
G = 0.375, 
B = 0.188 
(#486030)">  </td> <td style="color:inherit;background:#3C6018" title="R = 0.234, 
G = 0.375, 
B = 0.094 
(#3C6018)">  </td> <td style="color:inherit;background:#306000" title="R = 0.188, 
G = 0.375, 
B = 0.000 
(#306000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#200040" title="R = 0.125, 
G = 0.000, 
B = 0.250 
(#200040)">  </td> <td style="color:inherit;background:#281040" title="R = 0.156, 
G = 0.062, 
B = 0.250 
(#281040)">  </td> <td style="color:inherit;background:#302040" title="R = 0.188, 
G = 0.125, 
B = 0.250 
(#302040)">  </td> <td style="color:inherit;background:#383040" title="R = 0.219, 
G = 0.188, 
B = 0.250 
(#383040)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#384030" title="R = 0.219, 
G = 0.250, 
B = 0.188 
(#384030)">  </td> <td style="color:inherit;background:#304020" title="R = 0.188, 
G = 0.250, 
B = 0.125 
(#304020)">  </td> <td style="color:inherit;background:#284010" title="R = 0.156, 
G = 0.250, 
B = 0.062 
(#284010)">  </td> <td style="color:inherit;background:#204000" title="R = 0.125, 
G = 0.250, 
B = 0.000 
(#204000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#100020" title="R = 0.062, 
G = 0.000, 
B = 0.125 
(#100020)">  </td> <td style="color:inherit;background:#140820" title="R = 0.078, 
G = 0.031, 
B = 0.125 
(#140820)">  </td> <td style="color:inherit;background:#181020" title="R = 0.094, 
G = 0.062, 
B = 0.125 
(#181020)">  </td> <td style="color:inherit;background:#1C1820" title="R = 0.109, 
G = 0.094, 
B = 0.125 
(#1C1820)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#1C2018" title="R = 0.109, 
G = 0.125, 
B = 0.094 
(#1C2018)">  </td> <td style="color:inherit;background:#182010" title="R = 0.094, 
G = 0.125, 
B = 0.062 
(#182010)">  </td> <td style="color:inherit;background:#142008" title="R = 0.078, 
G = 0.125, 
B = 0.031 
(#142008)">  </td> <td style="color:inherit;background:#102000" title="R = 0.062, 
G = 0.125, 
B = 0.000 
(#102000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td></tr><tr> <td> <table style="background-color:#eeeeee;color:black;padding:1em;"> <tbody><tr> <th scope="col" style="font-weight:normal;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 300° </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 120° </th></tr> <tr> <th style="min-width:3em">V \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#FF00FF" title="R = 1.000, 
G = 0.000, 
B = 1.000 
(#FF00FF)">  </td> <td style="color:inherit;background:#FF40FF" title="R = 1.000, 
G = 0.250, 
B = 1.000 
(#FF40FF)">  </td> <td style="color:inherit;background:#FF80FF" title="R = 1.000, 
G = 0.500, 
B = 1.000 
(#FF80FF)">  </td> <td style="color:inherit;background:#FFBFFF" title="R = 1.000, 
G = 0.750, 
B = 1.000 
(#FFBFFF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#BFFFBF" title="R = 0.750, 
G = 1.000, 
B = 0.750 
(#BFFFBF)">  </td> <td style="color:inherit;background:#80FF80" title="R = 0.500, 
G = 1.000, 
B = 0.500 
(#80FF80)">  </td> <td style="color:inherit;background:#40FF40" title="R = 0.250, 
G = 1.000, 
B = 0.250 
(#40FF40)">  </td> <td style="color:inherit;background:#00FF00" title="R = 0.000, 
G = 1.000, 
B = 0.000 
(#00FF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#DF00DF" title="R = 0.875, 
G = 0.000, 
B = 0.875 
(#DF00DF)">  </td> <td style="color:inherit;background:#DF38DF" title="R = 0.875, 
G = 0.219, 
B = 0.875 
(#DF38DF)">  </td> <td style="color:inherit;background:#DF70DF" title="R = 0.875, 
G = 0.438, 
B = 0.875 
(#DF70DF)">  </td> <td style="color:inherit;background:#DFA7DF" title="R = 0.875, 
G = 0.656, 
B = 0.875 
(#DFA7DF)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#A7DFA7" title="R = 0.656, 
G = 0.875, 
B = 0.656 
(#A7DFA7)">  </td> <td style="color:inherit;background:#70DF70" title="R = 0.438, 
G = 0.875, 
B = 0.438 
(#70DF70)">  </td> <td style="color:inherit;background:#38DF38" title="R = 0.219, 
G = 0.875, 
B = 0.219 
(#38DF38)">  </td> <td style="color:inherit;background:#00DF00" title="R = 0.000, 
G = 0.875, 
B = 0.000 
(#00DF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#BF00BF" title="R = 0.750, 
G = 0.000, 
B = 0.750 
(#BF00BF)">  </td> <td style="color:inherit;background:#BF30BF" title="R = 0.750, 
G = 0.188, 
B = 0.750 
(#BF30BF)">  </td> <td style="color:inherit;background:#BF60BF" title="R = 0.750, 
G = 0.375, 
B = 0.750 
(#BF60BF)">  </td> <td style="color:inherit;background:#BF8FBF" title="R = 0.750, 
G = 0.562, 
B = 0.750 
(#BF8FBF)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#8FBF8F" title="R = 0.562, 
G = 0.750, 
B = 0.562 
(#8FBF8F)">  </td> <td style="color:inherit;background:#60BF60" title="R = 0.375, 
G = 0.750, 
B = 0.375 
(#60BF60)">  </td> <td style="color:inherit;background:#30BF30" title="R = 0.188, 
G = 0.750, 
B = 0.188 
(#30BF30)">  </td> <td style="color:inherit;background:#00BF00" title="R = 0.000, 
G = 0.750, 
B = 0.000 
(#00BF00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#9F009F" title="R = 0.625, 
G = 0.000, 
B = 0.625 
(#9F009F)">  </td> <td style="color:inherit;background:#9F289F" title="R = 0.625, 
G = 0.156, 
B = 0.625 
(#9F289F)">  </td> <td style="color:inherit;background:#9F509F" title="R = 0.625, 
G = 0.312, 
B = 0.625 
(#9F509F)">  </td> <td style="color:inherit;background:#9F789F" title="R = 0.625, 
G = 0.469, 
B = 0.625 
(#9F789F)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#789F78" title="R = 0.469, 
G = 0.625, 
B = 0.469 
(#789F78)">  </td> <td style="color:inherit;background:#509F50" title="R = 0.312, 
G = 0.625, 
B = 0.312 
(#509F50)">  </td> <td style="color:inherit;background:#289F28" title="R = 0.156, 
G = 0.625, 
B = 0.156 
(#289F28)">  </td> <td style="color:inherit;background:#009F00" title="R = 0.000, 
G = 0.625, 
B = 0.000 
(#009F00)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#800080" title="R = 0.500, 
G = 0.000, 
B = 0.500 
(#800080)">  </td> <td style="color:inherit;background:#802080" title="R = 0.500, 
G = 0.125, 
B = 0.500 
(#802080)">  </td> <td style="color:inherit;background:#804080" title="R = 0.500, 
G = 0.250, 
B = 0.500 
(#804080)">  </td> <td style="color:inherit;background:#806080" title="R = 0.500, 
G = 0.375, 
B = 0.500 
(#806080)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#608060" title="R = 0.375, 
G = 0.500, 
B = 0.375 
(#608060)">  </td> <td style="color:inherit;background:#408040" title="R = 0.250, 
G = 0.500, 
B = 0.250 
(#408040)">  </td> <td style="color:inherit;background:#208020" title="R = 0.125, 
G = 0.500, 
B = 0.125 
(#208020)">  </td> <td style="color:inherit;background:#008000" title="R = 0.000, 
G = 0.500, 
B = 0.000 
(#008000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#600060" title="R = 0.375, 
G = 0.000, 
B = 0.375 
(#600060)">  </td> <td style="color:inherit;background:#601860" title="R = 0.375, 
G = 0.094, 
B = 0.375 
(#601860)">  </td> <td style="color:inherit;background:#603060" title="R = 0.375, 
G = 0.188, 
B = 0.375 
(#603060)">  </td> <td style="color:inherit;background:#604860" title="R = 0.375, 
G = 0.281, 
B = 0.375 
(#604860)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#486048" title="R = 0.281, 
G = 0.375, 
B = 0.281 
(#486048)">  </td> <td style="color:inherit;background:#306030" title="R = 0.188, 
G = 0.375, 
B = 0.188 
(#306030)">  </td> <td style="color:inherit;background:#186018" title="R = 0.094, 
G = 0.375, 
B = 0.094 
(#186018)">  </td> <td style="color:inherit;background:#006000" title="R = 0.000, 
G = 0.375, 
B = 0.000 
(#006000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#400040" title="R = 0.250, 
G = 0.000, 
B = 0.250 
(#400040)">  </td> <td style="color:inherit;background:#401040" title="R = 0.250, 
G = 0.062, 
B = 0.250 
(#401040)">  </td> <td style="color:inherit;background:#402040" title="R = 0.250, 
G = 0.125, 
B = 0.250 
(#402040)">  </td> <td style="color:inherit;background:#403040" title="R = 0.250, 
G = 0.188, 
B = 0.250 
(#403040)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#304030" title="R = 0.188, 
G = 0.250, 
B = 0.188 
(#304030)">  </td> <td style="color:inherit;background:#204020" title="R = 0.125, 
G = 0.250, 
B = 0.125 
(#204020)">  </td> <td style="color:inherit;background:#104010" title="R = 0.062, 
G = 0.250, 
B = 0.062 
(#104010)">  </td> <td style="color:inherit;background:#004000" title="R = 0.000, 
G = 0.250, 
B = 0.000 
(#004000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#200020" title="R = 0.125, 
G = 0.000, 
B = 0.125 
(#200020)">  </td> <td style="color:inherit;background:#200820" title="R = 0.125, 
G = 0.031, 
B = 0.125 
(#200820)">  </td> <td style="color:inherit;background:#201020" title="R = 0.125, 
G = 0.062, 
B = 0.125 
(#201020)">  </td> <td style="color:inherit;background:#201820" title="R = 0.125, 
G = 0.094, 
B = 0.125 
(#201820)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#182018" title="R = 0.094, 
G = 0.125, 
B = 0.094 
(#182018)">  </td> <td style="color:inherit;background:#102010" title="R = 0.062, 
G = 0.125, 
B = 0.062 
(#102010)">  </td> <td style="color:inherit;background:#082008" title="R = 0.031, 
G = 0.125, 
B = 0.031 
(#082008)">  </td> <td style="color:inherit;background:#002000" title="R = 0.000, 
G = 0.125, 
B = 0.000 
(#002000)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td><td> <table style="background-color:#eeeeee;color:black;padding:1em;"> <tbody><tr> <th scope="col" style="font-weight:normal;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 330° </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">  </th> <th scope="col" colspan="4" style="font-weight:normal;">H = 150° </th></tr> <tr> <th style="min-width:3em">V \ S </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">0 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <th scope="col" style="font-weight:normal;min-width:2.2em;">1 </th></tr> <tr> <th scope="row" style="font-weight:normal;">1 </th> <td style="color:inherit;background:#FF0080" title="R = 1.000, 
G = 0.000, 
B = 0.500 
(#FF0080)">  </td> <td style="color:inherit;background:#FF409F" title="R = 1.000, 
G = 0.250, 
B = 0.625 
(#FF409F)">  </td> <td style="color:inherit;background:#FF80BF" title="R = 1.000, 
G = 0.500, 
B = 0.750 
(#FF80BF)">  </td> <td style="color:inherit;background:#FFBFDF" title="R = 1.000, 
G = 0.750, 
B = 0.875 
(#FFBFDF)">  </td> <td style="color:inherit;background:#FFFFFF" title="R = 1.000, 
G = 1.000, 
B = 1.000 
(#FFFFFF)">  </td> <td style="color:inherit;background:#BFFFDF" title="R = 0.750, 
G = 1.000, 
B = 0.875 
(#BFFFDF)">  </td> <td style="color:inherit;background:#80FFBF" title="R = 0.500, 
G = 1.000, 
B = 0.750 
(#80FFBF)">  </td> <td style="color:inherit;background:#40FF9F" title="R = 0.250, 
G = 1.000, 
B = 0.625 
(#40FF9F)">  </td> <td style="color:inherit;background:#00FF80" title="R = 0.000, 
G = 1.000, 
B = 0.500 
(#00FF80)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">7⁄8 </th> <td style="color:inherit;background:#DF0070" title="R = 0.875, 
G = 0.000, 
B = 0.438 
(#DF0070)">  </td> <td style="color:inherit;background:#DF388B" title="R = 0.875, 
G = 0.219, 
B = 0.547 
(#DF388B)">  </td> <td style="color:inherit;background:#DF70A7" title="R = 0.875, 
G = 0.438, 
B = 0.656 
(#DF70A7)">  </td> <td style="color:inherit;background:#DFA7C3" title="R = 0.875, 
G = 0.656, 
B = 0.766 
(#DFA7C3)">  </td> <td style="color:inherit;background:#DFDFDF" title="R = 0.875, 
G = 0.875, 
B = 0.875 
(#DFDFDF)">  </td> <td style="color:inherit;background:#A7DFC3" title="R = 0.656, 
G = 0.875, 
B = 0.766 
(#A7DFC3)">  </td> <td style="color:inherit;background:#70DFA7" title="R = 0.438, 
G = 0.875, 
B = 0.656 
(#70DFA7)">  </td> <td style="color:inherit;background:#38DF8B" title="R = 0.219, 
G = 0.875, 
B = 0.547 
(#38DF8B)">  </td> <td style="color:inherit;background:#00DF70" title="R = 0.000, 
G = 0.875, 
B = 0.438 
(#00DF70)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄4 </th> <td style="color:inherit;background:#BF0060" title="R = 0.750, 
G = 0.000, 
B = 0.375 
(#BF0060)">  </td> <td style="color:inherit;background:#BF3078" title="R = 0.750, 
G = 0.188, 
B = 0.469 
(#BF3078)">  </td> <td style="color:inherit;background:#BF608F" title="R = 0.750, 
G = 0.375, 
B = 0.562 
(#BF608F)">  </td> <td style="color:inherit;background:#BF8FA7" title="R = 0.750, 
G = 0.562, 
B = 0.656 
(#BF8FA7)">  </td> <td style="color:inherit;background:#BFBFBF" title="R = 0.750, 
G = 0.750, 
B = 0.750 
(#BFBFBF)">  </td> <td style="color:inherit;background:#8FBFA7" title="R = 0.562, 
G = 0.750, 
B = 0.656 
(#8FBFA7)">  </td> <td style="color:inherit;background:#60BF8F" title="R = 0.375, 
G = 0.750, 
B = 0.562 
(#60BF8F)">  </td> <td style="color:inherit;background:#30BF78" title="R = 0.188, 
G = 0.750, 
B = 0.469 
(#30BF78)">  </td> <td style="color:inherit;background:#00BF60" title="R = 0.000, 
G = 0.750, 
B = 0.375 
(#00BF60)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">5⁄8 </th> <td style="color:inherit;background:#9F0050" title="R = 0.625, 
G = 0.000, 
B = 0.312 
(#9F0050)">  </td> <td style="color:inherit;background:#9F2864" title="R = 0.625, 
G = 0.156, 
B = 0.391 
(#9F2864)">  </td> <td style="color:inherit;background:#9F5078" title="R = 0.625, 
G = 0.312, 
B = 0.469 
(#9F5078)">  </td> <td style="color:inherit;background:#9F788B" title="R = 0.625, 
G = 0.469, 
B = 0.547 
(#9F788B)">  </td> <td style="color:inherit;background:#9F9F9F" title="R = 0.625, 
G = 0.625, 
B = 0.625 
(#9F9F9F)">  </td> <td style="color:inherit;background:#789F8B" title="R = 0.469, 
G = 0.625, 
B = 0.547 
(#789F8B)">  </td> <td style="color:inherit;background:#509F78" title="R = 0.312, 
G = 0.625, 
B = 0.469 
(#509F78)">  </td> <td style="color:inherit;background:#289F64" title="R = 0.156, 
G = 0.625, 
B = 0.391 
(#289F64)">  </td> <td style="color:inherit;background:#009F50" title="R = 0.000, 
G = 0.625, 
B = 0.312 
(#009F50)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄2 </th> <td style="color:inherit;background:#800040" title="R = 0.500, 
G = 0.000, 
B = 0.250 
(#800040)">  </td> <td style="color:inherit;background:#802050" title="R = 0.500, 
G = 0.125, 
B = 0.312 
(#802050)">  </td> <td style="color:inherit;background:#804060" title="R = 0.500, 
G = 0.250, 
B = 0.375 
(#804060)">  </td> <td style="color:inherit;background:#806070" title="R = 0.500, 
G = 0.375, 
B = 0.438 
(#806070)">  </td> <td style="color:inherit;background:#808080" title="R = 0.500, 
G = 0.500, 
B = 0.500 
(#808080)">  </td> <td style="color:inherit;background:#608070" title="R = 0.375, 
G = 0.500, 
B = 0.438 
(#608070)">  </td> <td style="color:inherit;background:#408060" title="R = 0.250, 
G = 0.500, 
B = 0.375 
(#408060)">  </td> <td style="color:inherit;background:#208050" title="R = 0.125, 
G = 0.500, 
B = 0.312 
(#208050)">  </td> <td style="color:inherit;background:#008040" title="R = 0.000, 
G = 0.500, 
B = 0.250 
(#008040)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">3⁄8 </th> <td style="color:inherit;background:#600030" title="R = 0.375, 
G = 0.000, 
B = 0.188 
(#600030)">  </td> <td style="color:inherit;background:#60183C" title="R = 0.375, 
G = 0.094, 
B = 0.234 
(#60183C)">  </td> <td style="color:inherit;background:#603048" title="R = 0.375, 
G = 0.188, 
B = 0.281 
(#603048)">  </td> <td style="color:inherit;background:#604854" title="R = 0.375, 
G = 0.281, 
B = 0.328 
(#604854)">  </td> <td style="color:inherit;background:#606060" title="R = 0.375, 
G = 0.375, 
B = 0.375 
(#606060)">  </td> <td style="color:inherit;background:#486054" title="R = 0.281, 
G = 0.375, 
B = 0.328 
(#486054)">  </td> <td style="color:inherit;background:#306048" title="R = 0.188, 
G = 0.375, 
B = 0.281 
(#306048)">  </td> <td style="color:inherit;background:#18603C" title="R = 0.094, 
G = 0.375, 
B = 0.234 
(#18603C)">  </td> <td style="color:inherit;background:#006030" title="R = 0.000, 
G = 0.375, 
B = 0.188 
(#006030)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄4 </th> <td style="color:inherit;background:#400020" title="R = 0.250, 
G = 0.000, 
B = 0.125 
(#400020)">  </td> <td style="color:inherit;background:#401028" title="R = 0.250, 
G = 0.062, 
B = 0.156 
(#401028)">  </td> <td style="color:inherit;background:#402030" title="R = 0.250, 
G = 0.125, 
B = 0.188 
(#402030)">  </td> <td style="color:inherit;background:#403038" title="R = 0.250, 
G = 0.188, 
B = 0.219 
(#403038)">  </td> <td style="color:inherit;background:#404040" title="R = 0.250, 
G = 0.250, 
B = 0.250 
(#404040)">  </td> <td style="color:inherit;background:#304038" title="R = 0.188, 
G = 0.250, 
B = 0.219 
(#304038)">  </td> <td style="color:inherit;background:#204030" title="R = 0.125, 
G = 0.250, 
B = 0.188 
(#204030)">  </td> <td style="color:inherit;background:#104028" title="R = 0.062, 
G = 0.250, 
B = 0.156 
(#104028)">  </td> <td style="color:inherit;background:#004020" title="R = 0.000, 
G = 0.250, 
B = 0.125 
(#004020)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1154941027">1⁄8 </th> <td style="color:inherit;background:#200010" title="R = 0.125, 
G = 0.000, 
B = 0.062 
(#200010)">  </td> <td style="color:inherit;background:#200814" title="R = 0.125, 
G = 0.031, 
B = 0.078 
(#200814)">  </td> <td style="color:inherit;background:#201018" title="R = 0.125, 
G = 0.062, 
B = 0.094 
(#201018)">  </td> <td style="color:inherit;background:#20181C" title="R = 0.125, 
G = 0.094, 
B = 0.109 
(#20181C)">  </td> <td style="color:inherit;background:#202020" title="R = 0.125, 
G = 0.125, 
B = 0.125 
(#202020)">  </td> <td style="color:inherit;background:#18201C" title="R = 0.094, 
G = 0.125, 
B = 0.109 
(#18201C)">  </td> <td style="color:inherit;background:#102018" title="R = 0.062, 
G = 0.125, 
B = 0.094 
(#102018)">  </td> <td style="color:inherit;background:#082014" title="R = 0.031, 
G = 0.125, 
B = 0.078 
(#082014)">  </td> <td style="color:inherit;background:#002010" title="R = 0.000, 
G = 0.125, 
B = 0.062 
(#002010)">  </td></tr> <tr> <th scope="row" style="font-weight:normal;">0 </th> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td> <td style="color:inherit;background:#000000" title="R = 0.000, 
G = 0.000, 
B = 0.000 
(#000000)">  </td></tr></tbody></table> </td></tr></tbody></table> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=29" title="Edit section: See also">edit</a>]</div> <ul><li><a href="/wiki/Munsell_color_system" title="Munsell color system">Munsell color system</a></li> <li><a href="/wiki/TSL_color_space" title="TSL color space">TSL color space</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="Notes">Notes</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=30" title="Edit section: Notes">edit</a>]</div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist reflist-columns references-column-width reflist-upper-alpha" style="column-width: 35em;"> <ol class="references"> <li id="cite_note-2"><a href="#cite_ref-2">^</a> In the <a href="#Joblove">Joblove and Greenberg (1978)</a> paper first introducing HSL, they called HSL lightness "intensity", called HSL saturation "relative chroma", called HSV saturation "saturation" and called HSV value "value". They carefully and unambiguously described and compared three models: hue/chroma/intensity, hue/relative chroma/intensity, and hue/value/saturation. Unfortunately, later authors were less fastidious, and current usage of these terms is inconsistent and often misleading. </li> <li id="cite_note-3"><a href="#cite_ref-3">^</a> The name hexcone for hexagonal pyramid was coined in <a href="#Smith">Smith (1978)</a>, and stuck. </li> <li id="cite_note-11"><a href="#cite_ref-11">^</a> For instance, a 1982 study by Berk, et al., found that users were better at describing colors in terms of HSL than RGB coordinates, after being taught both systems, but were much better still at describing them in terms of the natural-language CNS model (which uses names such as "very dark grayish yellow-green" or "medium strong bluish purple"). This shouldn't be taken as gospel however: a 1987 study by Schwarz, et al., found that users could match colors using RGB controls faster than with HSL controls; a 1999 study by Douglas and Kirkpatrick found that the visual feedback in the user interface mattered more than the particular color model in use, for user matching speed.<a href="#cite_note-8">[6]</a><a href="#cite_note-9">[7]</a><a href="#cite_note-10">[8]</a> </li> <li id="cite_note-20"><a href="#cite_ref-20">^</a> "Clearly, if color appearance is to be described in a systematic, mathematical way, definitions of the phenomena being described need to be precise and universally agreed upon."<a href="#cite_note-Fairchild-term-19">[16]</a> </li> <li id="cite_note-26"><a href="#cite_ref-26">^</a> In <a href="#Levkowitz">Levkowitz and Herman's</a> formulation, R, G, and B stand for the voltages on the guns of a CRT display, which might have different maxima, and so their cartesian <a href="/wiki/Gamut" title="Gamut">gamut</a> could be a box of any unequal dimensions. Other definitions commonly use integer values in the range [0, 255], storing the value for each component in one <a href="/wiki/Byte" title="Byte">byte</a>. We define the RGB gamut to be a <a href="/wiki/Unit_cube" title="Unit cube">unit cube</a> for convenience because it simplifies and clarifies the math. Also, in general, HSL and HSV are today computed directly from <a href="/wiki/Gamma_correction" title="Gamma correction">gamma-corrected</a> R′, G′, and B′ – for instance in <a href="/wiki/SRGB" title="SRGB">sRGB</a> space – but, when the models were developed, might have been transformations of a linear RGB space. Early authors don't address gamma correction at all, except <a href="/wiki/Alvy_Ray_Smith" title="Alvy Ray Smith">Alvy Ray Smith</a><a href="#cite_note-Smith-13">[10]</a> who clearly states that "We shall assume that an RGB monitor is a linear device", and thus designed HSV using linear RGB. We will drop the primes, and the labels R, G, and B should be taken to stand for the three attributes of the origin RGB space, whether or not it is gamma corrected. </li> <li id="cite_note-27"><a href="#cite_ref-27">^</a> Using the chroma here not only agrees with the original <a href="#Joblove">Joblove and Greenberg (1978)</a> paper, but is also in the proper spirit of the psychometric definition of the term. Some models call this attribute saturation – for instance <a href="/wiki/Adobe_Photoshop" title="Adobe Photoshop">Adobe Photoshop</a>'s "Saturation" blend mode – but such use is even more confusing than the use of the term in HSL or HSV, especially when two substantially different definitions are used side by side. </li> <li id="cite_note-formulasources-28">^ <a href="#cite_ref-formulasources_28-0">a</a> <a href="#cite_ref-formulasources_28-1">b</a> Most of the computer graphics papers and books discussing HSL or HSV have a formula or algorithm describing them formally. Our formulas which follow are some mix of those. See, for instance, <a href="#Agoston">Agoston (2005)</a> or <a href="#Foley">Foley (1995)</a> </li> <li id="cite_note-29"><a href="#cite_ref-29">^</a> <a href="#Hanbury2002">Hanbury and Serra (2002)</a> put a great deal of effort into explaining why what we call chroma here can be written as max(R, G, B) − min(R, G, B), and showing that this value is a <a href="/wiki/Seminorm" title="Seminorm">seminorm</a>. They reserve the name chroma for the <a href="/wiki/Euclidean_norm" class="mw-redirect" title="Euclidean norm">Euclidean norm</a> in the chromaticity plane (our C2), and call this hexagonal distance saturation instead, as part of their IHLS model </li> <li id="cite_note-30"><a href="#cite_ref-30">^</a> In the following, the multiplication of hue by 60° – that is, 360°/6 – can be seen as the hexagonal-geometry analogue of the conversion from <a href="/wiki/Radian" title="Radian">radians</a> to degrees, a multiplication by 360°/2π: the circumference of a <a href="/wiki/Unit_circle" title="Unit circle">unit circle</a> is 2π; the circumference of a unit hexagon is 6. </li> <li id="cite_note-37"><a href="#cite_ref-37">^</a> For a more specific discussion of the term luma, see Charles <a href="#Poynton2008">Poynton (2008)</a>. See also <a href="/wiki/RGB_color_space#Specifications" class="mw-redirect" title="RGB color space">RGB color space#Specifications</a>. Photoshop exclusively uses the NTSC coefficients for its "Luminosity" blend mode regardless of the RGB color space involved.<a href="#cite_note-36">[27]</a> </li> <li id="cite_note-39"><a href="#cite_ref-39">^</a> The first nine colors in this table were chosen by hand, and the last ten colors were chosen at random. </li> <li id="cite_note-40"><a href="#cite_ref-40">^</a> See <a href="#Smith">Smith (1978)</a>. Many of these screenshots were taken from the <a rel="nofollow" class="external text" href="http://www.guidebookgallery.org/">GUIdebook</a>, and the rest were gathered from image search results. </li> <li id="cite_note-41"><a href="#cite_ref-41">^</a> For instance, a tool in <a href="/wiki/Adobe_Illustrator" title="Adobe Illustrator">Illustrator</a> CS4, and Adobe's related web tool, <a href="/w/index.php?title=Adobe_Kuler&action=edit&redlink=1" class="new" title="Adobe Kuler (page does not exist)">Kuler</a>, both allow users to define color schemes based on HSV relationships, but with a hue circle modified to better match the <a href="/wiki/RYB_color_model" title="RYB color model">RYB model</a> used traditionally by painters. The web tools <a rel="nofollow" class="external text" href="http://www.colorjack.com/sphere/">ColorJack</a>, <a rel="nofollow" class="external text" href="http://www.colorsontheweb.com/colorwizard.asp">Color Wizard</a>, and <a rel="nofollow" class="external text" href="http://www.colorblender.com/">ColorBlender</a> all pick color schemes with reference to HSL or HSV. </li> <li id="cite_note-42"><a href="#cite_ref-42">^</a> Try a web search for "[framework name] color picker" for examples for a given framework, or "<a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> color picker" for general results. </li> <li id="cite_note-45"><a href="#cite_ref-45">^</a> ArcGIS calls its map-symbol gradients "color ramps". Current versions of ArcGIS can use CIELAB instead for defining them.<a href="#cite_note-44">[30]</a> </li> <li id="cite_note-48"><a href="#cite_ref-48">^</a> For instance, the first version of Photoshop had an HSL-based tool; see <a rel="nofollow" class="external text" href="http://www.guidebookgallery.org/apps/photoshop/huesaturation">"Photoshop hue/saturation"</a> in the GUIdebook for screenshots.<a href="#cite_note-46">[31]</a><a href="#cite_note-47">[32]</a> </li> <li id="cite_note-50"><a href="#cite_ref-50">^</a> 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."<a href="#cite_note-49">[33]</a> </li> <li id="cite_note-53"><a href="#cite_ref-53">^</a> The HSL-style mode (with a Rec. 601 Luminosity) are also standardized in <a href="/wiki/CSS" title="CSS">CSS</a> from a documentation contributed by Adobe and Canon.<a href="#cite_note-51">[34]</a> GIMP 2.10 has switched to <a href="/wiki/CIELAB_color_space#Cylindrical_model" title="CIELAB color space">LCH(ab)</a> from its older HSV geometry.<a href="#cite_note-52">[35]</a> </li> <li id="cite_note-54"><a href="#cite_ref-54">^</a> The Ohta et al. model has parameters I1 = (R + G + B)/3, I2 = (R − B)/2, I3 = (2G − R − B)/4. I1 is the same as our I, and I2 and I3 are similar to our β and α, respectively, except that (a) where α points in the direction of R in the "chromaticity plane", I3 points in the direction of G, and (b) the parameters have a different linear scaling which avoids the √3 of our β. </li> <li id="cite_note-58"><a href="#cite_ref-58">^</a> Most of the disadvantages below are listed in <a href="#Poynton">Poynton (1997)</a>, though as mere statements, without examples. </li> <li id="cite_note-63"><a href="#cite_ref-63">^</a> Some points in this cylinder fall out of <a href="/wiki/Gamut" title="Gamut">gamut</a>. </li> </ol></div> <div class="mw-heading mw-heading2"><h2 id="References">References</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=31" title="Edit section: References">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239543626"><div class="reflist"> <div class="mw-references-wrap mw-references-columns"><ol class="references"> <li id="cite_note-1"><a href="#cite_ref-1">^</a> See <a href="/wiki/Absolute_color_space" class="mw-redirect" title="Absolute color space">Absolute color space</a>. </li> <li id="cite_note-Levkowitz-4">^ <a href="#cite_ref-Levkowitz_4-0">a</a> <a href="#cite_ref-Levkowitz_4-1">b</a> <a href="#Levkowitz">Levkowitz and Herman (1993)</a> </li> <li id="cite_note-5"><a href="#cite_ref-5">^</a> Wilhelm Ostwald (1916). Die Farbenfibel. Leipzig. </li> <li id="cite_note-6"><a href="#cite_ref-6">^</a> Wilhelm Ostwald (1918). Die Harmonie der Farben. Leipzig. </li> <li id="cite_note-7"><a href="#cite_ref-7">^</a> <style data-mw-deduplicate="TemplateStyles:r1041539562">.mw-parser-output .citation{word-wrap:break-word}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}</style><a rel="nofollow" class="external text" href="http://www.google.com/patents/about?id=WA8xAAAAEBAJ">US patent 4694286</a>, Bergstedt, Gar A., "Apparatus and method for modifying displayed color images", published 1987-09-15, assigned to Tektronix, Inc<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Apatent&rft.number=4694286&rft.cc=US&rft.title=Apparatus+and+method+for+modifying+displayed+color+images&rft.inventor=Bergstedt&rft.assignee=Tektronix%2C+Inc&rft.appldate=1983-04-08&rft.pubdate=1987-09-15">  </li> <li id="cite_note-8"><a href="#cite_ref-8">^</a> <style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite id="CITEREFToby_BerkArie_KaufmanLee_Brownston1982" class="citation journal cs1">Toby Berk; Arie Kaufman; Lee Brownston (August 1982). <a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F358589.358606">"A human factors study of color notation systems for computer graphics"</a>. Communications of the ACM. 25 (8): 547–550. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F358589.358606">10.1145/358589.358606</a>. <a href="/wiki/S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:14838329">14838329</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Communications+of+the+ACM&rft.atitle=A+human+factors+study+of+color+notation+systems+for+computer+graphics&rft.volume=25&rft.issue=8&rft.pages=547-550&rft.date=1982-08&rft_id=info%3Adoi%2F10.1145%2F358589.358606&rft_id=https%3A%2F%2Fapi.semanticscholar.org%2FCorpusID%3A14838329%23id-name%3DS2CID&rft.au=Toby+Berk&rft.au=Arie+Kaufman&rft.au=Lee+Brownston&rft_id=https%3A%2F%2Fdoi.org%2F10.1145%252F358589.358606&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-9"><a href="#cite_ref-9">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFMichael_W._SchwarzWilliam_B._CowanJohn_C._Beatty1987" class="citation journal cs1">Michael W. Schwarz; William B. Cowan; John C. Beatty (April 1987). <a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F31336.31338">"An experimental comparison of RGB, YIQ, LAB, HSV, and opponent color models"</a>. ACM Transactions on Graphics. 6 (2): 123–158. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F31336.31338">10.1145/31336.31338</a>. <a href="/wiki/S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:17287484">17287484</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=ACM+Transactions+on+Graphics&rft.atitle=An+experimental+comparison+of+RGB%2C+YIQ%2C+LAB%2C+HSV%2C+and+opponent+color+models&rft.volume=6&rft.issue=2&rft.pages=123-158&rft.date=1987-04&rft_id=info%3Adoi%2F10.1145%2F31336.31338&rft_id=https%3A%2F%2Fapi.semanticscholar.org%2FCorpusID%3A17287484%23id-name%3DS2CID&rft.au=Michael+W.+Schwarz&rft.au=William+B.+Cowan&rft.au=John+C.+Beatty&rft_id=https%3A%2F%2Fdoi.org%2F10.1145%252F31336.31338&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-10"><a href="#cite_ref-10">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFSarah_A._DouglasArthur_E._Kirkpatrick1999" class="citation journal cs1">Sarah A. Douglas; Arthur E. Kirkpatrick (April 1999). <a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F318009.318011">"Model and representation: the effect of visual feedback on human performance in a color picker interface"</a>. ACM Transactions on Graphics. 18 (2): 96–127. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F318009.318011">10.1145/318009.318011</a>. <a href="/wiki/S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:14678328">14678328</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=ACM+Transactions+on+Graphics&rft.atitle=Model+and+representation%3A+the+effect+of+visual+feedback+on+human+performance+in+a+color+picker+interface&rft.volume=18&rft.issue=2&rft.pages=96-127&rft.date=1999-04&rft_id=info%3Adoi%2F10.1145%2F318009.318011&rft_id=https%3A%2F%2Fapi.semanticscholar.org%2FCorpusID%3A14678328%23id-name%3DS2CID&rft.au=Sarah+A.+Douglas&rft.au=Arthur+E.+Kirkpatrick&rft_id=https%3A%2F%2Fdoi.org%2F10.1145%252F318009.318011&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-12"><a href="#cite_ref-12">^</a> The original patent on this idea was by <a href="/wiki/Georges_Valensi" title="Georges Valensi">Georges Valensi</a> in 1938: <div class="paragraphbreak" style="margin-top:0.5em"></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1041539562"><a rel="nofollow" class="external text" href="https://worldwide.espacenet.com/textdoc?DB=EPODOC&IDX=FR841335">FR patent 841335</a>, Valensi, Georges, "Procédé de télévision en couleurs", published 1939-05-17, issued 1939-02-06<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Apatent&rft.number=841335&rft.cc=FR&rft.title=Proc%C3%A9d%C3%A9+de+t%C3%A9l%C3%A9vision+en+couleurs&rft.inventor=Valensi&rft.date=1939-02-06&rft.appldate=1938-01-17&rft.pubdate=1939-05-17">  <div class="paragraphbreak" style="margin-top:0.5em"></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1041539562"><a rel="nofollow" class="external text" href="https://worldwide.espacenet.com/textdoc?DB=EPODOC&IDX=US2375966">US patent 2375966</a>, Valensi, Georges, "System of television in colors", published 1945-05-15<span class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Apatent&rft.number=2375966&rft.cc=US&rft.title=System+of+television+in+colors&rft.inventor=Valensi&rft.appldate=1939-01-14&rft.pubdate=1945-05-15">  </li> <li id="cite_note-Smith-13">^ <a href="#cite_ref-Smith_13-0">a</a> <a href="#cite_ref-Smith_13-1">b</a> <a href="#cite_ref-Smith_13-2">c</a> <a href="#cite_ref-Smith_13-3">d</a> <a href="#Smith">Smith (1978)</a> </li> <li id="cite_note-Joblove-14">^ <a href="#cite_ref-Joblove_14-0">a</a> <a href="#cite_ref-Joblove_14-1">b</a> <a href="#cite_ref-Joblove_14-2">c</a> <a href="#cite_ref-Joblove_14-3">d</a> <a href="#Joblove">Joblove and Greenberg (1978)</a> </li> <li id="cite_note-15"><a href="#cite_ref-15">^</a> <a href="/wiki/Maureen_C._Stone" title="Maureen C. Stone">Maureen C. Stone</a> (August 2001). <a rel="nofollow" class="external text" href="http://graphics.stanford.edu/courses/cs448b-02-spring/04cdrom.pdf">"A Survey of Color for Computer Graphics"</a>. Course at SIGGRAPH 2001. </li> <li id="cite_note-16"><a href="#cite_ref-16">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFWare_Myers1979" class="citation journal cs1">Ware Myers (July 1979). "Interactive Computer Graphics: Flying High-Part I". Computer. 12 (7): 8–17. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1109%2FMC.1979.1658808">10.1109/MC.1979.1658808</a>. <a href="/wiki/S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:15344162">15344162</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Computer&rft.atitle=Interactive+Computer+Graphics%3A+Flying+High-Part+I&rft.volume=12&rft.issue=7&rft.pages=8-17&rft.date=1979-07&rft_id=info%3Adoi%2F10.1109%2FMC.1979.1658808&rft_id=https%3A%2F%2Fapi.semanticscholar.org%2FCorpusID%3A15344162%23id-name%3DS2CID&rft.au=Ware+Myers&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-17"><a href="#cite_ref-17">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFN._Magnetat-ThalmannN._ChourotD._Thalmann1984" class="citation journal cs1">N. Magnetat-Thalmann; N. Chourot; D. Thalmann (March 1984). "Colour Gradation, Shading and Texture Using a Limited Terminal". Computer Graphics Forum. 3: 83–90. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1111%2Fj.1467-8659.1984.tb00092.x">10.1111/j.1467-8659.1984.tb00092.x</a>. <a href="/wiki/S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:29541525">29541525</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Computer+Graphics+Forum&rft.atitle=Colour+Gradation%2C+Shading+and+Texture+Using+a+Limited+Terminal&rft.volume=3&rft.pages=83-90&rft.date=1984-03&rft_id=info%3Adoi%2F10.1111%2Fj.1467-8659.1984.tb00092.x&rft_id=https%3A%2F%2Fapi.semanticscholar.org%2FCorpusID%3A29541525%23id-name%3DS2CID&rft.au=N.+Magnetat-Thalmann&rft.au=N.+Chourot&rft.au=D.+Thalmann&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-18"><a href="#cite_ref-18">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFComputer_Graphics_Staff1979" class="citation journal cs1">Computer Graphics Staff (August 1979). "Status report of the graphic standards planning committee". ACM SIGGRAPH Computer Graphics. 13 (3): 1–10. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F988497.988498">10.1145/988497.988498</a>. <a href="/wiki/S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:43687764">43687764</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=ACM+SIGGRAPH+Computer+Graphics&rft.atitle=Status+report+of+the+graphic+standards+planning+committee&rft.volume=13&rft.issue=3&rft.pages=1-10&rft.date=1979-08&rft_id=info%3Adoi%2F10.1145%2F988497.988498&rft_id=https%3A%2F%2Fapi.semanticscholar.org%2FCorpusID%3A43687764%23id-name%3DS2CID&rft.au=Computer+Graphics+Staff&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-Fairchild-term-19">^ <a href="#cite_ref-Fairchild-term_19-0">a</a> <a href="#cite_ref-Fairchild-term_19-1">b</a> <a href="#cite_ref-Fairchild-term_19-2">c</a> <a href="#cite_ref-Fairchild-term_19-3">d</a> <a href="#cite_ref-Fairchild-term_19-4">e</a> <a href="#cite_ref-Fairchild-term_19-5">f</a> <a href="#cite_ref-Fairchild-term_19-6">g</a> <a href="#cite_ref-Fairchild-term_19-7">h</a> <a href="#Fairchild">Fairchild (2005)</a>, <a rel="nofollow" class="external text" href="https://books.google.com/books?id=8_TxzK2B-5MC&pg=PT106">pp. 83–93</a> </li> <li id="cite_note-Kuehni-21"><a href="#cite_ref-Kuehni_21-0">^</a> <a href="#Kuehni">Kuehni (2003)</a> </li> <li id="cite_note-22"><a href="#cite_ref-22">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation book cs1"><a rel="nofollow" class="external text" href="http://www.astm.org/Standards/E284.htm">Standard Terminology of Appearance E284</a>. <a href="/wiki/ASTM_International" title="ASTM International">ASTM</a>. 2009.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Standard+Terminology+of+Appearance+E284&rft.pub=ASTM&rft.date=2009&rft_id=http%3A%2F%2Fwww.astm.org%2FStandards%2FE284.htm&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-23"><a href="#cite_ref-23">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation book cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20100227034508/http://www.cie.co.at/publ/abst/17-4-89.html">International Lighting Vocabulary</a> (4th ed.). <a href="/wiki/International_Commission_on_Illumination" title="International Commission on Illumination">CIE</a> and <a href="/wiki/International_Electrotechnical_Commission" title="International Electrotechnical Commission">IEC</a>. 1987. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-3-900734-07-7" title="Special:BookSources/978-3-900734-07-7"><bdi>978-3-900734-07-7</bdi></a>. Archived from <a rel="nofollow" class="external text" href="http://www.cie.co.at/publ/abst/17-4-89.html">the original</a> on 2010-02-27. Retrieved 2010-02-05.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=International+Lighting+Vocabulary&rft.edition=4th&rft.pub=CIE+and+IEC&rft.date=1987&rft.isbn=978-3-900734-07-7&rft_id=http%3A%2F%2Fwww.cie.co.at%2Fpubl%2Fabst%2F17-4-89.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-Poynton-24"><a href="#cite_ref-Poynton_24-0">^</a> <a href="#Poynton">Poynton (1997)</a> </li> <li id="cite_note-25"><a href="#cite_ref-25">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFSharma2003" class="citation book cs1">Sharma, G. (2003). Digital Color Imaging Handbook. Boca Raton, FL: CRC Press. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-0-8493-0900-7" title="Special:BookSources/978-0-8493-0900-7"><bdi>978-0-8493-0900-7</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Digital+Color+Imaging+Handbook&rft.place=Boca+Raton%2C+FL&rft.pub=CRC+Press&rft.date=2003&rft.isbn=978-0-8493-0900-7&rft.aulast=Sharma&rft.aufirst=G.&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-Hanbury2002-31"><a href="#cite_ref-Hanbury2002_31-0">^</a> <a href="#Hanbury2002">Hanbury and Serra (2002)</a> </li> <li id="cite_note-Hanbury2008-32">^ <a href="#cite_ref-Hanbury2008_32-0">a</a> <a href="#cite_ref-Hanbury2008_32-1">b</a> <a href="#Hanbury2008">Hanbury (2008)</a> </li> <li id="cite_note-33"><a href="#cite_ref-33">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFPatrick_LambertThierry_Carron1999" class="citation journal cs1">Patrick Lambert; Thierry Carron (1999). "Symbolic fusion of luminance-hue-chroma features for region segmentation". Pattern Recognition. 32 (11): 1857. <a href="/wiki/Bibcode_(identifier)" class="mw-redirect" title="Bibcode (identifier)">Bibcode</a>:<a rel="nofollow" class="external text" href="https://ui.adsabs.harvard.edu/abs/1999PatRe..32.1857L">1999PatRe..32.1857L</a>. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1016%2FS0031-3203%2899%2900010-2">10.1016/S0031-3203(99)00010-2</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Pattern+Recognition&rft.atitle=Symbolic+fusion+of+luminance-hue-chroma+features+for+region+segmentation&rft.volume=32&rft.issue=11&rft.pages=1857&rft.date=1999&rft_id=info%3Adoi%2F10.1016%2FS0031-3203%2899%2900010-2&rft_id=info%3Abibcode%2F1999PatRe..32.1857L&rft.au=Patrick+Lambert&rft.au=Thierry+Carron&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-34"><a href="#cite_ref-34">^</a> Rafael C. Gonzalez and Richard Eugene Woods (2008). Digital Image Processing, 3rd ed. Upper Saddle River, NJ: Prentice Hall. <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/0-13-168728-X" title="Special:BookSources/0-13-168728-X">0-13-168728-X</a>. <a rel="nofollow" class="external text" href="https://books.google.com/books?id=8uGOnjRGEzoC&pg=PA410&lpg=PA410">pp. 407–413</a>. </li> <li id="cite_note-35"><a href="#cite_ref-35">^</a> <a href="#Poynton">Poynton (1997)</a>. <a rel="nofollow" class="external text" href="http://www.poynton.com/notes/colour_and_gamma/ColorFAQ.html#RTFToC9">"What weighting of red, green and blue corresponds to brightness?"</a> </li> <li id="cite_note-36"><a href="#cite_ref-36">^</a> Bruce Lindbloom (2001-09-25). <a rel="nofollow" class="external free" href="http://lists.apple.com/archives/colorsync-users/2001/Sep/msg00488.html">http://lists.apple.com/archives/colorsync-users/2001/Sep/msg00488.html</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20110707173255/http://lists.apple.com/archives/colorsync-users/2001/Sep/msg00488.html">Archived</a> 2011-07-07 at the <a href="/wiki/Wayback_Machine" title="Wayback Machine">Wayback Machine</a> "Re: Luminosity channel...". </li> <li id="cite_note-Cheng-38">^ <a href="#cite_ref-Cheng_38-0">a</a> <a href="#cite_ref-Cheng_38-1">b</a> <a href="#cite_ref-Cheng_38-2">c</a> <a href="#cite_ref-Cheng_38-3">d</a> <a href="#Cheng">Cheng et al. (2001)</a> </li> <li id="cite_note-43"><a href="#cite_ref-43">^</a> Tantek Çelik, Chris Lilley, and L. David Baron (July 2008). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/2008/WD-css3-color-20080721/#hsl-color">"CSS3 Color Module Level 3"</a>. </li> <li id="cite_note-44"><a href="#cite_ref-44">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://webhelp.esri.com/arcgisdesktop/9.2/index.cfm?TopicName=Working_with_color_ramps">"Working with color ramps"</a>. <a href="/wiki/Environmental_Systems_Research_Institute" class="mw-redirect" title="Environmental Systems Research Institute">Environmental Systems Research Institute</a>. January 2008. Retrieved August 30, 2017.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Working+with+color+ramps&rft.pub=Environmental+Systems+Research+Institute&rft.date=2008-01&rft_id=http%3A%2F%2Fwebhelp.esri.com%2Farcgisdesktop%2F9.2%2Findex.cfm%3FTopicName%3DWorking_with_color_ramps&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-46"><a href="#cite_ref-46">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFBradley1994" class="citation web cs1">Bradley, John (1994). <a rel="nofollow" class="external text" href="http://www.trilon.com/xv/manual/xv-3.10a/color-editor-2.html">"The HSV Modification Tools"</a>. John's World of XV and Other Cool Stuff.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=John%27s+World+of+XV+and+Other+Cool+Stuff&rft.atitle=The+HSV+Modification+Tools&rft.date=1994&rft.aulast=Bradley&rft.aufirst=John&rft_id=http%3A%2F%2Fwww.trilon.com%2Fxv%2Fmanual%2Fxv-3.10a%2Fcolor-editor-2.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-47"><a href="#cite_ref-47">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFSinkel2010" class="citation web cs1">Sinkel, Kiril (January 2010). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20140512231703/http://www.dl-c.com/Temp/downloads/PW%20Doc/PW70.pdf">"User Guide for Picture Window and Picture Window Pro Digital Light & Color"</a> (PDF). Archived from <a rel="nofollow" class="external text" href="http://www.dl-c.com/Temp/downloads/PW%20Doc/PW70.pdf">the original</a> (PDF) on 2014-05-12.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=User+Guide+for+Picture+Window+and+Picture+Window+Pro+Digital+Light+%26+Color&rft.date=2010-01&rft.aulast=Sinkel&rft.aufirst=Kiril&rft_id=http%3A%2F%2Fwww.dl-c.com%2FTemp%2Fdownloads%2FPW%2520Doc%2FPW70.pdf&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-49"><a href="#cite_ref-49">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://helpx.adobe.com/photoshop/using/blending-modes.html">"Blending Modes"</a>. Photoshop User Guide. Adobe Systems Incorporated. February 15, 2017.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Photoshop+User+Guide&rft.atitle=Blending+Modes&rft.date=2017-02-15&rft_id=https%3A%2F%2Fhelpx.adobe.com%2Fphotoshop%2Fusing%2Fblending-modes.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-51"><a href="#cite_ref-51">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/compositing-1">"Compositing and Blending Level 1"</a>. www.w3.org.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=www.w3.org&rft.atitle=Compositing+and+Blending+Level+1&rft_id=https%3A%2F%2Fwww.w3.org%2FTR%2Fcompositing-1&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-52"><a href="#cite_ref-52">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://ninedegreesbelow.com/photography/gimp-lch-blend-modes.html">"GIMP's LCH Blend Modes"</a>. Nine Degrees Below.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Nine+Degrees+Below&rft.atitle=GIMP%27s+LCH+Blend+Modes&rft_id=https%3A%2F%2Fninedegreesbelow.com%2Fphotography%2Fgimp-lch-blend-modes.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-55"><a href="#cite_ref-55">^</a> John Kender (1976). "Saturation, hue and normalized color". Carnegie Mellon University, Computer Science Dept. Pittsburgh, PA. </li> <li id="cite_note-56"><a href="#cite_ref-56">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFYu-Ichi_OhtaTakeo_KanadeToshiyuki_Sakai1980" class="citation journal cs1">Yu-Ichi Ohta; Takeo Kanade; Toshiyuki Sakai (1980). "Color information for region segmentation". Computer Graphics and Image Processing. 13 (3): 222. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1016%2F0146-664X%2880%2990047-7">10.1016/0146-664X(80)90047-7</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Computer+Graphics+and+Image+Processing&rft.atitle=Color+information+for+region+segmentation&rft.volume=13&rft.issue=3&rft.pages=222&rft.date=1980&rft_id=info%3Adoi%2F10.1016%2F0146-664X%2880%2990047-7&rft.au=Yu-Ichi+Ohta&rft.au=Takeo+Kanade&rft.au=Toshiyuki+Sakai&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-57"><a href="#cite_ref-57">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFFfrank_PerezChristof_Koch1994" class="citation journal cs1">Ffrank Perez; Christof Koch (1994). <a rel="nofollow" class="external text" href="https://authors.library.caltech.edu/40488/1/370338.pdf">"Toward color image segmentation in analog VLSI: Algorithm and hardware"</a> (PDF). International Journal of Computer Vision. 12: 17–42. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1007%2FBF01420983">10.1007/BF01420983</a>. <a href="/wiki/S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:6140819">6140819</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=International+Journal+of+Computer+Vision&rft.atitle=Toward+color+image+segmentation+in+analog+VLSI%3A+Algorithm+and+hardware&rft.volume=12&rft.pages=17-42&rft.date=1994&rft_id=info%3Adoi%2F10.1007%2FBF01420983&rft_id=https%3A%2F%2Fapi.semanticscholar.org%2FCorpusID%3A6140819%23id-name%3DS2CID&rft.au=Ffrank+Perez&rft.au=Christof+Koch&rft_id=https%3A%2F%2Fauthors.library.caltech.edu%2F40488%2F1%2F370338.pdf&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-59"><a href="#cite_ref-59">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFBrewer1999" class="citation conference cs1">Brewer, Cynthia A. (1999). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20090807105257/http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html">"Color Use Guidelines for Data Representation"</a>. Proceedings of the Section on Statistical Graphics. Alexandria, VA: American Statistical Association. pp. 55–60. Archived from <a rel="nofollow" class="external text" href="http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html">the original</a> on 2009-08-07. Retrieved 2010-02-05.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=conference&rft.atitle=Color+Use+Guidelines+for+Data+Representation&rft.btitle=Proceedings+of+the+Section+on+Statistical+Graphics&rft.place=Alexandria%2C+VA&rft.pages=55-60&rft.pub=American+Statistical+Association&rft.date=1999&rft.aulast=Brewer&rft.aufirst=Cynthia+A.&rft_id=http%3A%2F%2Fwww.personal.psu.edu%2Fcab38%2FColorSch%2FASApaper.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-60"><a href="#cite_ref-60">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFFisher1993" class="citation book cs1">Fisher, Nicholas (1993). <a rel="nofollow" class="external text" href="https://archive.org/details/statisticalanaly0000fish_v6v2/">Statistical Analysis of Circular Dat</a>. Cambridge University Press. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1017%2FCBO9780511564345">10.1017/CBO9780511564345</a>. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-0-521-35018-1" title="Special:BookSources/978-0-521-35018-1"><bdi>978-0-521-35018-1</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Statistical+Analysis+of+Circular+Dat&rft.pub=Cambridge+University+Press&rft.date=1993&rft_id=info%3Adoi%2F10.1017%2FCBO9780511564345&rft.isbn=978-0-521-35018-1&rft.aulast=Fisher&rft.aufirst=Nicholas&rft_id=https%3A%2F%2Farchive.org%2Fdetails%2Fstatisticalanaly0000fish_v6v2%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-61"><a href="#cite_ref-61">^</a> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFHanbury2003" class="citation conference cs1">Hanbury, Allan (2003). Circular Statistics Applied to Colour Images. 8th Computer Vision Winter Workshop. <a href="/wiki/CiteSeerX_(identifier)" class="mw-redirect" title="CiteSeerX (identifier)">CiteSeerX</a> <a rel="nofollow" class="external text" href="https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.1381">10.1.1.4.1381</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=conference&rft.btitle=Circular+Statistics+Applied+to+Colour+Images&rft.date=2003&rft_id=https%3A%2F%2Fciteseerx.ist.psu.edu%2Fviewdoc%2Fsummary%3Fdoi%3D10.1.1.4.1381%23id-name%3DCiteSeerX&rft.aulast=Hanbury&rft.aufirst=Allan&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> </li> <li id="cite_note-62"><a href="#cite_ref-62">^</a> <a href="#Poynton">Poynton (1997)</a>. <a rel="nofollow" class="external text" href="http://www.poynton.com/notes/colour_and_gamma/ColorFAQ.html#RTFToC36">"What are HSB and HLS?"</a> </li> </ol></div></div> <div class="mw-heading mw-heading2"><h2 id="Bibliography">Bibliography</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=32" title="Edit section: Bibliography">edit</a>]</div> <ul><li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Agoston" class="citation book cs1">Agoston, Max K. (2005). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=fGX8yC-4vXUC&pg=PA300">Computer Graphics and Geometric Modeling: Implementation and Algorithms</a>. London: Springer. pp. 300–306. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-1-85233-818-3" title="Special:BookSources/978-1-85233-818-3"><bdi>978-1-85233-818-3</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Computer+Graphics+and+Geometric+Modeling%3A+Implementation+and+Algorithms&rft.place=London&rft.pages=300-306&rft.pub=Springer&rft.date=2005&rft.isbn=978-1-85233-818-3&rft.au=Agoston%2C+Max+K.&rft_id=https%3A%2F%2Fbooks.google.com%2Fbooks%3Fid%3DfGX8yC-4vXUC%26pg%3DPA300&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> Agoston's book contains a description of HSV and HSL, and algorithms in <a href="/wiki/Pseudocode" title="Pseudocode">pseudocode</a> for converting to each from RGB, and back again.</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Cheng" class="citation journal cs1">Cheng, Heng-Da; Jiang, Xihua; Sun, Angela; Wang, Jingli (2001). "Color image segmentation: Advances and prospects". Pattern Recognition. 34 (12): 2259. <a href="/wiki/Bibcode_(identifier)" class="mw-redirect" title="Bibcode (identifier)">Bibcode</a>:<a rel="nofollow" class="external text" href="https://ui.adsabs.harvard.edu/abs/2001PatRe..34.2259C">2001PatRe..34.2259C</a>. <a href="/wiki/CiteSeerX_(identifier)" class="mw-redirect" title="CiteSeerX (identifier)">CiteSeerX</a> <a rel="nofollow" class="external text" href="https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.119.2886">10.1.1.119.2886</a>. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1016%2FS0031-3203%2800%2900149-7">10.1016/S0031-3203(00)00149-7</a>. <a href="/wiki/S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:205904573">205904573</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Pattern+Recognition&rft.atitle=Color+image+segmentation%3A+Advances+and+prospects&rft.volume=34&rft.issue=12&rft.pages=2259&rft.date=2001&rft_id=https%3A%2F%2Fciteseerx.ist.psu.edu%2Fviewdoc%2Fsummary%3Fdoi%3D10.1.1.119.2886%23id-name%3DCiteSeerX&rft_id=https%3A%2F%2Fapi.semanticscholar.org%2FCorpusID%3A205904573%23id-name%3DS2CID&rft_id=info%3Adoi%2F10.1016%2FS0031-3203%2800%2900149-7&rft_id=info%3Abibcode%2F2001PatRe..34.2259C&rft.au=Cheng%2C+Heng-Da&rft.au=Jiang%2C+Xihua&rft.au=Sun%2C+Angela&rft.au=Wang%2C+Jingli&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> This computer vision literature review briefly summarizes research in color image segmentation, including that using HSV and HSI representations.</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Fairchild" class="citation book cs1">Fairchild, Mark D. (2005). <a rel="nofollow" class="external text" href="http://www.cis.rit.edu/fairchild/CAM.html">Color Appearance Models</a> (2nd ed.). Addison-Wesley.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Color+Appearance+Models&rft.edition=2nd&rft.pub=Addison-Wesley&rft.date=2005&rft.au=Fairchild%2C+Mark+D.&rft_id=http%3A%2F%2Fwww.cis.rit.edu%2Ffairchild%2FCAM.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> This book doesn't discuss HSL or HSV specifically, but is one of the most readable and precise resources about current color science.</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Foley" class="citation book cs1"><a href="/wiki/James_D._Foley" title="James D. Foley">Foley, J. D.</a>; et al. (1995). <a rel="nofollow" class="external text" href="http://www.pearsonhighered.com/educator/academic/product/0,,0201848406,00%2Ben-USS_01DBC.html">Computer Graphics: Principles and Practice</a> (2nd ed.). Redwood City, CA: Addison-Wesley. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-0-201-84840-3" title="Special:BookSources/978-0-201-84840-3"><bdi>978-0-201-84840-3</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Computer+Graphics%3A+Principles+and+Practice&rft.place=Redwood+City%2C+CA&rft.edition=2nd&rft.pub=Addison-Wesley&rft.date=1995&rft.isbn=978-0-201-84840-3&rft.au=Foley%2C+J.+D.&rft_id=http%3A%2F%2Fwww.pearsonhighered.com%2Feducator%2Facademic%2Fproduct%2F0%2C%2C0201848406%2C00%252Ben-USS_01DBC.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> The standard computer graphics textbook of the 1990s, this tome has a chapter full of algorithms for converting between color models, in <a href="/wiki/C_(programming_language)" title="C (programming language)">C</a>.</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Hanbury2002" class="citation book cs1">Hanbury, Allan; Serra, Jean (December 2002). A 3D-polar Coordinate Colour Representation Suitable for Image Analysis. Vienna, Austria: Vienna University of Technology.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=A+3D-polar+Coordinate+Colour+Representation+Suitable+for+Image+Analysis&rft.place=Vienna%2C+Austria&rft.pub=Vienna+University+of+Technology&rft.date=2002-12&rft.au=Hanbury%2C+Allan&rft.au=Serra%2C+Jean&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> <code class="cs1-code">{{<a href="/wiki/Template:Cite_book" title="Template:Cite book">cite book</a>}}</code>: <code class="cs1-code">|work=</code> ignored (<a href="/wiki/Help:CS1_errors#periodical_ignored" title="Help:CS1 errors">help</a>)</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Hanbury2008" class="citation journal cs1">Hanbury, Allan (2008). <a rel="nofollow" class="external text" href="http://muscle.ercim.eu/images/DocumentPDF/Hanbury_PRL.pdf">"Constructing cylindrical coordinate colour spaces"</a> (PDF). Pattern Recognition Letters. 29 (4): 494–500. <a href="/wiki/Bibcode_(identifier)" class="mw-redirect" title="Bibcode (identifier)">Bibcode</a>:<a rel="nofollow" class="external text" href="https://ui.adsabs.harvard.edu/abs/2008PaReL..29..494H">2008PaReL..29..494H</a>. <a href="/wiki/CiteSeerX_(identifier)" class="mw-redirect" title="CiteSeerX (identifier)">CiteSeerX</a> <a rel="nofollow" class="external text" href="https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.211.6425">10.1.1.211.6425</a>. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1016%2Fj.patrec.2007.11.002">10.1016/j.patrec.2007.11.002</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Pattern+Recognition+Letters&rft.atitle=Constructing+cylindrical+coordinate+colour+spaces&rft.volume=29&rft.issue=4&rft.pages=494-500&rft.date=2008&rft_id=https%3A%2F%2Fciteseerx.ist.psu.edu%2Fviewdoc%2Fsummary%3Fdoi%3D10.1.1.211.6425%23id-name%3DCiteSeerX&rft_id=info%3Adoi%2F10.1016%2Fj.patrec.2007.11.002&rft_id=info%3Abibcode%2F2008PaReL..29..494H&rft.aulast=Hanbury&rft.aufirst=Allan&rft_id=http%3A%2F%2Fmuscle.ercim.eu%2Fimages%2FDocumentPDF%2FHanbury_PRL.pdf&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"></li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Joblove" class="citation journal cs1">Joblove, George H.; Greenberg, Donald (August 1978). <a rel="nofollow" class="external text" href="https://papers.cumincad.org/data/works/att/634c.content.pdf">"Color spaces for computer graphics"</a> (PDF). <a href="/wiki/Computer_Graphics_(publication)" class="mw-redirect" title="Computer Graphics (publication)">Computer Graphics</a>. 12 (3): 20–25. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F965139.807362">10.1145/965139.807362</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Computer+Graphics&rft.atitle=Color+spaces+for+computer+graphics&rft.volume=12&rft.issue=3&rft.pages=20-25&rft.date=1978-08&rft_id=info%3Adoi%2F10.1145%2F965139.807362&rft.au=Joblove%2C+George+H.&rft.au=Greenberg%2C+Donald&rft_id=https%3A%2F%2Fpapers.cumincad.org%2Fdata%2Fworks%2Fatt%2F634c.content.pdf&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> Joblove and Greenberg's paper was the first describing the HSL model, which it compares to HSV.</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Kuehni" class="citation book cs1">Kuehni, Rolf G. (2003). Color Space and Its Divisions: Color Order from Antiquity to the present. New York: Wiley. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-0-471-32670-0" title="Special:BookSources/978-0-471-32670-0"><bdi>978-0-471-32670-0</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Color+Space+and+Its+Divisions%3A+Color+Order+from+Antiquity+to+the+present&rft.place=New+York&rft.pub=Wiley&rft.date=2003&rft.isbn=978-0-471-32670-0&rft.au=Kuehni%2C+Rolf+G.&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> This book only briefly mentions HSL and HSV, but is a comprehensive description of color order systems through history.</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Levkowitz" class="citation journal cs1">Levkowitz, Haim; Herman, Gabor T. (1993). "GLHS: A Generalized Lightness, Hue and Saturation Color Model". <a href="/wiki/CVGIP:_Graphical_Models_and_Image_Processing" class="mw-redirect" title="CVGIP: Graphical Models and Image Processing">CVGIP: Graphical Models and Image Processing</a>. 55 (4): 271–285. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1006%2Fcgip.1993.1019">10.1006/cgip.1993.1019</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=CVGIP%3A+Graphical+Models+and+Image+Processing&rft.atitle=GLHS%3A+A+Generalized+Lightness%2C+Hue+and+Saturation+Color+Model&rft.volume=55&rft.issue=4&rft.pages=271-285&rft.date=1993&rft_id=info%3Adoi%2F10.1006%2Fcgip.1993.1019&rft.au=Levkowitz%2C+Haim&rft.au=Herman%2C+Gabor+T.&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> This paper explains how both HSL and HSV, as well as other similar models, can be thought of as specific variants of a more general "GLHS" model. Levkowitz and Herman provide pseudocode for converting from RGB to GLHS and back.</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="MacEvoy" class="citation web cs1">MacEvoy, Bruce (January 2010). <a rel="nofollow" class="external text" href="http://www.handprint.com/LS/CVS/color.html">"Color Vision"</a>. handprint.com.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=handprint.com&rft.atitle=Color+Vision&rft.date=2010-01&rft.au=MacEvoy%2C+Bruce&rft_id=http%3A%2F%2Fwww.handprint.com%2FLS%2FCVS%2Fcolor.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988">. Especially the sections about <a rel="nofollow" class="external text" href="http://www.handprint.com/HP/WCL/color7.html">"Modern Color Models"</a> and <a rel="nofollow" class="external text" href="http://www.handprint.com/HP/WCL/color18a.html">"Modern Color Theory"</a>. MacEvoy's extensive site about color science and paint mixing is one of the best resources on the web. On this page, he explains the color-making attributes, and the general goals and history of color order systems – including HSL and HSV – and their practical relevance to painters.</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Poynton" class="citation web cs1">Poynton, Charles (1997). <a rel="nofollow" class="external text" href="http://www.poynton.com/ColorFAQ.html">"Frequently Asked Questions About Color"</a>. poynton.com.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=poynton.com&rft.atitle=Frequently+Asked+Questions+About+Color&rft.date=1997&rft.au=Poynton%2C+Charles&rft_id=http%3A%2F%2Fwww.poynton.com%2FColorFAQ.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> This self-published frequently asked questions page, by digital video expert Charles Poynton, explains, among other things, why in his opinion these models "are useless for the specification of accurate color", and should be abandoned in favor of more psychometrically relevant models.</li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Poynton2008" class="citation web cs1">Poynton, Charles (2008). <a rel="nofollow" class="external text" href="http://poynton.com/papers/YUV_and_luminance_harmful.html">"YUV and luminance considered harmful"</a>. poynton.com. Retrieved August 30, 2017.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=poynton.com&rft.atitle=YUV+and+luminance+considered+harmful&rft.date=2008&rft.au=Poynton%2C+Charles&rft_id=http%3A%2F%2Fpoynton.com%2Fpapers%2FYUV_and_luminance_harmful.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"></li> <li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="Smith" class="citation journal cs1"><a href="/wiki/Alvy_Ray_Smith" title="Alvy Ray Smith">Smith, Alvy Ray</a> (August 1978). <a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F965139.807361">"Color gamut transform pairs"</a>. Computer Graphics. 12 (3): 12–19. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1145%2F965139.807361">10.1145/965139.807361</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Computer+Graphics&rft.atitle=Color+gamut+transform+pairs&rft.volume=12&rft.issue=3&rft.pages=12-19&rft.date=1978-08&rft_id=info%3Adoi%2F10.1145%2F965139.807361&rft.au=Smith%2C+Alvy+Ray&rft_id=https%3A%2F%2Fdoi.org%2F10.1145%252F965139.807361&rfr_id=info%3Asid%2Fen.wikipedia.org%3AHSL+and+HSV" class="Z3988"> This is the original paper describing the "hexcone" model, HSV. Smith was a researcher at <a href="/wiki/New_York_Institute_of_Technology" title="New York Institute of Technology">NYIT</a>'s Computer Graphics Lab. He describes HSV's use in an early <a href="/wiki/Raster_graphics" title="Raster graphics">digital painting</a> program.</li></ul> <div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2>[<a href="/w/index.php?title=HSL_and_HSV&action=edit&section=33" title="Edit section: External links">edit</a>]</div> <ul><li><a rel="nofollow" class="external text" href="http://www.cs.rit.edu/~ncs/color/a_spaces.html">Demonstrative color conversion applet</a></li> <li><a rel="nofollow" class="external text" href="http://demonstrations.wolfram.com/HSVColors/">HSV Colors</a> by Hector Zenil, <a href="/wiki/The_Wolfram_Demonstrations_Project" class="mw-redirect" title="The Wolfram Demonstrations Project">The Wolfram Demonstrations Project</a>.</li> <li><a rel="nofollow" class="external text" href="https://codebeautify.org/hsv-to-rgb-converter">HSV to RGB</a> by CodeBeautify.</li></ul> <div class="navbox-styles"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1236075235">.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}</style></div><div role="navigation" class="navbox" aria-labelledby="Color_space" style="padding:3px"><table class="nowraplinks hlist mw-collapsible expanded navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239400231"><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Color_space" title="Template:Color space"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Color_space" title="Template talk:Color space"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Color_space" title="Special:EditPage/Template:Color space"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Color_space" style="font-size:114%;margin:0 4em"><a href="/wiki/Color_space" title="Color space">Color space</a></div></th></tr><tr><td class="navbox-abovebelow" colspan="2"><div> <ul><li><a href="/wiki/List_of_color_spaces_and_their_uses" title="List of color spaces and their uses">List of color spaces</a></li> <li><a href="/wiki/Color_model" title="Color model">Color models</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_appearance_model" title="Color appearance model">CAM</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/CIECAM02" title="CIECAM02">CIECAM02</a></li> <li><a href="/wiki/ICAM_(color_appearance_model)" title="ICAM (color appearance model)">iCAM</a></li> <li><a href="/wiki/CAM16" class="mw-redirect" title="CAM16">CAM16</a></li> <li><a href="/w/index.php?title=CIECAM16&action=edit&redlink=1" class="new" title="CIECAM16 (page does not exist)">CIECAM16</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/International_Commission_on_Illumination" title="International Commission on Illumination">CIE</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/CIE_1931_color_space" title="CIE 1931 color space">XYZ (1931)</a></li> <li><a href="/wiki/CIE_1931_color_space#CIE_RGB_color_space" title="CIE 1931 color space">RGB (1931)</a></li> <li><a href="/wiki/CIE_1960_color_space" title="CIE 1960 color space">YUV (1960)</a></li> <li><a href="/wiki/CIE_1964_color_space" title="CIE 1964 color space">UVW (1964)</a></li> <li><a href="/wiki/CIELAB_color_space" title="CIELAB color space">CIELAB (1976)</a></li> <li><a href="/wiki/CIELUV" title="CIELUV">CIELUV (1976)</a></li> <li><a href="/wiki/CIECAM02" title="CIECAM02">CIECAM02</a></li> <li><a href="/w/index.php?title=CIECAM16&action=edit&redlink=1" class="new" title="CIECAM16 (page does not exist)">CIECAM16</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/RGB_color_model" title="RGB color model">RGB</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/RGB_color_spaces" title="RGB color spaces">RGB color spaces</a></li> <li><a href="/wiki/SRGB" title="SRGB">sRGB</a></li> <li><a href="/wiki/Rg_chromaticity" title="Rg chromaticity">rg chromaticity</a></li> <li><a href="/wiki/Adobe_RGB_color_space" title="Adobe RGB color space">Adobe</a></li> <li><a href="/wiki/Wide-gamut_RGB_color_space" title="Wide-gamut RGB color space">Wide-gamut</a></li> <li><a href="/wiki/ProPhoto_RGB_color_space" title="ProPhoto RGB color space">ProPhoto</a></li> <li><a href="/wiki/ScRGB" title="ScRGB">scRGB</a></li> <li><a href="/wiki/DCI-P3" title="DCI-P3">DCI-P3</a></li> <li><a href="/wiki/Rec._601" title="Rec. 601">Rec. 601</a></li> <li><a href="/wiki/NTSC#SMPTE_C" title="NTSC">SMPTE 240M/"C"</a></li> <li><a href="/wiki/Rec._709" title="Rec. 709">Rec. 709</a></li> <li><a href="/wiki/Rec._2020" title="Rec. 2020">Rec. 2020</a></li> <li><a href="/wiki/Rec._2100" title="Rec. 2100">Rec. 2100</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Y%E2%80%B2UV" title="Y′UV">Y′UV</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Y%E2%80%B2UV" title="Y′UV">YUV</a> <ul><li><a href="/wiki/PAL" title="PAL">PAL</a></li></ul></li> <li><a href="/wiki/YDbDr" title="YDbDr">YDbDr</a> <ul><li><a href="/wiki/SECAM" title="SECAM">SECAM</a></li></ul></li> <li><a href="/wiki/YIQ" title="YIQ">YIQ</a> <ul><li><a href="/wiki/NTSC" title="NTSC">NTSC</a></li></ul></li> <li><a href="/wiki/YCbCr" title="YCbCr">YCbCr</a> <ul><li><a href="/wiki/Rec._601" title="Rec. 601">Rec. 601</a></li> <li><a href="/wiki/Rec._709" title="Rec. 709">Rec. 709</a></li> <li><a href="/wiki/Rec._2020" title="Rec. 2020">Rec. 2020</a></li> <li><a href="/wiki/Rec._2100" title="Rec. 2100">Rec. 2100</a></li></ul></li> <li><a href="/wiki/ICtCp" title="ICtCp">ICtCp</a> <ul><li><a href="/wiki/Rec._2100" title="Rec. 2100">Rec. 2100</a></li></ul></li> <li><a href="/wiki/YPbPr" title="YPbPr">YPbPr</a> <ul><li><a href="/wiki/Multiplexed_Analogue_Components" title="Multiplexed Analogue Components">MAC</a></li></ul></li> <li><a href="/wiki/XvYCC" title="XvYCC">xvYCC</a></li> <li><a href="/wiki/YCoCg" title="YCoCg">YCoCg</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Other</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/CcMmYK_color_model" title="CcMmYK color model">CcMmYK</a></li> <li><a href="/wiki/CMYK_color_model" title="CMYK color model">CMYK</a></li> <li><a href="/wiki/ColorADD" title="ColorADD">ColorADD</a></li> <li><a href="/wiki/Coloroid" title="Coloroid">Coloroid</a></li> <li><a href="/wiki/LMS_color_space" title="LMS color space">LMS</a></li> <li><a href="/wiki/Hexachrome" title="Hexachrome">Hexachrome</a></li> <li><a class="mw-selflink selflink">HSL, HSV</a></li> <li><a href="/wiki/HCL_color_space" title="HCL color space">HCL</a></li> <li><a href="/wiki/Impossible_color" title="Impossible color">Imaginary color</a></li> <li><a href="/wiki/Oklab_color_space" title="Oklab color space">Oklab</a></li> <li><a href="/wiki/OSA-UCS" title="OSA-UCS">OSA-UCS</a></li> <li><a href="/wiki/Practical_Color_Coordinate_System" title="Practical Color Coordinate System">PCCS</a></li> <li><a href="/wiki/RG_color_models" title="RG color models">RG</a></li> <li><a href="/wiki/RYB_color_model" title="RYB color model">RYB</a></li> <li><a href="/wiki/HWB_color_model" title="HWB color model">HWB</a></li> <li><a href="/wiki/YJK" title="YJK">YJK</a></li> <li><a href="/wiki/TSL_color_space" title="TSL color space">TSL</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Color systems and standards</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Academy_Color_Encoding_System" title="Academy Color Encoding System">ACES</a></li> <li><a href="/wiki/News_Media_Alliance" title="News Media Alliance">ANPA</a></li> <li><a href="/wiki/Colour_Index_International" title="Colour Index International">Colour Index International</a> <ul><li><a href="/wiki/List_of_dyes" title="List of dyes">CI list of dyes</a></li></ul></li> <li><a href="/wiki/DIC_Corporation" title="DIC Corporation">DIC</a></li> <li><a href="/wiki/Federal_Standard_595" title="Federal Standard 595">Federal Standard 595</a></li> <li><a href="/wiki/HKS_(colour_system)" title="HKS (colour system)">HKS</a></li> <li><a href="/wiki/ICC_profile" title="ICC profile">ICC profile</a></li> <li><a href="/wiki/ISCC%E2%80%93NBS_system" title="ISCC–NBS system">ISCC–NBS</a></li> <li><a href="/wiki/Munsell_color_system" title="Munsell color system">Munsell</a></li> <li><a href="/wiki/Natural_Color_System" title="Natural Color System">NCS</a></li> <li><a href="/wiki/Ostwald_color_system" title="Ostwald color system">Ostwald</a></li> <li><a href="/wiki/Pantone" title="Pantone">Pantone</a></li> <li><a href="/wiki/RAL_colour_standard" title="RAL colour standard">RAL</a> <ul><li><a href="/wiki/List_of_RAL_colors" class="mw-redirect" title="List of RAL colors">list</a></li></ul></li> <li><a href="/w/index.php?title=JIS_Z8102&action=edit&redlink=1" class="new" title="JIS Z8102 (page does not exist)">JIS Z8102</a> [<a href="https://ja.wikipedia.org/wiki/JIS%E6%85%A3%E7%94%A8%E8%89%B2%E5%90%8D" class="extiw" title="ja:JIS慣用色名">ja</a>]</li></ul> </div></td></tr><tr><td class="navbox-abovebelow" colspan="2"><div>For the vision capacities of organisms or machines, see <img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/8/83/Symbol_template_class_pink.svg/16px-Symbol_template_class_pink.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/8/83/Symbol_template_class_pink.svg/23px-Symbol_template_class_pink.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/8/83/Symbol_template_class_pink.svg/31px-Symbol_template_class_pink.svg.png 2x" data-file-width="180" data-file-height="185" /> <a href="/wiki/Template:Eye_physiology" title="Template:Eye physiology">Color vision</a>.</div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=HSL_and_HSV&oldid=1258384559">https://en.wikipedia.org/w/index.php?title=HSL_and_HSV&oldid=1258384559</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Category</a>: <ul><li><a href="/wiki/Category:Color_space" title="Category:Color space">Color space</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:Webarchive_template_wayback_links" title="Category:Webarchive template wayback links">Webarchive template wayback links</a></li><li><a href="/wiki/Category:Articles_with_short_description" title="Category:Articles with short description">Articles with short description</a></li><li><a href="/wiki/Category:Short_description_is_different_from_Wikidata" title="Category:Short description is different from Wikidata">Short description is different from Wikidata</a></li><li><a href="/wiki/Category:CS1_errors:_periodical_ignored" title="Category:CS1 errors: periodical ignored">CS1 errors: periodical ignored</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 19 November 2024, at 12:04 (UTC).</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=HSL_and_HSV&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-rzfvc","wgBackendResponseTime":196,"wgPageParseReport":{"limitreport":{"cputime":"1.340","walltime":"1.646","ppvisitednodes":{"value":12052,"limit":1000000},"postexpandincludesize":{"value":354041,"limit":2097152},"templateargumentsize":{"value":18506,"limit":2097152},"expansiondepth":{"value":16,"limit":100},"expensivefunctioncount":{"value":14,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":249334,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 996.167 1 -total"," 32.88% 327.546 2 Template:Reflist"," 20.09% 200.119 14 Template:Cite_journal"," 10.00% 99.572 1 Template:Short_description"," 8.89% 88.608 1 Template:Hsl-swatches"," 7.16% 71.309 2 Template:Pagetype"," 6.44% 64.164 1 Template:Color_space"," 6.00% 59.747 1 Template:Navbox"," 5.67% 56.445 2 Template:Navbar"," 4.59% 45.770 6 Template:See_also"]},"scribunto":{"limitreport-timeusage":{"value":"0.497","limit":"10.000"},"limitreport-memusage":{"value":6369988,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-f69cdc8f6-rjnn6","timestamp":"20241122141416","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"HSL and HSV","url":"https:\/\/en.wikipedia.org\/wiki\/HSL_and_HSV","sameAs":"http:\/\/www.wikidata.org\/entity\/Q376492","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q376492","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2003-06-25T15:04:53Z","dateModified":"2024-11-19T12:04:11Z","image":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a0\/Hsl-hsv_models.svg","headline":"two most common cylindrical-coordinate representations"}</script> </body> </html>

CINXE.COM

HSL and HSV - Wikipedia