CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Web colors - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"254d48a9-0165-4e4a-acd1-05b8009f601a","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Web_colors","wgTitle":"Web colors","wgCurRevisionId":1251966685,"wgRevisionId":1251966685,"wgArticleId":286621,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Articles with short description","Short description matches Wikidata","Use dmy dates from October 2014","Use American English from October 2020","All Wikipedia articles written in American English","All articles with unsourced statements","Articles with unsourced statements from May 2011","Articles with specifically marked weasel-worded phrases from February 2024","Articles prone to spam from September 2013","Articles with example code","Web colors","Color","Web design"], "wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Web_colors","wgRelevantArticleId":286621,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgRedirectedFrom":"Hex_triplet","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":30000,"wgInternalRedirectTargetUrl":"/wiki/Web_colors#Hex_triplet","wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false, "wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q376346","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.tablesorter.styles":"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=["mediawiki.action.view.redirect","ext.cite.ux-enhancements","ext.pygments.view","mediawiki.page.media","site","mediawiki.page.ready","jquery.tablesorter","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.quicksurveys.init","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cjquery.tablesorter.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Web colors - 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/Web_colors#Hex_triplet"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Web_colors&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/Web_colors#Hex_triplet"> <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-Web_colors rootpage-Web_colors skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><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/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_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=Web+colors" 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=Web+colors" 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/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_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=Web+colors" 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=Web+colors" 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-Hex_triplet" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Hex_triplet"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Hex triplet</span> </div> </a> <button aria-controls="toc-Hex_triplet-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 Hex triplet subsection</span> </button> <ul id="toc-Hex_triplet-sublist" class="vector-toc-list"> <li id="toc-Shorthand_hexadecimal_form" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Shorthand_hexadecimal_form"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>Shorthand hexadecimal form</span> </div> </a> <ul id="toc-Shorthand_hexadecimal_form-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Converting_RGB_to_hexadecimal" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Converting_RGB_to_hexadecimal"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span> <span>Converting RGB to hexadecimal</span> </div> </a> <ul id="toc-Converting_RGB_to_hexadecimal-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-HTML_color_names" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#HTML_color_names"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>HTML color names</span> </div> </a> <button aria-controls="toc-HTML_color_names-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 HTML color names subsection</span> </button> <ul id="toc-HTML_color_names-sublist" class="vector-toc-list"> <li id="toc-Basic_colors" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Basic_colors"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>Basic colors</span> </div> </a> <ul id="toc-Basic_colors-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Extended_colors" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Extended_colors"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>Extended colors</span> </div> </a> <ul id="toc-Extended_colors-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-CSS_colors" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#CSS_colors"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>CSS colors</span> </div> </a> <button aria-controls="toc-CSS_colors-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 CSS colors subsection</span> </button> <ul id="toc-CSS_colors-sublist" class="vector-toc-list"> <li id="toc-CSS_Color_4" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#CSS_Color_4"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1</span> <span>CSS Color 4</span> </div> </a> <ul id="toc-CSS_Color_4-sublist" class="vector-toc-list"> <li id="toc-Device_independent_color" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Device_independent_color"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1.1</span> <span>Device independent color</span> </div> </a> <ul id="toc-Device_independent_color-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Predefined_color_spaces" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Predefined_color_spaces"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1.2</span> <span>Predefined color spaces</span> </div> </a> <ul id="toc-Predefined_color_spaces-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Other_formats" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Other_formats"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1.3</span> <span>Other formats</span> </div> </a> <ul id="toc-Other_formats-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-CSS_Color_5" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#CSS_Color_5"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.2</span> <span>CSS Color 5</span> </div> </a> <ul id="toc-CSS_Color_5-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Web-safe_colors" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Web-safe_colors"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Web-safe colors</span> </div> </a> <button aria-controls="toc-Web-safe_colors-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 Web-safe colors subsection</span> </button> <ul id="toc-Web-safe_colors-sublist" class="vector-toc-list"> <li id="toc-Color_table" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Color_table"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>Color table</span> </div> </a> <ul id="toc-Color_table-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Safest_web_colors" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Safest_web_colors"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span> <span>Safest web colors</span> </div> </a> <ul id="toc-Safest_web_colors-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Accessibility" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Accessibility"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Accessibility</span> </div> </a> <button aria-controls="toc-Accessibility-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 Accessibility subsection</span> </button> <ul id="toc-Accessibility-sublist" class="vector-toc-list"> <li id="toc-Color_selection" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Color_selection"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.1</span> <span>Color selection</span> </div> </a> <ul id="toc-Color_selection-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Color_contrast" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Color_contrast"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2</span> <span>Color contrast</span> </div> </a> <ul id="toc-Color_contrast-sublist" class="vector-toc-list"> </ul> </li> </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">6</span> <span>See also</span> </div> </a> <ul id="toc-See_also-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" > <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">Web colors</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 58 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-58" 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">58 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D8%A3%D9%84%D9%88%D8%A7%D9%86_%D8%A7%D9%84%D9%88%D9%8A%D8%A8" title="ألوان الويب – Arabic" lang="ar" hreflang="ar" data-title="ألوان الويب" data-language-autonym="العربية" data-language-local-name="Arabic" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-bn mw-list-item"><a href="https://bn.wikipedia.org/wiki/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC_%E0%A6%B0%E0%A6%82" title="ওয়েব রং – Bangla" lang="bn" hreflang="bn" data-title="ওয়েব রং" data-language-autonym="বাংলা" data-language-local-name="Bangla" class="interlanguage-link-target"><span>বাংলা</span></a></li><li class="interlanguage-link interwiki-zh-min-nan mw-list-item"><a href="https://zh-min-nan.wikipedia.org/wiki/Web_sek-chh%C3%A1i" title="Web sek-chhái – Minnan" lang="nan" hreflang="nan" data-title="Web sek-chhái" data-language-autonym="閩南語 / Bân-lâm-gú" data-language-local-name="Minnan" class="interlanguage-link-target"><span>閩南語 / Bân-lâm-gú</span></a></li><li class="interlanguage-link interwiki-be mw-list-item"><a href="https://be.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BB%D0%B5%D1%80%D1%8B_HTML" title="Колеры HTML – Belarusian" lang="be" hreflang="be" data-title="Колеры HTML" data-language-autonym="Беларуская" data-language-local-name="Belarusian" class="interlanguage-link-target"><span>Беларуская</span></a></li><li class="interlanguage-link interwiki-bs mw-list-item"><a href="https://bs.wikipedia.org/wiki/HTML-boje" title="HTML-boje – Bosnian" lang="bs" hreflang="bs" data-title="HTML-boje" data-language-autonym="Bosanski" data-language-local-name="Bosnian" class="interlanguage-link-target"><span>Bosanski</span></a></li><li class="interlanguage-link interwiki-ca mw-list-item"><a href="https://ca.wikipedia.org/wiki/Colors_HTML" title="Colors HTML – Catalan" lang="ca" hreflang="ca" data-title="Colors HTML" data-language-autonym="Català" data-language-local-name="Catalan" class="interlanguage-link-target"><span>Català</span></a></li><li class="interlanguage-link interwiki-cs mw-list-item"><a href="https://cs.wikipedia.org/wiki/Bezpe%C4%8Dn%C3%A9_barvy" title="Bezpečné barvy – Czech" lang="cs" hreflang="cs" data-title="Bezpečné barvy" data-language-autonym="Čeština" data-language-local-name="Czech" class="interlanguage-link-target"><span>Čeština</span></a></li><li class="interlanguage-link interwiki-da mw-list-item"><a href="https://da.wikipedia.org/wiki/Web-sikre_farver" title="Web-sikre farver – Danish" lang="da" hreflang="da" data-title="Web-sikre farver" data-language-autonym="Dansk" data-language-local-name="Danish" class="interlanguage-link-target"><span>Dansk</span></a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Webfarbe" title="Webfarbe – German" lang="de" hreflang="de" data-title="Webfarbe" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-et mw-list-item"><a href="https://et.wikipedia.org/wiki/Veebiv%C3%A4rvid" title="Veebivärvid – Estonian" lang="et" hreflang="et" data-title="Veebivärvid" data-language-autonym="Eesti" data-language-local-name="Estonian" class="interlanguage-link-target"><span>Eesti</span></a></li><li class="interlanguage-link interwiki-el mw-list-item"><a href="https://el.wikipedia.org/wiki/%CE%94%CE%B9%CE%B1%CE%B4%CE%B9%CE%BA%CF%84%CF%85%CE%B1%CE%BA%CE%AC_%CF%87%CF%81%CF%8E%CE%BC%CE%B1%CF%84%CE%B1" title="Διαδικτυακά χρώματα – Greek" lang="el" hreflang="el" data-title="Διαδικτυακά χρώματα" data-language-autonym="Ελληνικά" data-language-local-name="Greek" class="interlanguage-link-target"><span>Ελληνικά</span></a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikipedia.org/wiki/Colores_web" title="Colores web – Spanish" lang="es" hreflang="es" data-title="Colores web" data-language-autonym="Español" data-language-local-name="Spanish" class="interlanguage-link-target"><span>Español</span></a></li><li class="interlanguage-link interwiki-eo mw-list-item"><a href="https://eo.wikipedia.org/wiki/Koloroj_por_TTT" title="Koloroj por TTT – Esperanto" lang="eo" hreflang="eo" data-title="Koloroj por TTT" data-language-autonym="Esperanto" data-language-local-name="Esperanto" class="interlanguage-link-target"><span>Esperanto</span></a></li><li class="interlanguage-link interwiki-eu mw-list-item"><a href="https://eu.wikipedia.org/wiki/Web_kolore" title="Web kolore – Basque" lang="eu" hreflang="eu" data-title="Web kolore" data-language-autonym="Euskara" data-language-local-name="Basque" class="interlanguage-link-target"><span>Euskara</span></a></li><li class="interlanguage-link interwiki-fa mw-list-item"><a href="https://fa.wikipedia.org/wiki/%D8%B1%D9%86%DA%AF%E2%80%8C%D9%87%D8%A7%DB%8C_%D9%88%D8%A8" title="رنگ‌های وب – Persian" lang="fa" hreflang="fa" data-title="رنگ‌های وب" data-language-autonym="فارسی" data-language-local-name="Persian" class="interlanguage-link-target"><span>فارسی</span></a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/Couleur_du_Web" title="Couleur du Web – French" lang="fr" hreflang="fr" data-title="Couleur du Web" 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-gl mw-list-item"><a href="https://gl.wikipedia.org/wiki/Triplete_hexadecimal" title="Triplete hexadecimal – Galician" lang="gl" hreflang="gl" data-title="Triplete hexadecimal" data-language-autonym="Galego" data-language-local-name="Galician" class="interlanguage-link-target"><span>Galego</span></a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%83%89%EC%83%81" title="웹 색상 – Korean" lang="ko" hreflang="ko" data-title="웹 색상" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-hy mw-list-item"><a href="https://hy.wikipedia.org/wiki/HTML_%D5%A3%D5%B8%D6%82%D5%B5%D5%B6%D5%A5%D6%80" title="HTML գույներ – Armenian" lang="hy" hreflang="hy" data-title="HTML գույներ" data-language-autonym="Հայերեն" data-language-local-name="Armenian" class="interlanguage-link-target"><span>Հայերեն</span></a></li><li class="interlanguage-link interwiki-hi mw-list-item"><a href="https://hi.wikipedia.org/wiki/%E0%A4%B5%E0%A5%87%E0%A4%AC_%E0%A4%B0%E0%A4%82%E0%A4%97" title="वेब रंग – Hindi" lang="hi" hreflang="hi" data-title="वेब रंग" data-language-autonym="हिन्दी" data-language-local-name="Hindi" class="interlanguage-link-target"><span>हिन्दी</span></a></li><li class="interlanguage-link interwiki-hr mw-list-item"><a href="https://hr.wikipedia.org/wiki/Jedinice_boje_u_jeziku_CSS" title="Jedinice boje u jeziku CSS – Croatian" lang="hr" hreflang="hr" data-title="Jedinice boje u jeziku CSS" data-language-autonym="Hrvatski" data-language-local-name="Croatian" class="interlanguage-link-target"><span>Hrvatski</span></a></li><li class="interlanguage-link interwiki-id mw-list-item"><a href="https://id.wikipedia.org/wiki/Warna_web" title="Warna web – Indonesian" lang="id" hreflang="id" data-title="Warna web" 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-it mw-list-item"><a href="https://it.wikipedia.org/wiki/Colori_Web" title="Colori Web – Italian" lang="it" hreflang="it" data-title="Colori Web" data-language-autonym="Italiano" data-language-local-name="Italian" class="interlanguage-link-target"><span>Italiano</span></a></li><li class="interlanguage-link interwiki-jv mw-list-item"><a href="https://jv.wikipedia.org/wiki/Werna_w%C3%A8b" title="Werna wèb – Javanese" lang="jv" hreflang="jv" data-title="Werna wèb" data-language-autonym="Jawa" data-language-local-name="Javanese" class="interlanguage-link-target"><span>Jawa</span></a></li><li class="interlanguage-link interwiki-ka mw-list-item"><a href="https://ka.wikipedia.org/wiki/%E1%83%95%E1%83%94%E1%83%91-%E1%83%A4%E1%83%94%E1%83%A0%E1%83%94%E1%83%91%E1%83%98" title="ვებ-ფერები – Georgian" lang="ka" hreflang="ka" data-title="ვებ-ფერები" data-language-autonym="ქართული" data-language-local-name="Georgian" class="interlanguage-link-target"><span>ქართული</span></a></li><li class="interlanguage-link interwiki-li mw-list-item"><a href="https://li.wikipedia.org/wiki/Lies_vaan_HTML-kleure" title="Lies vaan HTML-kleure – Limburgish" lang="li" hreflang="li" data-title="Lies vaan HTML-kleure" data-language-autonym="Limburgs" data-language-local-name="Limburgish" class="interlanguage-link-target"><span>Limburgs</span></a></li><li class="interlanguage-link interwiki-lfn mw-list-item"><a href="https://lfn.wikipedia.org/wiki/Colores_de_HTML" title="Colores de HTML – Lingua Franca Nova" lang="lfn" hreflang="lfn" data-title="Colores de HTML" data-language-autonym="Lingua Franca Nova" data-language-local-name="Lingua Franca Nova" class="interlanguage-link-target"><span>Lingua Franca Nova</span></a></li><li class="interlanguage-link interwiki-lmo mw-list-item"><a href="https://lmo.wikipedia.org/wiki/Lista_di_color_HTML" title="Lista di color HTML – Lombard" lang="lmo" hreflang="lmo" data-title="Lista di color HTML" data-language-autonym="Lombard" data-language-local-name="Lombard" class="interlanguage-link-target"><span>Lombard</span></a></li><li class="interlanguage-link interwiki-hu mw-list-item"><a href="https://hu.wikipedia.org/wiki/HTML-sz%C3%ADnk%C3%B3dok" title="HTML-színkódok – Hungarian" lang="hu" hreflang="hu" data-title="HTML-színkódok" data-language-autonym="Magyar" data-language-local-name="Hungarian" class="interlanguage-link-target"><span>Magyar</span></a></li><li class="interlanguage-link interwiki-mk mw-list-item"><a href="https://mk.wikipedia.org/wiki/%D0%A1%D0%B5%D0%BC%D1%80%D0%B5%D0%B6%D0%BD%D0%B8_%D0%B1%D0%BE%D0%B8" title="Семрежни бои – Macedonian" lang="mk" hreflang="mk" data-title="Семрежни бои" data-language-autonym="Македонски" data-language-local-name="Macedonian" class="interlanguage-link-target"><span>Македонски</span></a></li><li class="interlanguage-link interwiki-ml mw-list-item"><a href="https://ml.wikipedia.org/wiki/%E0%B4%B5%E0%B5%86%E0%B4%AC%E0%B5%8D_%E0%B4%A8%E0%B4%BF%E0%B4%B1%E0%B4%99%E0%B5%8D%E0%B4%99%E0%B5%BE" title="വെബ് നിറങ്ങൾ – Malayalam" lang="ml" hreflang="ml" data-title="വെബ് നിറങ്ങൾ" data-language-autonym="മലയാളം" data-language-local-name="Malayalam" class="interlanguage-link-target"><span>മലയാളം</span></a></li><li class="interlanguage-link interwiki-mr mw-list-item"><a href="https://mr.wikipedia.org/wiki/%E0%A4%B8%E0%A4%82%E0%A4%95%E0%A5%87%E0%A4%A4%E0%A4%B8%E0%A5%8D%E0%A4%A5%E0%A4%B3_%E0%A4%B0%E0%A4%82%E0%A4%97" title="संकेतस्थळ रंग – Marathi" lang="mr" hreflang="mr" data-title="संकेतस्थळ रंग" data-language-autonym="मराठी" data-language-local-name="Marathi" class="interlanguage-link-target"><span>मराठी</span></a></li><li class="interlanguage-link interwiki-ms mw-list-item"><a href="https://ms.wikipedia.org/wiki/Warna_sesawang" title="Warna sesawang – Malay" lang="ms" hreflang="ms" data-title="Warna sesawang" data-language-autonym="Bahasa Melayu" data-language-local-name="Malay" class="interlanguage-link-target"><span>Bahasa Melayu</span></a></li><li class="interlanguage-link interwiki-nl mw-list-item"><a href="https://nl.wikipedia.org/wiki/Lijst_van_HTML-kleuren" title="Lijst van HTML-kleuren – Dutch" lang="nl" hreflang="nl" data-title="Lijst van HTML-kleuren" data-language-autonym="Nederlands" data-language-local-name="Dutch" class="interlanguage-link-target"><span>Nederlands</span></a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%AB%E3%83%A9%E3%83%BC" title="ウェブカラー – Japanese" lang="ja" hreflang="ja" data-title="ウェブカラー" data-language-autonym="日本語" data-language-local-name="Japanese" class="interlanguage-link-target"><span>日本語</span></a></li><li class="interlanguage-link interwiki-ce mw-list-item"><a href="https://ce.wikipedia.org/wiki/%D0%91%D0%B5%D1%81%D0%BD%D0%B0%D1%88_HTML" title="Беснаш HTML – Chechen" lang="ce" hreflang="ce" data-title="Беснаш HTML" data-language-autonym="Нохчийн" data-language-local-name="Chechen" class="interlanguage-link-target"><span>Нохчийн</span></a></li><li class="interlanguage-link interwiki-no mw-list-item"><a href="https://no.wikipedia.org/wiki/Webfarger" title="Webfarger – Norwegian Bokmål" lang="nb" hreflang="nb" data-title="Webfarger" data-language-autonym="Norsk bokmål" data-language-local-name="Norwegian Bokmål" class="interlanguage-link-target"><span>Norsk bokmål</span></a></li><li class="interlanguage-link interwiki-pnb mw-list-item"><a href="https://pnb.wikipedia.org/wiki/%D9%88%DB%8C%D8%A8_%D8%B1%D9%86%DA%AF" title="ویب رنگ – Western Punjabi" lang="pnb" hreflang="pnb" data-title="ویب رنگ" data-language-autonym="پنجابی" data-language-local-name="Western Punjabi" class="interlanguage-link-target"><span>پنجابی</span></a></li><li class="interlanguage-link interwiki-km mw-list-item"><a href="https://km.wikipedia.org/wiki/%E1%9E%96%E1%9E%8E%E1%9F%8C%E1%9E%82%E1%9F%81%E1%9E%A0%E1%9E%91%E1%9F%86%E1%9E%96%E1%9F%90%E1%9E%9A" title="ពណ៌គេហទំព័រ – Khmer" lang="km" hreflang="km" data-title="ពណ៌គេហទំព័រ" data-language-autonym="ភាសាខ្មែរ" data-language-local-name="Khmer" class="interlanguage-link-target"><span>ភាសាខ្មែរ</span></a></li><li class="interlanguage-link interwiki-pcd mw-list-item"><a href="https://pcd.wikipedia.org/wiki/Noms_d%27ch%C3%A9s_couleurs_HTML" title="Noms d'chés couleurs HTML – Picard" lang="pcd" hreflang="pcd" data-title="Noms d'chés couleurs HTML" data-language-autonym="Picard" data-language-local-name="Picard" class="interlanguage-link-target"><span>Picard</span></a></li><li class="interlanguage-link interwiki-pl mw-list-item"><a href="https://pl.wikipedia.org/wiki/Kolory_w_Internecie" title="Kolory w Internecie – Polish" lang="pl" hreflang="pl" data-title="Kolory w Internecie" data-language-autonym="Polski" data-language-local-name="Polish" class="interlanguage-link-target"><span>Polski</span></a></li><li class="interlanguage-link interwiki-pt mw-list-item"><a href="https://pt.wikipedia.org/wiki/Tripleto_hexadecimal" title="Tripleto hexadecimal – Portuguese" lang="pt" hreflang="pt" data-title="Tripleto hexadecimal" data-language-autonym="Português" data-language-local-name="Portuguese" class="interlanguage-link-target"><span>Português</span></a></li><li class="interlanguage-link interwiki-ro mw-list-item"><a href="https://ro.wikipedia.org/wiki/Culori_web" title="Culori web – Romanian" lang="ro" hreflang="ro" data-title="Culori web" data-language-autonym="Română" data-language-local-name="Romanian" class="interlanguage-link-target"><span>Română</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/HTML-%D1%86%D0%B2%D0%B5%D1%82%D0%B0" title="HTML-цвета – Russian" lang="ru" hreflang="ru" data-title="HTML-цвета" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-sq mw-list-item"><a href="https://sq.wikipedia.org/wiki/Html_ngjyrat" title="Html ngjyrat – Albanian" lang="sq" hreflang="sq" data-title="Html ngjyrat" data-language-autonym="Shqip" data-language-local-name="Albanian" class="interlanguage-link-target"><span>Shqip</span></a></li><li class="interlanguage-link interwiki-simple mw-list-item"><a href="https://simple.wikipedia.org/wiki/Web_color" title="Web color – Simple English" lang="en-simple" hreflang="en-simple" data-title="Web color" data-language-autonym="Simple English" data-language-local-name="Simple English" class="interlanguage-link-target"><span>Simple English</span></a></li><li class="interlanguage-link interwiki-sl mw-list-item"><a href="https://sl.wikipedia.org/wiki/Spletna_barva" title="Spletna barva – Slovenian" lang="sl" hreflang="sl" data-title="Spletna barva" data-language-autonym="Slovenščina" data-language-local-name="Slovenian" class="interlanguage-link-target"><span>Slovenščina</span></a></li><li class="interlanguage-link interwiki-fi mw-list-item"><a href="https://fi.wikipedia.org/wiki/HTML-v%C3%A4rit" title="HTML-värit – Finnish" lang="fi" hreflang="fi" data-title="HTML-värit" data-language-autonym="Suomi" data-language-local-name="Finnish" class="interlanguage-link-target"><span>Suomi</span></a></li><li class="interlanguage-link interwiki-sv mw-list-item"><a href="https://sv.wikipedia.org/wiki/HTML-f%C3%A4rger" title="HTML-färger – Swedish" lang="sv" hreflang="sv" data-title="HTML-färger" data-language-autonym="Svenska" data-language-local-name="Swedish" class="interlanguage-link-target"><span>Svenska</span></a></li><li class="interlanguage-link interwiki-tl mw-list-item"><a href="https://tl.wikipedia.org/wiki/Web_kulay" title="Web kulay – Tagalog" lang="tl" hreflang="tl" data-title="Web kulay" data-language-autonym="Tagalog" data-language-local-name="Tagalog" class="interlanguage-link-target"><span>Tagalog</span></a></li><li class="interlanguage-link interwiki-th mw-list-item"><a href="https://th.wikipedia.org/wiki/%E0%B8%AA%E0%B8%B5%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A" title="สีที่ใช้ในเว็บ – Thai" lang="th" hreflang="th" data-title="สีที่ใช้ในเว็บ" data-language-autonym="ไทย" data-language-local-name="Thai" class="interlanguage-link-target"><span>ไทย</span></a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikipedia.org/wiki/Web_renkleri" title="Web renkleri – Turkish" lang="tr" hreflang="tr" data-title="Web renkleri" data-language-autonym="Türkçe" data-language-local-name="Turkish" class="interlanguage-link-target"><span>Türkçe</span></a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BB%D1%8C%D0%BE%D1%80%D0%B8_HTML" title="Кольори HTML – Ukrainian" lang="uk" hreflang="uk" data-title="Кольори HTML" data-language-autonym="Українська" data-language-local-name="Ukrainian" class="interlanguage-link-target"><span>Українська</span></a></li><li class="interlanguage-link interwiki-ur mw-list-item"><a href="https://ur.wikipedia.org/wiki/%D9%88%DB%8C%D8%A8_%D8%B1%D9%86%DA%AF" title="ویب رنگ – Urdu" lang="ur" hreflang="ur" data-title="ویب رنگ" data-language-autonym="اردو" data-language-local-name="Urdu" class="interlanguage-link-target"><span>اردو</span></a></li><li class="interlanguage-link interwiki-wuu mw-list-item"><a href="https://wuu.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2" title="网页颜色 – Wu" lang="wuu" hreflang="wuu" data-title="网页颜色" data-language-autonym="吴语" data-language-local-name="Wu" class="interlanguage-link-target"><span>吴语</span></a></li><li class="interlanguage-link interwiki-zh-yue mw-list-item"><a href="https://zh-yue.wikipedia.org/wiki/%E7%B6%B2%E9%A0%81%E6%A8%99%E6%BA%96%E8%89%B2" title="網頁標準色 – Cantonese" lang="yue" hreflang="yue" data-title="網頁標準色" data-language-autonym="粵語" data-language-local-name="Cantonese" class="interlanguage-link-target"><span>粵語</span></a></li><li class="interlanguage-link interwiki-diq mw-list-item"><a href="https://diq.wikipedia.org/wiki/Kod%C3%AA_rengan" title="Kodê rengan – Zazaki" lang="diq" hreflang="diq" data-title="Kodê rengan" data-language-autonym="Zazaki" data-language-local-name="Zazaki" class="interlanguage-link-target"><span>Zazaki</span></a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2" title="网页颜色 – Chinese" lang="zh" hreflang="zh" data-title="网页颜色" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target"><span>中文</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/Q376346#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/Web_colors" 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:Web_colors" 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/Web_colors"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Web_colors&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=Web_colors&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/Web_colors"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Web_colors&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=Web_colors&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/Web_colors" 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/Web_colors" 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="/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=Web_colors&oldid=1251966685" 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=Web_colors&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=Web_colors&id=1251966685&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%2FWeb_colors%23Hex_triplet"><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%2FWeb_colors%23Hex_triplet"><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=Web_colors&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=Web_colors&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-wikibooks mw-list-item"><a href="https://en.wikibooks.org/wiki/Cascading_Style_Sheets/Color" hreflang="en"><span>Wikibooks</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/Q376346" 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"><span class="mw-redirectedfrom">(Redirected from <a href="/w/index.php?title=Hex_triplet&redirect=no" class="mw-redirect" title="Hex triplet">Hex triplet</a>)</span></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">Color used in designing web pages</div> <p class="mw-empty-elt"> </p> <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:r1246091330">.mw-parser-output .sidebar{width:22em;float:right;clear:right;margin:0.5em 0 1em 1em;background:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);padding:0.2em;text-align:center;line-height:1.4em;font-size:88%;border-collapse:collapse;display:table}body.skin-minerva .mw-parser-output .sidebar{display:table!important;float:right!important;margin:0.5em 0 1em 1em!important}.mw-parser-output .sidebar-subgroup{width:100%;margin:0;border-spacing:0}.mw-parser-output .sidebar-left{float:left;clear:left;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-none{float:none;clear:both;margin:0.5em 1em 1em 0}.mw-parser-output .sidebar-outer-title{padding:0 0.4em 0.2em;font-size:125%;line-height:1.2em;font-weight:bold}.mw-parser-output .sidebar-top-image{padding:0.4em}.mw-parser-output .sidebar-top-caption,.mw-parser-output .sidebar-pretitle-with-top-image,.mw-parser-output .sidebar-caption{padding:0.2em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-pretitle{padding:0.4em 0.4em 0;line-height:1.2em}.mw-parser-output .sidebar-title,.mw-parser-output .sidebar-title-with-pretitle{padding:0.2em 0.8em;font-size:145%;line-height:1.2em}.mw-parser-output .sidebar-title-with-pretitle{padding:0.1em 0.4em}.mw-parser-output .sidebar-image{padding:0.2em 0.4em 0.4em}.mw-parser-output .sidebar-heading{padding:0.1em 0.4em}.mw-parser-output .sidebar-content{padding:0 0.5em 0.4em}.mw-parser-output .sidebar-content-with-subgroup{padding:0.1em 0.4em 0.2em}.mw-parser-output .sidebar-above,.mw-parser-output .sidebar-below{padding:0.3em 0.8em;font-weight:bold}.mw-parser-output .sidebar-collapse .sidebar-above,.mw-parser-output .sidebar-collapse .sidebar-below{border-top:1px solid #aaa;border-bottom:1px solid #aaa}.mw-parser-output .sidebar-navbar{text-align:right;font-size:115%;padding:0 0.4em 0.4em}.mw-parser-output .sidebar-list-title{padding:0 0.4em;text-align:left;font-weight:bold;line-height:1.6em;font-size:105%}.mw-parser-output .sidebar-list-title-c{padding:0 0.4em;text-align:center;margin:0 3.3em}@media(max-width:640px){body.mediawiki .mw-parser-output .sidebar{width:100%!important;clear:both;float:none!important;margin-left:0!important;margin-right:0!important}}body.skin--responsive .mw-parser-output .sidebar a>img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-night .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-list-title,html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle{background:transparent!important}html.skin-theme-clientpref-os .mw-parser-output .sidebar:not(.notheme) .sidebar-title-with-pretitle a{color:var(--color-progressive)!important}}@media print{body.ns-0 .mw-parser-output .sidebar{display:none!important}}</style><table class="sidebar nomobile nowraplinks"><tbody><tr><th class="sidebar-title"><a href="/wiki/HTML" title="HTML">HTML</a></th></tr><tr><td class="sidebar-content hlist"> <ul><li><a href="/wiki/Dynamic_HTML" title="Dynamic HTML">Dynamic HTML</a></li> <li><a href="/wiki/HTML5" title="HTML5">HTML5</a> <ul><li><a href="/wiki/Article_element" title="Article element">article</a></li> <li><a href="/wiki/HTML_audio" title="HTML audio">audio</a></li> <li><a href="/wiki/Canvas_element" title="Canvas element">canvas</a></li> <li><a href="/wiki/HTML_video" title="HTML video">video</a></li></ul></li> <li><a href="/wiki/XHTML" title="XHTML">XHTML</a> <ul><li><a href="/wiki/XHTML_Basic" title="XHTML Basic">Basic</a></li> <li><a href="/wiki/XHTML_Mobile_Profile" title="XHTML Mobile Profile">Mobile Profile</a></li></ul></li> <li><a href="/wiki/HTML_element" title="HTML element">HTML element</a> <ul><li><a href="/wiki/Meta_element" title="Meta element">meta</a></li> <li><a href="/wiki/Div_and_span" title="Div and span">div and span</a></li> <li><a href="/wiki/Blink_element" title="Blink element">blink</a></li> <li><a href="/wiki/Marquee_element" title="Marquee element">marquee</a></li></ul></li> <li><a href="/wiki/HTML_attribute" title="HTML attribute">HTML attribute</a> <ul><li><a href="/wiki/Alt_attribute" title="Alt attribute">alt attribute</a></li></ul></li> <li><a href="/wiki/Frame_(World_Wide_Web)" title="Frame (World Wide Web)">HTML frame</a></li> <li><a href="/wiki/HTML_editor" title="HTML editor">HTML editor</a></li> <li><a href="/wiki/Character_encodings_in_HTML" title="Character encodings in HTML">Character encodings</a> <ul><li><a href="/wiki/List_of_XML_and_HTML_character_entity_references" title="List of XML and HTML character entity references">named characters</a></li> <li><a href="/wiki/Unicode_and_HTML" title="Unicode and HTML">Unicode</a></li></ul></li> <li><a href="/wiki/Language_code" title="Language code">Language code</a></li> <li><a href="/wiki/Document_Object_Model" title="Document Object Model">Document Object Model</a></li> <li><a href="/wiki/Browser_Object_Model" title="Browser Object Model">Browser Object Model</a></li> <li><a href="/wiki/Style_sheet_(web_development)" title="Style sheet (web development)">Style sheets</a> <ul><li><a href="/wiki/CSS" title="CSS">CSS</a></li></ul></li> <li><a href="/wiki/Font_family_(HTML)" title="Font family (HTML)">Font family</a></li> <li><a class="mw-selflink selflink">Web colors</a></li> <li><a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> <ul><li><a href="/wiki/WebCL" title="WebCL">WebCL</a></li> <li><a href="/wiki/HTMX" class="mw-redirect" title="HTMX">HTMX</a></li></ul></li> <li><a href="/wiki/Web3D" title="Web3D">Web3D</a> <ul><li><a href="/wiki/WebGL" title="WebGL">WebGL</a></li> <li><a href="/wiki/WebGPU" title="WebGPU">WebGPU</a></li> <li><a href="/wiki/WebXR" title="WebXR">WebXR</a></li></ul></li> <li><a href="/wiki/World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a> <ul><li><a href="/wiki/W3C_Markup_Validation_Service" title="W3C Markup Validation Service">Validator</a></li></ul></li> <li><a href="/wiki/WHATWG" title="WHATWG">WHATWG</a></li> <li><a href="/wiki/Quirks_mode" title="Quirks mode">Quirks mode</a></li> <li><a href="/wiki/Web_storage" title="Web storage">Web storage</a></li> <li><a href="/wiki/Browser_engine" title="Browser engine">Rendering engine</a></li></ul></td> </tr><tr><th class="sidebar-heading"> Comparisons</th></tr><tr><td class="sidebar-content hlist"> <ul><li><a href="/wiki/Comparison_of_document_markup_languages" title="Comparison of document markup languages">Document markup languages</a></li> <li><a href="/wiki/Comparison_of_browser_engines" title="Comparison of browser engines">Comparison of browser engines</a></li></ul></td> </tr><tr><td class="sidebar-navbar" style="border-top:1px solid #aaa;"><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:HTML" title="Template:HTML"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:HTML" title="Template talk:HTML"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:HTML" title="Special:EditPage/Template:HTML"><abbr title="Edit this template">e</abbr></a></li></ul></div></td></tr></tbody></table> <p><b>Web colors</b> are <a href="/wiki/Color" title="Color">colors</a> used in <a href="/wiki/Web_design" title="Web design">displaying web pages</a> on the <a href="/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a>; they can be described by way of three methods: a color may be specified as an <a href="/wiki/RGB_color_model" title="RGB color model">RGB</a> triplet, in <a href="/wiki/Hexadecimal" title="Hexadecimal">hexadecimal</a> format (a <i>hex triplet</i>) or according to its common English name in some cases. A <a href="/wiki/Color_tool" class="mw-redirect" title="Color tool">color tool</a> or other <a href="/wiki/Graphics_software" title="Graphics software">graphics software</a> is often used to generate color values. In some uses, <b>hexadecimal color</b> codes are specified with notation using a leading <a href="/wiki/Number_sign" title="Number sign">number sign</a> (#).<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> A color is specified according to the intensity of its red, green and blue components, each represented by eight <a href="/wiki/Bit" title="Bit">bits</a>. Thus, there are 24 bits used to specify a web color within the <a href="/wiki/SRGB" title="SRGB">sRGB</a> gamut, and 16,777,216 colors that may be so specified. </p><p>Colors outside the sRGB gamut can be specified in <a href="/wiki/CSS" title="CSS">Cascading Style Sheets</a> by making one or more of the red, green and blue components negative or greater than 100%, so the color space is theoretically an unbounded extrapolation of sRGB similar to <a href="/wiki/ScRGB" title="ScRGB">scRGB</a>.<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> Specifying a non-sRGB color this way requires the <code>RGB()</code> function call. It is impossible with the hexadecimal syntax (and thus impossible in legacy <a href="/wiki/HTML" title="HTML">HTML</a> documents that do not use CSS). </p><p>The first versions of <a href="/wiki/Mosaic_(web_browser)" class="mw-redirect" title="Mosaic (web browser)">Mosaic</a> and <a href="/wiki/Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a> used the <a href="/wiki/X11_color_names" title="X11 color names">X11 color names</a> as the basis for their color lists, as both started as <a href="/wiki/X_Window_System" title="X Window System">X Window System</a> applications. Web colors have an unambiguous colorimetric definition, <a href="/wiki/SRGB" title="SRGB">sRGB</a>, which relates the <a href="/wiki/Chromaticity" title="Chromaticity">chromaticities</a> of a particular <a href="/wiki/Phosphor" title="Phosphor">phosphor</a> set, a given transfer curve, adaptive whitepoint, and viewing conditions.<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> These have been chosen to be similar to many real-world <a href="/wiki/Computer_monitor" title="Computer monitor">monitors</a> and viewing conditions, to allow rendering to be fairly close to the specified values even without <a href="/wiki/Color_management" title="Color management">color management</a>. <a href="/wiki/User_agent" title="User agent">User agents</a> vary in the fidelity with which they represent the specified colors. More advanced user agents use color management to provide better color fidelity; this is particularly important for <a href="/wiki/Web-to-print" title="Web-to-print">Web-to-print</a> applications. </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Hex_triplet">Hex triplet</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=1" title="Edit section: Hex triplet"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>A <b>hex triplet</b> is a six-digit (or eight-digit), three-<a href="/wiki/Byte" title="Byte">byte</a> (or four-byte) <a href="/wiki/Hexadecimal" title="Hexadecimal">hexadecimal</a> number used in <a href="/wiki/HTML" title="HTML">HTML</a>, <a href="/wiki/CSS" title="CSS">CSS</a>, <a href="/wiki/SVG" title="SVG">SVG</a>, and other computing applications to represent colors. The bytes represent the red, green, and blue components of the color. The optional fourth byte refers to <a href="/wiki/Alpha_channel" class="mw-redirect" title="Alpha channel">alpha channel</a>. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (0) to the most (255) intensity of each of the color components. Thus web colors specify colors in the <a href="/wiki/24-bit_color" class="mw-redirect" title="24-bit color">24-bit RGB color scheme</a>. The hex triplet is formed by <a href="/wiki/Concatenation" title="Concatenation">concatenating</a> three bytes in hexadecimal notation, in the following order: </p> <ul><li>Byte 1: red value (color type red)</li> <li>Byte 2: green value (color type green)</li> <li>Byte 3: blue value (color type blue)</li> <li>Byte 4 (optional): alpha value</li></ul> <p>For example, consider the color where the red/green/blue values are decimal numbers: red=123, green=58, blue=30 (a hardwood brown color). The decimal numbers 123, 58, and 30 are equivalent to the hexadecimal numbers 7B, 3A, and 1E, respectively. The hex triplet is obtained by concatenating the six hexadecimal digits together, 7B3A1E in this example. </p><p>If any one of the three color values is less than 10 hex (16 decimal), it must be represented with a leading zero so that the triplet always has exactly six digits. For example, the decimal triplet 4, 8, 16 would be represented by the hex digits 04, 08, 10, forming the hex triplet 040810. </p><p>The number of colors that can be represented by this system is 256<sup>3</sup>, 16<sup>6</sup>, or 2<sup>24</sup> = 16,777,216. </p> <div class="mw-heading mw-heading3"><h3 id="Shorthand_hexadecimal_form">Shorthand hexadecimal form</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=2" title="Edit section: Shorthand hexadecimal form"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>An abbreviated, three (hexadecimal)-digit or four-digit form can be used,<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> but can cause errors if software or maintenance scripts are only expecting the long form. Expanding this form to the six-digit form is as simple as repeating each digit: 09C becomes 0099CC as presented on the following <a href="/wiki/Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">CSS</a> example: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">.</span><span class="nc">threedigit</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#09C</span><span class="p">;</span><span class="w"> </span><span class="p">}</span> <span class="p">.</span><span class="nc">sixdigit</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#0099CC</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* same color as above */</span> </pre></div> <p>This shorthand form reduces the palette to 4,096 colors, equivalent of 12-bit color as opposed to 24-bit color using the whole six-digit form (16,777,216 colors). This limitation is sufficient for many text-based documents. </p> <div class="mw-heading mw-heading3"><h3 id="Converting_RGB_to_hexadecimal">Converting RGB to hexadecimal</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=3" title="Edit section: Converting RGB to hexadecimal"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1236090951">.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}</style><div role="note" class="hatnote navigation-not-searchable">See also: <a href="/wiki/Hexadecimal#Conversion" title="Hexadecimal">Hexadecimal § Conversion</a></div> <p>RGB values are usually given in the 0–255 range; if they are in the 0–1 range, the values are multiplied by 255 before conversion. This number divided by sixteen (integer division; ignoring any remainder) gives the first hexadecimal digit (between 0 and F, where the letters A to F represent the numbers 10 to 15. See <a href="/wiki/Hexadecimal" title="Hexadecimal">hexadecimal</a> for more details). The remainder gives the second hexadecimal digit. For instance, the RGB value 58 (as shown in the previous example of hex triplets) divides into 3 groups of 16, thus the first digit is 3. A remainder of ten gives the hexadecimal number 3A. Likewise, the RGB value 201 divides into 12 groups of 16, thus the first digit is C. A remainder of nine gives the hexadecimal number C9. This process is repeated for each of the three color values. </p><p>Conversion between number bases is a common feature of calculators, including both hand-held models and the software calculators bundled with most modern <a href="/wiki/Operating_system" title="Operating system">operating systems</a>. Web-based tools specifically for converting color values are also available. </p> <div class="mw-heading mw-heading2"><h2 id="HTML_color_names">HTML color names</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=4" title="Edit section: HTML color names"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Recent <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a> specifications of color names distinguishes between <i>basic</i> and <i>extended</i> colors.<sup id="cite_ref-w3orgcss3color_6-0" class="reference"><a href="#cite_note-w3orgcss3color-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> In HTML and XHTML, colors can be used for text, background color, frame borders, tables, and individual table cells.<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="Basic_colors">Basic colors</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=5" title="Edit section: Basic colors"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The basic colors are 16 colors defined in the <a href="/wiki/HTML" title="HTML">HTML</a> 4.01 specification, ratified in 1999,<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> as follows (names are defined in this context to be case-insensitive): </p> <div style="position:relative; margin-left:3%; margin-right:3%;"> <table class="wikitable sortable" style="padding:2px;"> <caption>CSS 1–2.0, HTML 3.2–4, and VGA color names </caption> <tbody><tr> <th style="border-left:solid 4em #CCC;border-right:solid 2px #AAA;">Name </th> <th style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;" title="Hexadecimal triplet"><a class="mw-selflink-fragment" href="#Hex_triplet">Hex</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;width:3em;"><a href="/wiki/RGB_color_model" title="RGB color model">Red</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;width:3em;"><a href="/wiki/RGB_color_model" title="RGB color model">Green</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;width:3em;"><a href="/wiki/RGB_color_model" title="RGB color model">Blue</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;width:3em;"><a href="/wiki/HSL_and_HSV#Hue_and_chroma" title="HSL and HSV">Hue</a><br /> <small>(HSL/HSV)</small> </th> <th style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;width:3em;" title="Saturation for HSL"><a href="/wiki/HSL_and_HSV#Saturation" title="HSL and HSV">Satur.</a><br /> <small>(HSL)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;width:3em;" title="Lightness"><a href="/wiki/HSL_and_HSV#Lightness" title="HSL and HSV">Light</a><br /> <small>(HSL)</small> </th> <th style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;width:3em;" title="Saturation for HSV"><a href="/wiki/HSL_and_HSV#Saturation" title="HSL and HSV">Satur.</a><br /> <small>(HSV)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;width:3em;" title="Value or brightness"><a href="/wiki/HSL_and_HSV#Lightness" title="HSL and HSV">Value</a><br /> <small>(HSV)</small></th> <th style="border-left:solid 2px #AAA;" title="CSS, SVG, HTML"><a href="/wiki/List_of_8-bit_computer_hardware_graphics#CGA" title="List of 8-bit computer hardware graphics">CGA number</a> (name); alias </th></tr> <tr> <th style="border-left:solid 4em rgb(255,255,255); text-align:left; font-weight:normal;"><a href="/wiki/White" title="White">White</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#FFFFFF </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−360°"><span data-sort-value="5000000000000000000♠">0</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">100%</td> <td style="border-left:solid 2px #AAA;">15 (white) </td></tr> <tr> <th style="border-left:solid 4em rgb(192,192,192); text-align:left; font-weight:normal;"><a href="/wiki/Silver_(color)" title="Silver (color)">Silver</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#C0C0C0 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="192/255">75% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="192/255">75% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="192/255">75% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−360°"><span data-sort-value="5000000000000000000♠">0</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">75% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">75%</td> <td style="border-left:solid 2px #AAA;">07 (light gray) </td></tr> <tr> <th style="border-left:solid 4em rgb(128,128,128); text-align:left; font-weight:normal;"><a href="/wiki/Gray" class="mw-redirect" title="Gray">Gray</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#808080 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−360°"><span data-sort-value="5000000000000000000♠">0</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">50% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">50%</td> <td style="border-left:solid 2px #AAA;">08 (dark gray) </td></tr> <tr> <th style="border-left:solid 4em rgb(0,0,0); text-align:left; font-weight:normal;"><a href="/wiki/Black" title="Black">Black</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#000000 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−360°"><span data-sort-value="5000000000000000000♠">0</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">0% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">0%</td> <td style="border-left:solid 2px #AAA;">00 (black) </td></tr> <tr> <th style="border-left:solid 4em rgb(255,0,0); text-align:left; font-weight:normal;"><a href="/wiki/Red" title="Red">Red</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#FF0000 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−360°"><span data-sort-value="5000000000000000000♠">0</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">50% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">100%</td> <td style="border-left:solid 2px #AAA;">12 (high red) </td></tr> <tr> <th style="border-left:solid 4em rgb(128,0,0); text-align:left; font-weight:normal;"><a href="/wiki/Maroon" title="Maroon">Maroon</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#800000 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−360°"><span data-sort-value="5000000000000000000♠">0</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">25% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">50%</td> <td style="border-left:solid 2px #AAA;">04 (low red) </td></tr> <tr> <th style="border-left:solid 4em rgb(255,255,0); text-align:left; font-weight:normal;"><a href="/wiki/Yellow" title="Yellow">Yellow</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#FFFF00 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−300°"><span data-sort-value="7001600000000000000♠">60</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">50% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">100%</td> <td style="border-left:solid 2px #AAA;">14 (yellow) </td></tr> <tr> <th style="border-left:solid 4em rgb(128,128,0); text-align:left; font-weight:normal;"><a href="/wiki/Olive_(color)" title="Olive (color)">Olive</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#808000 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−300°"><span data-sort-value="7001600000000000000♠">60</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">25% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">50%</td> <td style="border-left:solid 2px #AAA;">06 (brown) </td></tr> <tr> <th style="border-left:solid 4em rgb(0,255,0); text-align:left; font-weight:normal;"><a href="/wiki/Lime_(color)" title="Lime (color)">Lime</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#00FF00 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−240°"><span data-sort-value="7002120000000000000♠">120</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">50% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">100%</td> <td style="border-left:solid 2px #AAA;">10 (high green); green </td></tr> <tr> <th style="border-left:solid 4em rgb(0,128,0); text-align:left; font-weight:normal;"><a href="/wiki/Green" title="Green">Green</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#008000 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−240°"><span data-sort-value="7002120000000000000♠">120</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">25% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">50%</td> <td style="border-left:solid 2px #AAA;">02 (low green) </td></tr> <tr> <th style="border-left:solid 4em rgb(0,255,255); text-align:left; font-weight:normal;"><a href="/wiki/Aqua_(color)" title="Aqua (color)">Aqua</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#00FFFF </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−180°"><span data-sort-value="7002180000000000000♠">180</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">50% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">100%</td> <td style="border-left:solid 2px #AAA;">11 (high cyan); cyan </td></tr> <tr> <th style="border-left:solid 4em rgb(0,128,128); text-align:left; font-weight:normal;"><a href="/wiki/Teal" title="Teal">Teal</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#008080 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−180°"><span data-sort-value="7002180000000000000♠">180</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">25% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">50%</td> <td style="border-left:solid 2px #AAA;">03 (low cyan) </td></tr> <tr> <th style="border-left:solid 4em rgb(0,0,255); text-align:left; font-weight:normal;"><a href="/wiki/Blue" title="Blue">Blue</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#0000FF </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−120°"><span data-sort-value="7002240000000000000♠">240</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">50% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">100%</td> <td style="border-left:solid 2px #AAA;">09 (high blue) </td></tr> <tr> <th style="border-left:solid 4em rgb(0,0,128); text-align:left; font-weight:normal;"><a href="/wiki/Navy_blue" title="Navy blue">Navy</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#000080 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−120°"><span data-sort-value="7002240000000000000♠">240</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">25% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">50%</td> <td style="border-left:solid 2px #AAA;">01 (low blue) </td></tr> <tr> <th style="border-left:solid 4em rgb(255,0,255); text-align:left; font-weight:normal;"><a href="/wiki/Fuchsia_(color)" title="Fuchsia (color)">Fuchsia</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#FF00FF </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−60°"><span data-sort-value="7002300000000000000♠">300</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">50% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">100%</td> <td style="border-left:solid 2px #AAA;">13 (high magenta); magenta </td></tr> <tr> <th style="border-left:solid 4em rgb(128,0,128); text-align:left; font-weight:normal;"><a href="/wiki/Purple" title="Purple">Purple</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#800080 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="128/255">50% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−60°"><span data-sort-value="7002300000000000000♠">300</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">25% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">50%</td> <td style="border-left:solid 2px #AAA;">05 (low magenta) </td></tr></tbody></table></div> <p>These 16 were labelled as sRGB and included in the HTML 3.0 specification, which noted they were "the standard 16 colors supported with the Windows <a href="/wiki/Video_Graphics_Array" title="Video Graphics Array">VGA</a> palette."<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="Extended_colors">Extended colors<span class="anchor" id="X11_color_names"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=6" title="Edit section: Extended colors"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:SVG_Recognized_color_keyword_names.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/2/2b/SVG_Recognized_color_keyword_names.svg/220px-SVG_Recognized_color_keyword_names.svg.png" decoding="async" width="220" height="190" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/2/2b/SVG_Recognized_color_keyword_names.svg/330px-SVG_Recognized_color_keyword_names.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/2/2b/SVG_Recognized_color_keyword_names.svg/440px-SVG_Recognized_color_keyword_names.svg.png 2x" data-file-width="1160" data-file-height="1000" /></a><figcaption>SVG Version of X11 color names</figcaption></figure> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:SVG1.1_Color_Swatch.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e7/SVG1.1_Color_Swatch.svg/220px-SVG1.1_Color_Swatch.svg.png" decoding="async" width="220" height="124" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e7/SVG1.1_Color_Swatch.svg/330px-SVG1.1_Color_Swatch.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e7/SVG1.1_Color_Swatch.svg/440px-SVG1.1_Color_Swatch.svg.png 2x" data-file-width="512" data-file-height="288" /></a><figcaption>SVG1.1 named colors with sRGB hex/dec and HSL codes, at UHD (4K) resolution</figcaption></figure> <p>Extended colors are the result of merging specifications from HTML 4.01, CSS 2.0, SVG 1.0 and CSS3 User Interfaces (CSS3 UI).<sup id="cite_ref-w3orgcss3color_6-1" class="reference"><a href="#cite_note-w3orgcss3color-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> </p><p>Several colors are defined by <a href="/wiki/Web_browser" title="Web browser">web browsers</a>. A particular browser may not recognize all of these colors, but as of 2005, all modern, general-use, graphical browsers support the full list of colors. Many of these colors are from the list of <a href="/wiki/X11_color_names" title="X11 color names">X11 color names</a> distributed with the <a href="/wiki/X_Window_System" title="X Window System">X Window System</a>. These colors were standardized by <a href="/wiki/SVG" title="SVG">SVG 1.0</a>, and are accepted by <a href="/wiki/SVG" title="SVG">SVG Full</a> user agents. They are not part of <a href="/wiki/SVG" title="SVG">SVG Tiny</a>. </p><p>The list of colors shipped with the X11 product varies between implementations and clashes with certain of the HTML names such as green. X11 colors are defined as simple <a href="/wiki/RGB_color_model" title="RGB color model">RGB</a> (hence, no particular color space), rather than <a href="/wiki/SRGB" title="SRGB">sRGB</a>. This means that the list of colors found in X11 (e.g., in /usr/lib/X11/rgb.txt) should not directly be used to choose colors for the web.<sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup> </p><p>The list of web "X11 colors" from the CSS3 specification, along with their hexadecimal and decimal equivalents, is shown below. Compare the alphabetical lists in the W3C standards. This includes the common synonyms: aqua (HTML4/CSS 1.0 standard name) and <a href="/wiki/Cyan" title="Cyan">cyan</a> (common sRGB name), fuchsia (HTML4/CSS 1.0 standard name) and <a href="/wiki/Magenta" title="Magenta">magenta</a> (common sRGB name), gray (HTML4/CSS 1.0 standard name) and grey.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> </p> <div style="clear:both;" class=""></div> <style data-mw-deduplicate="TemplateStyles:r1153014727">.mw-parser-output .color-chart-x11-table td:nth-child(2){font-family:monospace;text-align:center;white-space:nowrap}.mw-parser-output .color-chart-x11-table td:nth-child(3){text-align:center;white-space:nowrap}.mw-parser-output .color-chart-x11-table td,.mw-parser-output .color-chart-x11-table th{padding:5px;margin:0px;border:solid white 2px}</style> <table style="font-size:85%; display: inline; border-collapse: collapse;" class="color-chart-x11-table mw-no-invert"> <tbody><tr style="vertical-align:top;"> <td> </td></tr> <tr> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit" rowspan="2"><a href="/wiki/HTML" title="HTML">HTML</a> name </th> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit" colspan="2"><a href="/wiki/RGB_color_model" title="RGB color model">R G B</a> </th></tr> <tr> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit"><a href="/wiki/Hexadecimal" title="Hexadecimal">Hex</a> </th> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit">Decimal </th></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Pink colors</b></span> </td></tr> <tr style="background: mediumvioletred; color: white;"> <td>MediumVioletRed</td> <td>C71585</td> <td>199, 21, 133 </td></tr> <tr style="background: deeppink; color: white;"> <td>DeepPink</td> <td>FF1493</td> <td>255, 20, 147 </td></tr> <tr style="background: palevioletred; color: black;"> <td>PaleVioletRed</td> <td>DB7093</td> <td>219, 112, 147 </td></tr> <tr style="background: hotpink; color: black;"> <td>HotPink</td> <td>FF69B4</td> <td>255, 105, 180 </td></tr> <tr style="background: lightpink; color: black;"> <td>LightPink</td> <td>FFB6C1</td> <td>255, 182, 193 </td></tr> <tr style="background: pink; color: black;"> <td>Pink</td> <td>FFC0CB</td> <td>255, 192, 203 </td></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Red colors</b></span> </td></tr> <tr style="background: darkred; color: white;"> <td>DarkRed</td> <td>8B0000</td> <td>139, 0, 0 </td></tr> <tr style="background: red; color: white;"> <td>Red</td> <td>FF0000</td> <td>255, 0, 0 </td></tr> <tr style="background: firebrick; color: white;"> <td>Firebrick</td> <td>B22222</td> <td>178, 34, 34 </td></tr> <tr style="background: crimson; color: white;"> <td>Crimson</td> <td>DC143C</td> <td>220, 20, 60 </td></tr> <tr style="background: indianred; color: white;"> <td>IndianRed</td> <td>CD5C5C</td> <td>205, 92, 92 </td></tr> <tr style="background: lightcoral; color: black;"> <td>LightCoral</td> <td>F08080</td> <td>240, 128, 128 </td></tr> <tr style="background: salmon; color: black;"> <td>Salmon</td> <td>FA8072</td> <td>250, 128, 114 </td></tr> <tr style="background: darksalmon; color: black;"> <td>DarkSalmon</td> <td>E9967A</td> <td>233, 150, 122 </td></tr> <tr style="background: lightsalmon; color: black;"> <td>LightSalmon</td> <td>FFA07A</td> <td>255, 160, 122 </td></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Orange colors</b></span> </td></tr> <tr style="background: orangered; color: white;"> <td>OrangeRed</td> <td>FF4500</td> <td>255, 69, 0 </td></tr> <tr style="background: tomato; color: black;"> <td>Tomato</td> <td>FF6347</td> <td>255, 99, 71 </td></tr> <tr style="background: darkorange; color: black;"> <td>DarkOrange</td> <td>FF8C00</td> <td>255, 140, 0 </td></tr> <tr style="background: coral; color: black;"> <td>Coral</td> <td>FF7F50</td> <td>255, 127, 80 </td></tr> <tr style="background: orange; color: black;"> <td>Orange</td> <td>FFA500</td> <td>255, 165, 0 </td></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Yellow colors</b></span> </td></tr> <tr style="background: darkkhaki; color: black;"> <td>DarkKhaki</td> <td>BDB76B</td> <td>189, 183, 107 </td></tr> <tr style="background: gold; color: black;"> <td>Gold</td> <td>FFD700</td> <td>255, 215, 0 </td></tr> <tr style="background: khaki; color: black;"> <td>Khaki</td> <td>F0E68C</td> <td>240, 230, 140 </td></tr> <tr style="background: peachpuff; color: black;"> <td>PeachPuff</td> <td>FFDAB9</td> <td>255, 218, 185 </td></tr> <tr style="background: yellow; color: black;"> <td>Yellow</td> <td>FFFF00</td> <td>255, 255, 0 </td></tr> <tr style="background: palegoldenrod; color: black;"> <td>PaleGoldenrod</td> <td>EEE8AA</td> <td>238, 232, 170 </td></tr> <tr style="background: moccasin; color: black;"> <td>Moccasin</td> <td>FFE4B5</td> <td>255, 228, 181 </td></tr> <tr style="background: papayawhip; color: black;"> <td>PapayaWhip</td> <td>FFEFD5</td> <td>255, 239, 213 </td></tr> <tr style="background: lightgoldenrodyellow; color: black;"> <td>LightGoldenrodYellow</td> <td>FAFAD2</td> <td>250, 250, 210 </td></tr> <tr style="background: lemonchiffon; color: black;"> <td>LemonChiffon</td> <td>FFFACD</td> <td>255, 250, 205 </td></tr> <tr style="background: lightyellow; color: black;"> <td>LightYellow</td> <td>FFFFE0</td> <td>255, 255, 224 </td></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Brown colors</b></span> </td></tr> <tr style="background: maroon; color: white;"> <td>Maroon</td> <td>800000</td> <td>128, 0, 0 </td></tr> <tr style="background: brown; color: white;"> <td>Brown</td> <td>A52A2A</td> <td>165, 42, 42 </td></tr> <tr style="background: saddlebrown; color: white;"> <td>SaddleBrown</td> <td>8B4513</td> <td>139, 69, 19 </td></tr> <tr style="background: sienna; color: white;"> <td>Sienna</td> <td>A0522D</td> <td>160, 82, 45 </td></tr> <tr style="background: chocolate; color: black;"> <td>Chocolate</td> <td>D2691E</td> <td>210, 105, 30 </td></tr> <tr style="background: darkgoldenrod; color: black;"> <td>DarkGoldenrod</td> <td>B8860B</td> <td>184, 134, 11 </td></tr> <tr style="background: peru; color: black;"> <td>Peru</td> <td>CD853F</td> <td>205, 133, 63 </td></tr> <tr style="background: rosybrown; color: black;"> <td>RosyBrown</td> <td>BC8F8F</td> <td>188, 143, 143 </td></tr> <tr style="background: goldenrod; color: black;"> <td>Goldenrod</td> <td>DAA520</td> <td>218, 165, 32 </td></tr> <tr style="background: sandybrown; color: black;"> <td>SandyBrown</td> <td>F4A460</td> <td>244, 164, 96 </td></tr> <tr style="background: tan; color: black;"> <td>Tan</td> <td>D2B48C</td> <td>210, 180, 140 </td></tr> <tr style="background: burlywood; color: black;"> <td>Burlywood</td> <td>DEB887</td> <td>222, 184, 135 </td></tr> <tr style="background: wheat; color: black;"> <td>Wheat</td> <td>F5DEB3</td> <td>245, 222, 179 </td></tr> <tr style="background: navajowhite; color: black;"> <td>NavajoWhite</td> <td>FFDEAD</td> <td>255, 222, 173 </td></tr> <tr style="background: bisque; color: black;"> <td>Bisque</td> <td>FFE4C4</td> <td>255, 228, 196 </td></tr> <tr style="background: blanchedalmond; color: black;"> <td>BlanchedAlmond</td> <td>FFEBCD</td> <td>255, 235, 205 </td></tr> <tr style="background: cornsilk; color: black;"> <td>Cornsilk</td> <td>FFF8DC</td> <td>255, 248, 220 </td></tr> </tbody></table> <table style="font-size:85%; display: inline; border-collapse: collapse;" class="color-chart-x11-table mw-no-invert"> <tbody><tr style="vertical-align:top;"> <td> </td></tr> <tr> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit" rowspan="2"><a href="/wiki/HTML" title="HTML">HTML</a> name </th> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit" colspan="2"><a href="/wiki/RGB_color_model" title="RGB color model">R G B</a> </th></tr> <tr> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit"><a href="/wiki/Hexadecimal" title="Hexadecimal">Hex</a> </th> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit">Decimal </th></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Purple, violet, and magenta colors</b></span> </td></tr> <tr style="background: indigo; color: white;"> <td>Indigo</td> <td>4B0082</td> <td>75, 0, 130 </td></tr> <tr style="background: purple; color: white;"> <td>Purple</td> <td>800080</td> <td>128, 0, 128 </td></tr> <tr style="background: darkmagenta; color: white;"> <td>DarkMagenta</td> <td>8B008B</td> <td>139, 0, 139 </td></tr> <tr style="background: darkviolet; color: white;"> <td>DarkViolet</td> <td>9400D3</td> <td>148, 0, 211 </td></tr> <tr style="background: darkslateblue; color: white;"> <td>DarkSlateBlue</td> <td>483D8B</td> <td>72, 61, 139 </td></tr> <tr style="background: blueviolet; color: white;"> <td>BlueViolet</td> <td>8A2BE2</td> <td>138, 43, 226 </td></tr> <tr style="background: darkorchid; color: white;"> <td>DarkOrchid</td> <td>9932CC</td> <td>153, 50, 204 </td></tr> <tr style="background: fuchsia; color: white;"> <td>Fuchsia</td> <td>FF00FF</td> <td>255, 0, 255 </td></tr> <tr style="background: magenta; color: white;"> <td>Magenta</td> <td>FF00FF</td> <td>255, 0, 255 </td></tr> <tr style="background: slateblue; color: white;"> <td>SlateBlue</td> <td>6A5ACD</td> <td>106, 90, 205 </td></tr> <tr style="background: mediumslateblue; color: white;"> <td>MediumSlateBlue</td> <td>7B68EE</td> <td>123, 104, 238 </td></tr> <tr style="background: mediumorchid; color: black;"> <td>MediumOrchid</td> <td>BA55D3</td> <td>186, 85, 211 </td></tr> <tr style="background: mediumpurple; color: black;"> <td>MediumPurple</td> <td>9370DB</td> <td>147, 112, 219 </td></tr> <tr style="background: orchid; color: black;"> <td>Orchid</td> <td>DA70D6</td> <td>218, 112, 214 </td></tr> <tr style="background: violet; color: black;"> <td>Violet</td> <td>EE82EE</td> <td>238, 130, 238 </td></tr> <tr style="background: plum; color: black;"> <td>Plum</td> <td>DDA0DD</td> <td>221, 160, 221 </td></tr> <tr style="background: thistle; color: black;"> <td>Thistle</td> <td>D8BFD8</td> <td>216, 191, 216 </td></tr> <tr style="background: lavender; color: black;"> <td>Lavender</td> <td>E6E6FA</td> <td>230, 230, 250 </td></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Blue colors</b></span> </td></tr> <tr style="background: midnightblue; color: white;"> <td>MidnightBlue</td> <td>191970</td> <td>25, 25, 112 </td></tr> <tr style="background: navy; color: white;"> <td>Navy</td> <td>000080</td> <td>0, 0, 128 </td></tr> <tr style="background: darkblue; color: white;"> <td>DarkBlue</td> <td>00008B</td> <td>0, 0, 139 </td></tr> <tr style="background: mediumblue; color: white;"> <td>MediumBlue</td> <td>0000CD</td> <td>0, 0, 205 </td></tr> <tr style="background: blue; color: white;"> <td>Blue</td> <td>0000FF</td> <td>0, 0, 255 </td></tr> <tr style="background: royalblue; color: white;"> <td>RoyalBlue</td> <td>4169E1</td> <td>65, 105, 225 </td></tr> <tr style="background: steelblue; color: white;"> <td>SteelBlue</td> <td>4682B4</td> <td>70, 130, 180 </td></tr> <tr style="background: dodgerblue; color: white;"> <td>DodgerBlue</td> <td>1E90FF</td> <td>30, 144, 255 </td></tr> <tr style="background: deepskyblue; color: black;"> <td>DeepSkyBlue</td> <td>00BFFF</td> <td>0, 191, 255 </td></tr> <tr style="background: cornflowerblue; color: black;"> <td>CornflowerBlue</td> <td>6495ED</td> <td>100, 149, 237 </td></tr> <tr style="background: skyblue; color: black;"> <td>SkyBlue</td> <td>87CEEB</td> <td>135, 206, 235 </td></tr> <tr style="background: lightskyblue; color: black;"> <td>LightSkyBlue</td> <td>87CEFA</td> <td>135, 206, 250 </td></tr> <tr style="background: lightsteelblue; color: black;"> <td>LightSteelBlue</td> <td>B0C4DE</td> <td>176, 196, 222 </td></tr> <tr style="background: lightblue; color: black;"> <td>LightBlue</td> <td>ADD8E6</td> <td>173, 216, 230 </td></tr> <tr style="background: powderblue; color: black;"> <td>PowderBlue</td> <td>B0E0E6</td> <td>176, 224, 230 </td></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Cyan colors</b></span> </td></tr> <tr style="background: teal; color: white;"> <td>Teal</td> <td>008080</td> <td>0, 128, 128 </td></tr> <tr style="background: darkcyan; color: white;"> <td>DarkCyan</td> <td>008B8B</td> <td>0, 139, 139 </td></tr> <tr style="background: lightseagreen; color: black;"> <td>LightSeaGreen</td> <td>20B2AA</td> <td>32, 178, 170 </td></tr> <tr style="background: cadetblue; color: black;"> <td>CadetBlue</td> <td>5F9EA0</td> <td>95, 158, 160 </td></tr> <tr style="background: darkturquoise; color: black;"> <td>DarkTurquoise</td> <td>00CED1</td> <td>0, 206, 209 </td></tr> <tr style="background: mediumturquoise; color: black;"> <td>MediumTurquoise</td> <td>48D1CC</td> <td>72, 209, 204 </td></tr> <tr style="background: turquoise; color: black;"> <td>Turquoise</td> <td>40E0D0</td> <td>64, 224, 208 </td></tr> <tr style="background: aqua; color: black;"> <td>Aqua</td> <td>00FFFF</td> <td>0, 255, 255 </td></tr> <tr style="background: cyan; color: black;"> <td>Cyan</td> <td>00FFFF</td> <td>0, 255, 255 </td></tr> <tr style="background: aquamarine; color: black;"> <td>Aquamarine</td> <td>7FFFD4</td> <td>127, 255, 212 </td></tr> <tr style="background: paleturquoise; color: black;"> <td>PaleTurquoise</td> <td>AFEEEE</td> <td>175, 238, 238 </td></tr> <tr style="background: lightcyan; color: black;"> <td>LightCyan</td> <td>E0FFFF</td> <td>224, 255, 255 </td></tr> </tbody></table> <table style="font-size:85%; display: inline; border-collapse: collapse;" class="color-chart-x11-table mw-no-invert"> <tbody><tr style="vertical-align:top;"> <td> </td></tr> <tr> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit" rowspan="2"><a href="/wiki/HTML" title="HTML">HTML</a> name </th> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit" colspan="2"><a href="/wiki/RGB_color_model" title="RGB color model">R G B</a> </th></tr> <tr> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit"><a href="/wiki/Hexadecimal" title="Hexadecimal">Hex</a> </th> <th style="background:var(--background-color-disabled, #c8ccd1); color: inherit">Decimal </th></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Green colors</b></span> </td></tr> <tr style="background: darkgreen; color: white;"> <td>DarkGreen</td> <td>006400</td> <td>0, 100, 0 </td></tr> <tr style="background: green; color: white;"> <td>Green</td> <td>008000</td> <td>0, 128, 0 </td></tr> <tr style="background: darkolivegreen; color: white;"> <td>DarkOliveGreen</td> <td>556B2F</td> <td>85, 107, 47 </td></tr> <tr style="background: forestgreen; color: white;"> <td>ForestGreen</td> <td>228B22</td> <td>34, 139, 34 </td></tr> <tr style="background: seagreen; color: white;"> <td>SeaGreen</td> <td>2E8B57</td> <td>46, 139, 87 </td></tr> <tr style="background: olive; color: white;"> <td>Olive</td> <td>808000</td> <td>128, 128, 0 </td></tr> <tr style="background: olivedrab; color: white;"> <td>OliveDrab</td> <td>6B8E23</td> <td>107, 142, 35 </td></tr> <tr style="background: mediumseagreen; color: black;"> <td>MediumSeaGreen</td> <td>3CB371</td> <td>60, 179, 113 </td></tr> <tr style="background: limegreen; color: black;"> <td>LimeGreen</td> <td>32CD32</td> <td>50, 205, 50 </td></tr> <tr style="background: lime; color: black;"> <td>Lime</td> <td>00FF00</td> <td>0, 255, 0 </td></tr> <tr style="background: springgreen; color: black;"> <td>SpringGreen</td> <td>00FF7F</td> <td>0, 255, 127 </td></tr> <tr style="background: mediumspringgreen; color: black;"> <td>MediumSpringGreen</td> <td>00FA9A</td> <td>0, 250, 154 </td></tr> <tr style="background: darkseagreen; color: black;"> <td>DarkSeaGreen</td> <td>8FBC8F</td> <td>143, 188, 143 </td></tr> <tr style="background: mediumaquamarine; color: black;"> <td>MediumAquamarine</td> <td>66CDAA</td> <td>102, 205, 170 </td></tr> <tr style="background: yellowgreen; color: black;"> <td>YellowGreen</td> <td>9ACD32</td> <td>154, 205, 50 </td></tr> <tr style="background: lawngreen; color: black;"> <td>LawnGreen</td> <td>7CFC00</td> <td>124, 252, 0 </td></tr> <tr style="background: chartreuse; color: black;"> <td>Chartreuse</td> <td>7FFF00</td> <td>127, 255, 0 </td></tr> <tr style="background: lightgreen; color: black;"> <td>LightGreen</td> <td>90EE90</td> <td>144, 238, 144 </td></tr> <tr style="background: greenyellow; color: black;"> <td>GreenYellow</td> <td>ADFF2F</td> <td>173, 255, 47 </td></tr> <tr style="background: palegreen; color: black;"> <td>PaleGreen</td> <td>98FB98</td> <td>152, 251, 152 </td></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>White colors</b></span> </td></tr> <tr style="background: mistyrose; color: black;"> <td>MistyRose</td> <td>FFE4E1</td> <td>255, 228, 225 </td></tr> <tr style="background: antiquewhite; color: black;"> <td>AntiqueWhite</td> <td>FAEBD7</td> <td>250, 235, 215 </td></tr> <tr style="background: linen; color: black;"> <td>Linen</td> <td>FAF0E6</td> <td>250, 240, 230 </td></tr> <tr style="background: beige; color: black;"> <td>Beige</td> <td>F5F5DC</td> <td>245, 245, 220 </td></tr> <tr style="background: whitesmoke; color: black;"> <td>WhiteSmoke</td> <td>F5F5F5</td> <td>245, 245, 245 </td></tr> <tr style="background: lavenderblush; color: black;"> <td>LavenderBlush</td> <td>FFF0F5</td> <td>255, 240, 245 </td></tr> <tr style="background: oldlace; color: black;"> <td>OldLace</td> <td>FDF5E6</td> <td>253, 245, 230 </td></tr> <tr style="background: aliceblue; color: black;"> <td>AliceBlue</td> <td>F0F8FF</td> <td>240, 248, 255 </td></tr> <tr style="background: seashell; color: black;"> <td>Seashell</td> <td>FFF5EE</td> <td>255, 245, 238 </td></tr> <tr style="background: ghostwhite; color: black;"> <td>GhostWhite</td> <td>F8F8FF</td> <td>248, 248, 255 </td></tr> <tr style="background: honeydew; color: black;"> <td>Honeydew</td> <td>F0FFF0</td> <td>240, 255, 240 </td></tr> <tr style="background: floralwhite; color: black;"> <td>FloralWhite</td> <td>FFFAF0</td> <td>255, 250, 240 </td></tr> <tr style="background: azure; color: black;"> <td>Azure</td> <td>F0FFFF</td> <td>240, 255, 255 </td></tr> <tr style="background: mintcream; color: black;"> <td>MintCream</td> <td>F5FFFA</td> <td>245, 255, 250 </td></tr> <tr style="background: snow; color: black;"> <td>Snow</td> <td>FFFAFA</td> <td>255, 250, 250 </td></tr> <tr style="background: ivory; color: black;"> <td>Ivory</td> <td>FFFFF0</td> <td>255, 255, 240 </td></tr> <tr style="background: white; color: black;"> <td>White</td> <td>FFFFFF</td> <td>255, 255, 255 </td></tr> <tr> <td colspan="3" style="background:var(--background-color-interactive, #eaecf0); color:inherit;text-align:left;"><span style="font-size:120%"><b>Gray and black colors</b></span> </td></tr> <tr style="background: black; color: white;"> <td>Black</td> <td>000000</td> <td>0, 0, 0 </td></tr> <tr style="background: darkslategray; color: white;"> <td>DarkSlateGray</td> <td>2F4F4F</td> <td>47, 79, 79 </td></tr> <tr style="background: dimgray; color: white;"> <td>DimGray</td> <td>696969</td> <td>105, 105, 105 </td></tr> <tr style="background: slategray; color: white;"> <td>SlateGray</td> <td>708090</td> <td>112, 128, 144 </td></tr> <tr style="background: gray; color: black;"> <td>Gray</td> <td>808080</td> <td>128, 128, 128 </td></tr> <tr style="background: lightslategray; color: black;"> <td>LightSlateGray</td> <td>778899</td> <td>119, 136, 153 </td></tr> <tr style="background: darkgray; color: black;"> <td>DarkGray</td> <td>A9A9A9</td> <td>169, 169, 169 </td></tr> <tr style="background: silver; color: black;"> <td>Silver</td> <td>C0C0C0</td> <td>192, 192, 192 </td></tr> <tr style="background: lightgray; color: black;"> <td>LightGray</td> <td>D3D3D3</td> <td>211, 211, 211 </td></tr> <tr style="background: gainsboro; color: black;"> <td>Gainsboro</td> <td>DCDCDC</td> <td>220, 220, 220 </td></tr> </tbody></table> <div class="mw-heading mw-heading2"><h2 id="CSS_colors">CSS colors</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=7" title="Edit section: CSS colors"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The <a href="/wiki/Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a> specification defines the same number of named colors as the HTML 4 spec, namely the 16 <a href="#HTML_color_names">HTML colors</a>, and 124 colors from the Netscape <a href="#X11_color_names">X11 color list</a> for a total of 140 names that were recognized by Internet Explorer (IE) 3.0 and Netscape Navigator 3.0.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup> Blooberry.com notes that Opera 2.1 and Safari 1 also included Netscape's expanded list of 140 color names, but later discovered 14 names not included with Opera 3.5 on Windows 98.<sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup> </p><p>In CSS 2.1, the color 'orange' (one of the 140) was added to the section with the 16 HTML4 colors as a 17th color.<sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup> The CSS3.0 specification did not include <i>orange</i> in the "HTML4 color keywords" section, which was renamed as "Basic color keywords".<sup id="cite_ref-16" class="reference"><a href="#cite_note-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup> In the same reference, the "SVG color keywords" section, was renamed "Extended color keywords", after starting out as "X11 color keywords" in an earlier working draft.<sup id="cite_ref-17" class="reference"><a href="#cite_note-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup> The working draft for the level 4 color module combines the Basic and Extended sections together in a simple "Named Colors" section.<sup id="cite_ref-css4_18-0" class="reference"><a href="#cite_note-css4-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> </p> <div style="margin-left:3%; margin-right:3%;"> <table class="wikitable sortable" style="padding:2px;"> <caption>Color added in CSS 2.1 </caption> <tbody><tr> <th style="border-left:solid 4em #CCC;border-right:solid 2px #AAA;">Name </th> <th style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;" title="Hexadecimal triplet"><a class="mw-selflink-fragment" href="#Hex_triplet">Hex</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;width:3em;"><a href="/wiki/RGB_color_model" title="RGB color model">Red</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;width:3em;"><a href="/wiki/RGB_color_model" title="RGB color model">Green</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;width:3em;"><a href="/wiki/RGB_color_model" title="RGB color model">Blue</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;width:3em;"><a href="/wiki/HSL_and_HSV#Hue_and_chroma" title="HSL and HSV">Hue</a><br /> <small>(HSL/HSV)</small> </th> <th style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;width:3em;" title="Saturation for HSL"><a href="/wiki/HSL_and_HSV#Saturation" title="HSL and HSV">Satur.</a><br /> <small>(HSL)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;width:3em;" title="Lightness"><a href="/wiki/HSL_and_HSV#Lightness" title="HSL and HSV">Light</a><br /> <small>(HSL)</small> </th> <th style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;width:3em;" title="Saturation for HSV"><a href="/wiki/HSL_and_HSV#Saturation" title="HSL and HSV">Satur.</a><br /> <small>(HSV)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;width:3em;" title="Value or brightness"><a href="/wiki/HSL_and_HSV#Lightness" title="HSL and HSV">Value</a><br /> <small>(HSV)</small></th> <th style="border-left:solid 2px #AAA;" title="CSS, SVG, HTML">Alias </th></tr> <tr> <th style="border-left:solid 4em rgb(255,165,0); text-align:left; font-weight:normal;"><a href="/wiki/Orange_(colour)" title="Orange (colour)">Orange</a> </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#FFA500 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="255/255">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="165/255">65% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="0/255">0% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−321°"><span data-sort-value="7001390000000000000♠">39</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">50% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">100% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">100% </td></tr></tbody></table></div> <p>CSS 2, <a href="/wiki/Scalable_Vector_Graphics" class="mw-redirect" title="Scalable Vector Graphics">SVG</a> and CSS 2.1 allow web authors to use <i>system colors</i>, which are color names whose values are taken from the <a href="/wiki/Operating_system" title="Operating system">operating system</a>, picking the operating system's highlighted text color, or the background color for tooltip controls. This enables web authors to style their content in line with the operating system of the user agent.<sup id="cite_ref-19" class="reference"><a href="#cite_note-19"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup> The <a href="/wiki/CSS3" class="mw-redirect" title="CSS3">CSS3</a> color module has <a href="/wiki/Deprecated" class="mw-redirect" title="Deprecated">deprecated</a> the use of system colors in favor of CSS3 UI System Appearance property,<sup id="cite_ref-20" class="reference"><a href="#cite_note-20"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-21" class="reference"><a href="#cite_note-21"><span class="cite-bracket">[</span>21<span class="cite-bracket">]</span></a></sup> which itself was subsequently dropped from CSS3.<sup id="cite_ref-22" class="reference"><a href="#cite_note-22"><span class="cite-bracket">[</span>22<span class="cite-bracket">]</span></a></sup> </p> <table class="wikitable" style="width: 250px; max-width: 100%;"> <caption>Example system color keywords </caption> <tbody><tr> <th style="width: 20px">Appearance</th> <th>Keyword </th></tr> <tr> <td style="background:linkText"></td> <td style="font-family: monospace;">linkText </td></tr> <tr> <td style="background:visitedText"></td> <td style="font-family: monospace;">visitedText </td></tr> <tr> <td style="background:activeText"></td> <td style="font-family: monospace;">activeText </td></tr> <tr> <td style="background:highlight"></td> <td style="font-family: monospace;">highlight </td></tr> <tr> <td style="background:mark"></td> <td style="font-family: monospace;">mark </td></tr></tbody></table> <p>The CSS3 specification also introduces <a href="/wiki/HSL_color_space" class="mw-redirect" title="HSL color space">HSL color space</a> values to style sheets:<sup id="cite_ref-C3_23-0" class="reference"><a href="#cite_note-C3-23"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/* RGB model */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#F00</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* #rgb */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#FF0000</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* #rrggbb */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgb</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* integer range 0 - 255 */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgb</span><span class="p">(</span><span class="mi">100</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="kt">%</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* float range 0.0% - 100.0% */</span> <span class="c">/* RGB with alpha channel, added to CSS3 */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">rgba</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* 0.5 opacity, semi-transparent */</span> <span class="c">/* HSL model, added to CSS3 */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsl</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* red */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsl</span><span class="p">(</span><span class="mi">120</span><span class="p">,</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* green */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsl</span><span class="p">(</span><span class="mi">120</span><span class="p">,</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">25</span><span class="kt">%</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* dark green */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsl</span><span class="p">(</span><span class="mi">120</span><span class="p">,</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">75</span><span class="kt">%</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* light green */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsl</span><span class="p">(</span><span class="mi">120</span><span class="p">,</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* pastel green */</span> <span class="c">/* HSL model with alpha channel */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsla</span><span class="p">(</span><span class="mi">120</span><span class="p">,</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">1</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* green */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsla</span><span class="p">(</span><span class="mi">120</span><span class="p">,</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mf">0.5</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* semi-transparent green */</span> <span class="nt">p</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="nb">hsla</span><span class="p">(</span><span class="mi">120</span><span class="p">,</span><span class="w"> </span><span class="mi">100</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mi">50</span><span class="kt">%</span><span class="p">,</span><span class="w"> </span><span class="mf">0.1</span><span class="p">)</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="c">/* very transparent green */</span> </pre></div> <p>CSS also supports the special color <code>transparent</code>, which represents an alpha value of zero; by default, <code>transparent</code> is rendered as an invisible nominal black: <code>rgba(0, 0, 0, 0)</code>. It was introduced in CSS1 but its scope of use has expanded over the versions.<sup id="cite_ref-C3_23-1" class="reference"><a href="#cite_note-C3-23"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="CSS_Color_4">CSS Color 4</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=8" title="Edit section: CSS Color 4"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Level 4 of the CSS Color specification introduced several new CSS color formats.<sup id="cite_ref-CSSC4_24-0" class="reference"><a href="#cite_note-CSSC4-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> </p><p>Besides new ways to write colors, it also introduces the concept of mixing colors in a non-sRGB color space, a first step towards fixing <a href="/wiki/Color_gradient#Effect_of_color_space" title="Color gradient">a well-known issue in color gradients</a>. Some sections explaining color theory and common operations like <a href="/wiki/Gamut_mapping" class="mw-redirect" title="Gamut mapping">gamut mapping</a> are also added to aid implementation.<sup id="cite_ref-CSSC4_24-1" class="reference"><a href="#cite_note-CSSC4-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="Device_independent_color">Device independent color</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=9" title="Edit section: Device independent color"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>CSS Color 4 introduces several different formats for <a href="/wiki/Color_management" title="Color management">device independent color</a> that can display the entirety of visible color (in a capable screen), including:<sup id="cite_ref-autogenerated1_25-0" class="reference"><a href="#cite_note-autogenerated1-25"><span class="cite-bracket">[</span>25<span class="cite-bracket">]</span></a></sup> </p> <ul><li><a href="/wiki/CIELAB_color_space" title="CIELAB color space">Lab and LCH</a></li> <li><a href="/wiki/OKLab" class="mw-redirect" title="OKLab">OKLab and OKLCH</a> (preferred over Lab/LCH)<sup id="cite_ref-CSSC4_24-2" class="reference"><a href="#cite_note-CSSC4-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup><sup class="reference nowrap"><span title="Location: §§9.2–3">: §§9.2–3 </span></sup></li> <li><a href="/wiki/CIE_1931_color_space" title="CIE 1931 color space">XYZ</a> (D50 or D65 [default])</li></ul> <div class="mw-heading mw-heading4"><h4 id="Predefined_color_spaces">Predefined color spaces</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=10" title="Edit section: Predefined color spaces"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>A number of <a href="/wiki/RGB_color_model" title="RGB color model">RGB</a> spaces with <a href="/wiki/Gamut" title="Gamut">gamuts</a> that are wider than <a href="/wiki/SRGB" title="SRGB">sRGB</a> are also introduced through the new <code>color()</code> function:<sup id="cite_ref-autogenerated1_25-1" class="reference"><a href="#cite_note-autogenerated1-25"><span class="cite-bracket">[</span>25<span class="cite-bracket">]</span></a></sup> </p> <ul><li><a href="/wiki/DCI-P3" title="DCI-P3">Display P3</a></li> <li><a href="/wiki/ProPhoto_RGB_color_space" title="ProPhoto RGB color space">Prophoto</a></li> <li><a href="/wiki/Rec._2020" title="Rec. 2020">REC.2020</a></li> <li><a href="/wiki/Adobe_RGB_color_space" title="Adobe RGB color space">Adobe 1998 RGB</a></li></ul> <p>A linearized variant of sRGB is also defined for color mixing.<sup id="cite_ref-CSSC4_24-3" class="reference"><a href="#cite_note-CSSC4-24"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="Other_formats">Other formats</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=11" title="Edit section: Other formats"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><span class="anchor" id="rebeccapurple"></span>On 21 June 2014, the <a href="/wiki/CSS_WG" class="mw-redirect" title="CSS WG">CSS WG</a> added the color RebeccaPurple to the Editor's Draft of the Colors module level 4, to commemorate <a href="/wiki/Eric_A._Meyer" title="Eric A. Meyer">Eric Meyer</a>'s daughter Rebecca, who died on 7 June 2014, her sixth birthday.<sup id="cite_ref-26" class="reference"><a href="#cite_note-26"><span class="cite-bracket">[</span>26<span class="cite-bracket">]</span></a></sup> </p> <div style="margin-left:3%; margin-right:3%;"> <table class="wikitable sortable" style="padding:2px;"> <caption>Color added in CSS4 Colors module </caption> <tbody><tr> <th style="border-left:solid 4em #CCC;border-right:solid 2px #AAA;">Name </th> <th style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;" title="Hexadecimal triplet"><a class="mw-selflink-fragment" href="#Hex_triplet">Hex</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;width:3em;"><a href="/wiki/RGB_color_model" title="RGB color model">Red</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;width:3em;"><a href="/wiki/RGB_color_model" title="RGB color model">Green</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;width:3em;"><a href="/wiki/RGB_color_model" title="RGB color model">Blue</a><br /> <small>(RGB)</small> </th> <th style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;width:3em;"><a href="/wiki/HSL_and_HSV#Hue_and_chroma" title="HSL and HSV">Hue</a><br /> <small>(HSL/HSV)</small> </th> <th style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;width:3em;" title="Saturation for HSL"><a href="/wiki/HSL_and_HSV#Saturation" title="HSL and HSV">Satur.</a><br /> <small>(HSL)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;width:3em;" title="Lightness"><a href="/wiki/HSL_and_HSV#Lightness" title="HSL and HSV">Light</a><br /> <small>(HSL)</small> </th> <th style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;width:3em;" title="Saturation for HSV"><a href="/wiki/HSL_and_HSV#Saturation" title="HSL and HSV">Satur.</a><br /> <small>(HSV)</small> </th> <th style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;width:3em;" title="Value or brightness"><a href="/wiki/HSL_and_HSV#Lightness" title="HSL and HSV">Value</a><br /> <small>(HSV)</small></th> <th style="border-left:solid 2px #AAA;" title="CSS, SVG, HTML">Alias </th></tr> <tr> <th style="border-left:solid 4em rgb(102,51,153); text-align:left; font-weight:normal;">RebeccaPurple </th> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;font-family:monospace;">#663399 </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="102/255">40% </td> <td style="border-left:solid 0px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;" title="51/255">20% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;" title="153/255">60% </td> <td style="border-left:solid 2px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;" title="−90°"><span data-sort-value="7002270000000000000♠">270</span>° </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">50% </td> <td style="border-left:solid 0px #AAA;border-right:solid 1px #AAA;text-align:right;padding-right: 21px;">40% </td> <td style="border-left:solid 1px #AAA;border-right:solid 0px #AAA;text-align:right;padding-right: 21px;">67% </td> <td style="border-left:solid 0px #AAA;border-right:solid 2px #AAA;text-align:right;padding-right: 21px;">60% </td></tr></tbody></table></div> <p>CSS4 also introduces the <a href="/wiki/HWB_color_model" title="HWB color model">HWB color model</a> as an alternative to HSL/HSV.<sup id="cite_ref-css4_18-1" class="reference"><a href="#cite_note-css4-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="CSS_Color_5">CSS Color 5</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=12" title="Edit section: CSS Color 5"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The draft CSS Color 5<sup id="cite_ref-CSSC5_27-0" class="reference"><a href="#cite_note-CSSC5-27"><span class="cite-bracket">[</span>27<span class="cite-bracket">]</span></a></sup> specification introduces syntax for mixing and manipulating existing colors, including: </p> <ul><li>A <code>color-mix()</code> function for mixing colors</li> <li>Relative color syntax for manipulating components of an existing color</li></ul> <p>Custom color spaces are also supported via <a href="/wiki/ICC_profile" title="ICC profile">ICC profiles</a>. This allows the use of <a href="/wiki/CMYK" class="mw-redirect" title="CMYK">CMYK</a> on web pages.<sup id="cite_ref-CSSC5_27-1" class="reference"><a href="#cite_note-CSSC5-27"><span class="cite-bracket">[</span>27<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="Web-safe_colors">Web-safe colors</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=13" title="Edit section: Web-safe colors"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1126788409">.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}</style><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1246091330"><table class="sidebar nomobile nowraplinks" style="width:auto"><tbody><tr><th class="sidebar-title" style="background:#ccf"><a href="/wiki/Color_depth" title="Color depth">Color depth</a></th></tr><tr><td class="sidebar-content plainlist"> <ul><li><a href="/wiki/Binary_image" title="Binary image">1-bit monochrome</a></li> <li><a href="/wiki/Grayscale" title="Grayscale">8-bit grayscale</a></li> <li><a href="/wiki/8-bit_color" title="8-bit color">8-bit color</a></li> <li><a href="/wiki/High_color" title="High color">15- or 16-bit color (high color)</a></li> <li><a href="/wiki/Color_depth#True_color_(24-bit)" title="Color depth">24-bit color (true color)</a></li> <li><a href="/wiki/Color_depth#Deep_color_(30-bit)" title="Color depth">30-, 36-, or 48-bit color (deep color)</a></li></ul></td> </tr><tr><th class="sidebar-heading" style="background:#ccf"> Related</th></tr><tr><td class="sidebar-content plainlist"> <ul><li><a href="/wiki/Indexed_color" title="Indexed color">Indexed color</a></li> <li><a href="/wiki/Palette_(computing)" title="Palette (computing)">Palette</a></li> <li><a href="/wiki/RGB_color_model" title="RGB color model">RGB color model</a></li> <li><a class="mw-selflink-fragment" href="#Web-safe_colors">Web-safe color</a></li></ul></td> </tr><tr><td class="sidebar-navbar"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239400231"><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Color_depth" title="Template:Color depth"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Color_depth" title="Template talk:Color depth"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Color_depth" title="Special:EditPage/Template:Color depth"><abbr title="Edit this template">e</abbr></a></li></ul></div></td></tr></tbody></table> <p>In the mid-1990s, many displays were only capable of displaying 256 colors,<sup id="cite_ref-28" class="reference"><a href="#cite_note-28"><span class="cite-bracket">[</span>28<span class="cite-bracket">]</span></a></sup> dictated by the hardware or changeable by a "color table". When a color was found (e.g., in an image) that was not available, a different one had to be used. This was done by either using the closest color or by using <a href="/wiki/Dither" title="Dither">dithering</a>. </p><p>There were various attempts to make a "standard" color palette. A set of colors was needed that could be shown without dithering on 256-color displays; the number 216 was chosen partly because computer operating systems customarily reserved sixteen to twenty colors for their own use; it was also selected because it allowed exactly six equally spaced shades of red, green, and blue (6 × 6 × 6 = 216), each from 00 to FF (including both limits). </p><p>The list of colors was presented as if it had special properties that render it immune to dithering, but on 256-color displays applications could actually set a palette of any selection of colors that they chose, dithering the rest. These colors were chosen specifically because they matched the palettes selected by various browser applications. There were not very different palettes in use in different browsers.<sup class="noprint Inline-Template Template-Fact" style="white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Citation_needed" title="Wikipedia:Citation needed"><span title="Another editor left a comment stating, "not really, it was pretty much a disaster" - Why? Please clarify (May 2011)">citation needed</span></a></i>]</sup> </p><p>"Web-safe" colors had a flaw in that, on systems such as <a href="/wiki/X_Window_System" title="X Window System">X11</a> where the palette is shared between applications, smaller color cubes (5×5×5 or 4×4×4) were allocated by browsers—the "web-safe" colors would dither on such systems. Different results were obtained by providing an image with a larger range of colors and allowing the browser to <a href="/wiki/Color_quantization" title="Color quantization">quantize</a> the color space if needed, rather than suffer the quality loss of a double quantization. </p><p>Through the 2000s, use of 256-color displays in personal computers dropped sharply in favour of 24-bit (<a href="/wiki/24-bit_color" class="mw-redirect" title="24-bit color">TrueColor</a>) displays,<sup id="cite_ref-29" class="reference"><a href="#cite_note-29"><span class="cite-bracket">[</span>29<span class="cite-bracket">]</span></a></sup> and the use of "web-safe" colors has fallen into practical disuse. </p><p>The "web-safe" colors do not all have standard names, but each can be specified by an <a href="/wiki/RGB" class="mw-redirect" title="RGB">RGB</a> triplet: each component (red, green, and blue) takes one of the six values from the following table (out of the 256 possible values available for each component in full 24-bit color). </p> <table class="wikitable" style="text-align: center;"> <caption>6 shades of each color </caption> <tbody><tr> <th scope="col">Key </th> <th scope="col">Hex </th> <th scope="col">Decimal </th> <th scope="col">Fraction </th></tr> <tr> <td>0 </td> <td>00 </td> <td>0 </td> <td style="text-align: left;">0 </td></tr> <tr> <td>3 </td> <td>33 </td> <td>51 </td> <td style="text-align: left;">0.2 </td></tr> <tr> <td>6 </td> <td>66 </td> <td>102 </td> <td style="text-align: left;">0.4 </td></tr> <tr> <td>9 </td> <td>99 </td> <td>153 </td> <td style="text-align: left;">0.6 </td></tr> <tr> <td>C (12) </td> <td>CC </td> <td>204 </td> <td style="text-align: left;">0.8 </td></tr> <tr> <td>F (15) </td> <td>FF </td> <td>255 </td> <td style="text-align: left;">1 </td></tr></tbody></table> <p>The following table shows all of the "web-safe" colors. One shortcoming of the web-safe palette is its small range of light colors for webpage backgrounds, whereas the intensities at the low end of the range, such as the two darkest, are similar to each other, making them hard to distinguish. Values flanked by "*" (asterisk) are part of the "really safe palette;" see <a href="#Safest_web_colors">Safest web colors</a>, below. </p> <div class="mw-heading mw-heading3"><h3 id="Color_table">Color table</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=14" title="Edit section: Color table"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <table class="wikitable" style="width:80%; text-align:center; margin:0 auto;"> <caption>216 "web-safe" colors </caption> <tbody><tr> <td style="width:16%; background: #000;color:white;" class="mw-no-invert">*000* </td> <td style="width:16%; background: #300;color:white;" class="mw-no-invert">300 </td> <td style="width:16%; background: #600;color:white;" class="mw-no-invert">600 </td> <td style="width:16%; background: #900;color:white;" class="mw-no-invert">900 </td> <td style="width:16%; background: #C00;color:white;" class="mw-no-invert">C00 </td> <td style="width:16%; background: #F00;color:black;" class="mw-no-invert">*F00* </td></tr> <tr> <td style="background: #003;color:white;" class="mw-no-invert">*003* </td> <td style="background: #303;color:white;" class="mw-no-invert">303 </td> <td style="background: #603;color:white;" class="mw-no-invert">603 </td> <td style="background: #903;color:white;" class="mw-no-invert">903 </td> <td style="background: #C03;color:white;" class="mw-no-invert">C03 </td> <td style="background: #F03;color:black;" class="mw-no-invert">*F03* </td></tr> <tr> <td style="background: #006;color:white;" class="mw-no-invert">006 </td> <td style="background: #306;color:white;" class="mw-no-invert">306 </td> <td style="background: #606;color:white;" class="mw-no-invert">606 </td> <td style="background: #906;color:white;" class="mw-no-invert">906 </td> <td style="background: #C06;color:white;" class="mw-no-invert">C06 </td> <td style="background: #F06;color:black;" class="mw-no-invert">F06 </td></tr> <tr> <td style="background: #009;color:white;" class="mw-no-invert">009 </td> <td style="background: #309;color:white;" class="mw-no-invert">309 </td> <td style="background: #609;color:white;" class="mw-no-invert">609 </td> <td style="background: #909;color:white;" class="mw-no-invert">909 </td> <td style="background: #C09;color:white;" class="mw-no-invert">C09 </td> <td style="background: #F09;color:black;" class="mw-no-invert">F09 </td></tr> <tr> <td style="background: #00C;color:white;" class="mw-no-invert">00C </td> <td style="background: #30C;color:white;" class="mw-no-invert">30C </td> <td style="background: #60C;color:white;" class="mw-no-invert">60C </td> <td style="background: #90C;color:white;" class="mw-no-invert">90C </td> <td style="background: #C0C;color:white;" class="mw-no-invert">C0C </td> <td style="background: #F0C;color:black;" class="mw-no-invert">F0C </td></tr> <tr> <td style="background: #00F;color:white;" class="mw-no-invert">*00F* </td> <td style="background: #30F;color:white;" class="mw-no-invert">30F </td> <td style="background: #60F;color:white;" class="mw-no-invert">60F </td> <td style="background: #90F;color:white;" class="mw-no-invert">90F </td> <td style="background: #C0F;color:black;" class="mw-no-invert">C0F </td> <td style="background: #F0F;color:black;" class="mw-no-invert">*F0F* </td></tr> <tr> <td style="background: #030;color:white;" class="mw-no-invert">030 </td> <td style="background: #330;color:white;" class="mw-no-invert">330 </td> <td style="background: #630;color:white;" class="mw-no-invert">630 </td> <td style="background: #930;color:white;" class="mw-no-invert">930 </td> <td style="background: #C30;color:white;" class="mw-no-invert">C30 </td> <td style="background: #F30;color:black;" class="mw-no-invert">F30 </td></tr> <tr> <td style="background: #033;color:white;" class="mw-no-invert">033 </td> <td style="background: #333;color:white;" class="mw-no-invert">333 </td> <td style="background: #633;color:white;" class="mw-no-invert">633 </td> <td style="background: #933;color:white;" class="mw-no-invert">933 </td> <td style="background: #C33;color:white;" class="mw-no-invert">C33 </td> <td style="background: #F33;color:black;" class="mw-no-invert">F33 </td></tr> <tr> <td style="background: #036;color:white;" class="mw-no-invert">036 </td> <td style="background: #336;color:white;" class="mw-no-invert">336 </td> <td style="background: #636;color:white;" class="mw-no-invert">636 </td> <td style="background: #936;color:white;" class="mw-no-invert">936 </td> <td style="background: #C36;color:white;" class="mw-no-invert">C36 </td> <td style="background: #F36;color:black;" class="mw-no-invert">F36 </td></tr> <tr> <td style="background: #039;color:white;" class="mw-no-invert">039 </td> <td style="background: #339;color:white;" class="mw-no-invert">339 </td> <td style="background: #639;color:white;" class="mw-no-invert">639 </td> <td style="background: #939;color:white;" class="mw-no-invert">939 </td> <td style="background: #C39;color:white;" class="mw-no-invert">C39 </td> <td style="background: #F39;color:black;" class="mw-no-invert">F39 </td></tr> <tr> <td style="background: #03C;color:white;" class="mw-no-invert">03C </td> <td style="background: #33C;color:white;" class="mw-no-invert">33C </td> <td style="background: #63C;color:white;" class="mw-no-invert">63C </td> <td style="background: #93C;color:white;" class="mw-no-invert">93C </td> <td style="background: #C3C;color:black;" class="mw-no-invert">C3C </td> <td style="background: #F3C;color:black;" class="mw-no-invert">F3C </td></tr> <tr> <td style="background: #03F;color:white;" class="mw-no-invert">03F </td> <td style="background: #33F;color:white;" class="mw-no-invert">33F </td> <td style="background: #63F;color:white;" class="mw-no-invert">63F </td> <td style="background: #93F;color:white;" class="mw-no-invert">93F </td> <td style="background: #C3F;color:black;" class="mw-no-invert">C3F </td> <td style="background: #F3F;color:black;" class="mw-no-invert">F3F </td></tr> <tr> <td style="background: #060;color:white;" class="mw-no-invert">060 </td> <td style="background: #360;color:white;" class="mw-no-invert">360 </td> <td style="background: #660;color:white;" class="mw-no-invert">660 </td> <td style="background: #960;color:white;" class="mw-no-invert">960 </td> <td style="background: #C60;color:black;" class="mw-no-invert">C60 </td> <td style="background: #F60;color:black;" class="mw-no-invert">F60 </td></tr> <tr> <td style="background: #063;color:white;" class="mw-no-invert">063 </td> <td style="background: #363;color:white;" class="mw-no-invert">363 </td> <td style="background: #663;color:white;" class="mw-no-invert">663 </td> <td style="background: #963;color:white;" class="mw-no-invert">963 </td> <td style="background: #C63;color:black;" class="mw-no-invert">C63 </td> <td style="background: #F63;color:black;" class="mw-no-invert">F63 </td></tr> <tr> <td style="background: #066;color:white;" class="mw-no-invert">066 </td> <td style="background: #366;color:white;" class="mw-no-invert">366 </td> <td style="background: #666;color:white;" class="mw-no-invert">666 </td> <td style="background: #966;color:white;" class="mw-no-invert">966 </td> <td style="background: #C66;color:black;" class="mw-no-invert">C66 </td> <td style="background: #F66;color:black;" class="mw-no-invert">F66 </td></tr> <tr> <td style="background: #069;color:white;" class="mw-no-invert">069 </td> <td style="background: #369;color:white;" class="mw-no-invert">369 </td> <td style="background: #669;color:white;" class="mw-no-invert">669 </td> <td style="background: #969;color:black;" class="mw-no-invert">969 </td> <td style="background: #C69;color:black;" class="mw-no-invert">C69 </td> <td style="background: #F69;color:black;" class="mw-no-invert">F69 </td></tr> <tr> <td style="background: #06C;color:white;" class="mw-no-invert">06C </td> <td style="background: #36C;color:white;" class="mw-no-invert">36C </td> <td style="background: #66C;color:white;" class="mw-no-invert">66C </td> <td style="background: #96C;color:black;" class="mw-no-invert">96C </td> <td style="background: #C6C;color:black;" class="mw-no-invert">C6C </td> <td style="background: #F6C;color:black;" class="mw-no-invert">F6C </td></tr> <tr> <td style="background: #06F;color:white;;" class="mw-no-invert">06F </td> <td style="background: #36F;color:white;" class="mw-no-invert">36F </td> <td style="background: #66F;color:black;" class="mw-no-invert">66F </td> <td style="background: #96F;color:black;" class="mw-no-invert">96F </td> <td style="background: #C6F;color:black;" class="mw-no-invert">C6F </td> <td style="background: #F6F;color:black;" class="mw-no-invert">F6F </td></tr> <tr> <td style="background: #090;color:black;" class="mw-no-invert">090 </td> <td style="background: #390;color:black;" class="mw-no-invert">390 </td> <td style="background: #690;color:black;" class="mw-no-invert">690 </td> <td style="background: #990;color:black;" class="mw-no-invert">990 </td> <td style="background: #C90;color:black;" class="mw-no-invert">C90 </td> <td style="background: #F90;color:black;" class="mw-no-invert">F90 </td></tr> <tr> <td style="background: #093;color:black;" class="mw-no-invert">093 </td> <td style="background: #393;color:black;" class="mw-no-invert">393 </td> <td style="background: #693;color:black;" class="mw-no-invert">693 </td> <td style="background: #993;color:black;" class="mw-no-invert">993 </td> <td style="background: #C93;color:black;" class="mw-no-invert">C93 </td> <td style="background: #F93;color:black;" class="mw-no-invert">F93 </td></tr> <tr> <td style="background: #096;color:black;" class="mw-no-invert">096 </td> <td style="background: #396;color:black;" class="mw-no-invert">396 </td> <td style="background: #696;color:black;" class="mw-no-invert">696 </td> <td style="background: #996;color:black;" class="mw-no-invert">996 </td> <td style="background: #C96;color:black;" class="mw-no-invert">C96 </td> <td style="background: #F96;color:black;" class="mw-no-invert">F96 </td></tr> <tr> <td style="background: #099;color:black;" class="mw-no-invert">099 </td> <td style="background: #399;color:black;" class="mw-no-invert">399 </td> <td style="background: #699;color:black;" class="mw-no-invert">699 </td> <td style="background: #999;color:black;" class="mw-no-invert">999 </td> <td style="background: #C99;color:black;" class="mw-no-invert">C99 </td> <td style="background: #F99;color:black;" class="mw-no-invert">F99 </td></tr> <tr> <td style="background: #09C;color:black;" class="mw-no-invert">09C </td> <td style="background: #39C;color:black;" class="mw-no-invert">39C </td> <td style="background: #69C;color:black;" class="mw-no-invert">69C </td> <td style="background: #99C;color:black;" class="mw-no-invert">99C </td> <td style="background: #C9C;color:black;" class="mw-no-invert">C9C </td> <td style="background: #F9C;color:black;" class="mw-no-invert">F9C </td></tr> <tr> <td style="background: #09F;color:black;" class="mw-no-invert">09F </td> <td style="background: #39F;color:black;" class="mw-no-invert">39F </td> <td style="background: #69F;color:black;" class="mw-no-invert">69F </td> <td style="background: #99F;color:black;" class="mw-no-invert">99F </td> <td style="background: #C9F;color:black;" class="mw-no-invert">C9F </td> <td style="background: #F9F;color:black;" class="mw-no-invert">F9F </td></tr> <tr> <td style="background: #0C0;color:black;" class="mw-no-invert">0C0 </td> <td style="background: #3C0;color:black;" class="mw-no-invert">3C0 </td> <td style="background: #6C0;color:black;" class="mw-no-invert">6C0 </td> <td style="background: #9C0;color:black;" class="mw-no-invert">9C0 </td> <td style="background: #CC0;color:black;" class="mw-no-invert">CC0 </td> <td style="background: #FC0;color:black;" class="mw-no-invert">FC0 </td></tr> <tr> <td style="background: #0C3;color:black;" class="mw-no-invert">0C3 </td> <td style="background: #3C3;color:black;" class="mw-no-invert">3C3 </td> <td style="background: #6C3;color:black;" class="mw-no-invert">6C3 </td> <td style="background: #9C3;color:black;" class="mw-no-invert">9C3 </td> <td style="background: #CC3;color:black;" class="mw-no-invert">CC3 </td> <td style="background: #FC3;color:black;" class="mw-no-invert">FC3 </td></tr> <tr> <td style="background: #0C6;color: black;" class="mw-no-invert">0C6 </td> <td style="background: #3C6;color: black;" class="mw-no-invert">3C6 </td> <td style="background: #6C6;color: black;" class="mw-no-invert">6C6 </td> <td style="background: #9C6;color: black;" class="mw-no-invert">9C6 </td> <td style="background: #CC6;color: black;" class="mw-no-invert">CC6 </td> <td style="background: #FC6;color: black;" class="mw-no-invert">FC6 </td></tr> <tr> <td style="background: #0C9;color: black;" class="mw-no-invert">0C9 </td> <td style="background: #3C9;color: black;" class="mw-no-invert">3C9 </td> <td style="background: #6C9;color: black;" class="mw-no-invert">6C9 </td> <td style="background: #9C9;color: black;" class="mw-no-invert">9C9 </td> <td style="background: #CC9;color: black;" class="mw-no-invert">CC9 </td> <td style="background: #FC9;color: black;" class="mw-no-invert">FC9 </td></tr> <tr> <td style="background: #0CC;color: black;" class="mw-no-invert">0CC </td> <td style="background: #3CC;color: black;" class="mw-no-invert">3CC </td> <td style="background: #6CC;color: black;" class="mw-no-invert">6CC </td> <td style="background: #9CC;color: black;" class="mw-no-invert">9CC </td> <td style="background: #CCC;color: black;" class="mw-no-invert">CCC </td> <td style="background: #FCC;color: black;" class="mw-no-invert">FCC </td></tr> <tr> <td style="background: #0CF;color:black;" class="mw-no-invert">0CF </td> <td style="background: #3CF;color:black;" class="mw-no-invert">3CF </td> <td style="background: #6CF;color:black;" class="mw-no-invert">6CF </td> <td style="background: #9CF;color:black;" class="mw-no-invert">9CF </td> <td style="background: #CCF;color:black;" class="mw-no-invert">CCF </td> <td style="background: #FCF;color:black;" class="mw-no-invert">FCF </td></tr> <tr> <td style="background: #0F0;color:black;" class="mw-no-invert">*0F0* </td> <td style="background: #3F0;color:black;" class="mw-no-invert">3F0 </td> <td style="background: #6F0;color:black;" class="mw-no-invert">*6F0* </td> <td style="background: #9F0;color:black;" class="mw-no-invert">9F0 </td> <td style="background: #CF0;color:black;" class="mw-no-invert">CF0 </td> <td style="background: #FF0;color:black;" class="mw-no-invert">*FF0* </td></tr> <tr> <td style="background: #0F3;color:black;" class="mw-no-invert">0F3 </td> <td style="background: #3F3;color:black;" class="mw-no-invert">*3F3* </td> <td style="background: #6F3;color:black;" class="mw-no-invert">*6F3* </td> <td style="background: #9F3;color:black;" class="mw-no-invert">9F3 </td> <td style="background: #CF3;color:black;" class="mw-no-invert">CF3 </td> <td style="background: #FF3;color:black;" class="mw-no-invert">*FF3* </td></tr> <tr> <td style="background: #0F6;color: black;" class="mw-no-invert">*0F6* </td> <td style="background: #3F6;color: black;" class="mw-no-invert">*3F6* </td> <td style="background: #6F6;color: black;" class="mw-no-invert">6F6 </td> <td style="background: #9F6;color: black;" class="mw-no-invert">9F6 </td> <td style="background: #CF6;color: black;" class="mw-no-invert">*CF6* </td> <td style="background: #FF6;color: black;" class="mw-no-invert">*FF6* </td></tr> <tr> <td style="background: #0F9;color: black;" class="mw-no-invert">0F9 </td> <td style="background: #3F9;color: black;" class="mw-no-invert">3F9 </td> <td style="background: #6F9;color: black;" class="mw-no-invert">6F9 </td> <td style="background: #9F9;color: black;" class="mw-no-invert">9F9 </td> <td style="background: #CF9;color: black;" class="mw-no-invert">CF9 </td> <td style="background: #FF9;color: black;" class="mw-no-invert">FF9 </td></tr> <tr> <td style="background: #0FC;color: black;" class="mw-no-invert">*0FC* </td> <td style="background: #3FC;color: black;" class="mw-no-invert">*3FC* </td> <td style="background: #6FC;color: black;" class="mw-no-invert">6FC </td> <td style="background: #9FC;color: black;" class="mw-no-invert">9FC </td> <td style="background: #CFC;color: black;" class="mw-no-invert">CFC </td> <td style="background: #FFC;color: black;" class="mw-no-invert">FFC </td></tr> <tr> <td style="background: #0FF;color:black;" class="mw-no-invert">*0FF* </td> <td style="background: #3FF;color:black;" class="mw-no-invert">*3FF* </td> <td style="background: #6FF;color:black;" class="mw-no-invert">*6FF* </td> <td style="background: #9FF;color:black;" class="mw-no-invert">9FF </td> <td style="background: #CFF;color:black;" class="mw-no-invert">CFF </td> <td style="background: #FFF;color:black;" class="mw-no-invert">*FFF* </td></tr></tbody></table> <p><i>Each color code listed is a shorthand for the RGB value. For example, code 609 is equivalent to RGB code 102-0-153 or HEX code #660099</i>. </p> <div class="mw-heading mw-heading3"><h3 id="Safest_web_colors">Safest web colors</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=15" title="Edit section: Safest web colors"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Designers were encouraged<sup class="noprint Inline-Template" style="white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Manual_of_Style/Words_to_watch#Unsupported_attributions" title="Wikipedia:Manual of Style/Words to watch"><span title="The material near this tag may use weasel words or too-vague attribution. (February 2024)">by whom?</span></a></i>]</sup> to stick to these 216 "web-safe" colors in their websites because there were a lot of 8-bit color displays when the 216-color palette was developed. David Lehn and Hadley Stern discovered that only 22 of the 216 colors in the web-safe palette are reliably displayed without inconsistent remapping on <a href="/wiki/Highcolour" class="mw-redirect" title="Highcolour">16-bit computer displays</a>. They called these 22 colors "the really safe palette"; it consists largely of shades of green, yellow, and cyan.<sup id="cite_ref-30" class="reference"><a href="#cite_note-30"><span class="cite-bracket">[</span>30<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-31" class="reference"><a href="#cite_note-31"><span class="cite-bracket">[</span>31<span class="cite-bracket">]</span></a></sup> </p> <table class="wikitable mw-no-invert" style="width:80%; color:white; width:80%; text-align:center; margin: 0 auto;"> <caption>Safest web colors </caption> <tbody><tr style="color: black;"> <th style="background:#EAECF0;background:linear-gradient(to top right,#EAECF0 49%,#AAA 49.5%,#AAA 50.5%,#EAECF0 51%);line-height:1.2;padding:0.1em 0.4em;"><div style="margin-left:2em;text-align:right"><span class="nowrap">R--</span></div><div style="margin-right:2em;text-align:left"><span class="nowrap">-GB</span></div> </th> <th>0 </th> <th>3 </th> <th>6 </th> <th>9 </th> <th>C </th> <th>F </th></tr> <tr> <th>00 </th> <td style="width:16%; background: #000; color: white">*000* </td> <td> </td> <td> </td> <td style="width:16%;"> </td> <td> </td> <td style="width:16%; background: #F00; color: white">*F00* </td></tr> <tr> <th>03 </th> <td style="width:16%; background: #003; color: white">*003* </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="width:16%; background: #F03; color: white">*F03* </td></tr> <tr> <th>06 </th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th>09 </th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th>0C </th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr> <tr> <th>0F </th> <td style="background: #00F; color: white">*00F* </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="background: #F0F; color: white">*F0F* </td></tr> <tr style="color: black;"> <th>⋮ </th> <td colspan="6">⋮ </td></tr> <tr style="color: black;"> <th>F0 </th> <td style="background: #0F0; color: black">*0F0* </td> <td> </td> <td style="background: #6F0; color: black">*6F0* </td> <td> </td> <td> </td> <td style="background: #FF0; color: black">*FF0* </td></tr> <tr style="color: black;"> <th>F3 </th> <td> </td> <td style="background: #3F3; color: black">*3F3* </td> <td style="background: #6F3; color: black">*6F3* </td> <td> </td> <td> </td> <td style="background: #FF3; color: black">*FF3* </td></tr> <tr style="color: black;"> <th>F6 </th> <td style="background: #0F6; color: black">*0F6* </td> <td style="background: #3F6; color: black">*3F6* </td> <td> </td> <td> </td> <td style="background: #CF6; color: black">*CF6* </td> <td style="background: #FF6; color: black">*FF6* </td></tr> <tr style="color:black"> <th>F9 </th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td></tr> <tr style="color: black;"> <th>FC </th> <td style="background: #0FC; color: black">*0FC* </td> <td style="background: #3FC; color: black">*3FC* </td> <td> </td> <td> </td> <td> </td> <td> </td></tr> <tr style="color: black;"> <th>FF </th> <td style="background: #0FF; color: black">*0FF* </td> <td style="background: #3FF; color: black">*3FF* </td> <td style="background: #6FF; color: black">*6FF* </td> <td> </td> <td> </td> <td style="background: #FFF;">*FFF* </td></tr></tbody></table> <div class="mw-heading mw-heading2"><h2 id="Accessibility">Accessibility</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=16" title="Edit section: Accessibility"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="Color_selection">Color selection</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=17" title="Edit section: Color selection"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Some <a href="/wiki/Web_browser" title="Web browser">browsers</a> and devices do not support colors. For these displays or blind and colorblind users, Web content depending on colors can be unusable or difficult to use. </p><p>Either no colors should be specified (to invoke the browser's default colors), or both the background and all foreground colors (such as the colors of plain text, unvisited links, hovered links, active links, and visited links) should be specified to avoid <b>black on black</b> or <b>white on white</b> effects.<sup id="cite_ref-w3ctips_32-0" class="reference"><a href="#cite_note-w3ctips-32"><span class="cite-bracket">[</span>32<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="Color_contrast">Color contrast</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Web_colors&action=edit&section=18" title="Edit section: Color contrast"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The <a href="/wiki/Web_Content_Accessibility_Guidelines" title="Web Content Accessibility Guidelines">Web Content Accessibility Guidelines</a> recommend a contrast ratio of at least 4.5:1 between the <a href="/wiki/Relative_luminance" title="Relative luminance">relative luminance</a> of text and its background color<sup id="cite_ref-33" class="reference"><a href="#cite_note-33"><span class="cite-bracket">[</span>33<span class="cite-bracket">]</span></a></sup> or at least 3:1 for large text. Enhanced accessibility requires contrast ratios greater than 7:1. </p><p>However, addressing accessibility concerns is not simply a matter of increasing the contrast ratio. As a report to the <a href="/wiki/Web_Accessibility_Initiative" title="Web Accessibility Initiative">Web Accessibility Initiative</a> indicates,<sup id="cite_ref-34" class="reference"><a href="#cite_note-34"><span class="cite-bracket">[</span>34<span class="cite-bracket">]</span></a></sup> <a href="/wiki/Dyslexic" class="mw-redirect" title="Dyslexic">dyslexic</a> readers are better served by contrast ratios below the maximum. The recommendations they refer to of off-black (#0A0A0A) on off-white (#FFFFE5) and black (#000000) on creme (#FAFAC8) have contrast ratios of 11.7:1 and 20.3:1 respectively. Among their other color pairs, brown (#282800) on dark green (#A0A000) has a contrast ratio of 3.24:1, which is less than the <a href="/wiki/Web_Content_Accessibility_Guidelines" title="Web Content Accessibility Guidelines">WCAG</a> recommendation, dark brown (#1E1E00) on light green (#B9B900) has a contrast ratio of 4.54:1 and blue (#00007D) on yellow (#FFFF00) has a contrast ratio of 11.4:1. The colors named in the report use different color values than the web colors of the same name. </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=Web_colors&action=edit&section=19" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1184024115">.mw-parser-output .div-col{margin-top:0.3em;column-width:30em}.mw-parser-output .div-col-small{font-size:90%}.mw-parser-output .div-col-rules{column-rule:1px solid #aaa}.mw-parser-output .div-col dl,.mw-parser-output .div-col ol,.mw-parser-output .div-col ul{margin-top:0}.mw-parser-output .div-col li,.mw-parser-output .div-col dd{page-break-inside:avoid;break-inside:avoid-column}</style><div class="div-col" style="column-width: 30em;"> <ul><li><a href="/wiki/Adobe_RGB_color_space" title="Adobe RGB color space">Adobe RGB color space</a></li> <li><a href="/wiki/CIE_1931_color_space" title="CIE 1931 color space">CIE 1931 XYZ color space</a></li> <li><a href="/wiki/International_Commission_on_Illumination" title="International Commission on Illumination">CIE</a> <a href="/wiki/Lab_color_space" class="mw-redirect" title="Lab color space">L*a*b* color space</a></li> <li><a href="/wiki/Color_picker" title="Color picker">Color picker</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/Lists_of_colors" title="Lists of colors">Lists of colors</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/ProPhoto_RGB_color_space" title="ProPhoto RGB color space">ProPhoto RGB</a></li> <li><a href="/wiki/RGB_color_spaces" title="RGB color spaces">RGB color spaces</a></li> <li><a href="/wiki/ScRGB" title="ScRGB">scRGB</a></li> <li><a href="/wiki/Wide-gamut_RGB_color_space" title="Wide-gamut RGB color space">Wide-gamut RGB color space</a></li></ul></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=Web_colors&action=edit&section=20" title="Edit section: References"><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 mw-references-columns"><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"><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="CITEREFNiederst_Robbins2006" class="citation book cs1">Niederst Robbins, Jennifer (February 2006). "Appendix D: Specifying Color". <i>Web Design in a Nutshell</i>. O'Reilly. p. 830. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-0-596-00987-8" title="Special:BookSources/978-0-596-00987-8"><bdi>978-0-596-00987-8</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=bookitem&rft.atitle=Appendix+D%3A+Specifying+Color&rft.btitle=Web+Design+in+a+Nutshell&rft.pages=830&rft.pub=O%27Reilly&rft.date=2006-02&rft.isbn=978-0-596-00987-8&rft.aulast=Niederst+Robbins&rft.aufirst=Jennifer&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></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">York, Richard. <i>Beginning CSS</i>, pp. 71–72.</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="CITEREFPembertonPettit2011" class="citation web cs1">Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). <a rel="nofollow" class="external text" href="https://www.w3.org/TR/css3-color/#rgb-color">"CSS Color Module Level 3"</a>. W3C. section 4.2.1. RGB color values.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=CSS+Color+Module+Level+3&rft.pages=section+4.2.1.+RGB+color+values&rft.pub=W3C&rft.date=2011-06-07&rft.aulast=Pemberton&rft.aufirst=Steven&rft.au=Pettit%2C+Brad&rft_id=https%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-color%2F%23rgb-color&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" 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="CITEREFSharmaBala2017" class="citation book cs1">Sharma, Gaurav; Bala, Raja (19 December 2017). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=OxlBqY67rl0C&q=srgb&pg=PA89"><i>Digital Color Imaging Handbook</i></a>. CRC Press. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-1-4200-4148-4" title="Special:BookSources/978-1-4200-4148-4"><bdi>978-1-4200-4148-4</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Digital+Color+Imaging+Handbook&rft.pub=CRC+Press&rft.date=2017-12-19&rft.isbn=978-1-4200-4148-4&rft.aulast=Sharma&rft.aufirst=Gaurav&rft.au=Bala%2C+Raja&rft_id=https%3A%2F%2Fbooks.google.com%2Fbooks%3Fid%3DOxlBqY67rl0C%26q%3Dsrgb%26pg%3DPA89&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFPembertonPettit2011" class="citation web cs1">Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/css3-color/#rgb-color">"4.2.1. RGB color values"</a>. <i>CSS Color Module Level 3</i>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">19 March</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=CSS+Color+Module+Level+3&rft.atitle=4.2.1.+RGB+color+values&rft.date=2011-06-07&rft.aulast=Pemberton&rft.aufirst=Steven&rft.au=Pettit%2C+Brad&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-color%2F%23rgb-color&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-w3orgcss3color-6"><span class="mw-cite-backlink">^ <a href="#cite_ref-w3orgcss3color_6-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-w3orgcss3color_6-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/2011/REC-css3-color-20110607/">"CSS Color Module Level 3"</a>. W3c<span class="reference-accessdate">. Retrieved <span class="nowrap">19 July</span> 2020</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=CSS+Color+Module+Level+3&rft.pub=W3c&rft_id=https%3A%2F%2Fwww.w3.org%2FTR%2F2011%2FREC-css3-color-20110607%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFPowell2010" class="citation book cs1">Powell, Thomas A. (2010). <i>HTML & CSS: The Complete Reference, Fifth Edition</i>. New York: McGraw-Hill. p. 765. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/9780071741705" title="Special:BookSources/9780071741705"><bdi>9780071741705</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=HTML+%26+CSS%3A+The+Complete+Reference%2C+Fifth+Edition&rft.place=New+York&rft.pages=765&rft.pub=McGraw-Hill&rft.date=2010&rft.isbn=9780071741705&rft.aulast=Powell&rft.aufirst=Thomas+A.&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/REC-html40/types.html#h-6.5">"HTML 4.01 Specification | Basic HTML data types | Colors"</a>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">8 July</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=HTML+4.01+Specification+%7C+Basic+HTML+data+types+%7C+Colors&rft.pub=W3C&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Ftypes.html%23h-6.5&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-9">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFRaggett" class="citation web cs1">Raggett, Dave. <a rel="nofollow" class="external text" href="http://www.w3.org/TR/REC-html32#body">"HTML 3.2 Reference Specification | The BODY element"</a>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">8 July</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=HTML+3.2+Reference+Specification+%7C+The+BODY+element&rft.pub=W3C&rft.aulast=Raggett&rft.aufirst=Dave&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html32%23body&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFLilley2002" class="citation web cs1">Lilley, Chris (24 April 2002). <a rel="nofollow" class="external text" href="//lists.w3.org/Archives/Public/www-svg/2002Apr/0052.html">"Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt"</a>. W3C Public mailing list archives<span class="reference-accessdate">. Retrieved <span class="nowrap">8 July</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Re%3A+color+names+in+SVG-1.0+conflict+with+%2Fusr%2Flib%2FX11%2Frgb.txt&rft.pub=W3C+Public+mailing+list+archives&rft.date=2002-04-24&rft.aulast=Lilley&rft.aufirst=Chris&rft_id=%2F%2Flists.w3.org%2FArchives%2FPublic%2Fwww-svg%2F2002Apr%2F0052.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFPembertonPettit2011" class="citation web cs1">Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/css3-color/#svg-color">"4.3. Extended color keywords"</a>. <i>CSS Color Module Level 3</i>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">19 March</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=CSS+Color+Module+Level+3&rft.atitle=4.3.+Extended+color+keywords&rft.date=2011-06-07&rft.aulast=Pemberton&rft.aufirst=Steven&rft.au=Pettit%2C+Brad&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-color%2F%23svg-color&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#ColorKeywords">"Scalable Vector Graphics (SVG) 1.1 (Second Edition) | Basic Data Types and Interfaces | Recognized color keyword names"</a>. W3C. 16 August 2011<span class="reference-accessdate">. Retrieved <span class="nowrap">1 February</span> 2019</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Scalable+Vector+Graphics+%28SVG%29+1.1+%28Second+Edition%29+%7C+Basic+Data+Types+and+Interfaces+%7C+Recognized+color+keyword+names&rft.pub=W3C&rft.date=2011-08-16&rft_id=https%3A%2F%2Fwww.w3.org%2FTR%2F2011%2FREC-SVG11-20110816%2Ftypes.html%23ColorKeywords&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-13"><span class="mw-cite-backlink"><b><a href="#cite_ref-13">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20140714181359/http://cng.seas.rochester.edu/CNG/docs/x11color.html">"The X11 Color Set"</a>. <i>Computing and Networking in HSEAS</i>. Archived from <a rel="nofollow" class="external text" href="http://cng.seas.rochester.edu/CNG/docs/x11color.html">the original</a> on 14 July 2014<span class="reference-accessdate">. Retrieved <span class="nowrap">6 July</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Computing+and+Networking+in+HSEAS&rft.atitle=The+X11+Color+Set&rft_id=http%3A%2F%2Fcng.seas.rochester.edu%2FCNG%2Fdocs%2Fx11color.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-14"><span class="mw-cite-backlink"><b><a href="#cite_ref-14">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFBrian_Wilson" class="citation web cs1">Brian Wilson. <a rel="nofollow" class="external text" href="http://www.blooberry.com/indexdot/color/colors.htm">"Colors in HTML and CSS"</a>. <i>blooberry.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">6 July</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=blooberry.com&rft.atitle=Colors+in+HTML+and+CSS&rft.au=Brian+Wilson&rft_id=http%3A%2F%2Fwww.blooberry.com%2Findexdot%2Fcolor%2Fcolors.htm&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-15"><span class="mw-cite-backlink"><b><a href="#cite_ref-15">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">"CSS 2.1 Specification: Syntax and basic data types: Colors"</a>. <i>W3C</i>. 8 September 2009<span class="reference-accessdate">. Retrieved <span class="nowrap">21 December</span> 2009</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=W3C&rft.atitle=CSS+2.1+Specification%3A+Syntax+and+basic+data+types%3A+Colors&rft.date=2009-09-08&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2FCSS21%2Fsyndata.html%23color-units&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-16"><span class="mw-cite-backlink"><b><a href="#cite_ref-16">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2010/PR-css3-color-20101028/#changes">"CSS Color Module Level 3 – Proposed Recommendation - 11. Changes"</a>. <i>W3C</i>. 28 October 2010<span class="reference-accessdate">. Retrieved <span class="nowrap">6 July</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=W3C&rft.atitle=CSS+Color+Module+Level+3+%E2%80%93+Proposed+Recommendation+-+11.+Changes&rft.date=2010-10-28&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2F2010%2FPR-css3-color-20101028%2F%23changes&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-17"><span class="mw-cite-backlink"><b><a href="#cite_ref-17">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2002/WD-css3-color-20020418/">"CSS3 module: Color | Working Draft"</a>. <i>W3C</i>. 18 April 2002<span class="reference-accessdate">. Retrieved <span class="nowrap">6 July</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=W3C&rft.atitle=CSS3+module%3A+Color+%7C+Working+Draft&rft.date=2002-04-18&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2F2002%2FWD-css3-color-20020418%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-css4-18"><span class="mw-cite-backlink">^ <a href="#cite_ref-css4_18-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-css4_18-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://dev.w3.org/csswg/css-color/#named-colors">"CSS Color Module Level 4 –  Named Colors"</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=CSS+Color+Module+Level+4+%26ndash%3B%26%2332%3B+Named+Colors&rft_id=http%3A%2F%2Fdev.w3.org%2Fcsswg%2Fcss-color%2F%23named-colors&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-19"><span class="mw-cite-backlink"><b><a href="#cite_ref-19">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">"User interface – System colors"</a>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">8 July</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=User+interface+%E2%80%93+System+colors&rft.pub=W3C&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2FCSS21%2Fui.html%23system-colors&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-20"><span class="mw-cite-backlink"><b><a href="#cite_ref-20">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFPembertonPettit2011" class="citation web cs1">Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/css3-color/#css2-system">"4.5.1. CSS2 system colors"</a>. <i>CSS Color Module Level 3</i>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">19 March</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=CSS+Color+Module+Level+3&rft.atitle=4.5.1.+CSS2+system+colors&rft.date=2011-06-07&rft.aulast=Pemberton&rft.aufirst=Steven&rft.au=Pettit%2C+Brad&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-color%2F%23css2-system&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-21"><span class="mw-cite-backlink"><b><a href="#cite_ref-21">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#system">"CSS3 Basic User Interface Module | System Appearance"</a>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">8 July</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=CSS3+Basic+User+Interface+Module+%7C+System+Appearance&rft.pub=W3C&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2F2004%2FCR-css3-ui-20040511%2F%23system&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-22"><span class="mw-cite-backlink"><b><a href="#cite_ref-22">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFÇelik2012" class="citation web cs1">Çelik, Tantek, ed. (17 January 2012). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/css3-ui/#changes-list">"List of substantial changes"</a>. <i>CSS Basic User Interface Module Level 3</i>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">19 March</span> 2013</span>. <q>System Appearance has been dropped, including appearance values & property, and system fonts / extension of the 'font' property shorthand.</q></cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=CSS+Basic+User+Interface+Module+Level+3&rft.atitle=List+of+substantial+changes&rft.date=2012-01-17&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-ui%2F%23changes-list&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-C3-23"><span class="mw-cite-backlink">^ <a href="#cite_ref-C3_23-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-C3_23-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFPembertonPettit2011" class="citation web cs1">Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). <a rel="nofollow" class="external text" href="http://www.w3.org/TR/css3-color/#hsl-color">"4.2.4. HSL color values"</a>. <i>CSS Color Module Level 3</i>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">19 March</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=CSS+Color+Module+Level+3&rft.atitle=4.2.4.+HSL+color+values&rft.date=2011-06-07&rft.aulast=Pemberton&rft.aufirst=Steven&rft.au=Pettit%2C+Brad&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-color%2F%23hsl-color&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-CSSC4-24"><span class="mw-cite-backlink">^ <a href="#cite_ref-CSSC4_24-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-CSSC4_24-1"><sup><i><b>b</b></i></sup></a> <a href="#cite_ref-CSSC4_24-2"><sup><i><b>c</b></i></sup></a> <a href="#cite_ref-CSSC4_24-3"><sup><i><b>d</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/css-color-4/">"CSS Color Module Level 4"</a>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">14 March</span> 2022</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=CSS+Color+Module+Level+4&rft.pub=W3C&rft_id=https%3A%2F%2Fwww.w3.org%2FTR%2Fcss-color-4%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-autogenerated1-25"><span class="mw-cite-backlink">^ <a href="#cite_ref-autogenerated1_25-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-autogenerated1_25-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/css-color-4/Overview.html">"CSS Color Module Level 4: Overview"</a>. <i>W3C</i><span class="reference-accessdate">. Retrieved <span class="nowrap">11 January</span> 2022</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=W3C&rft.atitle=CSS+Color+Module+Level+4%3A+Overview&rft_id=https%3A%2F%2Fwww.w3.org%2FTR%2Fcss-color-4%2FOverview.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-26"><span class="mw-cite-backlink"><b><a href="#cite_ref-26">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFGlazman2014" class="citation web cs1">Glazman, Daniel (21 June 2014). <a rel="nofollow" class="external text" href="//lists.w3.org/Archives/Public/www-style/2014Jun/0312.html">"Re: [CfC] adding 'rebeccapurple' to CSS Color Level 4"</a>. <i>Post to www-style mailing list</i>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">24 June</span> 2014</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Post+to+www-style+mailing+list&rft.atitle=Re%3A+%5BCfC%5D+adding+%27rebeccapurple%27+to+CSS+Color+Level+4&rft.date=2014-06-21&rft.aulast=Glazman&rft.aufirst=Daniel&rft_id=%2F%2Flists.w3.org%2FArchives%2FPublic%2Fwww-style%2F2014Jun%2F0312.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-CSSC5-27"><span class="mw-cite-backlink">^ <a href="#cite_ref-CSSC5_27-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-CSSC5_27-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/css-color-5/">CSS Color Module Level 5</a></span> </li> <li id="cite_note-28"><span class="mw-cite-backlink"><b><a href="#cite_ref-28">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFJenkins2012" class="citation book cs1">Jenkins, Sue (27 December 2012). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=50QM5XrxFzQC&q=In+the+early+days+of+computing%2C+many+displays+were+only+capable+of+displaying+256+colors&pg=PT195"><i>Web Design All-in-One For Dummies</i></a>. John Wiley & Sons. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/9781118404119" title="Special:BookSources/9781118404119"><bdi>9781118404119</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Web+Design+All-in-One+For+Dummies&rft.pub=John+Wiley+%26+Sons&rft.date=2012-12-27&rft.isbn=9781118404119&rft.aulast=Jenkins&rft.aufirst=Sue&rft_id=https%3A%2F%2Fbooks.google.com%2Fbooks%3Fid%3D50QM5XrxFzQC%26q%3DIn%2Bthe%2Bearly%2Bdays%2Bof%2Bcomputing%252C%2Bmany%2Bdisplays%2Bwere%2Bonly%2Bcapable%2Bof%2Bdisplaying%2B256%2Bcolors%26pg%3DPT195&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-29"><span class="mw-cite-backlink"><b><a href="#cite_ref-29">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3schools.com/browsers/browsers_display.asp">"Browser Display Statistics"</a>. W3Schools<span class="reference-accessdate">. Retrieved <span class="nowrap">8 July</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Browser+Display+Statistics&rft.pub=W3Schools&rft_id=https%3A%2F%2Fwww.w3schools.com%2Fbrowsers%2Fbrowsers_display.asp&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-30"><span class="mw-cite-backlink"><b><a href="#cite_ref-30">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFLehnStern" class="citation web cs1">Lehn, David; Stern, Hadley. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20210303202304/https://www.asc.ohio-state.edu/wilkins.5/color/websafecolors.html">"Death of the Websafe Color Palette?"</a>. asc.ohio-state.edu. Archived from <a rel="nofollow" class="external text" href="https://www.asc.ohio-state.edu/wilkins.5/color/websafecolors.html">the original</a> on 3 March 2021<span class="reference-accessdate">. Retrieved <span class="nowrap">3 March</span> 2021</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Death+of+the+Websafe+Color+Palette%3F&rft.pub=asc.ohio-state.edu&rft.aulast=Lehn&rft.aufirst=David&rft.au=Stern%2C+Hadley&rft_id=https%3A%2F%2Fwww.asc.ohio-state.edu%2Fwilkins.5%2Fcolor%2Fwebsafecolors.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-31"><span class="mw-cite-backlink"><b><a href="#cite_ref-31">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFPiperoglou2000" class="citation web cs1">Piperoglou, Stephanos (13 December 2000). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20161123191645/http://www.webreference.com/html/reference/color/websafe.html">"Web Color Reference - HTML with Style | 4"</a>. <i>WebReference</i>. Archived from <a rel="nofollow" class="external text" href="http://www.webreference.com/html/reference/color/websafe.html">the original</a> on 23 November 2016<span class="reference-accessdate">. Retrieved <span class="nowrap">5 January</span> 2016</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=WebReference&rft.atitle=Web+Color+Reference+-+HTML+with+Style+%7C+4&rft.date=2000-12-13&rft.aulast=Piperoglou&rft.aufirst=Stephanos&rft_id=http%3A%2F%2Fwww.webreference.com%2Fhtml%2Freference%2Fcolor%2Fwebsafe.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-w3ctips-32"><span class="mw-cite-backlink"><b><a href="#cite_ref-w3ctips_32-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/QA/Tips/color">"If You Pick One Color, Pick Them All"</a>. W3C<span class="reference-accessdate">. Retrieved <span class="nowrap">8 July</span> 2013</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=If+You+Pick+One+Color%2C+Pick+Them+All&rft.pub=W3C&rft_id=http%3A%2F%2Fwww.w3.org%2FQA%2FTips%2Fcolor&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+colors" class="Z3988"></span></span> </li> <li id="cite_note-33"><span class="mw-cite-backlink"><b><a href="#cite_ref-33">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast">WCAG 2.0 guideline 1.4</a></span> </li> <li id="cite_note-34"><span class="mw-cite-backlink"><b><a href="#cite_ref-34">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.w3.org/WAI/RD/2012/text-customization/r11">Optimal Colors to Improve Readability for People with Dyslexia</a></span> </li> </ol></div></div> <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=Web_colors&action=edit&section=21" 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">CSS color value</a> on <a href="/wiki/MDN_Web_Docs" title="MDN Web Docs">MDN Web Docs</a></li> <li><a rel="nofollow" class="external text" href="https://www.w3.org/TR/CSS21/syndata.html#color-units">CSS2.1 Color Specification</a></li></ul> <div class="navbox-styles"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1236075235">.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}</style></div><div role="navigation" class="navbox" aria-labelledby="Web_colors" style="padding:3px"><table class="nowraplinks hlist mw-collapsible mw-collapsed 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:Web_colors" title="Template:Web colors"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Web_colors" title="Template talk:Web colors"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Web_colors" title="Special:EditPage/Template:Web colors"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Web_colors" style="font-size:114%;margin:0 4em"><a class="mw-selflink selflink"><span>Web colors</span></a></div></th></tr><tr><td class="navbox-abovebelow" colspan="2"><div><a href="/wiki/Hexadecimal" title="Hexadecimal">Hexadecimal</a></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0"><div style="text-align: center; display: grid; grid-template-columns: repeat(auto-fill, max(12.5% - 0.5em, 5em)); place-content: center; gap: 0.5em; align-items: end"> <div> <a href="/wiki/White" title="White">White</a> <div style="background:white; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Grey" title="Grey">Gray/Grey</a> <div style="background:gray; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Red" title="Red">Red</a> <div style="background:red; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Yellow" title="Yellow">Yellow</a> <div style="background:yellow; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Lime_(color)" title="Lime (color)">Lime</a> <div style="background:lime; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Aqua_(color)" title="Aqua (color)">Aqua/Cyan</a> <div style="background:aqua; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Blue" title="Blue">Blue</a> <div style="background:blue; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Fuchsia_(color)" title="Fuchsia (color)">Fuchsia</a>/<a href="/wiki/Magenta" title="Magenta">Magenta</a> <div style="background:fuchsia; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Silver_(color)" title="Silver (color)">Silver</a> <div style="background:silver; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Black" title="Black">Black</a> <div style="background:black; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Maroon" title="Maroon">Maroon</a> <div style="background:maroon; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Olive_(color)" title="Olive (color)">Olive</a> <div style="background:olive; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Green" title="Green">Green</a> <div style="background:green; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Teal" title="Teal">Teal</a> <div style="background:teal; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Navy_blue" title="Navy blue">Navy blue</a> <div style="background:navy; color:inherit; border:1px solid black"><br /></div></div> <div> <a href="/wiki/Purple" title="Purple">Purple</a> <div style="background:purple; color:inherit; border:1px solid black"><br /></div></div> </div></div></td></tr><tr><td class="navbox-abovebelow" colspan="2"><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> <b><a href="/wiki/Category:Web_colors" title="Category:Web colors">Category</a></b></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="Color_topics" style="padding:3px"><table class="nowraplinks hlist mw-collapsible mw-collapsed 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"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239400231"><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Color_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_topics" 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 href="/wiki/Color_picker" title="Color picker">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></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 class="mw-selflink selflink">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 class="mw-selflink selflink">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><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Web_colors&oldid=1251966685#Hex_triplet">https://en.wikipedia.org/w/index.php?title=Web_colors&oldid=1251966685#Hex_triplet</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:Web_colors" title="Category:Web colors">Web colors</a></li><li><a href="/wiki/Category:Color" title="Category:Color">Color</a></li><li><a href="/wiki/Category:Web_design" title="Category:Web design">Web design</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_matches_Wikidata" title="Category:Short description matches Wikidata">Short description matches Wikidata</a></li><li><a href="/wiki/Category:Use_dmy_dates_from_October_2014" title="Category:Use dmy dates from October 2014">Use dmy dates from October 2014</a></li><li><a href="/wiki/Category:Use_American_English_from_October_2020" title="Category:Use American English from October 2020">Use American English from October 2020</a></li><li><a href="/wiki/Category:All_Wikipedia_articles_written_in_American_English" title="Category:All Wikipedia articles written in American English">All Wikipedia articles written in American English</a></li><li><a href="/wiki/Category:All_articles_with_unsourced_statements" title="Category:All articles with unsourced statements">All articles with unsourced statements</a></li><li><a href="/wiki/Category:Articles_with_unsourced_statements_from_May_2011" title="Category:Articles with unsourced statements from May 2011">Articles with unsourced statements from May 2011</a></li><li><a href="/wiki/Category:Articles_with_specifically_marked_weasel-worded_phrases_from_February_2024" title="Category:Articles with specifically marked weasel-worded phrases from February 2024">Articles with specifically marked weasel-worded phrases from February 2024</a></li><li><a href="/wiki/Category:Articles_prone_to_spam_from_September_2013" title="Category:Articles prone to spam from September 2013">Articles prone to spam from September 2013</a></li><li><a href="/wiki/Category:Articles_with_example_code" title="Category:Articles with example code">Articles with example code</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 19 October 2024, at 02:15<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=Web_colors&mobileaction=toggle_view_mobile#Hex_triplet" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-57488d5c7d-66fz2","wgBackendResponseTime":259,"wgPageParseReport":{"limitreport":{"cputime":"0.824","walltime":"0.978","ppvisitednodes":{"value":9179,"limit":1000000},"postexpandincludesize":{"value":230505,"limit":2097152},"templateargumentsize":{"value":11930,"limit":2097152},"expansiondepth":{"value":16,"limit":100},"expensivefunctioncount":{"value":9,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":149270,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 787.256 1 -total"," 32.48% 255.679 1 Template:Reflist"," 16.71% 131.527 26 Template:Cite_web"," 12.54% 98.731 2 Template:Sidebar"," 12.14% 95.582 1 Template:Html_series"," 11.77% 92.685 4 Template:Cite_book"," 10.60% 83.462 18 Template:Colort/Color"," 10.25% 80.673 1 Template:Colornames"," 9.75% 76.763 18 Template:Colort/1row"," 8.19% 64.482 1 Template:Short_description"]},"scribunto":{"limitreport-timeusage":{"value":"0.397","limit":"10.000"},"limitreport-memusage":{"value":7367031,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-68775984f6-4qq42","timestamp":"20241125184756","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"Web colors","url":"https:\/\/en.wikipedia.org\/wiki\/Web_colors#Hex_triplet","sameAs":"http:\/\/www.wikidata.org\/entity\/Q376346","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q376346","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2003-08-02T17:44:56Z","dateModified":"2024-10-19T02:15:51Z","headline":"color used in designing web pages"}</script> </body> </html>