CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-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-sticky-header-enabled vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Color picker - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-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-sticky-header-enabled 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":"8185055d-5817-48ca-9190-406fd00ae285","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Color_picker","wgTitle":"Color picker","wgCurRevisionId":1272808000,"wgRevisionId":1272808000,"wgArticleId":5821078,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Articles with short description","Short description is different from Wikidata","Articles needing additional references from December 2006","All articles needing additional references","Articles to be expanded from February 2022","All articles to be expanded","Pages using gadget Calculator","Color","Color schemes","Graphics software"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Color_picker","wgRelevantArticleId":5821078, "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":5000,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q375580","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","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","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.gadget.Calculator","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"];</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.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.15"> <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/2/23/GTK_color_chooser.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="651"> <meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/2/23/GTK_color_chooser.png"> <meta property="og:image:width" content="800"> <meta property="og:image:height" content="434"> <meta property="og:image:width" content="640"> <meta property="og:image:height" content="347"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Color picker - 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/Color_picker"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Color_picker&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/Color_picker"> <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-Color_picker rootpage-Color_picker 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" title="Main menu" > <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" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </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"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></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"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></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"><span>Recent changes</span></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"><span>Upload file</span></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"> <span class="mw-logo-container skin-invert"> <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;"> </span> </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"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </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" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </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" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </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/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=en.wikipedia.org&uselang=en" class=""><span>Donate</span></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=Color+picker" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></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=Color+picker" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></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" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </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/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Color+picker" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Color+picker" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></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"><span>learn more</span></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"><span>Contributions</span></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"><span>Talk</span></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-History" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#History"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>History</span> </div> </a> <ul id="toc-History-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Purpose" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Purpose"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Purpose</span> </div> </a> <ul id="toc-Purpose-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Interface" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Interface"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Interface</span> </div> </a> <button aria-controls="toc-Interface-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Interface subsection</span> </button> <ul id="toc-Interface-sublist" class="vector-toc-list"> <li id="toc-Eyedropper" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Eyedropper"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1</span> <span>Eyedropper</span> </div> </a> <ul id="toc-Eyedropper-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Working" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Working"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Working</span> </div> </a> <ul id="toc-Working-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>See also</span> </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 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Notes"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Notes</span> </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 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-External_links" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#External_links"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>External links</span> </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" title="Table of Contents" > <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" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </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"><span class="mw-page-title-main">Color picker</span></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 7 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-7" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">7 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Farbw%C3%A4hler" title="Farbwähler – German" lang="de" hreflang="de" data-title="Farbwähler" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/Outil_de_gestion_des_couleurs" title="Outil de gestion des couleurs – French" lang="fr" hreflang="fr" data-title="Outil de gestion des couleurs" data-language-autonym="Français" data-language-local-name="French" class="interlanguage-link-target"><span>Français</span></a></li><li class="interlanguage-link interwiki-id mw-list-item"><a href="https://id.wikipedia.org/wiki/Pemilih_warna" title="Pemilih warna – Indonesian" lang="id" hreflang="id" data-title="Pemilih warna" data-language-autonym="Bahasa Indonesia" data-language-local-name="Indonesian" class="interlanguage-link-target"><span>Bahasa Indonesia</span></a></li><li class="interlanguage-link interwiki-he mw-list-item"><a href="https://he.wikipedia.org/wiki/%D7%91%D7%95%D7%A8%D7%A8_%D7%A6%D7%91%D7%A2%D7%99%D7%9D" title="בורר צבעים – Hebrew" lang="he" hreflang="he" data-title="בורר צבעים" data-language-autonym="עברית" data-language-local-name="Hebrew" class="interlanguage-link-target"><span>עברית</span></a></li><li class="interlanguage-link interwiki-nl mw-list-item"><a href="https://nl.wikipedia.org/wiki/Kleurenkiezer" title="Kleurenkiezer – Dutch" lang="nl" hreflang="nl" data-title="Kleurenkiezer" data-language-autonym="Nederlands" data-language-local-name="Dutch" class="interlanguage-link-target"><span>Nederlands</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9_%D0%BC%D0%B8%D0%BA%D1%81%D0%B5%D1%80" title="Цветовой миксер – Russian" lang="ru" hreflang="ru" data-title="Цветовой миксер" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-sv mw-list-item"><a href="https://sv.wikipedia.org/wiki/F%C3%A4rgv%C3%A4ljare" title="Färgväljare – Swedish" lang="sv" hreflang="sv" data-title="Färgväljare" data-language-autonym="Svenska" data-language-local-name="Swedish" class="interlanguage-link-target"><span>Svenska</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q375580#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></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/Color_picker" title="View the content page [c]" accesskey="c"><span>Article</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Color_picker" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></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" ><span class="vector-dropdown-label-text">English</span> </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/Color_picker"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Color_picker&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Color_picker&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></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" ><span class="vector-dropdown-label-text">Tools</span> </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/Color_picker"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Color_picker&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Color_picker&action=history"><span>View history</span></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/Color_picker" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Color_picker" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></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"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Color_picker&oldid=1272808000" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Color_picker&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Color_picker&id=1272808000&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></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%2FColor_picker"><span>Get shortened URL</span></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%2FColor_picker"><span>Download QR code</span></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=Color_picker&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Color_picker&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></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:Color_selectors" hreflang="en"><span>Wikimedia Commons</span></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/Q375580" title="Structured data on this page hosted by Wikidata [g]" accesskey="g"><span>Wikidata item</span></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">Graphical user interface element</div> <style data-mw-deduplicate="TemplateStyles:r1251242444">.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}</style><table class="box-More_citations_needed plainlinks metadata ambox ambox-content ambox-Refimprove" role="presentation"><tbody><tr><td class="mbox-image"><div class="mbox-image-div"><span typeof="mw:File"><a href="/wiki/File:Question_book-new.svg" class="mw-file-description"><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png" decoding="async" width="50" height="39" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/75px-Question_book-new.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/100px-Question_book-new.svg.png 2x" data-file-width="512" data-file-height="399" /></a></span></div></td><td class="mbox-text"><div class="mbox-text-span">This article <b>needs additional citations for <a href="/wiki/Wikipedia:Verifiability" title="Wikipedia:Verifiability">verification</a></b>.<span class="hide-when-compact"> Please help <a href="/wiki/Special:EditPage/Color_picker" title="Special:EditPage/Color picker">improve this article</a> by <a href="/wiki/Help:Referencing_for_beginners" title="Help:Referencing for beginners">adding citations to reliable sources</a>. Unsourced material may be challenged and removed.<br /><small><span class="plainlinks"><i>Find sources:</i> <a rel="nofollow" class="external text" href="https://www.google.com/search?as_eq=wikipedia&q=%22Color+picker%22">"Color picker"</a> – <a rel="nofollow" class="external text" href="https://www.google.com/search?tbm=nws&q=%22Color+picker%22+-wikipedia&tbs=ar:1">news</a> <b>·</b> <a rel="nofollow" class="external text" href="https://www.google.com/search?&q=%22Color+picker%22&tbs=bkt:s&tbm=bks">newspapers</a> <b>·</b> <a rel="nofollow" class="external text" href="https://www.google.com/search?tbs=bks:1&q=%22Color+picker%22+-wikipedia">books</a> <b>·</b> <a rel="nofollow" class="external text" href="https://scholar.google.com/scholar?q=%22Color+picker%22">scholar</a> <b>·</b> <a rel="nofollow" class="external text" href="https://www.jstor.org/action/doBasicSearch?Query=%22Color+picker%22&acc=on&wc=on">JSTOR</a></span></small></span> <span class="date-container"><i>(<span class="date">December 2006</span>)</i></span><span class="hide-when-compact"><i> (<small><a href="/wiki/Help:Maintenance_template_removal" title="Help:Maintenance template removal">Learn how and when to remove this message</a></small>)</i></span></div></td></tr></tbody></table> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:GTK_color_chooser.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/2/23/GTK_color_chooser.png/220px-GTK_color_chooser.png" decoding="async" width="220" height="119" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/23/GTK_color_chooser.png/330px-GTK_color_chooser.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/23/GTK_color_chooser.png/440px-GTK_color_chooser.png 2x" data-file-width="531" data-file-height="288" /></a><figcaption>A screenshot of the <a href="/wiki/GTK%2B" class="mw-redirect" title="GTK+">GTK+</a> 2 color picker.</figcaption></figure> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Qt_color_chooser.png" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Qt_color_chooser.png/220px-Qt_color_chooser.png" decoding="async" width="220" height="156" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Qt_color_chooser.png/330px-Qt_color_chooser.png 1.5x, //upload.wikimedia.org/wikipedia/commons/f/f5/Qt_color_chooser.png 2x" data-file-width="440" data-file-height="312" /></a><figcaption>A screenshot of the <a href="/wiki/Qt_(software)" title="Qt (software)">Qt</a> color picker.</figcaption></figure> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Gimp_color_selector_03.gif" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Gimp_color_selector_03.gif/220px-Gimp_color_selector_03.gif" decoding="async" width="220" height="139" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Gimp_color_selector_03.gif/330px-Gimp_color_selector_03.gif 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Gimp_color_selector_03.gif/440px-Gimp_color_selector_03.gif 2x" data-file-width="491" data-file-height="310" /></a><figcaption><a href="/wiki/GIMP" title="GIMP">GIMP</a> color picker.</figcaption></figure> <p>A <b>color picker</b> (also <b>color chooser</b> or <b>color tool</b>) is a <a href="/wiki/Graphical_user_interface" title="Graphical user interface">graphical user interface</a> <a href="/wiki/Graphical_widget" title="Graphical widget">widget</a>, usually found within <a href="/wiki/Graphics_software" title="Graphics software">graphics software</a> or online, used to select colors and, in some cases, to create <a href="/wiki/Color_scheme" title="Color scheme">color schemes</a> (the color picker might be more sophisticated than the palette included with the program). Operating systems such as <a href="/wiki/Microsoft_Windows" title="Microsoft Windows">Microsoft Windows</a> or <a href="/wiki/MacOS" title="MacOS">macOS</a> have a system color picker, which can be used by third-party programs (e.g., Adobe Photoshop).<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="History">History</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Color_picker&action=edit&section=1" title="Edit section: History"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1251242444"><table class="box-Expand_section plainlinks metadata ambox mbox-small-left ambox-content" role="presentation"><tbody><tr><td class="mbox-image"><span typeof="mw:File"><a href="/wiki/File:Wiki_letter_w_cropped.svg" class="mw-file-description"><img alt="[icon]" src="//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Wiki_letter_w_cropped.svg/20px-Wiki_letter_w_cropped.svg.png" decoding="async" width="20" height="14" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Wiki_letter_w_cropped.svg/30px-Wiki_letter_w_cropped.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Wiki_letter_w_cropped.svg/40px-Wiki_letter_w_cropped.svg.png 2x" data-file-width="44" data-file-height="31" /></a></span></td><td class="mbox-text"><div class="mbox-text-span">This section <b>needs expansion</b>. You can help by <a class="external text" href="https://en.wikipedia.org/w/index.php?title=Color_picker&action=edit&section=">adding to it</a>. <span class="date-container"><i>(<span class="date">February 2022</span>)</i></span></div></td></tr></tbody></table> <p>The concept of color pickers dates back to the early days of computer graphics and digital design.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> Early versions were rudimentary, often featuring basic color palettes and limited functionality. <sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="Purpose">Purpose</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Color_picker&action=edit&section=2" title="Edit section: Purpose"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>A color picker is used to select and adjust color values. In <a href="/wiki/Graphic_design" title="Graphic design">graphic design</a> and <a href="/wiki/Graphics_software" title="Graphics software">image editing</a>, users typically choose colors via an interface with a visual representation of a color—organized with quasi-perceptually-relevant <a href="/wiki/Hue" title="Hue">hue</a>, <a href="/wiki/Colorfulness" title="Colorfulness">saturation</a> and <a href="/wiki/Lightness" title="Lightness">lightness</a> dimensions (<a href="/wiki/HSL_and_HSV" title="HSL and HSV">HSL</a>) – instead of keying in <a href="/wiki/Alphanumeric" class="mw-redirect" title="Alphanumeric">alphanumeric</a> text values. Because color appearance depends on comparison of neighboring colors (see <a href="/wiki/Color_vision" title="Color vision">color vision</a>), many interfaces attempt to clarify the relationships between colors. </p> <div class="mw-heading mw-heading2"><h2 id="Interface">Interface</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Color_picker&action=edit&section=3" title="Edit section: Interface"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="infobox calculatorgadget-enabled" style="width:min-content;padding: 3px;display:none"> <div class="calculator-container" style="display:grid;grid-template-columns:max-content max-content 40px; padding: 5px; gap: 5px; width: fit-content;border: 1px solid #eaecf0" aria-describedby="rgbslider-caption"> <div style="grid-column:1;" title="Red"><span class="calculator-field-label" data-for="calculator-field-red">R:</span> <span class="calculator-field" id="calculator-field-red" data-calculator-type="range" style="accent-color:#f00;max-width:160px;vertical-align: top" data-calculator-formula="red2" data-calculator-max="255" data-calculator-min="0" aria-label="red">128</span></div> <div><span class="calculator-field" id="calculator-field-red2" data-calculator-type="number" data-calculator-formula="red" data-calculator-size="3" data-calculator-max="255" data-calculator-min="0" aria-label="red">128</span></div> <div style="grid-column:1;" title="Green"><span class="calculator-field-label" data-for="calculator-field-green">G:</span> <span class="calculator-field" id="calculator-field-green" data-calculator-type="range" style="accent-color:#0f0;max-width:160px;vertical-align: top" data-calculator-formula="green2" data-calculator-max="255" data-calculator-min="0" aria-label="green">200</span></div> <div><span class="calculator-field" id="calculator-field-green2" data-calculator-type="number" data-calculator-formula="green" data-calculator-size="3" data-calculator-max="255" data-calculator-min="0" aria-label="green">200</span></div> <div style="grid-column:1;" title="Blue"><span class="calculator-field-label" data-for="calculator-field-blue">B:</span> <span class="calculator-field" id="calculator-field-blue" data-calculator-type="range" style="accent-color:#00f;max-width:160px;vertical-align: top" data-calculator-formula="blue2" data-calculator-max="255" data-calculator-min="0" aria-label="blue">255</span></div> <div><span class="calculator-field" id="calculator-field-blue2" data-calculator-type="number" data-calculator-formula="blue" data-calculator-size="3" data-calculator-max="255" data-calculator-min="0" aria-label="blue">255</span></div> <div style="grid-column:3;grid-row:1/4;background-color:rgb(var(--calculator-red, 128) var(--calculator-green, 200) var(--calculator-blue, 255));border: 1px inset black"> </div> </div> <div style="padding-left:5px; padding-right:5px" id="rgbslider-caption"> <p style="margin:0">An example color picker that uses sliders and text boxes to select the color</p> </div> </div> <p>Color tools can vary in their interface. Some may use sliders, buttons, text boxes for color values, or <a href="/wiki/Direct_manipulation_interface" title="Direct manipulation interface">direct manipulation</a>. Often a two-dimensional square is used to create a range of color values (such as lightness and saturation) that can be clicked on or selected in some other manner. Drag and drop, color droppers, and various other forms of interfaces are commonly used as well. </p><p>Usually, color values are also displayed numerically, so they can be precisely remembered and keyed-in later, such as three values of 0-255 representing red, green, and blue, respectively. </p> <div class="mw-heading mw-heading3"><h3 id="Eyedropper">Eyedropper</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Color_picker&action=edit&section=4" title="Edit section: Eyedropper"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The eyedropper is a tool present in most color pickers and <a href="/wiki/Graphics_software" title="Graphics software">graphics software</a> that allows a user to read a color at a specific point in an image, or position on a display. This enables the color to be transferred to other applications particularly quickly. </p> <div class="mw-heading mw-heading2"><h2 id="Working">Working</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Color_picker&action=edit&section=5" title="Edit section: Working"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>A color picker has two main parts, first a color slider and second a color canvas. The color slider has a linear or radial <a href="/wiki/Color_gradient" title="Color gradient">gradient</a> of the seven <a href="/wiki/Rainbow" title="Rainbow">rainbow colors</a> i.e. Violet, Indigo, Blue, Green, Yellow, Orange and Red. It allows you to choose any of the seven primary colors. </p><p>The color value chosen from the color slider instantly reflects in the color canvas. The color <a href="/wiki/Canvas_element" title="Canvas element">canvas</a> is a mixture of two linear color gradients. First a linear gradient of the current chosen color and second a linear gradient of the black color. This mixture of color gradients lets you choose a lighter and darker version of the current chosen color from the color slider. </p> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Color_picker&action=edit&section=6" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/wiki/Color_balance" title="Color balance">Color balance</a></li> <li><a href="/wiki/Color_management" title="Color management">Color management</a></li> <li><a href="/wiki/Color_space" title="Color space">Color space</a></li> <li><a href="/wiki/RGB_color_spaces" title="RGB color spaces">RGB color spaces</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="Notes">Notes</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Color_picker&action=edit&section=7" title="Edit section: Notes"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></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"> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text">Feisner and Reed 2014, Chapter 5: "Digital Color Media and Technology", Glossary: "Color picker"</span> </li> <li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><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="CITEREFBauerFoster2002" class="citation book cs1">Bauer, Peter; Foster, Jeff (2002). <i>Using Adobe Photoshop 7</i>. Que Publishing. p. 209. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/9780789727602" title="Special:BookSources/9780789727602"><bdi>9780789727602</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Using+Adobe+Photoshop+7&rft.pages=209&rft.pub=Que+Publishing&rft.date=2002&rft.isbn=9780789727602&rft.aulast=Bauer&rft.aufirst=Peter&rft.au=Foster%2C+Jeff&rfr_id=info%3Asid%2Fen.wikipedia.org%3AColor+picker" class="Z3988"></span></span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFalvinashcraft2024" class="citation web cs1">alvinashcraft (2024-07-12). <a rel="nofollow" class="external text" href="https://learn.microsoft.com/en-us/windows/powertoys/awake">"PowerToys Awake utility for Windows"</a>. <i>learn.microsoft.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2024-08-10</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=learn.microsoft.com&rft.atitle=PowerToys+Awake+utility+for+Windows&rft.date=2024-07-12&rft.au=alvinashcraft&rft_id=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fwindows%2Fpowertoys%2Fawake&rfr_id=info%3Asid%2Fen.wikipedia.org%3AColor+picker" class="Z3988"></span></span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFalvinashcraft2024" class="citation web cs1">alvinashcraft (2024-07-12). <a rel="nofollow" class="external text" href="https://learn.microsoft.com/en-us/windows/powertoys/color-picker">"PowerToys Color Picker utility for Windows"</a>. <i>learn.microsoft.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2024-08-10</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=learn.microsoft.com&rft.atitle=PowerToys+Color+Picker+utility+for+Windows&rft.date=2024-07-12&rft.au=alvinashcraft&rft_id=https%3A%2F%2Flearn.microsoft.com%2Fen-us%2Fwindows%2Fpowertoys%2Fcolor-picker&rfr_id=info%3Asid%2Fen.wikipedia.org%3AColor+picker" class="Z3988"></span></span> </li> </ol></div></div> <div class="mw-heading mw-heading2"><h2 id="References">References</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Color_picker&action=edit&section=8" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFFeisnerReed2014" class="citation cs2">Feisner, Edith Anderson; Reed, Ronald (2014), <a rel="nofollow" class="external text" href="https://books.google.com/books?id=3TIeAwAAQBAJ"><i>Color Studies</i></a>, New York: Fairchild Books, <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/9781609015312" title="Special:BookSources/9781609015312"><bdi>9781609015312</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+Studies&rft.place=New+York&rft.pub=Fairchild+Books&rft.date=2014&rft.isbn=9781609015312&rft.aulast=Feisner&rft.aufirst=Edith+Anderson&rft.au=Reed%2C+Ronald&rft_id=https%3A%2F%2Fbooks.google.com%2Fbooks%3Fid%3D3TIeAwAAQBAJ&rfr_id=info%3Asid%2Fen.wikipedia.org%3AColor+picker" class="Z3988"></span></li></ul> <div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Color_picker&action=edit&section=9" title="Edit section: External links"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">Various color formats</a></li></ul> <div class="navbox-styles"><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: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_topics419" style="padding:3px"><table class="nowraplinks hlist mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="3"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><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 navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Color_topics" title="Template:Color topics"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Color_topics" title="Template talk:Color topics"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Color_topics" title="Special:EditPage/Template:Color topics"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Color_topics419" style="font-size:114%;margin:0 4em"><a href="/wiki/Color" title="Color">Color</a> topics</div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_science" title="Color science">Color science</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%">Color physics</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/Electromagnetic_spectrum" title="Electromagnetic spectrum">Electromagnetic spectrum</a> <ul><li><a href="/wiki/Light" title="Light">Light</a></li> <li><a href="/wiki/Rainbow" title="Rainbow">Rainbow</a></li> <li><a href="/wiki/Visible_spectrum" title="Visible spectrum">Visible</a></li></ul></li> <li><a href="/wiki/Spectral_color" title="Spectral color">Spectral colors</a></li> <li><a href="/wiki/Chromophore" title="Chromophore">Chromophore</a> <ul><li><a href="/wiki/Structural_coloration" title="Structural coloration">Structural coloration</a></li> <li><a href="/wiki/Animal_coloration" title="Animal coloration">Animal coloration</a></li></ul></li> <li><a href="/wiki/Color_of_chemicals" title="Color of chemicals">Color of chemicals</a> <ul><li><a href="/wiki/Color_of_water" title="Color of water">Water</a></li></ul></li> <li><a href="/wiki/Spectral_power_distribution" title="Spectral power distribution">Spectral power distribution</a></li> <li><a href="/wiki/Colorimetry" title="Colorimetry">Colorimetry</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_vision" title="Color vision">Color perception</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/Chromesthesia" title="Chromesthesia">Chromesthesia</a> <ul><li><a href="/wiki/Sonochromatism" title="Sonochromatism">Sonochromatism</a></li></ul></li> <li><a href="/wiki/Color_blindness" title="Color blindness">Color blindness</a> <ul><li><a href="/wiki/Achromatopsia" title="Achromatopsia">Achromatopsia</a></li> <li><a href="/wiki/Dichromacy" title="Dichromacy">Dichromacy</a></li></ul></li> <li><a href="/wiki/Color_calibration" title="Color calibration">Color calibration</a></li> <li><a href="/wiki/Color_constancy" title="Color constancy">Color constancy</a></li> <li><a href="/wiki/Color_task" title="Color task">Color task</a> <ul><li><a href="/wiki/Color_code" title="Color code">Color code</a></li></ul></li> <li><a href="/wiki/Color_temperature" title="Color temperature">Color temperature</a></li> <li><a href="/wiki/Color_vision_test" title="Color vision test">Color vision test</a></li> <li><a href="/wiki/Evolution_of_color_vision" title="Evolution of color vision">Evolution of color vision</a></li> <li><a href="/wiki/Impossible_color" title="Impossible color">Impossible colors</a></li> <li><a href="/wiki/Metamerism_(color)" title="Metamerism (color)">Metamerism</a></li> <li><a href="/wiki/Opponent_process" title="Opponent process">Opponent process</a> <ul><li><a href="/wiki/Afterimage" title="Afterimage">Afterimage</a></li> <li><a href="/wiki/Unique_hues" title="Unique hues">Unique hues</a></li></ul></li> <li><a href="/wiki/Tetrachromacy" title="Tetrachromacy">Tetrachromacy</a></li> <li><i><a href="/wiki/The_dress" title="The dress">The dress</a></i></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_psychology" title="Color psychology">Color psychology</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/Color_symbolism" title="Color symbolism">Color symbolism</a></li> <li><a href="/wiki/Color_preferences" title="Color preferences">Color preferences</a></li> <li><a href="/wiki/L%C3%BCscher_color_test" title="Lüscher color test">Lüscher color test</a></li> <li><a href="/wiki/Kruithof_curve" title="Kruithof curve">Kruithof curve</a></li> <li><a href="/wiki/Political_colour" title="Political colour">Political color</a></li> <li><a href="/wiki/National_colours" title="National colours">National colors</a></li> <li><a href="/wiki/Chromophobia" title="Chromophobia">Chromophobia</a></li> <li><a href="/wiki/Chromotherapy" title="Chromotherapy">Chromotherapy</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_reproduction" title="Color reproduction">Color reproduction</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/Color_photography" title="Color photography">Color photography</a> <ul><li><a href="/wiki/Color_balance" title="Color balance">Color balance</a></li> <li><a href="/wiki/Colour_cast" title="Colour cast">Color cast</a></li></ul></li> <li><a href="/wiki/Digital_image_processing" title="Digital image processing">Digital image processing</a></li> <li><a href="/wiki/Color_management" title="Color management">Color management</a></li> <li><a href="/wiki/Color_printing" title="Color printing">Color printing</a> <ul><li><a href="/wiki/Multi-primary_color_display" title="Multi-primary color display">Multi-primary color display</a></li> <li><a href="/wiki/Quattron" title="Quattron">Quattron</a></li></ul></li> <li><a href="/wiki/Color_model" title="Color model">Color model</a> <ul><li><a href="/wiki/Additive_color" title="Additive color">additive</a> <ul><li><a href="/wiki/RGB" class="mw-redirect" title="RGB">RGB</a></li></ul></li> <li><a href="/wiki/Subtractive_color" title="Subtractive color">subtractive</a> <ul><li><a href="/wiki/CMYK" class="mw-redirect" title="CMYK">CMYK</a></li></ul></li></ul></li> <li><a href="/wiki/Color_space" title="Color space">Color space</a></li> <li><a href="/wiki/Color_mapping" class="mw-redirect" title="Color mapping">Color mapping</a></li></ul> </div></td></tr></tbody></table><div></div></td><td class="noviewer navbox-image" rowspan="6" style="width:1px;padding:0 0 0 2px"><div><span typeof="mw:File"><a href="/wiki/File:RGB_color_wheel.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/56/RGB_color_wheel.svg/100px-RGB_color_wheel.svg.png" decoding="async" width="100" height="83" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/56/RGB_color_wheel.svg/150px-RGB_color_wheel.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/56/RGB_color_wheel.svg/200px-RGB_color_wheel.svg.png 2x" data-file-width="600" data-file-height="500" /></a></span></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Philosophy_of_color" title="Philosophy of color">Color<br />philosophy</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_scheme" title="Color scheme">Color scheme</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 class="mw-selflink selflink">Color tool</a> <ul><li><a href="/wiki/Monochromatic_colors" class="mw-redirect" title="Monochromatic colors">Monochromatic colors</a> <ul><li><a href="/wiki/Black-and-white" title="Black-and-white">Black-and-white</a></li> <li><a href="/wiki/Grisaille" title="Grisaille">Grisaille</a></li></ul></li> <li><a href="/wiki/Complementary_colors" title="Complementary colors">Complementary colors</a></li> <li><a href="/wiki/Analogous_colors" title="Analogous colors">Analogous colors</a></li> <li><a href="/wiki/Grey" title="Grey">Achromatic colors (Neutral)</a></li> <li><a href="/wiki/Polychrome" title="Polychrome">Polychromatic colors</a></li></ul></li> <li><a href="/wiki/Light-on-dark_color_scheme" title="Light-on-dark color scheme">Light-on-dark</a></li> <li><a href="/wiki/Web_colors" title="Web colors">Web colors</a></li> <li><a href="/wiki/Tincture_(heraldry)" title="Tincture (heraldry)">Tinctures in heraldry</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_theory" title="Color theory">Color theory</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/Color_mixing" title="Color mixing">Color mixing</a> <ul><li><a href="/wiki/Primary_color" title="Primary color">Primary color</a></li> <li><a href="/wiki/Secondary_color" title="Secondary color">Secondary color</a></li></ul></li> <li><a href="/wiki/Chromaticity" title="Chromaticity">Chromaticity</a></li> <li><a href="/wiki/Color_solid" title="Color solid">Color solid</a></li> <li><a href="/wiki/Color_wheel" title="Color wheel">Color wheel</a></li> <li><a href="/wiki/Color_triangle" title="Color triangle">Color triangle</a></li> <li><a href="/wiki/Color_analysis" title="Color analysis">Color analysis</a> (fashion)</li> <li><a href="/wiki/Color_realism_(art_style)" title="Color realism (art style)">Color realism (art style)</a></li> <li><i><a href="/wiki/On_Vision_and_Colours" title="On Vision and Colours">On Vision and Colours</a></i> (Schopenhauer)</li> <li><i><a href="/wiki/Theory_of_Colours" title="Theory of Colours">Theory of Colours</a></i> (Goethe)</li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_term" title="Color term">Color terms</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Color_term#Basic_color_terms" title="Color term">Basic terms</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/Blue" title="Blue">Blue</a></li> <li><a href="/wiki/Green" title="Green">Green</a></li> <li><a href="/wiki/Red" title="Red">Red</a></li> <li><a href="/wiki/Yellow" title="Yellow">Yellow</a></li> <li><a href="/wiki/Pink" title="Pink">Pink</a></li> <li><a href="/wiki/Purple" title="Purple">Purple</a></li> <li><a href="/wiki/Orange_(colour)" title="Orange (colour)">Orange</a></li> <li><a href="/wiki/Black" title="Black">Black</a></li> <li><a href="/wiki/Grey" title="Grey">Gray</a></li> <li><a href="/wiki/White" title="White">White</a></li> <li><a href="/wiki/Brown" title="Brown">Brown</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Category:Color_in_culture" title="Category:Color in culture">Cultural differences</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/Linguistic_relativity_and_the_color_naming_debate" title="Linguistic relativity and the color naming debate">Linguistic relativity and the color naming debate</a> <ul><li><a href="/wiki/Blue%E2%80%93green_distinction_in_language" title="Blue–green distinction in language">Blue–green distinction in language</a></li></ul></li> <li>Color history <ul><li><a href="/wiki/Black-and-white_dualism" title="Black-and-white dualism">Black-and-white dualism</a></li> <li><a href="/wiki/Blue_in_culture" title="Blue in culture">Blue in culture</a></li> <li><a href="/wiki/Color_in_Chinese_culture" title="Color in Chinese culture">Color in Chinese culture</a></li> <li><a href="/wiki/Traditional_colors_of_Japan" title="Traditional colors of Japan">Traditional colors of Japan</a></li> <li><a href="/wiki/Human_skin_color" title="Human skin color">Human skin color</a></li></ul></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Color dimensions</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/Hue" title="Hue">Hue</a> <ul><li><a href="/wiki/Dichromatism" title="Dichromatism">Dichromatism</a></li></ul></li> <li><a href="/wiki/Colorfulness" title="Colorfulness">Colorfulness</a> <ul><li><a href="/wiki/Pastel_(color)" title="Pastel (color)">Pastel colors</a></li></ul></li> <li><a href="/wiki/Luminance" title="Luminance">Luminance</a> <ul><li><a href="/wiki/Lightness" title="Lightness">Lightness</a></li> <li><a href="/wiki/Darkness" title="Darkness">Darkness</a></li> <li><a href="/wiki/Brightness" title="Brightness">Brightness</a></li> <li><a href="/wiki/Iridescence" title="Iridescence">Iridescence</a></li> <li><a href="/wiki/Fluorescence" title="Fluorescence">Fluorescence</a></li></ul></li> <li><a href="/wiki/Grayscale" title="Grayscale">Grayscale</a></li> <li><a href="/wiki/Tint,_shade_and_tone" title="Tint, shade and tone">Tint, shade and tone</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Color<br />organizations</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/Pantone" title="Pantone">Pantone</a></li> <li><a href="/wiki/Color_Marketing_Group" title="Color Marketing Group">Color Marketing Group</a></li> <li><a href="/wiki/Color_Association_of_the_United_States" title="Color Association of the United States">Color Association of the United States</a></li> <li><a href="/wiki/International_Colour_Authority" title="International Colour Authority">International Colour Authority</a></li> <li><a href="/wiki/International_Commission_on_Illumination" title="International Commission on Illumination">International Commission on Illumination</a> (CIE)</li> <li><a href="/wiki/International_Color_Consortium" title="International Color Consortium">International Color Consortium</a></li> <li><a href="/wiki/International_Colour_Association" title="International Colour Association">International Colour Association</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Names</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Lists_of_colors" title="Lists of colors">Lists</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/List_of_colors:_A%E2%80%93F" title="List of colors: A–F">List of colors: A–F</a></li> <li><a href="/wiki/List_of_colors:_G%E2%80%93M" title="List of colors: G–M">List of colors: G–M</a></li> <li><a href="/wiki/List_of_colors:_N%E2%80%93Z" title="List of colors: N–Z">List of colors: N–Z</a></li> <li><a href="/wiki/List_of_colors_(compact)" class="mw-redirect" title="List of colors (compact)">List of colors (compact)</a></li> <li><a href="/wiki/List_of_colors_by_shade" title="List of colors by shade">List of colors by shade</a></li> <li><a href="/wiki/List_of_color_palettes" title="List of color palettes">List of color palettes</a></li> <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/List_of_Crayola_crayon_colors" title="List of Crayola crayon colors">List of Crayola crayon colors</a> <ul><li><a href="/wiki/History_of_Crayola_crayons" title="History of Crayola crayons">history</a></li></ul></li> <li><a href="/wiki/Color_chart" title="Color chart">Color chart</a></li> <li><a href="/wiki/List_of_RAL_colors" class="mw-redirect" title="List of RAL colors">List of RAL colors</a></li> <li><a href="/wiki/Web_colors" title="Web colors">List of web colors</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/List_of_colors_by_shade" title="List of colors by shade">Shades of:</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/Shades_of_red" title="Shades of red">Red</a></li> <li><a href="/wiki/Shades_of_orange" title="Shades of orange">Orange</a></li> <li><a href="/wiki/Shades_of_yellow" title="Shades of yellow">Yellow</a></li> <li><a href="/wiki/Shades_of_green" title="Shades of green">Green</a></li> <li><a href="/wiki/Shades_of_cyan" title="Shades of cyan">Cyan</a></li> <li><a href="/wiki/Shades_of_blue" title="Shades of blue">Blue</a></li> <li><a href="/wiki/Shades_of_violet" title="Shades of violet">Violet</a></li> <li><a href="/wiki/Shades_of_purple" title="Shades of purple">Purple</a></li> <li><a href="/wiki/Shades_of_magenta" title="Shades of magenta">Magenta</a></li> <li><a href="/wiki/Shades_of_pink" title="Shades of pink">Pink</a></li> <li><a href="/wiki/Shades_of_brown" title="Shades of brown">Brown</a></li> <li><a href="/wiki/Shades_of_white" title="Shades of white">White</a></li> <li><a href="/wiki/Shades_of_gray" title="Shades of gray">Gray</a></li> <li><a href="/wiki/Shades_of_black" title="Shades of black">Black</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Index_of_color-related_articles" title="Index of color-related articles">Related</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/Visual_perception" title="Visual perception">Vision</a> <ul><li><a href="/wiki/Contrast_(vision)" title="Contrast (vision)">Contrast</a></li></ul></li> <li><a href="/wiki/Qualia" title="Qualia">Qualia</a></li> <li><a href="/wiki/Lighting" title="Lighting">Lighting</a></li></ul> </div></td></tr><tr><td class="navbox-abovebelow" colspan="3"><div> <ul><li><span class="noviewer" typeof="mw:File"><span title="Category"><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/9/96/Symbol_category_class.svg/16px-Symbol_category_class.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/96/Symbol_category_class.svg/23px-Symbol_category_class.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/96/Symbol_category_class.svg/31px-Symbol_category_class.svg.png 2x" data-file-width="180" data-file-height="185" /></span></span> <a href="/wiki/Category:Color" title="Category:Color">Category</a></li> <li><span class="noviewer" typeof="mw:File"><span title="List-Class article"><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/d/db/Symbol_list_class.svg/16px-Symbol_list_class.svg.png" decoding="async" width="16" height="16" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/d/db/Symbol_list_class.svg/23px-Symbol_list_class.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/d/db/Symbol_list_class.svg/31px-Symbol_list_class.svg.png 2x" data-file-width="180" data-file-height="185" /></span></span> <a href="/wiki/Index_of_color-related_articles" title="Index of color-related articles">Index</a></li></ul> </div></td></tr></tbody></table></div> <div class="navbox-styles"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236075235"></div><div role="navigation" class="navbox" aria-labelledby="Graphical_control_elements194" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse 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:GUI_widgets" title="Template:GUI widgets"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:GUI_widgets" title="Template talk:GUI widgets"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:GUI_widgets" title="Special:EditPage/Template:GUI widgets"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Graphical_control_elements194" style="font-size:114%;margin:0 4em"><a href="/wiki/Graphical_widget" title="Graphical widget">Graphical control elements</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Command input</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Adjustment_handle" title="Adjustment handle">Adjustment handle</a></li> <li><a href="/wiki/Button_(computing)" title="Button (computing)">Button</a></li> <li><a href="/wiki/Context_menu" title="Context menu">Context menu</a></li> <li><a href="/wiki/Drop-down_list" title="Drop-down list">Drop-down list</a></li> <li><a href="/wiki/Hamburger_button" title="Hamburger button">Hamburger button</a></li> <li><a href="/wiki/Menu_(computing)" title="Menu (computing)">Menu</a></li> <li><a href="/wiki/Pie_menu" title="Pie menu">Pie menu</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Data input-output</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Checkbox" title="Checkbox">Checkbox</a></li> <li><a class="mw-selflink selflink">Color picker</a></li> <li><a href="/wiki/Combo_box" title="Combo box">Combo box</a></li> <li><a href="/wiki/Cycle_button" title="Cycle button">Cycle button</a></li> <li><a href="/wiki/Date_picker" title="Date picker">Date picker</a></li> <li><a href="/wiki/Grid_view" title="Grid view">Grid view</a></li> <li><a href="/wiki/Toggle_switch_(widget)" title="Toggle switch (widget)">Toggle switch</a></li> <li><a href="/wiki/List_box" title="List box">List box</a></li> <li><a href="/wiki/List_builder" title="List builder">List builder</a></li> <li><a href="/wiki/Radio_button" title="Radio button">Radio button</a></li> <li><a href="/wiki/Scrollbar" title="Scrollbar">Scrollbar</a></li> <li><a href="/wiki/Search_box" title="Search box">Search box</a></li> <li><a href="/wiki/Slider_(computing)" title="Slider (computing)">Slider</a></li> <li><a href="/wiki/Spinner_(computing)" title="Spinner (computing)">Spinner</a></li> <li><a href="/wiki/Text_box" title="Text box">Text box</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Informational</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Balloon_help" title="Balloon help">Balloon help</a></li> <li><a href="/wiki/HUD_(computing)" class="mw-redirect" title="HUD (computing)">Head-up display in computing</a></li> <li><a href="/wiki/HUD_(video_gaming)" class="mw-redirect" title="HUD (video gaming)">HUD in video games</a></li> <li><a href="/wiki/Icon_(computing)" title="Icon (computing)">Icon</a></li> <li><a href="/wiki/Infobar" title="Infobar">Infobar</a></li> <li><a href="/wiki/Label_(control)" title="Label (control)">Label</a></li> <li><a href="/wiki/Loading_screen" title="Loading screen">Loading screen</a></li> <li><a href="/wiki/Progress_indicator" title="Progress indicator">Progress indicator</a> <ul><li><a href="/wiki/Progress_bar" title="Progress bar">Progress bar</a></li> <li><a href="/wiki/Splash_screen" title="Splash screen">Splash screen</a></li> <li><a href="/wiki/Throbber" title="Throbber">Throbber</a></li></ul></li> <li><a href="/wiki/Sidebar_(computing)" title="Sidebar (computing)">Sidebar</a></li> <li><a href="/wiki/Status_bar" title="Status bar">Status bar</a></li> <li><a href="/wiki/Pop-up_notification" title="Pop-up notification">Toast</a></li> <li><a href="/wiki/Tooltip" title="Tooltip">Tooltip</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Containers</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Accordion_(GUI)" title="Accordion (GUI)">Accordion</a></li> <li><a href="/wiki/Tree_view" title="Tree view">Tree view</a></li> <li><a href="/wiki/Client-side_decoration" title="Client-side decoration">Client-side decoration</a></li> <li><a href="/wiki/Disclosure_widget" title="Disclosure widget">Disclosure widget</a></li> <li><a href="/wiki/Frame_(GUI)" title="Frame (GUI)">Frame / Fieldset</a></li> <li><a href="/wiki/Menu_bar" title="Menu bar">Menu bar</a></li> <li><a href="/wiki/Panel_(computer_software)" title="Panel (computer software)">Panel</a></li> <li><a href="/wiki/Popover_(GUI)" title="Popover (GUI)">Popover</a></li> <li><a href="/wiki/Ribbon_(computing)" title="Ribbon (computing)">Ribbon</a></li> <li><a href="/wiki/Tab_(interface)" title="Tab (interface)">Tab</a></li> <li><a href="/wiki/Toolbar" title="Toolbar">Toolbar</a></li> <li><a href="/wiki/Window_(computing)" title="Window (computing)">Window</a> <ul><li><a href="/wiki/Window_decoration" class="mw-redirect" title="Window decoration">Window decoration</a></li></ul></li> <li><a href="/wiki/Workspace" title="Workspace">Workspace</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Navigational</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Address_bar" title="Address bar">Address bar</a></li> <li><a href="/wiki/Breadcrumb_navigation" title="Breadcrumb navigation">Breadcrumb navigation</a></li> <li><a href="/wiki/Hyperlink" title="Hyperlink">Hyperlink</a></li> <li><a href="/wiki/Navigation_bar" title="Navigation bar">Navigation bar</a></li> <li><a href="/wiki/Virtual_desktop" title="Virtual desktop">Virtual desktop</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><span class="nowrap">Special <a href="/wiki/Window_(computing)" title="Window (computing)">windows</a></span></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Alert_dialog_box" title="Alert dialog box">Alert dialog box</a></li> <li><a href="/wiki/Dialog_box" title="Dialog box">Dialog box</a></li> <li><a href="/wiki/File_dialog" title="File dialog">File dialog</a></li> <li><a href="/wiki/Inspector_window" title="Inspector window">Inspector window</a></li> <li><a href="/wiki/Modal_window" title="Modal window">Modal window</a></li> <li><a href="/wiki/Palette_window" title="Palette window">Palette window</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Related concepts</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/File_viewer" title="File viewer">File viewer</a></li> <li><a href="/wiki/List_of_graphical_user_interface_elements" title="List of graphical user interface elements">List of graphical user interface elements</a></li> <li><a href="/wiki/Layout_manager" title="Layout manager">Layout manager</a></li> <li><a href="/wiki/Look_and_feel" title="Look and feel">Look and feel</a></li> <li><a href="/wiki/Mouseover" title="Mouseover">Mouseover</a></li> <li><a href="/wiki/Scrolling" title="Scrolling">Scrolling</a></li> <li><a href="/wiki/Widget_toolkit" title="Widget toolkit">Widget toolkit</a></li> <li><a href="/wiki/WIMP_(computing)" title="WIMP (computing)">WIMP</a></li> <li><a href="/wiki/Zoomable_user_interface" class="mw-redirect" title="Zoomable user interface">Zoomable user interface</a></li></ul> </div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?useformat=desktop&type=1x1&usesul3=0" 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=Color_picker&oldid=1272808000">https://en.wikipedia.org/w/index.php?title=Color_picker&oldid=1272808000</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">Categories</a>: <ul><li><a href="/wiki/Category:Color" title="Category:Color">Color</a></li><li><a href="/wiki/Category:Color_schemes" title="Category:Color schemes">Color schemes</a></li><li><a href="/wiki/Category:Graphics_software" title="Category:Graphics software">Graphics software</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: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:Articles_needing_additional_references_from_December_2006" title="Category:Articles needing additional references from December 2006">Articles needing additional references from December 2006</a></li><li><a href="/wiki/Category:All_articles_needing_additional_references" title="Category:All articles needing additional references">All articles needing additional references</a></li><li><a href="/wiki/Category:Articles_to_be_expanded_from_February_2022" title="Category:Articles to be expanded from February 2022">Articles to be expanded from February 2022</a></li><li><a href="/wiki/Category:All_articles_to_be_expanded" title="Category:All articles to be expanded">All articles to be expanded</a></li><li><a href="/wiki/Category:Pages_using_gadget_Calculator" title="Category:Pages using gadget Calculator">Pages using gadget Calculator</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 30 January 2025, at 07:53<span class="anonymous-show"> (UTC)</span>.</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=Color_picker&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" lang="en" 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-header-container vector-sticky-header-container"> <div id="vector-sticky-header" class="vector-sticky-header"> <div class="vector-sticky-header-start"> <div class="vector-sticky-header-icon-start vector-button-flush-left vector-button-flush-right" aria-hidden="true"> <button class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-sticky-header-search-toggle" tabindex="-1" data-event-name="ui.vector-sticky-search-form.icon"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </button> </div> <div role="search" class="vector-search-box-vue vector-search-box-show-thumbnail vector-search-box"> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail"> <form action="/w/index.php" id="vector-sticky-search-form" class="cdx-search-input cdx-search-input--has-end-button"> <div 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"> <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </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> <div class="vector-sticky-header-context-bar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-sticky-header-toc" class="vector-dropdown mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc vector-button-flush-left" > <input type="checkbox" id="vector-sticky-header-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-sticky-header-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-sticky-header-toc-label" for="vector-sticky-header-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" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-sticky-header-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div class="vector-sticky-header-context-bar-primary" aria-hidden="true" ><span class="mw-page-title-main">Color picker</span></div> </div> </div> <div class="vector-sticky-header-end" aria-hidden="true"> <div class="vector-sticky-header-icons"> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-talk-sticky-header" tabindex="-1" data-event-name="talk-sticky-header"><span class="vector-icon mw-ui-icon-speechBubbles mw-ui-icon-wikimedia-speechBubbles"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-subject-sticky-header" tabindex="-1" data-event-name="subject-sticky-header"><span class="vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-history-sticky-header" tabindex="-1" data-event-name="history-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-history mw-ui-icon-wikimedia-wikimedia-history"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only mw-watchlink" id="ca-watchstar-sticky-header" tabindex="-1" data-event-name="watch-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-star mw-ui-icon-wikimedia-wikimedia-star"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-edit-sticky-header" tabindex="-1" data-event-name="wikitext-edit-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-wikiText mw-ui-icon-wikimedia-wikimedia-wikiText"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-ve-edit-sticky-header" tabindex="-1" data-event-name="ve-edit-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-edit mw-ui-icon-wikimedia-wikimedia-edit"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-viewsource-sticky-header" tabindex="-1" data-event-name="ve-edit-protected-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-editLock mw-ui-icon-wikimedia-wikimedia-editLock"></span> <span></span> </a> </div> <div class="vector-sticky-header-buttons"> <button class="cdx-button cdx-button--weight-quiet mw-interlanguage-selector" id="p-lang-btn-sticky-header" tabindex="-1" data-event-name="ui.dropdown-p-lang-btn-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>7 languages</span> </button> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive" id="ca-addsection-sticky-header" tabindex="-1" data-event-name="addsection-sticky-header"><span class="vector-icon mw-ui-icon-speechBubbleAdd-progressive mw-ui-icon-wikimedia-speechBubbleAdd-progressive"></span> <span>Add topic</span> </a> </div> <div class="vector-sticky-header-icon-end"> <div class="vector-user-links"> </div> </div> </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-ff47b69b6-cmrns","wgBackendResponseTime":166,"wgPageParseReport":{"limitreport":{"cputime":"0.330","walltime":"0.435","ppvisitednodes":{"value":1738,"limit":1000000},"postexpandincludesize":{"value":78143,"limit":2097152},"templateargumentsize":{"value":1391,"limit":2097152},"expansiondepth":{"value":10,"limit":100},"expensivefunctioncount":{"value":3,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":33219,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 347.827 1 -total"," 29.69% 103.282 6 Template:Navbox"," 29.46% 102.458 1 Template:Reflist"," 26.84% 93.366 1 Template:Color_topics"," 23.44% 81.536 1 Template:Cite_book"," 17.11% 59.512 1 Template:Short_description"," 15.65% 54.447 2 Template:Ambox"," 15.61% 54.312 1 Template:More_citations_needed"," 8.81% 30.650 2 Template:Pagetype"," 5.75% 19.989 3 Template:Main_other"]},"scribunto":{"limitreport-timeusage":{"value":"0.201","limit":"10.000"},"limitreport-memusage":{"value":5115633,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-654b9d4bd7-dgvmg","timestamp":"20250210054824","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"Color picker","url":"https:\/\/en.wikipedia.org\/wiki\/Color_picker","sameAs":"http:\/\/www.wikidata.org\/entity\/Q375580","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q375580","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":"2006-07-04T03:52:21Z","dateModified":"2025-01-30T07:53:17Z","image":"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/23\/GTK_color_chooser.png","headline":"a utility within graphics software or online"}</script> </body> </html>