CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Color Module Level 4</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 742f3d674, updated Mon Nov 4 14:56:54 2024 -0800" name="generator"> <link href="https://www.w3.org/TR/css-color-4/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="dbde8fabad3b9e7fb3b25413cb4293c8e9d527d8" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <link href="style.css" rel="stylesheet"> <style> table.named-color-table thead th { text-align:center; background:var(--text); color:var(--bg); } table.named-color-table th, table.named-color-table td { padding: 0 .25em; } table.named-color-table td { text-align:center; text-transform:uppercase; } table.named-color-table td:nth-child(-n+2) { border:1px solid var(--text); } /* table.named-color-table td:nth-child(n+4) { background: ; } */ .color-table { background: rgb(46.63% 46.63% 46.63%); color: black; display: table; display: flex; flex-flow: row wrap; justify-content: space-around; padding: 0.5em; gap: 2em; } .color-table table { padding:1em; margin:0; table-layout: fixed; } .color-table td, .color-table th { font-size:smaller; } .color-table th { white-space: pre-line; } .color-table td { padding: .75em; } .color-table .white { color: white; } table.deltaE td {border: 4px solid white; padding: 6px; font-size: 1.4em; color: black;} table.deltaE td.dE0 { background: rgb(68, 243, 91)} table.deltaE td.dE1 { background: rgb(153, 243, 68)} table.deltaE td.dE2 { background: rgb(217, 243, 68)} table.deltaE td.dE3 { background: rgb(243, 240, 68)} table.deltaE td.dE4 { background: rgb(243, 202, 68)} table.deltaE td.dE5 { background: rgb(243, 103, 68); color: white} /* work-around for https://github.com/tabatkins/bikeshed/issues/1799 */ div.example { overflow: visible; } div.example>a.self-link::before { content: "¶"; } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/static/images/favicons/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-var-click-highlighting */ /* Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ D50 2deg illuminant, L in [0,100], a and b in [-128, 128] 0 = lab(85,0,85) 1 = lab(85,80,30) 2 = lab(85,-40,40) 3 = lab(85,-50,0) 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) For darkmode: 0 = oklab(50% 0% 108%) 1 = oklab(50% -51% 51%) 2 = oklab(50% -64% -20%) 3 = oklab(50% 6% 19%) 4 = oklab(50% -12% -64%) 5 = oklab(50% 44% -19%) 6 = oklab(50% 102% 38%) */ [data-algorithm] var { cursor: pointer; } var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } var[data-var-color] { --var-bg: #F4D200; } var[data-var-color="1"] { --var-bg: #FF87A2; } var[data-var-color="2"] { --var-bg: #96E885; } var[data-var-color="3"] { --var-bg: #3EEED2; } var[data-var-color="4"] { --var-bg: #EACFB6; } var[data-var-color="5"] { --var-bg: #82DDFF; } var[data-var-color="6"] { --var-vg: #FFBCF2; } @media (prefers-color-scheme: dark) { var[data-var-color] { --var-bg: #bc1a00; } var[data-var-color="1"] { --var-bg: #007f00; } var[data-var-color="2"] { --var-bg: #008698; } var[data-var-color="3"] { --var-bg: #7f5b2b; } var[data-var-color="4"] { --var-bg: #004df3; } var[data-var-color="5"] { --var-bg: #a1248a; } var[data-var-color="6"] { --var-vg: #ff0000; } } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Color Module Level 4</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-11-26">26 November 2024</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/css-color-4/">https://drafts.csswg.org/css-color-4/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2024/CRD-css-color-4-20240213/" rel="prev">https://www.w3.org/TR/2024/CRD-css-color-4-20240213/</a> <dt>Implementation Report: <dd><a href="https://wpt.fyi/results/css/css-color">https://wpt.fyi/results/css/css-color</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-color-4">CSSWG Issues Repository</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact">Tab Atkins Jr.</a> (Google) <dd class="editor p-author h-card vcard" data-editor-id="1438"><a class="p-name fn u-url url" href="https://svgees.us/">Chris Lilley</a> (W3C) <dd class="editor p-author h-card vcard" data-editor-id="52258"><a class="p-name fn u-url url" href="http://lea.verou.me/">Lea Verou</a> (Invited Expert) <dt class="editor">Former Editor: <dd class="editor p-author h-card vcard" data-editor-id="15393"><a class="p-name fn u-url url" href="https://dbaron.org/">L. David Baron</a> (<a class="p-org org" href="https://www.mozilla.org/">Mozilla</a>) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-color-4/Overview.bs">GitHub Editor</a> <dt>Test Suite: <dd class="wpt-overview"><a href="https://wpt.fyi/results/css/css-color/">https://wpt.fyi/results/css/css-color/</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This specification describes CSS <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color"><color></a> values, and properties for foreground color and group opacity. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-color” in the title, like this: “[css-color] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-color%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#introduction">1 Introduction</a> <ol class="toc"> <li><a href="#values">1.1 Value Definitions</a> </ol> <li><a href="#terminology">2 Color Terminology</a> <li> <a href="#applying-color">3 Applying Color in CSS</a> <ol class="toc"> <li><a href="#accessibility">3.1 Accessibility and Conveying Information By Color</a> <li><a href="#the-color-property">3.2 Foreground Color: the color property</a> <li><a href="#transparency">3.3 Transparency: the opacity property</a> <li><a href="#tagged-images">3.4 Color Space of Tagged Images</a> <li><a href="#untagged">3.5 Color Spaces of Untagged Colors</a> </ol> <li> <a href="#color-type">4 Representing Colors: the <color> type</a> <ol class="toc"> <li> <a href="#color-syntax">4.1 The <color> syntax</a> <ol class="toc"> <li><a href="#color-syntax-modern">4.1.1 Modern (Space-separated) Color Function Syntax</a> <li><a href="#color-syntax-legacy">4.1.2 Legacy (Comma-separated) Color Function Syntax</a> </ol> <li><a href="#alpha-syntax">4.2 Representing Transparency in Colors: the <alpha-value> syntax</a> <li><a href="#hue-syntax">4.3 Representing Cylindrical-coordinate Hues: the <hue> syntax</a> <li> <a href="#missing">4.4 “Missing” Color Components and the none Keyword</a> <ol class="toc"> <li><a href="#powerless">4.4.1 “Powerless” Color Components</a> </ol> <li><a href="#parse-color">4.5 Parsing a <color> Value</a> </ol> <li> <a href="#numeric-srgb">5 sRGB Colors</a> <ol class="toc"> <li><a href="#rgb-functions">5.1 The RGB functions: rgb() and rgba()</a> <li><a href="#hex-notation">5.2 The RGB Hexadecimal Notations: #RRGGBB</a> </ol> <li> <a href="#color-keywords">6 Color Keywords</a> <ol class="toc"> <li><a href="#named-colors">6.1 Named Colors</a> <li><a href="#css-system-colors">6.2 System Colors</a> <li><a href="#transparent-color">6.3 The transparent keyword</a> <li><a href="#currentcolor-color">6.4 The currentcolor keyword</a> </ol> <li> <a href="#the-hsl-notation">7 HSL Colors: hsl() and hsla() functions</a> <ol class="toc"> <li><a href="#hsl-to-rgb">7.1 Converting HSL Colors to sRGB</a> <li><a href="#rgb-to-hsl">7.2 Converting sRGB Colors to HSL</a> <li><a href="#hsl-examples">7.3 Examples of HSL Colors</a> </ol> <li> <a href="#the-hwb-notation">8 HWB Colors: hwb() function</a> <ol class="toc"> <li><a href="#hwb-to-rgb">8.1 Converting HWB Colors to sRGB</a> <li><a href="#rgb-to-hwb">8.2 Converting sRGB Colors to HWB</a> <li><a href="#hwb-examples">8.3 Examples of HWB Colors</a> </ol> <li> <a href="#lab-colors">9 Device-independent Colors: CIE Lab and LCH, Oklab and Oklch</a> <ol class="toc"> <li><a href="#cie-lab">9.1 CIE Lab and LCH</a> <li><a href="#ok-lab">9.2 Oklab and Oklch</a> <li><a href="#specifying-lab-lch">9.3 Specifying Lab and LCH: the lab() and lch() functional notations</a> <li><a href="#specifying-oklab-oklch">9.4 Specifying Oklab and Oklch: the oklab() and oklch() functional notations</a> <li><a href="#lab-to-lch">9.5 Converting Lab or Oklab colors to LCH or Oklch colors</a> <li><a href="#lch-to-lab">9.6 Converting LCH or Oklch colors to Lab or Oklab colors</a> </ol> <li> <a href="#predefined">10 Predefined Color Spaces</a> <ol class="toc"> <li><a href="#color-function">10.1 Specifying Predefined Colors: the color() function</a> <li><a href="#predefined-sRGB">10.2 The Predefined sRGB Color Space: the sRGB keyword</a> <li><a href="#predefined-sRGB-linear">10.3 The Predefined Linear-light sRGB Color Space: the srgb-linear keyword</a> <li><a href="#predefined-display-p3">10.4 The Predefined Display P3 Color Space: the display-p3 keyword</a> <li><a href="#predefined-a98-rgb">10.5 The Predefined A98 RGB Color Space: the a98-rgb keyword</a> <li><a href="#predefined-prophoto-rgb">10.6 The Predefined ProPhoto RGB Color Space: the prophoto-rgb keyword</a> <li><a href="#predefined-rec2020">10.7 The Predefined ITU-R BT.2020-2 Color Space: the rec2020 keyword</a> <li><a href="#predefined-xyz">10.8 The Predefined CIE XYZ Color Spaces: the xyz-d50, xyz-d65, and xyz keywords</a> <li><a href="#predefined-to-lab-oklab">10.9 Converting Predefined Color Spaces to Lab or Oklab</a> <li><a href="#oklab-lab-to-predefined">10.10 Converting Lab or Oklab to Predefined RGB Color Spaces</a> <li><a href="#predefined-to-predefined">10.11 Converting Between Predefined RGB Color Spaces</a> <li><a href="#alpha">10.12 Simple Alpha Compositing</a> </ol> <li><a href="#color-conversion">11 Converting Colors</a> <li> <a href="#interpolation">12 Color Interpolation</a> <ol class="toc"> <li><a href="#interpolation-space">12.1 Color Space for Interpolation</a> <li><a href="#interpolation-missing">12.2 Interpolating with Missing Components</a> <li><a href="#interpolation-alpha">12.3 Interpolating with Alpha</a> <li> <a href="#hue-interpolation">12.4 Hue Interpolation</a> <ol class="toc"> <li><a href="#hue-shorter">12.4.1 shorter</a> <li><a href="#hue-longer">12.4.2 longer</a> <li><a href="#hue-increasing">12.4.3 increasing</a> <li><a href="#hue-decreasing">12.4.4 decreasing</a> </ol> </ol> <li> <a href="#gamut-mapping">13 Gamut Mapping </a> <ol class="toc"> <li> <a href="#gamut-mapping-intro">13.1 An Introduction to Gamut Mapping</a> <ol class="toc"> <li><a href="#GM-clip">13.1.1 Clipping</a> <li><a href="#GM-closest">13.1.2 Closest Color (MINDE)</a> <li><a href="#GM-chroma">13.1.3 Chroma Reduction</a> <li><a href="#GM-excessive-reduction">13.1.4 Excessive Chroma Reduction</a> <li><a href="#GM-chroma-local-MINDE">13.1.5 Chroma Reduction with Local Clipping</a> <li><a href="#GM-hue-curvature">13.1.6 Deviations from Perceptual Uniformity: Hue Curvature</a> </ol> <li> <a href="#css-gamut-mapping">13.2 CSS Gamut Mapping to an RGB Destination</a> <ol class="toc"> <li><a href="#binsearch">13.2.1 Sample Pseudocode for the Binary Search Gamut Mapping Algorithm with Local MINDE</a> </ol> </ol> <li> <a href="#resolving-color-values">14 Resolving <color> Values</a> <ol class="toc"> <li><a href="#resolving-sRGB-values">14.1 Resolving sRGB values</a> <li><a href="#resolving-lab-lch-values">14.2 Resolving Lab and LCH values</a> <li><a href="#resolving-oklab-oklch-values">14.3 Resolving Oklab and Oklch values</a> <li><a href="#resolving-color-function-values">14.4 Resolving values of the color() function</a> <li><a href="#resolving-other-colors">14.5 Resolving other colors</a> </ol> <li> <a href="#serializing-color-values">15 Serializing <color> Values</a> <ol class="toc"> <li><a href="#serializing-alpha-values">15.1 Serializing alpha values</a> <li> <a href="#serializing-sRGB-values">15.2 Serializing sRGB values</a> <ol class="toc"> <li><a href="#HTML-compatible-serialization-of-srgb">15.2.1 HTML-compatible serialization of sRGB values</a> <li><a href="#css-serialization-of-srgb">15.2.2 CSS serialization of sRGB values</a> </ol> <li><a href="#serializing-lab-lch">15.3 Serializing Lab and LCH values</a> <li><a href="#serializing-oklab-oklch">15.4 Serializing Oklab and Oklch values</a> <li><a href="#serializing-color-function-values">15.5 Serializing values of the color() function</a> <li><a href="#serializing-other-colors">15.6 Serializing other colors</a> </ol> <li><a href="#sample">16 Default Style Rules</a> <li><a href="#color-conversion-code">17 Sample code for Color Conversions</a> <li> <a href="#color-difference-code">18 Sample Code for ΔE2000 and ΔEOK Color Differences</a> <ol class="toc"> <li><a href="#color-difference-2000">18.1 ΔE2000</a> <li><a href="#color-difference-OK">18.2 ΔEOK</a> </ol> <li><a href="#deprecated-system-colors"> Appendix A: Deprecated CSS System Colors</a> <li><a href="#quirky-color"> Appendix B: Deprecated Quirky Hex Colors</a> <li><a href="#acknowledgments"> Acknowledgments</a> <li> <a href="#changes"> Changes</a> <ol class="toc"> <li><a href="#changes-from-20240213"> Changes since the Candidate Recommendation Draft of 13 Feb 2024</a> <li><a href="#changes-from-20221101"> Changes since the Candidate Recommendation Draft of 1 November 2022 </a> <li><a href="#changes-from-20220705"> Changes since the Candidate Recommendation of 5 July 2022 </a> <li><a href="#changes-from-20220628"> Changes since the Working Draft of 28 June 2022 </a> <li><a href="#changes-from-20220428"> Changes since the Working Draft of 28 April 2022 </a> <li><a href="#changes-from-20211215"> Changes since the Working Draft of 15 December 2021 </a> <li><a href="#changes-from-20210601"> Changes since the Working Draft of 1 June 2021 </a> <li><a href="#changes-from-20201112"> Changes since the Working Draft of 12 November 2020 </a> <li><a href="#changes-from-20191105"> Changes since Working Draft of 5 November 2019</a> <li><a href="#changes-from-20160705"> Changes since Working Draft of 05 July 2016</a> <li><a href="#changes-from-3"> Changes from Colors 3</a> </ol> <li><a href="#security">19 Security Considerations</a> <li><a href="#privacy">20 Privacy Considerations</a> <li><a href="#a11y-sec">21 Accessibility Considerations</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> </ol> </nav> <main> <script> document.addEventListener("DOMContentLoaded", ()=>{ for (let e of document.querySelectorAll(".swatch")) { e.tabIndex = "0"; const swatchColor = getComputedStyle(e).getPropertyValue("--color"); if (!CSS.supports('color', swatchColor)) { e.style.background = "repeating-linear-gradient(135deg, red 0, red 4px, white 4px, white 8px)"; e.setAttribute("title", "Your browser does not recognize this color value, so we can't preview it."); } } }); </script> <h2 class="heading settled" data-level="1" id="introduction">1. Introduction<a class="self-link" href="#introduction"></a></h2> This section is not normative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section is not normative, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> This module describes CSS properties which allow authors to specify the foreground color and opacity of the text content of an element. This module also describes in detail the CSS <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①"><color></a> value type. It not only defines the color-related properties and values that already exist in <a href="https://www.w3.org/TR/CSS1">CSS1</a>, <a href="https://www.w3.org/TR/CSS2/">CSS2</a>, and <a href="https://www.w3.org/TR/css-color-3/">CSS Color 3</a>, but also defines new properties and values. In particular, it allows specifying colors in other <a data-link-type="dfn" href="#color-space" id="ref-for-color-space">color spaces</a> than sRGB; previously, the more saturated colors outside the sRGB gamut could not be used in CSS even if the display device supported them. A <a href="https://drafts.csswg.org/css-color-4/test-coverage">draft implementation report</a> is available. <h3 class="heading settled" data-level="1.1" id="values">1.1. Value Definitions<a class="self-link" href="#values"></a></h3> This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types. In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly. <h2 class="heading settled" data-level="2" id="terminology">2. Color Terminology<a class="self-link" href="#terminology"></a></h2> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section provides definitions used later, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="color">color</dfn> is a definition (numeric or textual) of the human visual perception of a light or a physical object illuminated with light. The objective study of human color perception is termed <abbr title="colorimetry is the measurement of human color perception">colorimetry</abbr>. The color of a physical object depends on how much light it reflects at each visible wavelength, plus the actual color of the light illuminating it (again, the amount of light at each wavelength). It is measured by a spectrophotometer . The color of something that emits light (including colors on a computer screen) depends on how much light it emits at each visible wavelength. It is measured by a spectroradiometer. If two objects have different <abbr title="the amount of light at each wavelength">spectra</abbr>, but still produce the same physical sensation, we say they have the same color. We can calculate whether two colors are the same by converting the spectra to CIE XYZ (three numbers). <div class="example" id="ex-cal-leaf"><a class="self-link" href="#ex-cal-leaf"></a>For example a green leaf, a photograph of that leaf displayed on a computer screen, and a print of that photograph, are all producing a green sensation by different means. If the screen and the printer are <a data-link-type="dfn" href="#calibrated" id="ref-for-calibrated">calibrated</a>, the green in the leaf, and the photo, and the print will look the same. </div> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="color-space">color space</dfn> is an organization of colors with respect to an underlying <abbr title="colorimetry is the measurement of human color perception">colorimetric</abbr> model, such that there is a clear, objectively-measurable meaning for any color in that color space. This also means that the same color can be expressed in multiple color spaces, or transformed from one color space to another, while still looking the same. <div class="example" id="ex-leaf-spectro"> <a class="self-link" href="#ex-leaf-spectro"></a> A leaf is measured with a spectrophotometer and found to have the color lch(51.2345% 21.2 130) which is lab(51.2345% -13.6271 16.2401). This same color could be expressed in various color spaces: <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->sRGB <c- m>0.41587</c-> <c- m>0.503670</c-> <c- m>0.36664</c-><c- p>);</c-> <c- nf>color</c-><c- p>(</c->display-p3 <c- m>0.43313</c-> <c- m>0.50108</c-> <c- m>0.37950</c-><c- p>);</c-> <c- nf>color</c-><c- p>(</c->a98-rgb <c- m>0.44091</c-> <c- m>0.49971</c-> <c- m>0.37408</c-><c- p>);</c-> <c- nf>color</c-><c- p>(</c->prophoto-rgb <c- m>0.36589</c-> <c- m>0.41717</c-> <c- m>0.31333</c-><c- p>);</c-> <c- nf>color</c-><c- p>(</c->rec2020 <c- m>0.42210</c-> <c- m>0.47580</c-> <c- m>0.35605</c-><c- p>);</c-> </pre> </div> An <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="additive-color-space">additive color space</dfn> means that the coordinate system is linear in light intensity. The <abbr title="International Commission on Illumination, = Commission internationale de l'éclairage (in French)">CIE</abbr> XYZ color space is an additive color space. The Y component of XYZ is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="luminance">luminance</dfn>, the light intensity per unit area, or 'how bright it is'. Luminance is measured in candelas per square meter. cd/m², also called nits. In an additive color space, calculations can be done to accurately predict color mixing. Most RGB spaces are not additive, because the components are gamma encoded. Undoing this gamma encoding produces linear-light values. <div class="example" id="ex-additivity"> <a class="self-link" href="#ex-additivity"></a> For example, if a light fixture contains two identical colored lights, and only one is switched on, and the color is measured to be color(xyz 0.13 0.12 0.04), then the color when both are switched on will be exactly twice that, color(xyz 0.26 0.24 0.08). If we have two differently colored spotlights shining on a stage, and one has the measured value color(xyz 0.15 0.24 0.17) while the other is color(xyz 0.11 0.06 0.06) then we can accurately predict that if the colored beams are made to overlap, the color of the mixture will be the sum of the XYZ component values, or color(xyz 0.26 0.30 0.23). </div> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="chromaticity">chromaticity</dfn> is a color measurement where the lightness component has been factored out. From the identical lights example above, the u',v' chromaticity with one light is (0.2537, 0.5268) and the chromaticity is the same with both lights (they are the same color, it is just brighter). Chromaticities are additive, so they accurately predict the chromaticity (but not the resulting lightness) of a mixture. Being two-dimensional, chromaticity is easily represented on a chromaticity diagram to predict the chromaticity of a color mixture. Any two colors can be mixed, and the resulting colors will lie on the line joining them on the diagram. Three colors form a plane, and the resulting colors will lie in the triangle they form on the diagram. <figure id="fig-ucs-display-p3"> <img alt="uv chromaticity diagram of the display-p3 color space" height="464" src="images/UCS-display-p3.svg" width="500"> <figcaption>A chromaticity diagram showing (in solid colors) the <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3">display-p3</a> color space and for comparison (faded) the <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb">sRGB</a> color space. The white point (D65) is also shown. </figcaption> </figure> Thus, once linearized, RGB color spaces are additive, and their gamut is defined by the chromaticities of the red, green and blue primaries, plus the chromaticity of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="white-point">white point</dfn> (the color formed by all three primaries at full intensity). Most color spaces use one of a few daylight-simulating <a data-link-type="dfn" href="#white-point" id="ref-for-white-point">white points</a>, which are named by the color temperature of the corresponding black-body radiator. For example, <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint">D65</a> is a daylight whitepoint corresponding to a correlated color temperature of 6500 Kelvin (actually 6504, because the value of Plank’s constant has changed since the color was originally defined). To avoid cumulative round-trip errors, it is important that the identical chromaticity values are used consistently, at all places in a calculation. Thus, for maximum compatibility, for this specification, the following two standard daylight-simulating <a data-link-type="dfn" href="#white-point" id="ref-for-white-point①">white points</a> are defined: <table class="data"> <thead> <tr> <th>Name <th>x <th>y <th>CCT <tbody> <tr> <td><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="D50" data-lt="D50 whitepoint" id="d50-whitepoint">D50</dfn> <td>0.345700 <td>0.358500 <td>5003K <tr> <td><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="D65" data-lt="D65 whitepoint" id="d65-whitepoint">D65</dfn> <td>0.312700 <td>0.329000 <td>6504K </table> When the measured physical characteristics (such as the <abbr title="measured color, irrespective of lightness">chromaticities</abbr> of the primary colors it uses, or the colors produced in response to a given set of inputs) of a <a data-link-type="dfn" href="#color-space" id="ref-for-color-space①">color space</a> or a color-producing device are known, it is said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="characterized">characterized</dfn>. If in addition adjustments have been made so that a device meets calibration targets such as white point, neutrality of greys, predictability and consistency of tone response, then it is said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="calibrated">calibrated</dfn>. Real physical devices cannot yet produce every possible color that the human eye can see. The range of colors that a given device can produce is termed the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="gamut">gamut</dfn> (not to be confused with gamma). Devices with a limited gamut cannot produce very saturated colors, like those found in a rainbow. <figure id="fig-three-gamuts"> <img alt height="1350" src="./images/sRGB-DisplayP3-rec2020-in-Oklab.png" width="1538"> <figcaption> A top-down view of three gamuts, plotted in Oklab with the positive a-axis towards the right and the positive b-axis towards the top; looking down the l-axis so white and neutrals are in the center. The largest of the three gamuts is ITU Rec BT.2020; the medium-sized one is Display P3, and the smallest is sRGB. Rendering by Alexey Ardov. </figcaption> </figure> The gamuts of different <a data-link-type="dfn" href="#color-space" id="ref-for-color-space②">color space</a>s may be compared by looking at the volume (in cubic Lab units) of colors that can be expressed. The following table examines the <a href="#predefined">predefined</a> color spaces available in CSS. <table class="gamuts"> <tbody> <tr> <th>color space <th>Volume (million Lab units) <tr> <td>sRGB <td>0.820 <tr> <td>display-p3 <td>1.233 <tr> <td>a98-rgb <td>1.310 <tr> <td>prophoto-rgb <td>2.896 <tr> <td>rec2020 <td>2.042 </table> A color in CSS is either an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="invalid-color">invalid color</dfn>, as described below for each syntactic form, or a <a data-link-type="dfn" href="#valid-color" id="ref-for-valid-color">valid color</a>. Any color which is not an <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color">invalid color</a> is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="valid-color">valid color</dfn>. A color may be a <a data-link-type="dfn" href="#valid-color" id="ref-for-valid-color①">valid color</a> but still be outside the range of colors that can be produced by an output device (a screen, projector, or printer) It is said to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="out-of-gamut">out of gamut</dfn>. Each <a data-link-type="dfn" href="#valid-color" id="ref-for-valid-color②">valid color</a> is either <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="in-gamut">in-gamut</dfn> for a particular output device (screen, or printer) or it is <a data-link-type="dfn" href="#out-of-gamut" id="ref-for-out-of-gamut">out of gamut</a>. <div class="example" id="ex-oog"> <a class="self-link" href="#ex-oog"></a> For example, given a screen which covers 100% of the display-p3 color space, but no more, the following color is out of gamut: <pre class="highlight"> <c- nf>color</c-><c- p>(</c->prophoto-rgb <c- m>0.88</c-> <c- m>0.45</c-> <c- m>0.10</c-><c- p>)</c-> </pre> because, expressed in display-p3, one or more coordinates are either greater that 1.0 or less than 0.0: <pre class="highlight"> <c- nf>color</c-><c- p>(</c->display-p3 <c- m>1.0844</c-> <c- m>0.43</c-> <c- m>0.1</c-><c- p>)</c-> </pre> This color is valid, and could, for example, be used as a gradient stop, but would need to be <a data-link-type="dfn" href="#css-gamut-mapped" id="ref-for-css-gamut-mapped">CSS gamut mapped</a> for display, producing a similar-looking but lower chroma (less saturated) color. </div> <h2 class="heading settled" data-level="3" id="applying-color">3. Applying Color in CSS<a class="self-link" href="#applying-color"></a></h2> <h3 class="heading settled" data-level="3.1" id="accessibility">3.1. Accessibility and Conveying Information By Color<a class="self-link" href="#accessibility"></a></h3> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section provides authoring guidance, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> Although colors can add significant information to documents and make them more readable, color by itself should not be the sole means to convey important information. Authors should consider the W3C Web Content Accessibility Guidelines <a data-link-type="biblio" href="#biblio-wcag21" title="Web Content Accessibility Guidelines (WCAG) 2.1">[WCAG21]</a> when using color in their documents. <blockquote> <a href="https://www.w3.org/TR/WCAG21/#use-of-color">1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element</a> </blockquote> <h3 class="heading settled" data-level="3.2" id="the-color-property">3.2. Foreground Color: the <a class="property css" data-link-type="property" href="#propdef-color" id="ref-for-propdef-color">color</a> property<a class="self-link" href="#the-color-property"></a></h3> <table class="def propdef" data-link-for-hint="color"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-color">color</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②"><color></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>CanvasText <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>all elements and text <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>N/A <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>computed color, see <a href="#resolving-color-values">resolving color values</a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type </table> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/color-001.html" title="css/css-color/color-001.html">color-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/color-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/color-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/color-002.html" title="css/css-color/color-002.html">color-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/color-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/color-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/color-003.html" title="css/css-color/color-003.html">color-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/color-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/color-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/inheritance.html" title="css/css-color/inheritance.html">inheritance.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/inheritance.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/inheritance.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/animation/color-interpolation.html" title="css/css-color/animation/color-interpolation.html">color-interpolation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/animation/color-interpolation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/animation/color-interpolation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/color-initial-canvastext.html" title="css/css-color/color-initial-canvastext.html">color-initial-canvastext.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/color-initial-canvastext.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/color-initial-canvastext.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid.html" title="css/css-color/parsing/color-invalid.html">color-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid.html">(source)</a> </ul> </details> This property specifies the primary foreground color of the element. This is used as the fill color of its text content, and in addition specifies the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used value</a> that currentcolor resolves to, which allows indirect references to this foreground color and affects the initial values of various other color properties such as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-borders-4/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color">text-emphasis-color</a>. <dl> <dt><a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color③"><color></a> <dd>Sets the primary foreground color to the specified <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color④"><color></a>. </dl> <div class="example" id="ex-lime"> <a class="self-link" href="#ex-lime"></a> The <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑤"><color></a> type provides multiple ways to syntactically specify a given color. For example, the following declarations all specify the sRGB color “lime”: <pre class="lang-css highlight">em <c- p>{</c-> <c- k>color</c-><c- p>:</c-> lime<c- p>;</c-> <c- p>}</c-> <c- c>/* color keyword */</c-> em <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- nf>rgb</c-><c- p>(</c-><c- m>0</c-> <c- m>255</c-> <c- m>0</c-><c- p>);</c-> <c- p>}</c-> <c- c>/* RGB range 0-255 */</c-> em <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- nf>rgb</c-><c- p>(</c-><c- m>0</c-><c- k>%</c-> <c- m>100</c-><c- k>%</c-> <c- m>0</c-><c- k>%</c-><c- p>);</c-> <c- p>}</c-> <c- c>/* RGB range 0%-100% */</c-> em <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- nf>color</c-><c- p>(</c->sRGB <c- m>0</c-> <c- m>1</c-> <c- m>0</c-><c- p>);</c-> <c- p>}</c-> <c- c>/* sRGB range 0.0-1.0 */</c-> </pre> </div> When applied to text, this property, including its alpha component, has no effect on “color glyphs” (such as the emoji in some fonts), which are colored by a built-in palette. However, some colored fonts are able to refer to a contextual “foreground color”, such as by palette entry 0xFFFF in the <code class="highlight">COLR</code> table of OpenType, or by the context-fill value in SVG-in-OpenType. In such cases, the foreground color is set by this property, identical to how it sets the <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor">currentcolor</a> value. <h3 class="heading settled" data-level="3.3" id="transparency">3.3. Transparency: the <a class="property css" data-link-type="property" href="#propdef-opacity" id="ref-for-propdef-opacity">opacity</a> property<a class="self-link" href="#transparency"></a></h3> Opacity can be thought of as a postprocessing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering. See <a href="#alpha">simple alpha compositing</a> for details. <table class="def propdef" data-link-for-hint="opacity"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-opacity">opacity</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-opacity-opacity-value" id="ref-for-typedef-opacity-opacity-value"><opacity-value></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>1 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>map to the range [0,1] <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>specified number, clamped to the range [0,1] <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value type </table> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/clip-opacity-out-of-flow.html" title="css/css-color/clip-opacity-out-of-flow.html">clip-opacity-out-of-flow.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/clip-opacity-out-of-flow.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/clip-opacity-out-of-flow.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-basic-0.0-a.xht" title="css/css-color/t32-opacity-basic-0.0-a.xht">t32-opacity-basic-0.0-a.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-basic-0.0-a.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-basic-0.0-a.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-basic-0.6-a.xht" title="css/css-color/t32-opacity-basic-0.6-a.xht">t32-opacity-basic-0.6-a.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-basic-0.6-a.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-basic-0.6-a.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-basic-1.0-a.xht" title="css/css-color/t32-opacity-basic-1.0-a.xht">t32-opacity-basic-1.0-a.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-basic-1.0-a.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-basic-1.0-a.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-clamping-0.0-b.xht" title="css/css-color/t32-opacity-clamping-0.0-b.xht">t32-opacity-clamping-0.0-b.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-clamping-0.0-b.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-clamping-0.0-b.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-clamping-1.0-b.xht" title="css/css-color/t32-opacity-clamping-1.0-b.xht">t32-opacity-clamping-1.0-b.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-clamping-1.0-b.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-clamping-1.0-b.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-offscreen-b.xht" title="css/css-color/t32-opacity-offscreen-b.xht">t32-opacity-offscreen-b.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-offscreen-b.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-offscreen-b.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-offscreen-multiple-boxes-1-c.xht" title="css/css-color/t32-opacity-offscreen-multiple-boxes-1-c.xht">t32-opacity-offscreen-multiple-boxes-1-c.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-offscreen-multiple-boxes-1-c.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-offscreen-multiple-boxes-1-c.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-offscreen-multiple-boxes-2-c.xht" title="css/css-color/t32-opacity-offscreen-multiple-boxes-2-c.xht">t32-opacity-offscreen-multiple-boxes-2-c.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-offscreen-multiple-boxes-2-c.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-offscreen-multiple-boxes-2-c.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-offscreen-with-alpha-c.xht" title="css/css-color/t32-opacity-offscreen-with-alpha-c.xht">t32-opacity-offscreen-with-alpha-c.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-offscreen-with-alpha-c.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-offscreen-with-alpha-c.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t32-opacity-zorder-c.xht" title="css/css-color/t32-opacity-zorder-c.xht">t32-opacity-zorder-c.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t32-opacity-zorder-c.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t32-opacity-zorder-c.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/opacity-computed.html" title="css/css-color/parsing/opacity-computed.html">opacity-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/opacity-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/opacity-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/opacity-valid.html" title="css/css-color/parsing/opacity-valid.html">opacity-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/opacity-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/opacity-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/opacity-invalid.html" title="css/css-color/parsing/opacity-invalid.html">opacity-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/opacity-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/opacity-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/composited-filters-under-opacity.html" title="css/css-color/composited-filters-under-opacity.html">composited-filters-under-opacity.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/composited-filters-under-opacity.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/composited-filters-under-opacity.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/filters-under-will-change-opacity.html" title="css/css-color/filters-under-will-change-opacity.html">filters-under-will-change-opacity.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/filters-under-will-change-opacity.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/filters-under-will-change-opacity.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/animation/color-composition.html" title="css/css-color/animation/color-composition.html">color-composition.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/animation/color-composition.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/animation/color-composition.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/animation/opacity-interpolation.html" title="css/css-color/animation/opacity-interpolation.html">opacity-interpolation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/animation/opacity-interpolation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/animation/opacity-interpolation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/canvas-change-opacity.html" title="css/css-color/canvas-change-opacity.html">canvas-change-opacity.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/canvas-change-opacity.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/canvas-change-opacity.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/animation/opacity-animation-ending-correctly-001.html" title="css/css-color/animation/opacity-animation-ending-correctly-001.html">opacity-animation-ending-correctly-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/animation/opacity-animation-ending-correctly-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/animation/opacity-animation-ending-correctly-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/animation/opacity-animation-ending-correctly-002.html" title="css/css-color/animation/opacity-animation-ending-correctly-002.html">opacity-animation-ending-correctly-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/animation/opacity-animation-ending-correctly-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/animation/opacity-animation-ending-correctly-002.html">(source)</a> </ul> </details> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="opacity" data-dfn-type="type" data-export id="typedef-opacity-opacity-value"><a class="production css" data-link-type="type" href="#typedef-opacity-opacity-value" id="ref-for-typedef-opacity-opacity-value①"><opacity-value></a></dfn> <dd> The opacity to be applied to the element. The resulting opacity is applied to the entire element, rather than a particular color. Opacity values outside the range [0,1] are not invalid, and are preserved in specified values, but are clamped to the range [0, 1] in computed values. </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/inline-opacity-float-child.html" title="css/css-color/inline-opacity-float-child.html">inline-opacity-float-child.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/inline-opacity-float-child.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/inline-opacity-float-child.html">(source)</a> </ul> </details> Opacity in CSS is represented using the <a class="production css" data-link-type="type" href="#typedef-opacity-opacity-value" id="ref-for-typedef-opacity-opacity-value②"><opacity-value></a> syntax, for example in the <a class="property css" data-link-type="property" href="#propdef-opacity" id="ref-for-propdef-opacity①">opacity</a> property. <pre class="prod highlight"><a class="production" data-link-type="type" href="#typedef-opacity-opacity-value" id="ref-for-typedef-opacity-opacity-value③"><opacity-value></a> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a> </pre> Represented as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①"><number></a>, the useful range of the value is 0 (representing full transparency) to 1 (representing full opacity). It can also be written as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage></a>, which <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computes to</a> the equivalent <number> (0% to 0, 100% to 1). The <a class="property css" data-link-type="property" href="#propdef-opacity" id="ref-for-propdef-opacity②">opacity</a> property applies the specified opacity to the element as a whole, including its contents, rather than applying it to each descendant individually. This means that, for example, an opaque child occluding part of the element’s background will continue to do so even when opacity is less than 1, but the element and child as a whole will show the underlying page through themselves. It also means that the glyphs corresponding to all characters in the element are treated as a whole; any overlapping portions do not increase the opacity. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/opacity-overlapping-letters.html" title="css/css-color/opacity-overlapping-letters.html">opacity-overlapping-letters.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/opacity-overlapping-letters.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/opacity-overlapping-letters.html">(source)</a> </ul> </details> <figure id="arabic-opacity-rendering"> <img alt="overlapping glyphs rendered correctly, and incorrectly" height="156" src="images/joining-and-transparency.svg" width="713"> <figcaption> Correct and incorrect rendering of text with an <a class="property css" data-link-type="property" href="#propdef-opacity" id="ref-for-propdef-opacity④">opacity</a> value of less than one, whose glyphs overlap. </figcaption> </figure> If separate opacity for each glyph is desired, it can be achieved by using a color value which includes alpha, rather than setting the <a class="property css" data-link-type="property" href="#propdef-opacity" id="ref-for-propdef-opacity⑤">opacity</a> property. If a box has <a class="property css" data-link-type="property" href="#propdef-opacity" id="ref-for-propdef-opacity⑥">opacity</a> less than 1, it forms a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#stacking-context" id="ref-for-stacking-context">stacking context</a> for its children. (This prevents its contents from interleaving in the z-axis with content outside it.) <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/body-opacity-0-to-1-stacking-context.html" title="css/css-color/body-opacity-0-to-1-stacking-context.html">body-opacity-0-to-1-stacking-context.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/body-opacity-0-to-1-stacking-context.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/body-opacity-0-to-1-stacking-context.html">(source)</a> </ul> </details> Furthermore, if the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-z-index" id="ref-for-propdef-z-index">z-index</a> property applies to the box, the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-z-index-auto" id="ref-for-valdef-z-index-auto">auto</a> value is treated as 0 for the element; it is otherwise painted on the same layer within its parent stacking context as positioned elements with stack level 0 (as if it were a positioned element with z-index:0). See <a href="https://www.w3.org/TR/CSS21/visuren.html#layers">section 9.9</a> and <a href="https://www.w3.org/TR/CSS21/zindex.html">Appendix E</a> of <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> for more information on stacking contexts. These rules about z-order do not apply to SVG elements, since SVG has its own <a href="https://www.w3.org/TR/SVG11/render.html">rendering model</a> (<a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>, Chapter 3). <h3 class="heading settled" data-level="3.4" id="tagged-images">3.4. Color Space of Tagged Images<a class="self-link" href="#tagged-images"></a></h3> An <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="tagged-image">tagged image</dfn> is an image that is explicitly assigned a color profile, as defined by the image format. This is usually done by including an International Color Consortium (ICC) profile <a data-link-type="biblio" href="#biblio-icc" title="ICC.1:2022 (Profile version 4.4.0.0)">[ICC]</a>. For example JPEG <a data-link-type="biblio" href="#biblio-jpeg" title="JPEG File Interchange Format">[JPEG]</a>, PNG <a data-link-type="biblio" href="#biblio-png" title="Portable Network Graphics (PNG) Specification (Third Edition)">[PNG]</a> and TIFF <a data-link-type="biblio" href="#biblio-tiff" title="TIFF Revision 6.0">[TIFF]</a> all specify a means to embed an ICC profile. Image formats may also use other, equivalent methods, often for brevity. For example, PNG specifies a means (the <a href="https://www.w3.org/TR/PNG/#11sRGB">sRGB chunk</a>) to explicitly tag an image as being in the sRGB color space, without including the sRGB ICC profile. Similarly, PNG specifies a compact means (the <a href="https://www.w3.org/TR/png-3/#cICP-chunk">cICP chunk</a>) to explicitly tag an image as being one of various SDR or HDR color spaces, such as Display P3 or BT.2100 HLG, without including an ICC profile. Tagged RGB images, and tagged images using a transformation of RGB such as YCbCr, if the color profile or other identifying information is valid, must be treated as being in the specified color space. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/tagged-images-001.html" title="css/css-color/tagged-images-001.html">tagged-images-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/tagged-images-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/tagged-images-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/tagged-images-002.html" title="css/css-color/tagged-images-002.html">tagged-images-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/tagged-images-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/tagged-images-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/tagged-images-003.html" title="css/css-color/tagged-images-003.html">tagged-images-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/tagged-images-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/tagged-images-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/tagged-images-004.html" title="css/css-color/tagged-images-004.html">tagged-images-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/tagged-images-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/tagged-images-004.html">(source)</a> </ul> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/png/cicp-chunk.html" title="png/cicp-chunk.html">cicp-chunk.html</a> <a class="wpt-live" href="http://wpt.live/png/cicp-chunk.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/png/cicp-chunk.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/png/apng/fDAT-inherits-cICP.html" title="png/apng/fDAT-inherits-cICP.html">fDAT-inherits-cICP.html</a> <a class="wpt-live" href="http://wpt.live/png/apng/fDAT-inherits-cICP.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/png/apng/fDAT-inherits-cICP.html">(source)</a> </ul> </details> For example, when a browser running on a system with a Display P3 monitor displays an JPEG image tagged as being in the ITU Rec BT.2020 <a data-link-type="biblio" href="#biblio-rec2020" title="Recommendation ITU-R BT.2020-2: Parameter values for ultra-high definition television systems for production and international programme exchange">[Rec.2020]</a> color space, it must convert the colors from ITU Rec BT.2020 to Display P3 so that they display correctly. It must not treat the ITU Rec BT.2020 values as if they were Display P3 values, which would produce incorrect colors. If the color profile or other identifying information is invalid, the image is treated as described for <a data-link-type="dfn" href="#untagged-image" id="ref-for-untagged-image">untagged images</a>. <h3 class="heading settled" data-level="3.5" id="untagged">3.5. Color Spaces of Untagged Colors<a class="self-link" href="#untagged"></a></h3> For compatibility, colors specified in HTML, and <a data-link-type="dfn" href="#untagged-image" id="ref-for-untagged-image①">untagged images</a> must be treated as being in the sRGB color space (<a data-link-type="biblio" href="#biblio-srgb" title="Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB">[SRGB]</a>) unless otherwise specified. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/untagged-images-001.html" title="css/css-color/untagged-images-001.html">untagged-images-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/untagged-images-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/untagged-images-001.html">(source)</a> </ul> </details> An <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="untagged-image">untagged image</dfn> is an image that is not explicitly assigned a color profile, as defined by the image format. This rule does not apply to untagged videos, since <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="untagged-video">untagged video</dfn> should be presumed to be in an ITU-defined color space. <ul> <li data-md> At below 720p, it is Recommendation ITU-R BT.601 <a data-link-type="biblio" href="#biblio-itu-r-bt601" title="Recommendation ITU-R BT.601-7 (03/2011), Studio encoding parameters of digital television for standard 4:3 and wide screen 16:9 aspect ratios">[ITU-R-BT.601]</a> <li data-md> At 720p, it is SMPTE ST 296 (same colorimetry as 709) <a data-link-type="biblio" href="#biblio-smpte296" title="ST 296:2012, 1280 × 720 Progressive Image 4:2:2 and 4:4:4 Sample Structure — Analog and Digital Representation and Analog Interface">[SMPTE296]</a> <li data-md> At 1080p, it is Recommendation ITU-R BT.709 <a data-link-type="biblio" href="#biblio-itu-r-bt709" title="Recommendation ITU-R BT.709-6 (06/2015), Parameter values for the HDTV standards for production and international programme exchange">[ITU-R-BT.709]</a> <li data-md> At 4k (UHDTV) and above, it is ITU-R BT.2020 <a data-link-type="biblio" href="#biblio-rec2020" title="Recommendation ITU-R BT.2020-2: Parameter values for ultra-high definition television systems for production and international programme exchange">[Rec.2020]</a> for SDR video </ul> <h2 class="heading settled" data-level="4" id="color-type">4. Representing Colors: the <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑥"><color></a> type<a class="self-link" href="#color-type"></a></h2> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section describes a type, it is primarily tested where that type is used. <ul class="wpt-tests-list"></ul> <hr> </details> Colors in CSS are represented as a list of color components, also sometimes called “channels”, representing axises in the color space. Each channel has a minimum and maximum value, and can take any value between those two. Additionally, every color is accompanied by an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="alpha channel | alpha component" id="alpha-channel">alpha component</dfn>, indicating how transparent it is, and thus how much of the backdrop one can see through the color. CSS has several syntaxes for specifying color values: <ul> <li data-md> the sRGB <a data-link-type="dfn" href="#hex-color" id="ref-for-hex-color">hex color notation</a> which represents the RGB and alpha channels in hexadecimal notation <li data-md> the various <a data-link-type="dfn" href="#color-functions" id="ref-for-color-functions">color functions</a> which can represent colors using a variety of color spaces and coordinate systems <li data-md> the constant <a data-link-type="dfn" href="#named-color" id="ref-for-named-color">named color</a> keywords <li data-md> the variable <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color"><system-color></a> keywords and <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor①">currentColor</a> keyword. </ul> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="color-functions">color functions</dfn> use CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#functional-notation" id="ref-for-functional-notation">functional notation</a> to represent colors in a variety of <a data-link-type="dfn" href="#color-space" id="ref-for-color-space③">color spaces</a> by specifying their channel coordinates. Some of these use a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cylindrical-polar-color">cylindrical polar color</dfn> model, specifying color by a <a class="production css" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue"><hue></a> angle, a central axis representing lightness (black-to-white), and a radius representing saturation or chroma (how far the color is from a neutral grey). The others use a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="rectangular-orthogonal-color">rectangular orthogonal color</dfn> model, specifying color using three orthogonal component axes. The <a data-link-type="dfn" href="#color-functions" id="ref-for-color-functions①">color functions</a> available in Level 4 are <ul> <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb">rgb()</a> and its <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba">rgba()</a> alias, which (like the <a data-link-type="dfn" href="#hex-color" id="ref-for-hex-color①">hex color notation</a>) specify sRGB colors directly by their red/green/blue/alpha channels. <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl">hsl()</a> and its <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla">hsla()</a> alias, which specify sRGB colors by hue, saturation, and lightness using the <a href="#the-hsl-notation">HSL</a> cylindrical coordinate model. <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb">hwb()</a>, which specifies an sRGB color by hue, whiteness, and blackness using the <a href="#the-hwb-notation">HWB</a> cylindrical coordinate model. <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab">lab()</a>, which specifies a CIELAB color by CIE Lightness and its a- and b-axis hue coordinates (red/green-ness, and yellow/blue-ness) using the <a href="#cie-lab">CIE LAB rectangular coordinate model</a>. <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch">lch()</a> , which specifies a CIELAB color by CIE Lightness, Chroma, and hue using the <a href="#cie-lab">CIE LCH cylindrical coordinate model</a> <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-oklab" id="ref-for-funcdef-oklab">oklab()</a>, which specifies an Oklab color by Oklab Lightness and its a- and b-axis hue coordinates (red/green-ness, and yellow/blue-ness) using the <a href="#ok-lab">Oklab</a> rectangular coordinate model. <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-oklch" id="ref-for-funcdef-oklch">oklch()</a> , which specifies an Oklab color by Oklab Lightness, Chroma, and hue using the <a href="#ok-lab">Oklch</a> cylindrical coordinate model. <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color">color()</a>, which allows specifying colors in a variety of color spaces including <a href="#predefined-sRGB">sRGB</a>, <a href="#predefined-sRGB-linear">Linear-light sRGB</a>, <a href="#predefined-display-p3">Display P3</a>, <a href="#predefined-a98-rgb">A98 RGB</a>, <a href="#predefined-prophoto-rgb">ProPhoto RGB</a>, <a href="#predefined-rec2020">ITU-R BT.2020-2</a>, and <a href="#predefined-xyz">CIE XYZ</a>. </ul> For easy reference in other specifications, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="opaque-black">opaque black</dfn> is defined as the color rgb(0 0 0 / 100%); <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="transparent-black">transparent black</dfn> is the same color, but fully transparent—i.e. rgb(0 0 0 / 0%). <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-named-color.html" title="css/css-color/parsing/color-computed-named-color.html">color-computed-named-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-named-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-named-color.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed.html" title="css/css-color/parsing/color-computed.html">color-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="4.1" id="color-syntax">4.1. The <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑦"><color></a> syntax<a class="self-link" href="#color-syntax"></a></h3> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section provides definitions used later, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> Colors in CSS are represented by the <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-color"><a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑧"><color></a></dfn> type: <pre class="prod highlight"><color> = <a class="production" data-link-type="type" href="#typedef-color-base" id="ref-for-typedef-color-base"><color-base></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> currentColor <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> <a class="production" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color①"><system-color></a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-color-base"><color-base></dfn> = <a class="production" data-link-type="type" href="#typedef-hex-color" id="ref-for-typedef-hex-color"><hex-color></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> <a class="production" data-link-type="type" href="#typedef-color-function" id="ref-for-typedef-color-function"><color-function></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> <a class="production" data-link-type="type" href="#typedef-named-color" id="ref-for-typedef-named-color"><named-color></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> transparent <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-color-function"><color-function></dfn> = <a class="production" data-link-type="function" href="#funcdef-rgb" id="ref-for-funcdef-rgb①"><<c- nf>rgb</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production" data-link-type="function" href="#funcdef-rgba" id="ref-for-funcdef-rgba①"><<c- nf>rgba</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <a class="production" data-link-type="function" href="#funcdef-hsl" id="ref-for-funcdef-hsl①"><<c- nf>hsl</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> <a class="production" data-link-type="function" href="#funcdef-hsla" id="ref-for-funcdef-hsla①"><<c- nf>hsla</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> <a class="production" data-link-type="function" href="#funcdef-hwb" id="ref-for-funcdef-hwb①"><<c- nf>hwb</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> <a class="production" data-link-type="function" href="#funcdef-lab" id="ref-for-funcdef-lab①"><<c- nf>lab</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> <a class="production" data-link-type="function" href="#funcdef-lch" id="ref-for-funcdef-lch①"><<c- nf>lch</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> <a class="production" data-link-type="function" href="#funcdef-oklab" id="ref-for-funcdef-oklab①"><<c- nf>oklab</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> <a class="production" data-link-type="function" href="#funcdef-oklch" id="ref-for-funcdef-oklch①"><<c- nf>oklch</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> <a class="production" data-link-type="function" href="#funcdef-color" id="ref-for-funcdef-color①"><<c- nf>color</c-><c- p>()</c->></a> </pre> An <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="absolute-color">absolute color</dfn> is a <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color⑨"><color></a> whose computed value has an absolute, colorimetric interpretation. This means that the value is not: <ul> <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor②">currentColor</a> (which depends on the value of the <a class="property css" data-link-type="property" href="#propdef-color" id="ref-for-propdef-color①">color</a> property) <li data-md> a <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color②"><system-color></a> (which depends on the color mode) </ul> The <a class="production css" data-link-type="function" href="#funcdef-hsl" id="ref-for-funcdef-hsl②"><hsl()></a>, <a class="production css" data-link-type="function" href="#funcdef-hsla" id="ref-for-funcdef-hsla②"><hsla()></a>, <a class="production css" data-link-type="function" href="#funcdef-hwb" id="ref-for-funcdef-hwb②"><hwb()></a>, <a class="production css" data-link-type="function" href="#funcdef-lch" id="ref-for-funcdef-lch②"><lch()></a>, and <a class="production css" data-link-type="function" href="#funcdef-oklch" id="ref-for-funcdef-oklch②"><oklch()></a> <a data-link-type="dfn" href="#color-functions" id="ref-for-color-functions②">color functions</a> are <a data-link-type="dfn" href="#cylindrical-polar-color" id="ref-for-cylindrical-polar-color">cylindrical polar color</a> representations using a <a class="production css" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue①"><hue></a> angle; the other color functions use <a data-link-type="dfn" href="#rectangular-orthogonal-color" id="ref-for-rectangular-orthogonal-color">rectangular orthogonal color</a> representations. <h4 class="heading settled" data-level="4.1.1" id="color-syntax-modern">4.1.1. Modern (Space-separated) Color Function Syntax<a class="self-link" href="#color-syntax-modern"></a></h4> All of the <a data-link-type="dfn" href="#absolute-color" id="ref-for-absolute-color">absolute color</a> functional forms first defined in this specification use the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="modern-color-syntax">modern color syntax</dfn>, meaning: <ul> <li data-md> color components are separated by whitespace <li data-md> the optional alpha term is separated by a solidus ("/") <li data-md> minimum required precision <a href="#serializing-color-values">when serializing</a> is defined, and may be greater than 8 bits per component <li data-md> the <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none">none</a> value is allowed, to represent <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component">missing components</a> <li data-md> components using <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②"><percentage></a> and <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③"><number></a> may be freely mixed </ul> <div class="example" id="example-modern-syntax"> <a class="self-link" href="#example-modern-syntax"></a> The following represents a saturated sRGB red that is 50% opaque: <pre class="highlight"><c- nf>rgb</c-><c- p>(</c-><c- m>100</c-><c- k>%</c-> <c- m>0</c-><c- k>%</c-> <c- m>0</c-><c- k>%</c-> / <c- m>50</c-><c- k>%</c-><c- p>)</c-></pre> </div> <h4 class="heading settled" data-level="4.1.2" id="color-syntax-legacy">4.1.2. Legacy (Comma-separated) Color Function Syntax<a class="self-link" href="#color-syntax-legacy"></a></h4> For Web compatibility, the syntactic forms of <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb②">rgb()</a>, <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba②">rgba()</a>, <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl③">hsl()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla③">hsla()</a>, (those defined in earlier specifications) also support a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="legacy-color-syntax">legacy color syntax</dfn> which has the following differences: <ul> <li data-md> color components are separated by commas (optionally preceded and/or followed by whitespace) <li data-md> non-opaque forms use a separate notation (for example <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla④">hsla()</a> rather than <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl④">hsl()</a>) and the alpha term is separated by commas (optionally preceded and/or followed by whitespace) <li data-md> minimum required precision is lower, 8 bits per component <li data-md> the <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none①">none</a> value is not allowed <li data-md> color components must be specified using either all-<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③"><percentage></a> or all-<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value④"><number></a>, they can not be mixed. </ul> <div class="example" id="example-rgba-legacy"> <a class="self-link" href="#example-rgba-legacy"></a> The following represents a saturated sRGB red that is 50% opaque: <pre class="highlight"><c- nf>rgba</c-><c- p>(</c-><c- m>100</c-><c- k>%</c-><c- p>,</c-> <c- m>0</c-><c- k>%</c-><c- p>,</c-> <c- m>0</c-><c- k>%</c-><c- p>,</c-> <c- m>0.5</c-><c- p>)</c-></pre> </div> For the <a data-link-type="dfn" href="#color-functions" id="ref-for-color-functions④">color functions</a> introduced in this or subsequent levels, where there is no Web compatibility issue, the <a data-link-type="dfn" href="#legacy-color-syntax" id="ref-for-legacy-color-syntax">legacy color syntax</a> is invalid. <h3 class="heading settled" data-level="4.2" id="alpha-syntax">4.2. Representing Transparency in Colors: the <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value"><alpha-value></a> syntax<a class="self-link" href="#alpha-syntax"></a></h3> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section provides definitions used later, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-for="<color>" data-dfn-type="type" data-export id="typedef-color-alpha-value"><alpha-value></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value⑤"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value④"><percentage></a> </pre> Unless otherwise specified, an <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①"><alpha-value></a> component of a color defaults to 100% when omitted. Values outside the range [0,1] are not invalid, but are clamped to that range at parsed-value time. <h3 class="heading settled" data-level="4.3" id="hue-syntax">4.3. Representing Cylindrical-coordinate Hues: the <a class="production css" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue②"><hue></a> syntax<a class="self-link" href="#hue-syntax"></a></h3> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section provides definitions used later, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> Hue is represented as an angle of the color circle (the rainbow, twisted around into a circle, and with purple added between violet and red). <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-hue"><hue></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value⑥"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#angle-value" id="ref-for-angle-value"><angle></a> </pre> Because this value is so often given in degrees, the argument can also be given as a number, which is interpreted as a number of degrees and is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#canonical-unit" id="ref-for-canonical-unit">canonical unit</a>. This number is normalized to the range [0,360). Note: The angles and spacing corresponding to particular hues depend on the color space. For example, in HSL and HWB, which use the sRGB color space, sRGB green is 120 degrees. In LCH, sRGB green is 134.39 degrees, display-p3 green is 136.01 degrees, a98-rgb green is 145.97 degrees and prophoto-rgb green is 141.04 degrees (because these are all different shades of green). <a class="production css" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue③"><hue></a> components are the most common components to become <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component">powerless</a>; any achromatic color will have a powerless hue component. <h3 class="heading settled" data-level="4.4" id="missing">4.4. “Missing” Color Components and the <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none②">none</a> Keyword<a class="self-link" href="#missing"></a></h3> In certain cases, a color can have one or more <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="missing|missing component" data-lt="missing color component" id="missing-color-component">missing color components</dfn>. In this specification, this happens automatically due to <a href="#hue-interpolation">hue-based interpolation</a> for some colors (such as <a class="css" data-link-type="maybe" href="#valdef-color-white" id="ref-for-valdef-color-white">white</a>); other specifications can define additional situations in which components are automatically missing. It can also be specified explicitly, by providing the keyword <dfn class="dfn-paneled css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-none">none</dfn> for a component in a color function. All color functions (with the exception of those using the <a data-link-type="dfn" href="#legacy-color-syntax" id="ref-for-legacy-color-syntax①">legacy color syntax</a>) allow any of their components to be specified as <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none③">none</a>. This should be done with care, and only when the particular effect of doing so is desired. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-color-function.html" title="css/css-color/parsing/color-computed-color-function.html">color-computed-color-function.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-color-function.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-color-function.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-hsl.html" title="css/css-color/parsing/color-computed-hsl.html">color-computed-hsl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-hsl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-hsl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-hwb.html" title="css/css-color/parsing/color-computed-hwb.html">color-computed-hwb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-hwb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-hwb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-lab.html" title="css/css-color/parsing/color-computed-lab.html">color-computed-lab.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-lab.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-lab.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-relative-color.html" title="css/css-color/parsing/color-computed-relative-color.html">color-computed-relative-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-relative-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-relative-color.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-rgb.html" title="css/css-color/parsing/color-computed-rgb.html">color-computed-rgb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-rgb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-rgb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-hsl.html" title="css/css-color/parsing/color-invalid-hsl.html">color-invalid-hsl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-hsl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-hsl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-rgb.html" title="css/css-color/parsing/color-invalid-rgb.html">color-invalid-rgb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-rgb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-rgb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-color-function.html" title="css/css-color/parsing/color-valid-color-function.html">color-valid-color-function.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-color-function.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-color-function.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-color-mix-function.html" title="css/css-color/parsing/color-valid-color-mix-function.html">color-valid-color-mix-function.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-color-mix-function.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-color-mix-function.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-hsl.html" title="css/css-color/parsing/color-valid-hsl.html">color-valid-hsl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-hsl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-hsl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-hwb.html" title="css/css-color/parsing/color-valid-hwb.html">color-valid-hwb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-hwb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-hwb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-lab.html" title="css/css-color/parsing/color-valid-lab.html">color-valid-lab.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-lab.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-lab.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-relative-color.html" title="css/css-color/parsing/color-valid-relative-color.html">color-valid-relative-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-relative-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-relative-color.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-rgb.html" title="css/css-color/parsing/color-valid-rgb.html">color-valid-rgb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-rgb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-rgb.html">(source)</a> </ul> </details> For handling of <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component①">missing components</a> in situations which combine two colors, such as color interpolation, see <a href="#interpolation-missing">§ 12.2 Interpolating with Missing Components</a>. For all other purposes, a <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component②">missing component</a> behaves as a zero value, in the appropriate unit for that component: 0, 0%, or 0deg. This includes rendering the color directly, converting it to another color space, performing computations on the color component values, etc. If a color with a <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component③">missing component</a> is serialized or otherwise presented directly to an author, then for <a data-link-type="dfn" href="#legacy-color-syntax" id="ref-for-legacy-color-syntax②">legacy color syntax</a> it represents that component as a zero value; otherwise, it represents that component as being the <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none④">none</a> keyword. <div class="example non-normative" id="ex-missing-hue"> <a class="self-link" href="#ex-missing-hue"></a> A missing hue is common when interpolating in cylindrical color spaces. For example, using the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-5/#funcdef-color-mix" id="ref-for-funcdef-color-mix">color-mix()</a> function specified in <a data-link-type="biblio" href="#biblio-css-color-5" title="CSS Color Module Level 5">[CSS-COLOR-5]</a> one could write color-mix(in hsl, white 30%, green 70%). Since <a class="css" data-link-type="maybe" href="#valdef-color-white" id="ref-for-valdef-color-white①">white</a> is an achromatic color, it has a <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component④">missing</a> hue when expressed in <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑤">hsl()</a> (effectively hsl(none 0% 100%)), since any hue will produce the same color) which means that the color-mix function will treat it as having the same hue as <a class="css" data-link-type="maybe" href="#valdef-color-green" id="ref-for-valdef-color-green">green</a> (effectively hsl(120deg 0% 100%)), and then interpolate based on those components. The result will be a color that truly looks like a blend of green and white, rather than perhaps looking reddish (if <a class="css" data-link-type="maybe" href="#valdef-color-white" id="ref-for-valdef-color-white②">white</a>s hue was defaulted to 0deg). </div> <div class="example" id="ex-grayscale-with-missing"> <a class="self-link" href="#ex-grayscale-with-missing"></a> Explicitly specifying missing components can be useful to achieve an effect where you only want to interpolate certain components of a color. For example, to animate a color to "grayscale", no matter what the color is, one can interpolate it with oklch(none 0 none). This will take the hue and lightness from the starting color, but animate its chroma down to 0, rendering it into an equal-lightness gray with a steady hue across the whole animation. Doing this manually would require matching the hue and lightness of the starting color explicitly. </div> <h4 class="heading settled" data-level="4.4.1" id="powerless">4.4.1. “Powerless” Color Components<a class="self-link" href="#powerless"></a></h4> Individual color syntaxes can specify that, in some cases, a given component of their syntax becomes a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="powerless|powerless component" id="powerless-color-component">powerless color component</dfn>. This indicates that the value of the component doesn’t affect the rendered color; any value you give it will result in the same color displayed in the screen. For example, in <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑥">hsl()</a>, the hue component is <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component②">powerless</a> when the saturation component is 0%; a 0% saturation indicates a grayscale color, which has no hue at all, so 0deg and 180deg, or any other angle, will give the exact same result. If a <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component③">powerless component</a> is manually specified, it acts as normal; the fact that it’s powerless has no effect. However, if a color is automatically produced by color space conversion, then any powerless components in the result must instead be set to <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component⑤">missing</a>, instead of whatever value was produced by the conversion process. User agents may treat a component as <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component⑥">powerless</a> if the color is "sufficiently close" to the precise conditions specified. For example, a gray color converted into <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch③">lch()</a> may, due to numerical errors, have an extremely small chroma rather than precisely 0%; this can, at the user agent’s discretion, still treat the hue component as powerless. It is intentionally unspecified exactly what "sufficiently close" means for this purpose. <h3 class="heading settled" data-level="4.5" id="parse-color">4.5. Parsing a <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①⓪"><color></a> Value<a class="self-link" href="#parse-color"></a></h3> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section provides a definition referenced elsewhere, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> <div class="algorithm" data-algorithm="parse a CSS <color> value"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="parse-a-css-color-value">parse a CSS <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①①"><color></a> value</dfn>, given a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string">string</a> <var>input</var>, and an optional context <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element" id="ref-for-concept-element">element</a> <var>element</var>: <ol> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar">Parse</a> <var>input</var> as a <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①②"><color></a>. If the result is failure, return failure; otherwise, let <var>color</var> be the result. <li data-md> Let <var>used color</var> be the result of <a href="#resolving-color-values">resolving</a> <var>color</var> to a <a data-link-type="dfn" href="#used-color" id="ref-for-used-color">used color</a>. If the value of other properties on the element a <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①③"><color></a> is on is required to do the resolution (such as resolving a <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor③">currentcolor</a> or <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors">system color</a>), use <var>element</var> if it was passed, or the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#initial-value" id="ref-for-initial-value">initial values</a> of the properties if not. <li data-md> Return <var>used color</var>. </ol> </div> Note: This algorithm is not intented to parse a CSS <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①④"><color></a> value specified in a CSS stylesheet or with a CSSOM interface, but in other places like HTML attributes or Canvas interfaces. <h2 class="heading settled" data-level="5" id="numeric-srgb">5. sRGB Colors<a class="self-link" href="#numeric-srgb"></a></h2> CSS colors in the <a data-link-type="dfn" href="#sRGB-space" id="ref-for-sRGB-space">sRGB</a> color space are represented by a triplet of values—red, green, and blue—identifying a point in the sRGB color space <a data-link-type="biblio" href="#biblio-srgb" title="Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB">[SRGB]</a>. This is an internationally-recognized, device-independent color space, and so is useful for specifying colors that will be displayed on a computer screen, but is also useful for specifying colors on other types of devices, like printers. CSS also allows the use of non-sRGB <a data-link-type="dfn" href="#color-space" id="ref-for-color-space④">color space</a>s, as described in <a href="#predefined">§ 10 Predefined Color Spaces</a>. CSS provides several methods of directly specifying an sRGB color: <a data-link-type="dfn" href="#hex-color" id="ref-for-hex-color②">hex colors</a>, <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb③">rgb()</a>/<a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba③">rgba()</a> <a data-link-type="dfn" href="#color-functions" id="ref-for-color-functions⑤">color functions</a>, <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑦">hsl()</a>/<a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla⑤">hsla()</a> color functions, <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb③">hwb()</a> color function, <a data-link-type="dfn" href="#named-color" id="ref-for-named-color①">named colors</a>, and the <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent">transparent</a> keyword. <h3 class="heading settled" data-level="5.1" id="rgb-functions">5.1. The RGB functions: <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb④">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba④">rgba()</a><a class="self-link" href="#rgb-functions"></a></h3> The <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑤">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba⑤">rgba()</a> functions define an sRGB color by specifying the r, g and b (red, green, and blue) channels directly. Their syntax is: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-rgb"><c- nf>rgb</c-><c- p>()</c-></dfn> = <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-legacy-rgb-syntax" id="ref-for-typedef-legacy-rgb-syntax"><legacy-rgb-syntax></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> <a class="production" data-link-type="type" href="#typedef-modern-rgb-syntax" id="ref-for-typedef-modern-rgb-syntax"><modern-rgb-syntax></a> <c- p>]</c-> <dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-rgba"><c- nf>rgba</c-><c- p>()</c-></dfn> = <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-legacy-rgba-syntax" id="ref-for-typedef-legacy-rgba-syntax"><legacy-rgba-syntax></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> <a class="production" data-link-type="type" href="#typedef-modern-rgba-syntax" id="ref-for-typedef-modern-rgba-syntax"><modern-rgba-syntax></a> <c- p>]</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-legacy-rgb-syntax"><a class="production" data-link-type="type" href="#typedef-legacy-rgb-syntax" id="ref-for-typedef-legacy-rgb-syntax①"><legacy-rgb-syntax></a></dfn> = <c- nf>rgb</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value⑤"><percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#<c- p>{</c-><c- m>3</c-><c- p>}</c-></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value②"><alpha-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <c- p>)</c-> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> <c- nf>rgb</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value⑦"><number></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma①">#<c- p>{</c-><c- m>3</c-><c- p>}</c-></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma①"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value③"><alpha-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-legacy-rgba-syntax"><a class="production" data-link-type="type" href="#typedef-legacy-rgba-syntax" id="ref-for-typedef-legacy-rgba-syntax①"><legacy-rgba-syntax></a></dfn> = <c- nf>rgba</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value⑥"><percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma②">#<c- p>{</c-><c- m>3</c-><c- p>}</c-></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma②"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value④"><alpha-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> <c- p>)</c-> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> <c- nf>rgba</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value⑧"><number></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma③">#<c- p>{</c-><c- m>3</c-><c- p>}</c-></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma③"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value⑤"><alpha-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-modern-rgb-syntax"><a class="production" data-link-type="type" href="#typedef-modern-rgb-syntax" id="ref-for-typedef-modern-rgb-syntax①"><modern-rgb-syntax></a></dfn> = <c- nf>rgb</c-><c- p>(</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value⑨"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value⑦"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> none<c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num"><c- p>{</c-><c- m>3</c-><c- p>}</c-></a> <c- p>[</c-> / <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value⑥"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> none<c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-modern-rgba-syntax"><a class="production" data-link-type="type" href="#typedef-modern-rgba-syntax" id="ref-for-typedef-modern-rgba-syntax①"><modern-rgba-syntax></a></dfn> = <c- nf>rgba</c-><c- p>(</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①⓪"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value⑧"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> none<c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num①"><c- p>{</c-><c- m>3</c-><c- p>}</c-></a> <c- p>[</c-> / <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value⑦"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑥">|</a> none<c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> <c- p>)</c-> </pre> <table id="prr-srgb"> <tbody> <tr> <th>Percentages <td>Allowed for r, g and b <tr> <th>Percent reference range <td> For r, g and b: 0% = 0.0, 100% = 255.0 For alpha: 0% = 0.0, 100% = 1.0 </table> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgb-001.html" title="css/css-color/rgb-001.html">rgb-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgb-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgb-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgb-002.html" title="css/css-color/rgb-002.html">rgb-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgb-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgb-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgb-003.html" title="css/css-color/rgb-003.html">rgb-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgb-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgb-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgb-004.html" title="css/css-color/rgb-004.html">rgb-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgb-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgb-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgb-005.html" title="css/css-color/rgb-005.html">rgb-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgb-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgb-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgb-006.html" title="css/css-color/rgb-006.html">rgb-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgb-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgb-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgb-007.html" title="css/css-color/rgb-007.html">rgb-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgb-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgb-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgb-008.html" title="css/css-color/rgb-008.html">rgb-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgb-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgb-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/out-of-gamut-legacy-rgb.html" title="css/css-color/out-of-gamut-legacy-rgb.html">out-of-gamut-legacy-rgb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/out-of-gamut-legacy-rgb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/out-of-gamut-legacy-rgb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-rgb.html" title="css/css-color/parsing/color-computed-rgb.html">color-computed-rgb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-rgb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-rgb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-rgb.html" title="css/css-color/parsing/color-invalid-rgb.html">color-invalid-rgb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-rgb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-rgb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-rgb.html" title="css/css-color/parsing/color-valid-rgb.html">color-valid-rgb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-rgb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-rgb.html">(source)</a> </ul> </details> The first three arguments specify the r, g and b (red, green, and blue) channels of the color, respectively. 0% represents the minimum value for that color channel in the sRGB gamut, and 100% represents the maximum value. The percentage reference range of the color channels comes from the historical fact that many graphics engines stored the color channels internally as a single byte, which can hold integers between 0 and 255. Implementations should honor the precision of the channel as authored or calculated wherever possible. If this is not possible, the channel should be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>. The final argument, the <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value⑧"><alpha-value></a>, specifies the alpha of the color. If omitted, it defaults to 100%. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/background-color-rgb-001.html" title="css/css-color/background-color-rgb-001.html">background-color-rgb-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/background-color-rgb-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/background-color-rgb-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/background-color-rgb-002.html" title="css/css-color/background-color-rgb-002.html">background-color-rgb-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/background-color-rgb-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/background-color-rgb-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/background-color-rgb-003.html" title="css/css-color/background-color-rgb-003.html">background-color-rgb-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/background-color-rgb-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/background-color-rgb-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> Values outside these ranges are not invalid, but are clamped to the ranges defined here at parsed-value time. For historical reasons, <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑥">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba⑥">rgba()</a> also support a <a data-link-type="dfn" href="#legacy-color-syntax" id="ref-for-legacy-color-syntax③">legacy color syntax</a>. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgba-001.html" title="css/css-color/rgba-001.html">rgba-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgba-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgba-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgba-002.html" title="css/css-color/rgba-002.html">rgba-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgba-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgba-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgba-003.html" title="css/css-color/rgba-003.html">rgba-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgba-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgba-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgba-004.html" title="css/css-color/rgba-004.html">rgba-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgba-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgba-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgba-005.html" title="css/css-color/rgba-005.html">rgba-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgba-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgba-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgba-006.html" title="css/css-color/rgba-006.html">rgba-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgba-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgba-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgba-007.html" title="css/css-color/rgba-007.html">rgba-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgba-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgba-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rgba-008.html" title="css/css-color/rgba-008.html">rgba-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rgba-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rgba-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="5.2" id="hex-notation">5.2. The RGB Hexadecimal Notations: #RRGGBB<a class="self-link" href="#hex-notation"></a></h3> The CSS <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="hex color | hex color notation" id="hex-color">hex color notation</dfn> allows an sRGB color to be specified by giving the channels as hexadecimal numbers, which is similar to how colors are often written directly in computer code. It’s also shorter than writing the same color out in <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑦">rgb()</a> notation. The syntax of a <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-hex-color"><hex-color></dfn> is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-hash-token" id="ref-for-typedef-hash-token"><hash-token></a> token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00). The number of hex digits given determines how to decode the hex notation into an RGB color: <dl> <dt>6 digits <dd> The first pair of digits, interpreted as a hexadecimal number, specifies the red channel of the color, where 00 represents the minimum value and ff (255 in decimal) represents the maximum. The next pair of digits, interpreted in the same way, specifies the green channel, and the last pair specifies the blue. The alpha channel of the color is fully opaque. <div class="example" id="ex-hex6"><a class="self-link" href="#ex-hex6"></a> In other words, #00ff00 represents the same color as rgb(0 255 0) (a lime green). </div> <dt>8 digits <dd> The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where 00 represents a fully transparent color and ff represent a fully opaque color. <div class="example" id="ex-hex8"><a class="self-link" href="#ex-hex8"></a> In other words, #0000ffcc represents the same color as rgb(0 0 100% / 80%) (a slightly-transparent blue). </div> <dt>3 digits <dd> This is a shorter variant of the 6-digit notation. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next two digits represent the green and blue channels, respectively, in the same way. The alpha channel of the color is fully opaque. <div class="example" id="ex-hex3"><a class="self-link" href="#ex-hex3"></a> This syntax is often explained by saying that it’s identical to a 6-digit notation obtained by "duplicating" all of the digits. For example, the notation #123 specifies the same color as the notation #112233. This method of specifying a color has lower "resolution" than the 6-digit notation; there are only 4096 possible colors expressible in the 3-digit hex syntax, as opposed to approximately 17 million in 6-digit hex syntax. </div> <dt>4 digits <dd> This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively. </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hex-001.html" title="css/css-color/hex-001.html">hex-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hex-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hex-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hex-002.html" title="css/css-color/hex-002.html">hex-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hex-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hex-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hex-003.html" title="css/css-color/hex-003.html">hex-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hex-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hex-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hex-004.html" title="css/css-color/hex-004.html">hex-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hex-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hex-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/border-bottom-color.xht" title="css/css-color/border-bottom-color.xht">border-bottom-color.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/border-bottom-color.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/border-bottom-color.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/border-left-color.xht" title="css/css-color/border-left-color.xht">border-left-color.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/border-left-color.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/border-left-color.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/border-right-color.xht" title="css/css-color/border-right-color.xht">border-right-color.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/border-right-color.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/border-right-color.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/border-top-color.xht" title="css/css-color/border-top-color.xht">border-top-color.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/border-top-color.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/border-top-color.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-hex-color.html" title="css/css-color/parsing/color-computed-hex-color.html">color-computed-hex-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-hex-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-hex-color.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-hex-color.html" title="css/css-color/parsing/color-invalid-hex-color.html">color-invalid-hex-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-hex-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-hex-color.html">(source)</a> </ul> </details> <h2 class="heading settled" data-level="6" id="color-keywords">6. Color Keywords<a class="self-link" href="#color-keywords"></a></h2> In addition to the various numeric syntaxes for <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①⑤"><color></a>s, CSS defines several sets of color keywords that can be used instead—each with their own advantages or use cases. <h3 class="heading settled" data-level="6.1" id="named-colors">6.1. Named Colors<a class="self-link" href="#named-colors"></a></h3> CSS defines a large set of <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="named color" id="named-color">named colors</dfn>, so that common colors can be written and read more easily. A <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-named-color"><named-color></dfn> is written as an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident"><ident></a>, accepted anywhere a <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①⑥"><color></a> is. As usual for CSS-defined <ident>s, all of these keywords are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>. The names resolve to colors in sRGB. 16 of CSS’s named colors come from the VGA palette originally, and were then adopted into HTML: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Most of the rest come from one version of the X11 color system, used in Unix-derived systems to specify colors for the console, and were then adopted into SVG. Note: these color names are standardized here, not because they are good, but because their use and implementation has been widespread for decades and the standard needs to reflect reality. Indeed, it is often hard to imagine what each name will look like (hence the list below); the names are not evenly distributed throughout the sRGB color volume, the names are not even internally consistent ( <a class="css" data-link-type="maybe" href="#valdef-color-darkgray" id="ref-for-valdef-color-darkgray">darkgray</a> is lighter than <a class="css" data-link-type="maybe" href="#valdef-color-gray" id="ref-for-valdef-color-gray">gray</a>, while <a class="css" data-link-type="maybe" href="#valdef-color-lightpink" id="ref-for-valdef-color-lightpink">lightpink</a> is darker than <a class="css" data-link-type="maybe" href="#valdef-color-pink" id="ref-for-valdef-color-pink">pink</a>), and some names (such as <a class="css" data-link-type="maybe" href="#valdef-color-indianred" id="ref-for-valdef-color-indianred">indianred</a>, which was originally named after a red pigment from India), have been found to be offensive. Thus, their use is not encouraged. (Two special color values, <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent①">transparent</a> and <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor④">currentcolor</a>, are specially defined in their own sections.) The following table defines all of the opaque named colors, by giving equivalent numeric specifications in the other color syntaxes. <table class="named-color-table"> <thead> <tr> <th>Named <th>Numeric <th>Color name <th>Hex rgb <th>Decimal <tbody> <tr> <td style="background:aliceblue"> <td style="background:#f0f8ff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-aliceblue">aliceblue</dfn> <td>#f0f8ff <td>240 248 255 <tr> <td style="background:antiquewhite"> <td style="background:#faebd7"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-antiquewhite">antiquewhite</dfn> <td>#faebd7 <td>250 235 215 <tr> <td style="background:aqua"> <td style="background:#00ffff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-aqua">aqua</dfn> <td>#00ffff <td>0 255 255 <tr> <td style="background:aquamarine"> <td style="background:#7fffd4"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-aquamarine">aquamarine</dfn> <td>#7fffd4 <td>127 255 212 <tr> <td style="background:azure"> <td style="background:#f0ffff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-azure">azure</dfn> <td>#f0ffff <td>240 255 255 <tr> <td style="background:beige"> <td style="background:#f5f5dc"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-beige">beige</dfn> <td>#f5f5dc <td>245 245 220 <tr> <td style="background:bisque"> <td style="background:#ffe4c4"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-bisque">bisque</dfn> <td>#ffe4c4 <td>255 228 196 <tr> <td style="background:black"> <td style="background:#000000"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-black">black</dfn> <td>#000000 <td>0 0 0 <tr> <td style="background:blanchedalmond"> <td style="background:#ffebcd"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-blanchedalmond">blanchedalmond</dfn> <td>#ffebcd <td>255 235 205 <tr> <td style="background:blue"> <td style="background:#0000ff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-blue">blue</dfn> <td>#0000ff <td>0 0 255 <tr> <td style="background:blueviolet"> <td style="background:#8a2be2"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-blueviolet">blueviolet</dfn> <td>#8a2be2 <td>138 43 226 <tr> <td style="background:brown"> <td style="background:#a52a2a"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-brown">brown</dfn> <td>#a52a2a <td>165 42 42 <tr> <td style="background:burlywood"> <td style="background:#deb887"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-burlywood">burlywood</dfn> <td>#deb887 <td>222 184 135 <tr> <td style="background:cadetblue"> <td style="background:#5f9ea0"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-cadetblue">cadetblue</dfn> <td>#5f9ea0 <td>95 158 160 <tr> <td style="background:chartreuse"> <td style="background:#7fff00"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-chartreuse">chartreuse</dfn> <td>#7fff00 <td>127 255 0 <tr> <td style="background:chocolate"> <td style="background:#d2691e"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-chocolate">chocolate</dfn> <td>#d2691e <td>210 105 30 <tr> <td style="background:coral"> <td style="background:#ff7f50"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-coral">coral</dfn> <td>#ff7f50 <td>255 127 80 <tr> <td style="background:cornflowerblue"> <td style="background:#6495ed"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-cornflowerblue">cornflowerblue</dfn> <td>#6495ed <td>100 149 237 <tr> <td style="background:cornsilk"> <td style="background:#fff8dc"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-cornsilk">cornsilk</dfn> <td>#fff8dc <td>255 248 220 <tr> <td style="background:crimson"> <td style="background:#dc143c"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-crimson">crimson</dfn> <td>#dc143c <td>220 20 60 <tr> <td style="background:cyan"> <td style="background:#00ffff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-cyan">cyan</dfn> <td>#00ffff <td>0 255 255 <tr> <td style="background:darkblue"> <td style="background:#00008b"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkblue">darkblue</dfn> <td>#00008b <td>0 0 139 <tr> <td style="background:darkcyan"> <td style="background:#008b8b"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkcyan">darkcyan</dfn> <td>#008b8b <td>0 139 139 <tr> <td style="background:darkgoldenrod"> <td style="background:#b8860b"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkgoldenrod">darkgoldenrod</dfn> <td>#b8860b <td>184 134 11 <tr> <td style="background:darkgray"> <td style="background:#a9a9a9"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkgray">darkgray</dfn> <td>#a9a9a9 <td>169 169 169 <tr> <td style="background:darkgreen"> <td style="background:#006400"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkgreen">darkgreen</dfn> <td>#006400 <td>0 100 0 <tr> <td style="background:darkgrey"> <td style="background:#a9a9a9"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkgrey">darkgrey</dfn> <td>#a9a9a9 <td>169 169 169 <tr> <td style="background:darkkhaki"> <td style="background:#bdb76b"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkkhaki">darkkhaki</dfn> <td>#bdb76b <td>189 183 107 <tr> <td style="background:darkmagenta"> <td style="background:#8b008b"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkmagenta">darkmagenta</dfn> <td>#8b008b <td>139 0 139 <tr> <td style="background:darkolivegreen"> <td style="background:#556b2f"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkolivegreen">darkolivegreen</dfn> <td>#556b2f <td>85 107 47 <tr> <td style="background:darkorange"> <td style="background:#ff8c00"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkorange">darkorange</dfn> <td>#ff8c00 <td>255 140 0 <tr> <td style="background:darkorchid"> <td style="background:#9932cc"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkorchid">darkorchid</dfn> <td>#9932cc <td>153 50 204 <tr> <td style="background:darkred"> <td style="background:#8b0000"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkred">darkred</dfn> <td>#8b0000 <td>139 0 0 <tr> <td style="background:darksalmon"> <td style="background:#e9967a"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darksalmon">darksalmon</dfn> <td>#e9967a <td>233 150 122 <tr> <td style="background:darkseagreen"> <td style="background:#8fbc8f"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkseagreen">darkseagreen</dfn> <td>#8fbc8f <td>143 188 143 <tr> <td style="background:darkslateblue"> <td style="background:#483d8b"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkslateblue">darkslateblue</dfn> <td>#483d8b <td>72 61 139 <tr> <td style="background:darkslategray"> <td style="background:#2f4f4f"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkslategray">darkslategray</dfn> <td>#2f4f4f <td>47 79 79 <tr> <td style="background:darkslategrey"> <td style="background:#2f4f4f"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkslategrey">darkslategrey</dfn> <td>#2f4f4f <td>47 79 79 <tr> <td style="background:darkturquoise"> <td style="background:#00ced1"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkturquoise">darkturquoise</dfn> <td>#00ced1 <td>0 206 209 <tr> <td style="background:darkviolet"> <td style="background:#9400d3"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-darkviolet">darkviolet</dfn> <td>#9400d3 <td>148 0 211 <tr> <td style="background:deeppink"> <td style="background:#ff1493"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-deeppink">deeppink</dfn> <td>#ff1493 <td>255 20 147 <tr> <td style="background:deepskyblue"> <td style="background:#00bfff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-deepskyblue">deepskyblue</dfn> <td>#00bfff <td>0 191 255 <tr> <td style="background:dimgray"> <td style="background:#696969"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-dimgray">dimgray</dfn> <td>#696969 <td>105 105 105 <tr> <td style="background:dimgrey"> <td style="background:#696969"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-dimgrey">dimgrey</dfn> <td>#696969 <td>105 105 105 <tr> <td style="background:dodgerblue"> <td style="background:#1e90ff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-dodgerblue">dodgerblue</dfn> <td>#1e90ff <td>30 144 255 <tr> <td style="background:firebrick"> <td style="background:#b22222"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-firebrick">firebrick</dfn> <td>#b22222 <td>178 34 34 <tr> <td style="background:floralwhite"> <td style="background:#fffaf0"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-floralwhite">floralwhite</dfn> <td>#fffaf0 <td>255 250 240 <tr> <td style="background:forestgreen"> <td style="background:#228b22"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-forestgreen">forestgreen</dfn> <td>#228b22 <td>34 139 34 <tr> <td style="background:fuchsia"> <td style="background:#ff00ff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-fuchsia">fuchsia</dfn> <td>#ff00ff <td>255 0 255 <tr> <td style="background:gainsboro"> <td style="background:#dcdcdc"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-gainsboro">gainsboro</dfn> <td>#dcdcdc <td>220 220 220 <tr> <td style="background:ghostwhite"> <td style="background:#f8f8ff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-ghostwhite">ghostwhite</dfn> <td>#f8f8ff <td>248 248 255 <tr> <td style="background:gold"> <td style="background:#ffd700"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-gold">gold</dfn> <td>#ffd700 <td>255 215 0 <tr> <td style="background:goldenrod"> <td style="background:#daa520"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-goldenrod">goldenrod</dfn> <td>#daa520 <td>218 165 32 <tr> <td style="background:gray"> <td style="background:#808080"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-gray">gray</dfn> <td>#808080 <td>128 128 128 <tr> <td style="background:green"> <td style="background:#008000"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-green">green</dfn> <td>#008000 <td>0 128 0 <tr> <td style="background:greenyellow"> <td style="background:#adff2f"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-greenyellow">greenyellow</dfn> <td>#adff2f <td>173 255 47 <tr> <td style="background:grey"> <td style="background:#808080"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-grey">grey</dfn> <td>#808080 <td>128 128 128 <tr> <td style="background:honeydew"> <td style="background:#f0fff0"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-honeydew">honeydew</dfn> <td>#f0fff0 <td>240 255 240 <tr> <td style="background:hotpink"> <td style="background:#ff69b4"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-hotpink">hotpink</dfn> <td>#ff69b4 <td>255 105 180 <tr> <td style="background:indianred"> <td style="background:#cd5c5c"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-indianred">indianred</dfn> <td>#cd5c5c <td>205 92 92 <tr> <td style="background:indigo"> <td style="background:#4b0082"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-indigo">indigo</dfn> <td>#4b0082 <td>75 0 130 <tr> <td style="background:ivory"> <td style="background:#fffff0"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-ivory">ivory</dfn> <td>#fffff0 <td>255 255 240 <tr> <td style="background:khaki"> <td style="background:#f0e68c"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-khaki">khaki</dfn> <td>#f0e68c <td>240 230 140 <tr> <td style="background:lavender"> <td style="background:#e6e6fa"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lavender">lavender</dfn> <td>#e6e6fa <td>230 230 250 <tr> <td style="background:lavenderblush"> <td style="background:#fff0f5"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lavenderblush">lavenderblush</dfn> <td>#fff0f5 <td>255 240 245 <tr> <td style="background:lawngreen"> <td style="background:#7cfc00"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lawngreen">lawngreen</dfn> <td>#7cfc00 <td>124 252 0 <tr> <td style="background:lemonchiffon"> <td style="background:#fffacd"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lemonchiffon">lemonchiffon</dfn> <td>#fffacd <td>255 250 205 <tr> <td style="background:lightblue"> <td style="background:#add8e6"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightblue">lightblue</dfn> <td>#add8e6 <td>173 216 230 <tr> <td style="background:lightcoral"> <td style="background:#f08080"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightcoral">lightcoral</dfn> <td>#f08080 <td>240 128 128 <tr> <td style="background:lightcyan"> <td style="background:#e0ffff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightcyan">lightcyan</dfn> <td>#e0ffff <td>224 255 255 <tr> <td style="background:lightgoldenrodyellow"> <td style="background:#fafad2"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightgoldenrodyellow">lightgoldenrodyellow</dfn> <td>#fafad2 <td>250 250 210 <tr> <td style="background:lightgray"> <td style="background:#d3d3d3"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightgray">lightgray</dfn> <td>#d3d3d3 <td>211 211 211 <tr> <td style="background:lightgreen"> <td style="background:#90ee90"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightgreen">lightgreen</dfn> <td>#90ee90 <td>144 238 144 <tr> <td style="background:lightgrey"> <td style="background:#d3d3d3"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightgrey">lightgrey</dfn> <td>#d3d3d3 <td>211 211 211 <tr> <td style="background:lightpink"> <td style="background:#ffb6c1"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightpink">lightpink</dfn> <td>#ffb6c1 <td>255 182 193 <tr> <td style="background:lightsalmon"> <td style="background:#ffa07a"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightsalmon">lightsalmon</dfn> <td>#ffa07a <td>255 160 122 <tr> <td style="background:lightseagreen"> <td style="background:#20b2aa"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightseagreen">lightseagreen</dfn> <td>#20b2aa <td>32 178 170 <tr> <td style="background:lightskyblue"> <td style="background:#87cefa"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightskyblue">lightskyblue</dfn> <td>#87cefa <td>135 206 250 <tr> <td style="background:lightslategray"> <td style="background:#778899"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightslategray">lightslategray</dfn> <td>#778899 <td>119 136 153 <tr> <td style="background:lightslategrey"> <td style="background:#778899"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightslategrey">lightslategrey</dfn> <td>#778899 <td>119 136 153 <tr> <td style="background:lightsteelblue"> <td style="background:#b0c4de"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightsteelblue">lightsteelblue</dfn> <td>#b0c4de <td>176 196 222 <tr> <td style="background:lightyellow"> <td style="background:#ffffe0"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lightyellow">lightyellow</dfn> <td>#ffffe0 <td>255 255 224 <tr> <td style="background:lime"> <td style="background:#00ff00"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-lime">lime</dfn> <td>#00ff00 <td>0 255 0 <tr> <td style="background:limegreen"> <td style="background:#32cd32"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-limegreen">limegreen</dfn> <td>#32cd32 <td>50 205 50 <tr> <td style="background:linen"> <td style="background:#faf0e6"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-linen">linen</dfn> <td>#faf0e6 <td>250 240 230 <tr> <td style="background:magenta"> <td style="background:#ff00ff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-magenta">magenta</dfn> <td>#ff00ff <td>255 0 255 <tr> <td style="background:maroon"> <td style="background:#800000"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-maroon">maroon</dfn> <td>#800000 <td>128 0 0 <tr> <td style="background:mediumaquamarine"> <td style="background:#66cdaa"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mediumaquamarine">mediumaquamarine</dfn> <td>#66cdaa <td>102 205 170 <tr> <td style="background:mediumblue"> <td style="background:#0000cd"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mediumblue">mediumblue</dfn> <td>#0000cd <td>0 0 205 <tr> <td style="background:mediumorchid"> <td style="background:#ba55d3"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mediumorchid">mediumorchid</dfn> <td>#ba55d3 <td>186 85 211 <tr> <td style="background:mediumpurple"> <td style="background:#9370db"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mediumpurple">mediumpurple</dfn> <td>#9370db <td>147 112 219 <tr> <td style="background:mediumseagreen"> <td style="background:#3cb371"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mediumseagreen">mediumseagreen</dfn> <td>#3cb371 <td>60 179 113 <tr> <td style="background:mediumslateblue"> <td style="background:#7b68ee"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mediumslateblue">mediumslateblue</dfn> <td>#7b68ee <td>123 104 238 <tr> <td style="background:mediumspringgreen"> <td style="background:#00fa9a"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mediumspringgreen">mediumspringgreen</dfn> <td>#00fa9a <td>0 250 154 <tr> <td style="background:mediumturquoise"> <td style="background:#48d1cc"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mediumturquoise">mediumturquoise</dfn> <td>#48d1cc <td>72 209 204 <tr> <td style="background:mediumvioletred"> <td style="background:#c71585"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mediumvioletred">mediumvioletred</dfn> <td>#c71585 <td>199 21 133 <tr> <td style="background:midnightblue"> <td style="background:#191970"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-midnightblue">midnightblue</dfn> <td>#191970 <td>25 25 112 <tr> <td style="background:mintcream"> <td style="background:#f5fffa"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mintcream">mintcream</dfn> <td>#f5fffa <td>245 255 250 <tr> <td style="background:mistyrose"> <td style="background:#ffe4e1"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-mistyrose">mistyrose</dfn> <td>#ffe4e1 <td>255 228 225 <tr> <td style="background:moccasin"> <td style="background:#ffe4b5"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-moccasin">moccasin</dfn> <td>#ffe4b5 <td>255 228 181 <tr> <td style="background:navajowhite"> <td style="background:#ffdead"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-navajowhite">navajowhite</dfn> <td>#ffdead <td>255 222 173 <tr> <td style="background:navy"> <td style="background:#000080"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-navy">navy</dfn> <td>#000080 <td>0 0 128 <tr> <td style="background:oldlace"> <td style="background:#fdf5e6"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-oldlace">oldlace</dfn> <td>#fdf5e6 <td>253 245 230 <tr> <td style="background:olive"> <td style="background:#808000"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-olive">olive</dfn> <td>#808000 <td>128 128 0 <tr> <td style="background:olivedrab"> <td style="background:#6b8e23"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-olivedrab">olivedrab</dfn> <td>#6b8e23 <td>107 142 35 <tr> <td style="background:orange"> <td style="background:#ffa500"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-orange">orange</dfn> <td>#ffa500 <td>255 165 0 <tr> <td style="background:orangered"> <td style="background:#ff4500"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-orangered">orangered</dfn> <td>#ff4500 <td>255 69 0 <tr> <td style="background:orchid"> <td style="background:#da70d6"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-orchid">orchid</dfn> <td>#da70d6 <td>218 112 214 <tr> <td style="background:palegoldenrod"> <td style="background:#eee8aa"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-palegoldenrod">palegoldenrod</dfn> <td>#eee8aa <td>238 232 170 <tr> <td style="background:palegreen"> <td style="background:#98fb98"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-palegreen">palegreen</dfn> <td>#98fb98 <td>152 251 152 <tr> <td style="background:paleturquoise"> <td style="background:#afeeee"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-paleturquoise">paleturquoise</dfn> <td>#afeeee <td>175 238 238 <tr> <td style="background:palevioletred"> <td style="background:#db7093"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-palevioletred">palevioletred</dfn> <td>#db7093 <td>219 112 147 <tr> <td style="background:papayawhip"> <td style="background:#ffefd5"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-papayawhip">papayawhip</dfn> <td>#ffefd5 <td>255 239 213 <tr> <td style="background:peachpuff"> <td style="background:#ffdab9"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-peachpuff">peachpuff</dfn> <td>#ffdab9 <td>255 218 185 <tr> <td style="background:peru"> <td style="background:#cd853f"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-peru">peru</dfn> <td>#cd853f <td>205 133 63 <tr> <td style="background:pink"> <td style="background:#ffc0cb"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-pink">pink</dfn> <td>#ffc0cb <td>255 192 203 <tr> <td style="background:plum"> <td style="background:#dda0dd"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-plum">plum</dfn> <td>#dda0dd <td>221 160 221 <tr> <td style="background:powderblue"> <td style="background:#b0e0e6"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-powderblue">powderblue</dfn> <td>#b0e0e6 <td>176 224 230 <tr> <td style="background:purple"> <td style="background:#800080"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-purple">purple</dfn> <td>#800080 <td>128 0 128 <tr> <td style="background:rebeccapurple"> <td style="background:#663399"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-rebeccapurple">rebeccapurple</dfn> <td>#663399 <td>102 51 153 <tr> <td style="background:red"> <td style="background:#ff0000"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-red">red</dfn> <td>#ff0000 <td>255 0 0 <tr> <td style="background:rosybrown"> <td style="background:#bc8f8f"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-rosybrown">rosybrown</dfn> <td>#bc8f8f <td>188 143 143 <tr> <td style="background:royalblue"> <td style="background:#4169e1"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-royalblue">royalblue</dfn> <td>#4169e1 <td>65 105 225 <tr> <td style="background:saddlebrown"> <td style="background:#8b4513"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-saddlebrown">saddlebrown</dfn> <td>#8b4513 <td>139 69 19 <tr> <td style="background:salmon"> <td style="background:#fa8072"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-salmon">salmon</dfn> <td>#fa8072 <td>250 128 114 <tr> <td style="background:sandybrown"> <td style="background:#f4a460"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-sandybrown">sandybrown</dfn> <td>#f4a460 <td>244 164 96 <tr> <td style="background:seagreen"> <td style="background:#2e8b57"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-seagreen">seagreen</dfn> <td>#2e8b57 <td>46 139 87 <tr> <td style="background:seashell"> <td style="background:#fff5ee"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-seashell">seashell</dfn> <td>#fff5ee <td>255 245 238 <tr> <td style="background:sienna"> <td style="background:#a0522d"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-sienna">sienna</dfn> <td>#a0522d <td>160 82 45 <tr> <td style="background:silver"> <td style="background:#c0c0c0"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-silver">silver</dfn> <td>#c0c0c0 <td>192 192 192 <tr> <td style="background:skyblue"> <td style="background:#87ceeb"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-skyblue">skyblue</dfn> <td>#87ceeb <td>135 206 235 <tr> <td style="background:slateblue"> <td style="background:#6a5acd"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-slateblue">slateblue</dfn> <td>#6a5acd <td>106 90 205 <tr> <td style="background:slategray"> <td style="background:#708090"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-slategray">slategray</dfn> <td>#708090 <td>112 128 144 <tr> <td style="background:slategrey"> <td style="background:#708090"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-slategrey">slategrey</dfn> <td>#708090 <td>112 128 144 <tr> <td style="background:snow"> <td style="background:#fffafa"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-snow">snow</dfn> <td>#fffafa <td>255 250 250 <tr> <td style="background:springgreen"> <td style="background:#00ff7f"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-springgreen">springgreen</dfn> <td>#00ff7f <td>0 255 127 <tr> <td style="background:steelblue"> <td style="background:#4682b4"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-steelblue">steelblue</dfn> <td>#4682b4 <td>70 130 180 <tr> <td style="background:tan"> <td style="background:#d2b48c"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-tan">tan</dfn> <td>#d2b48c <td>210 180 140 <tr> <td style="background:teal"> <td style="background:#008080"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-teal">teal</dfn> <td>#008080 <td>0 128 128 <tr> <td style="background:thistle"> <td style="background:#d8bfd8"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-thistle">thistle</dfn> <td>#d8bfd8 <td>216 191 216 <tr> <td style="background:tomato"> <td style="background:#ff6347"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-tomato">tomato</dfn> <td>#ff6347 <td>255 99 71 <tr> <td style="background:turquoise"> <td style="background:#40e0d0"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-turquoise">turquoise</dfn> <td>#40e0d0 <td>64 224 208 <tr> <td style="background:violet"> <td style="background:#ee82ee"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-violet">violet</dfn> <td>#ee82ee <td>238 130 238 <tr> <td style="background:wheat"> <td style="background:#f5deb3"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-wheat">wheat</dfn> <td>#f5deb3 <td>245 222 179 <tr> <td style="background:white"> <td style="background:#ffffff"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-white">white</dfn> <td>#ffffff <td>255 255 255 <tr> <td style="background:whitesmoke"> <td style="background:#f5f5f5"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-whitesmoke">whitesmoke</dfn> <td>#f5f5f5 <td>245 245 245 <tr> <td style="background:yellow"> <td style="background:#ffff00"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-yellow">yellow</dfn> <td>#ffff00 <td>255 255 0 <tr> <td style="background:yellowgreen"> <td style="background:#9acd32"> <th scope="row"><dfn class="dfn-paneled css" data-dfn-for="<color>, <named-color>" data-dfn-type="value" data-export id="valdef-color-yellowgreen">yellowgreen</dfn> <td>#9acd32 <td>154 205 50 </table> Note: this list of colors and their definitions is a superset of the list of <a href="https://www.w3.org/TR/SVG11/types.html#ColorKeywords">named colors defined by SVG 1.1</a>. For historical reasons, this is also referred to as the X11 color set. Note: The history of the X11 color system is interesting, and was excellently summarized by <a href="https://www.youtube.com/watch?v=HmStJQzclHc">Alex Sexton in their talk “Peachpuffs and Lemonchiffons”</a>. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/named-001.html" title="css/css-color/named-001.html">named-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/named-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/named-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-named-color.html" title="css/css-color/parsing/color-computed-named-color.html">color-computed-named-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-named-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-named-color.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-named-color.html" title="css/css-color/parsing/color-invalid-named-color.html">color-invalid-named-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-named-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-named-color.html">(source)</a> </ul> </details> <h3 class="heading settled dfn-paneled" data-dfn-type="dfn" data-level="6.2" data-lt="system colors" data-noexport id="css-system-colors">6.2. System Colors<a class="self-link" href="#css-system-colors" id="ref-for-css-system-colors⑧"></a></h3> In general, the <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color③"><system-color></a> keywords reflect default color choices made by the user, the browser, or the OS. They are typically used in the browser default stylesheet, for this reason. To maintain legibility, the <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color④"><system-color></a> keywords also respond to light mode or dark mode changes. <div class="example" id="ex-LM-DM-links"> <a class="self-link" href="#ex-LM-DM-links"></a> For example, traditional blue link text is legible on a white background (WCAG contrast 8.59:1, AAA pass) but would not be legible on a black background (WCAG contrast 2.44:1, AA fail). Instead, a lighter blue such as #81D9FE would be used in dark mode (WCAG contrast 13.28:1, AAA pass). <div style="margin:1em; margin-left: 2em; text-decoration: underline; background: inherit"> Legible link text Illegible link text Legible link text </div> </div> However, in <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode" id="ref-for-forced-colors-mode">forced colors mode</a>, most colors on the page are forced into a restricted, user-chosen palette. The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-system-color"><system-color></dfn> keywords expose these user-chosen colors so that the rest of the page can integrate with this restricted palette. When the <a href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-forced-colors">forced-colors</a> <a data-link-type="dfn" href="https://drafts.csswg.org/mediaqueries-5/#media-feature" id="ref-for-media-feature">media feature</a> is active, authors should use the <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color⑤"><system-color></a> keywords as color values in properties other than those listed in <a href="https://drafts.csswg.org/css-color-adjust-1/#forced-colors-properties"><cite>CSS Color Adjustment 1</cite> § 3.1 Properties Affected by Forced Colors Mode</a>, to ensure legibility and consistency across the page and avoid an uncoordinated mishmash of user-forced and page-chosen colors. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/system-color-consistency.html" title="css/css-color/system-color-consistency.html">system-color-consistency.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/system-color-consistency.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/system-color-consistency.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/system-color-support.html" title="css/css-color/system-color-support.html">system-color-support.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/system-color-support.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/system-color-support.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-system-color.html" title="css/css-color/parsing/color-valid-system-color.html">color-valid-system-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-system-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-system-color.html">(source)</a> </ul> </details> When the values of <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color⑥"><system-color></a> keywords come from the browser, (as opposed to being OS defaults or user choices) the browser should ensure that <a href="#system-color-pairs">matching foreground/background pairs</a> have a minimum of WCAG AA contrast. However, user preferences (for higher or lower contrast), whether set as a browser preference, a user stylesheet, or by altering the OS defaults, must take precedence over this requirement. Authors may also use these keywords at any time, but should be careful to use the colors in <a href="#system-color-pairs">matching background-foreground pairs</a> to ensure appropriate contrast, as any particular contrast relationship across non-matching pairs (e.g. <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas">Canvas</a> and <a class="css" data-link-type="maybe" href="#valdef-color-buttontext" id="ref-for-valdef-color-buttontext">ButtonText</a>) is not guaranteed. The <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color⑦"><system-color></a> keywords are defined as follows: <dl id="system-color-values"> <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-accentcolor">AccentColor</dfn> <dd> Background of accented user interface controls. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-accentcolortext">AccentColorText</dfn> <dd> Text of accented user interface controls. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-activetext">ActiveText</dfn> <dd> Text in active links. For light backgrounds, traditionally red. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-buttonborder">ButtonBorder</dfn> <dd> The base border color for push buttons. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-buttonface">ButtonFace</dfn> <dd> The face background color for push buttons. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-buttontext">ButtonText</dfn> <dd> Text on push buttons. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-canvas">Canvas</dfn> <dd> Background of application content or documents. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-canvastext">CanvasText</dfn> <dd> Text in application content or documents. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-field">Field</dfn> <dd> Background of input fields. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-fieldtext">FieldText</dfn> <dd> Text in input fields. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-graytext">GrayText</dfn> <dd> Disabled text. (Often, but not necessarily, gray.) <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-highlight">Highlight</dfn> <dd> Background of selected text, for example from ::selection. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-highlighttext">HighlightText</dfn> <dd> Text of selected text. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-linktext">LinkText</dfn> <dd> Text in non-active, non-visited links. For light backgrounds, traditionally blue. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-mark">Mark</dfn> <dd> Background of text that has been specially marked (such as by the HTML <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element" id="ref-for-the-mark-element">mark</a></code> element). <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-marktext">MarkText</dfn> <dd> Text that has been specially marked (such as by the HTML <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element" id="ref-for-the-mark-element①">mark</a></code> element). <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-selecteditem">SelectedItem</dfn> <dd> Background of selected items, for example a selected checkbox. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-selecteditemtext">SelectedItemText</dfn> <dd> Text of selected items. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <system-color>" data-dfn-type="value" data-export id="valdef-color-visitedtext">VisitedText</dfn> <dd> Text in visited links. For light backgrounds, traditionally purple. </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/relative-currentcolor-visited-getcomputedstyle.html" title="css/css-color/relative-currentcolor-visited-getcomputedstyle.html">relative-currentcolor-visited-getcomputedstyle.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/relative-currentcolor-visited-getcomputedstyle.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/relative-currentcolor-visited-getcomputedstyle.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/system-color-compute.html" title="css/css-color/system-color-compute.html">system-color-compute.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/system-color-compute.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/system-color-compute.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/system-color-hightlights-vs-getSelection-001.html" title="css/css-color/system-color-hightlights-vs-getSelection-001.html">system-color-hightlights-vs-getSelection-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/system-color-hightlights-vs-getSelection-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/system-color-hightlights-vs-getSelection-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/system-color-hightlights-vs-getSelection-002.html" title="css/css-color/system-color-hightlights-vs-getSelection-002.html">system-color-hightlights-vs-getSelection-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/system-color-hightlights-vs-getSelection-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/system-color-hightlights-vs-getSelection-002.html">(source)</a> </ul> </details> Note: As with all other <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-keyword" id="ref-for-css-keyword">keywords</a>, these names are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>. They are shown here with mixed capitalization for legibility. For systems that do not have a particular system UI concept, the specified value should be mapped to the most closely related system color value that exists. The following <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="system-color-pairings">system color pairings</dfn> are expected to form legible background-foreground colors: <ul id="system-color-pairs"> <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas①">Canvas</a> background with <a class="css" data-link-type="maybe" href="#valdef-color-canvastext" id="ref-for-valdef-color-canvastext">CanvasText</a>, <a class="css" data-link-type="maybe" href="#valdef-color-linktext" id="ref-for-valdef-color-linktext">LinkText</a>, <a class="css" data-link-type="maybe" href="#valdef-color-visitedtext" id="ref-for-valdef-color-visitedtext">VisitedText</a>, <a class="css" data-link-type="maybe" href="#valdef-color-activetext" id="ref-for-valdef-color-activetext">ActiveText</a> foreground. <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas②">Canvas</a> background with a <a class="css" data-link-type="maybe" href="#valdef-color-buttonborder" id="ref-for-valdef-color-buttonborder">ButtonBorder</a> border and adjacent color Canvas <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-buttonface" id="ref-for-valdef-color-buttonface">ButtonFace</a> background with <a class="css" data-link-type="maybe" href="#valdef-color-buttontext" id="ref-for-valdef-color-buttontext①">ButtonText</a> foreground. <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-field" id="ref-for-valdef-color-field">Field</a> background with <a class="css" data-link-type="maybe" href="#valdef-color-fieldtext" id="ref-for-valdef-color-fieldtext">FieldText</a> foreground. <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-mark" id="ref-for-valdef-color-mark">Mark</a> background with <a class="css" data-link-type="maybe" href="#valdef-color-marktext" id="ref-for-valdef-color-marktext">MarkText</a> foreground <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-buttonface" id="ref-for-valdef-color-buttonface①">ButtonFace</a> or <a class="css" data-link-type="maybe" href="#valdef-color-field" id="ref-for-valdef-color-field①">Field</a> background with a <a class="css" data-link-type="maybe" href="#valdef-color-buttonborder" id="ref-for-valdef-color-buttonborder①">ButtonBorder</a> border and adjacent color <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas④">Canvas</a>' <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-highlight" id="ref-for-valdef-color-highlight">Highlight</a> background with <a class="css" data-link-type="maybe" href="#valdef-color-highlighttext" id="ref-for-valdef-color-highlighttext">HighlightText</a> foreground. <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-selecteditem" id="ref-for-valdef-color-selecteditem">SelectedItem</a> background with <a class="css" data-link-type="maybe" href="#valdef-color-selecteditemtext" id="ref-for-valdef-color-selecteditemtext">SelectedItemText</a> foreground. <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-accentcolor" id="ref-for-valdef-color-accentcolor">AccentColor</a> background with <a class="css" data-link-type="maybe" href="#valdef-color-accentcolortext" id="ref-for-valdef-color-accentcolortext">AccentColorText</a> foreground. </ul> Additionally, <a class="css" data-link-type="maybe" href="#valdef-color-graytext" id="ref-for-valdef-color-graytext">GrayText</a> is expected to be readable, though possibly at a lower contrast rating, over any of the backgrounds. <div class="example" id="ex-SystemCombo"> <a class="self-link" href="#ex-SystemCombo"></a> For example, the system color combinations in the browser you are currently using: Canvas with CanvasText: CanvasText Canvas with LinkText: LinkText Canvas with VisitedText: VisitedText Canvas with ActiveText: ActiveText Canvas with GrayText: GrayText Canvas with ButtonBorder and adjacent Canvas: CanvasTextAdjacent ButtonFace with ButtonText: ButtonText ButtonFace with ButtonText and ButtonBorder: ButtonText ButtonFace with GrayText: GrayText Field with FieldText: FieldText Field with GrayText: GrayText Mark with MarkText: MarkText Mark with GrayText: GrayText Highlight with HighlightText: HighlightText Highlight with GrayText: GrayText SelectedItem with SelectedItemText: SelectedItemText AccentColor with AccentColorText: AccentColorText AccentColor with GrayText: GrayText </div> Earlier versions of CSS defined additional <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color⑧"><system-color></a>s, which have since been deprecated. These are documented in <a href="#deprecated-system-colors">Appendix A: Deprecated CSS System Colors</a>. Note: The <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color⑨"><system-color></a>s incur some privacy and security risk, as detailed in <a href="#privacy">§ 20 Privacy Considerations</a> and <a href="#security">§ 19 Security Considerations</a>. User Agents may, to mitigate privacy and security risks such as fingerprinting, elect to return fixed values for the used value of system colors which do not reflect customisation or theming choices made by the user. <h3 class="heading settled" data-level="6.3" id="transparent-color">6.3. The <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent②">transparent</a> keyword<a class="self-link" href="#transparent-color"></a></h3> The keyword <dfn class="dfn-paneled css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-transparent">transparent</dfn> specifies a <a data-link-type="dfn" href="#transparent-black" id="ref-for-transparent-black">transparent black</a>. It is a type of <a class="production css" data-link-type="type" href="#typedef-named-color" id="ref-for-typedef-named-color①"><named-color></a>. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed.html" title="css/css-color/parsing/color-computed.html">color-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t423-transparent-1-a.xht" title="css/css-color/t423-transparent-1-a.xht">t423-transparent-1-a.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t423-transparent-1-a.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t423-transparent-1-a.xht">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/t423-transparent-2-a.xht" title="css/css-color/t423-transparent-2-a.xht">t423-transparent-2-a.xht</a> <a class="wpt-live" href="http://wpt.live/css/css-color/t423-transparent-2-a.xht">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/t423-transparent-2-a.xht">(source)</a> </ul> </details> <h3 class="heading settled" data-level="6.4" id="currentcolor-color">6.4. The <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor⑤">currentcolor</a> keyword<a class="self-link" href="#currentcolor-color"></a></h3> The keyword <dfn class="dfn-paneled css" data-dfn-for="<color>" data-dfn-type="value" data-export id="valdef-color-currentcolor">currentcolor</dfn> represents value of the <a class="property css" data-link-type="property" href="#propdef-color" id="ref-for-propdef-color②">color</a> property on the same element. Unlike <a class="production css" data-link-type="type" href="#typedef-named-color" id="ref-for-typedef-named-color②"><named-color></a>s, it is not restricted to sRGB; the value can be any <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①⑦"><color></a>. Its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value①">used values</a> is determined by <a href="#resolving-other-colors">resolving color values</a>. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/border-color-currentcolor.html" title="css/css-color/border-color-currentcolor.html">border-color-currentcolor.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/border-color-currentcolor.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/border-color-currentcolor.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/color-mix-currentcolor-nested-for-color-property.html" title="css/css-color/color-mix-currentcolor-nested-for-color-property.html">color-mix-currentcolor-nested-for-color-property.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/color-mix-currentcolor-nested-for-color-property.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/color-mix-currentcolor-nested-for-color-property.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/currentcolor-001.html" title="css/css-color/currentcolor-001.html">currentcolor-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/currentcolor-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/currentcolor-002.html" title="css/css-color/currentcolor-002.html">currentcolor-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/currentcolor-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/currentcolor-003.html" title="css/css-color/currentcolor-003.html">currentcolor-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/currentcolor-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/currentcolor-004.html" title="css/css-color/currentcolor-004.html">currentcolor-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/currentcolor-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/currentcolor-visited-fallback.html" title="css/css-color/currentcolor-visited-fallback.html">currentcolor-visited-fallback.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/currentcolor-visited-fallback.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-visited-fallback.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <div class="example" id="ex-currentcolor"> <a class="self-link" href="#ex-currentcolor"></a> Here’s a simple example showing how to use the <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor⑥">currentcolor</a> keyword: <pre class="lang-css highlight">.foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- k>background-color</c-><c- p>:</c-> currentcolor<c- p>;</c-> <c- p>}</c-> </pre> This is equivalent to writing: <pre class="lang-css highlight">.foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- k>background-color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> </pre> </div> <div class="example" id="ex-textemph-currentcolor"> <a class="self-link" href="#ex-textemph-currentcolor"></a> For example, the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-decor-4/#propdef-text-emphasis-color" id="ref-for-propdef-text-emphasis-color①">text-emphasis-color</a> property <a data-link-type="biblio" href="#biblio-css3-text-decor" title="CSS Text Decoration Module Level 3">[CSS3-TEXT-DECOR]</a>, whose initial value is <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor⑦">currentcolor</a>, by default matches the text color even as the <a class="property css" data-link-type="property" href="#propdef-color" id="ref-for-propdef-color③">color</a> property changes across elements. <pre class="language-markup highlight"><c- p><</c-><c- f>p</c-><c- p>><</c-><c- f>em</c-><c- p>></c->Some <c- p><</c-><c- f>strong</c-><c- p>></c->really<c- p></</c-><c- f>strong</c-><c- p>></c-> emphasized text.<c- p></</c-><c- f>em</c-><c- p>></c-> <c- p><</c-><c- f>style</c-><c- p>></c-> <c- f>p</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>black</c-><c- p>;</c-> <c- p>}</c-> <c- f>em</c-> <c- p>{</c-> <c- k>text-emphasis</c-><c- p>:</c-> <c- kc>dot</c-><c- p>;</c-> <c- p>}</c-> <c- f>strong</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>style</c-><c- p>></c-> </pre> <img alt="rendered emphasized text with the word 'really' in red with red emphasis dots" height="119" src="images/text-emphasis.png" width="495"> In the above example, the emphasis marks are black over the text "Some" and "emphasized text", but red over the text "really". </div> Note: Multi-word keywords in CSS usually separate their component words with hyphens. <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor⑧">currentcolor</a> doesn’t, because (deep breath) it was originally introduced in SVG as a property value, "current-color" with the usual CSS spelling. It (along with all other properties and their values) then became presentation attributes and attribute values, as well as properties, to make generation with XSLT easier. Then all of the presentation attributes were changed from hyphenated to camelCase, because the DOM had an issue with hyphen meaning "minus". But then, they didn’t follow CSS conventions anymore so all the properties and property values that were already part of CSS were changed back to hyphenated! currentcolor was not a part of CSS at that time, so remained camelCased. Only later did CSS pick it up, at which point the capitalization stopped mattering, as CSS keywords are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>. <h2 class="heading settled" data-level="7" id="the-hsl-notation">7. HSL Colors: <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑧">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla⑥">hsla()</a> functions<a class="self-link" href="#the-hsl-notation"></a></h2> The RGB system for specifying colors, while convenient for machines and graphic libraries, is often regarded as very difficult for humans to gain an intuitive grasp on. It’s not easy to tell, for example, how to alter an RGB color to produce a lighter variant of the same hue. There are several other color schemes possible. One such is the HSL <a data-link-type="biblio" href="#biblio-hsl" title="Color spaces for computer graphics">[HSL]</a> color scheme, which is more intuitive to use, but still maps easily back to RGB colors. <dfn class="dfn-paneled css" data-dfn-for="hsl()" data-dfn-type="value" data-export id="valdef-hsl-hsl">HSL</dfn> colors are specified as a triplet of hue, saturation, and lightness. The syntax of the <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl⑨">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla⑦">hsla()</a> functions is: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-hsl"><c- nf>hsl</c-><c- p>()</c-></dfn> = <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-legacy-hsl-syntax" id="ref-for-typedef-legacy-hsl-syntax"><legacy-hsl-syntax></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑦">|</a> <a class="production" data-link-type="type" href="#typedef-modern-hsl-syntax" id="ref-for-typedef-modern-hsl-syntax"><modern-hsl-syntax></a> <c- p>]</c-> <dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-hsla"><c- nf>hsla</c-><c- p>()</c-></dfn> = <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-legacy-hsla-syntax" id="ref-for-typedef-legacy-hsla-syntax"><legacy-hsla-syntax></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑧">|</a> <a class="production" data-link-type="type" href="#typedef-modern-hsla-syntax" id="ref-for-typedef-modern-hsla-syntax"><modern-hsla-syntax></a> <c- p>]</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-modern-hsl-syntax"><a class="production" data-link-type="type" href="#typedef-modern-hsl-syntax" id="ref-for-typedef-modern-hsl-syntax①"><modern-hsl-syntax></a></dfn> = <c- nf>hsl</c-><c- p>(</c-> <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue④"><hue></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑨">|</a> none<c- p>]</c-> <c- p>[</c-><a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value⑨"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⓪">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①①"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③①">|</a> none<c- p>]</c-> <c- p>[</c-><a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①⓪"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③②">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①②"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③③">|</a> none<c- p>]</c-> <c- p>[</c-> / <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value⑨"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③④">|</a> none<c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-modern-hsla-syntax"><a class="production" data-link-type="type" href="#typedef-modern-hsla-syntax" id="ref-for-typedef-modern-hsla-syntax①"><modern-hsla-syntax></a></dfn> = <c- nf>hsla</c-><c- p>(</c-> <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue⑤"><hue></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑤">|</a> none<c- p>]</c-> <c- p>[</c-><a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①①"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑥">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①③"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑦">|</a> none<c- p>]</c-> <c- p>[</c-><a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①②"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑧">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①④"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③⑨">|</a> none<c- p>]</c-> <c- p>[</c-> / <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①⓪"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⓪">|</a> none<c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑦">?</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-legacy-hsl-syntax"><a class="production" data-link-type="type" href="#typedef-legacy-hsl-syntax" id="ref-for-typedef-legacy-hsl-syntax①"><legacy-hsl-syntax></a></dfn> = <c- nf>hsl</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue⑥"><hue></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma④"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①③"><percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma⑤"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①④"><percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma⑥"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①①"><alpha-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑧">?</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-legacy-hsla-syntax"><a class="production" data-link-type="type" href="#typedef-legacy-hsla-syntax" id="ref-for-typedef-legacy-hsla-syntax①"><legacy-hsla-syntax></a></dfn> = <c- nf>hsla</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue⑦"><hue></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma⑦"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①⑤"><percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma⑧"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①⑥"><percentage></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma⑨"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①②"><alpha-value></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑨">?</a> <c- p>)</c-> </pre> <table id="prr-hsl"> <tbody> <tr> <th>Percentages <td>Allowed for S and L <tr> <th>Percent reference range <td> for S and L: 0% = 0.0, 100% = 100.0 </table> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsl-001.html" title="css/css-color/hsl-001.html">hsl-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsl-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsl-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsl-002.html" title="css/css-color/hsl-002.html">hsl-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsl-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsl-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsl-003.html" title="css/css-color/hsl-003.html">hsl-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsl-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsl-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsl-004.html" title="css/css-color/hsl-004.html">hsl-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsl-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsl-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsl-005.html" title="css/css-color/hsl-005.html">hsl-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsl-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsl-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsl-006.html" title="css/css-color/hsl-006.html">hsl-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsl-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsl-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsl-007.html" title="css/css-color/hsl-007.html">hsl-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsl-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsl-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsl-008.html" title="css/css-color/hsl-008.html">hsl-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsl-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsl-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsl-clamp-negative-saturation.html" title="css/css-color/hsl-clamp-negative-saturation.html">hsl-clamp-negative-saturation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsl-clamp-negative-saturation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsl-clamp-negative-saturation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/background-color-hsl-001.html" title="css/css-color/background-color-hsl-001.html">background-color-hsl-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/background-color-hsl-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/background-color-hsl-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/background-color-hsl-002.html" title="css/css-color/background-color-hsl-002.html">background-color-hsl-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/background-color-hsl-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/background-color-hsl-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/background-color-hsl-003.html" title="css/css-color/background-color-hsl-003.html">background-color-hsl-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/background-color-hsl-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/background-color-hsl-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/background-color-hsl-004.html" title="css/css-color/background-color-hsl-004.html">background-color-hsl-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/background-color-hsl-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/background-color-hsl-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-hsl.html" title="css/css-color/parsing/color-computed-hsl.html">color-computed-hsl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-hsl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-hsl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-hsl.html" title="css/css-color/parsing/color-invalid-hsl.html">color-invalid-hsl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-hsl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-hsl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-hsl.html" title="css/css-color/parsing/color-valid-hsl.html">color-valid-hsl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-hsl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-hsl.html">(source)</a> </ul> </details> The first argument specifies the hue angle. In HSL (and HWB) the angle 0deg represents sRGB primary red (as does 360deg, 720deg, etc.), and the rest of the hues are spread around the circle, so 120deg represents sRGB primary green, 240deg represents sRGB primary blue, etc. The next two arguments are the saturation and lightness, respectively. For saturation, 100% or 100 is a fully-saturated, bright color, and 0% or 0 is a fully-unsaturated gray. For lightness, 50% or 50 represents the "normal" color, while 100% or 100 is white and 0% or 0 is black. For historical reasons, if the saturation is less than 0% it is clamped to 0% at parsed-value time, before being converted to an sRGB color. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-hsl.html" title="css/css-color/parsing/color-valid-hsl.html">color-valid-hsl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-hsl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-hsl.html">(source)</a> </ul> </details> The final argument specifies the alpha channel of the color. It’s interpreted identically to the fourth argument of the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑧">rgb()</a> function. If omitted, it defaults to 100%. HSL colors resolve to sRGB. If the saturation of an HSL color is 0% or 0, then the hue component is <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component⑧">powerless</a>. <div class="example" id="ex-hsl-primary-red"><a class="self-link" href="#ex-hsl-primary-red"></a> For example, an ordinary red, the same color you would see from the keyword <a class="css" data-link-type="maybe" href="#valdef-color-red" id="ref-for-valdef-color-red">red</a> or the hex notation #f00, is represented in HSL as hsl(0deg 100% 50%). </div> An advantage of HSL over RGB is that it is more intuitive: people can guess at the colors they want, and then tweak. <div class="example" id="ex-hsl-tweak"> <a class="self-link" href="#ex-hsl-tweak"></a> For example, the following colors can all be generated off of the basic "green" hue, just by varying the other two arguments: <pre class="lang-css highlight"><c- nf>hsl</c-><c- p>(</c-><c- m>120</c-><c- k>deg</c-> <c- m>100</c-><c- k>%</c-> <c- m>50</c-><c- k>%</c-><c- p>)</c-> lime green <c- nf>hsl</c-><c- p>(</c-><c- m>120</c-><c- k>deg</c-> <c- m>100</c-><c- k>%</c-> <c- m>25</c-><c- k>%</c-><c- p>)</c-> dark green <c- nf>hsl</c-><c- p>(</c-><c- m>120</c-><c- k>deg</c-> <c- m>100</c-><c- k>%</c-> <c- m>75</c-><c- k>%</c-><c- p>)</c-> light green <c- nf>hsl</c-><c- p>(</c-><c- m>120</c-><c- k>deg</c-> <c- m>75</c-><c- k>%</c-> <c- m>85</c-><c- k>%</c-><c- p>)</c-> pastel green </pre> </div> A disadvantage of HSL over Oklch is that hue manipulation changes the visual lightness, and that hues are not evenly spaced apart. It is thus easier in HSL to create sets of matching colors (by keeping the hue the same and varying the saturation and lightness), compared to manipulating the sRGB component values; however, because the lightness is simply the mean of the gamma-corrected red, green and blue components it does not correspond to the visual perception of lightness across hues. <div class="example" id="ex-hsl-sucks"> <a class="self-link" href="#ex-hsl-sucks"></a> For example, <a class="css" data-link-type="maybe" href="#valdef-color-blue" id="ref-for-valdef-color-blue">blue</a> is represented in HSL as hsl(240deg 100% 50%) while <a class="css" data-link-type="maybe" href="#valdef-color-yellow" id="ref-for-valdef-color-yellow">yellow</a> is hsl(60deg 100% 50%). Both have an HSL Lightness of 50%, but clearly the yellow looks much lighter than the blue. In Oklch, sRGB blue is oklch(0.452 0.313 264.1) while sRGB yellow is oklch(0.968 0.211 109.8). The Oklch Lightnesses of 0.452 and 0.968 clearly reflect the visual lightnesses of the two colors. </div> The hue angle in HSL is not perceptually uniform; colors appear bunched up in some areas and widely spaced in others. <div class="example" id="ex-hsl-sucks-more"> <a class="self-link" href="#ex-hsl-sucks-more"></a> For example, the pair of hues hsl(220deg 100% 50%) and hsl(250deg 100% 50%) have an HSL hue difference of 250-220 = 30deg and look fairly similar, while another pair of colors hsl(50deg 100% 50%) and hsl(80deg 100% 50%), which also have a hue difference of 80-50 = 30deg, look very different. In Oklch, the same pair of colors oklch(0.533 0.26 262.6) and oklch(0.462 0.306 268.9) have a hue difference of 268.9 - 262.6 = 6.3deg while the second pair oklch(0.882 0.181 94.24) and oklch(0.91 0.245 129.9) have a hue difference of 129.9 - 94.24 = 35.66deg, correctly reflecting the visual separation of hues. </div> For historical reasons, <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①⓪">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla⑧">hsla()</a> also support a <a data-link-type="dfn" href="#legacy-color-syntax" id="ref-for-legacy-color-syntax④">legacy color syntax</a>. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsla-001.html" title="css/css-color/hsla-001.html">hsla-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsla-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsla-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsla-002.html" title="css/css-color/hsla-002.html">hsla-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsla-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsla-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsla-003.html" title="css/css-color/hsla-003.html">hsla-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsla-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsla-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsla-004.html" title="css/css-color/hsla-004.html">hsla-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsla-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsla-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsla-005.html" title="css/css-color/hsla-005.html">hsla-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsla-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsla-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsla-006.html" title="css/css-color/hsla-006.html">hsla-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsla-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsla-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsla-007.html" title="css/css-color/hsla-007.html">hsla-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsla-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsla-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsla-008.html" title="css/css-color/hsla-008.html">hsla-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsla-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsla-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hsla-clamp-negative-saturation.html" title="css/css-color/hsla-clamp-negative-saturation.html">hsla-clamp-negative-saturation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hsla-clamp-negative-saturation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hsla-clamp-negative-saturation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="7.1" id="hsl-to-rgb">7.1. Converting HSL Colors to sRGB<a class="self-link" href="#hsl-to-rgb"></a></h3> Converting an HSL color to sRGB is straightforward mathematically. Here’s a sample implementation of the conversion algorithm in JavaScript. It returns an array of three numbers representing the red, green, and blue channels of the colors, which for colors in the sRGB gamut will be in the range [0, 1]. This code assumes that parse-time clamping of negative saturation has already been applied. <pre class="include-code highlight"><c- d>/**</c-> <c- d> * @param {number} hue - Hue as degrees 0..360</c-> <c- d> * @param {number} sat - Saturation in reference range [0,100]</c-> <c- d> * @param {number} light - Lightness in reference range [0,100]</c-> <c- d> * @return {number[]} Array of sRGB components; in-gamut colors in range [0..1]</c-> <c- d> */</c-> <c- a>function</c-> hslToRgb<c- p>(</c->hue<c- p>,</c-> sat<c- p>,</c-> light<c- p>)</c-> <c- p>{</c-> sat <c- o>/=</c-> <c- mf>100</c-><c- p>;</c-> light <c- o>/=</c-> <c- mf>100</c-><c- p>;</c-> <c- a>function</c-> f<c- p>(</c->n<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> k <c- o>=</c-> <c- p>(</c->n <c- o>+</c-> hue<c- o>/</c-><c- mf>30</c-><c- p>)</c-> <c- o>%</c-> <c- mf>12</c-><c- p>;</c-> <c- a>let</c-> a <c- o>=</c-> sat <c- o>*</c-> Math<c- p>.</c->min<c- p>(</c->light<c- p>,</c-> <c- mf>1</c-> <c- o>-</c-> light<c- p>);</c-> <c- k>return</c-> light <c- o>-</c-> a <c- o>*</c-> Math<c- p>.</c->max<c- p>(</c-><c- o>-</c-><c- mf>1</c-><c- p>,</c-> Math<c- p>.</c->min<c- p>(</c->k <c- o>-</c-> <c- mf>3</c-><c- p>,</c-> <c- mf>9</c-> <c- o>-</c-> k<c- p>,</c-> <c- mf>1</c-><c- p>));</c-> <c- p>}</c-> <c- k>return</c-> <c- p>[</c->f<c- p>(</c-><c- mf>0</c-><c- p>),</c-> f<c- p>(</c-><c- mf>8</c-><c- p>),</c-> f<c- p>(</c-><c- mf>4</c-><c- p>)];</c-> <c- p>}</c-></pre> <h3 class="heading settled" data-level="7.2" id="rgb-to-hsl">7.2. Converting sRGB Colors to HSL<a class="self-link" href="#rgb-to-hsl"></a></h3> Conversion in the reverse direction proceeds similarly. Special care is taken to deal with intermediate negative values of saturation, which can be produced by colors far outside the sRGB gamut. <pre class="include-code highlight"><c- d>/**</c-> <c- d> * @param {number} red - Red component 0..1</c-> <c- d> * @param {number} green - Green component 0..1</c-> <c- d> * @param {number} blue - Blue component 0..1</c-> <c- d> * @return {number[]} Array of HSL values: Hue as degrees 0..360, Saturation and Lightness in reference range [0,100]</c-> <c- d> */</c-> <c- a>function</c-> rgbToHsl <c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> max <c- o>=</c-> Math<c- p>.</c->max<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>);</c-> <c- a>let</c-> min <c- o>=</c-> Math<c- p>.</c->min<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>);</c-> <c- a>let</c-> <c- p>[</c->hue<c- p>,</c-> sat<c- p>,</c-> light<c- p>]</c-> <c- o>=</c-> <c- p>[</c-><c- kc>NaN</c-><c- p>,</c-> <c- mf>0</c-><c- p>,</c-> <c- p>(</c->min <c- o>+</c-> max<c- p>)</c-><c- o>/</c-><c- mf>2</c-><c- p>];</c-> <c- a>let</c-> d <c- o>=</c-> max <c- o>-</c-> min<c- p>;</c-> <c- k>if</c-> <c- p>(</c->d <c- o>!==</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> sat <c- o>=</c-> <c- p>(</c->light <c- o>===</c-> <c- mf>0</c-> <c- o>||</c-> light <c- o>===</c-> <c- mf>1</c-><c- p>)</c-> <c- o>?</c-> <c- mf>0</c-> <c- o>:</c-> <c- p>(</c->max <c- o>-</c-> light<c- p>)</c-> <c- o>/</c-> Math<c- p>.</c->min<c- p>(</c->light<c- p>,</c-> <c- mf>1</c-> <c- o>-</c-> light<c- p>);</c-> <c- k>switch</c-> <c- p>(</c->max<c- p>)</c-> <c- p>{</c-> <c- k>case</c-> red<c- o>:</c-> hue <c- o>=</c-> <c- p>(</c->green <c- o>-</c-> blue<c- p>)</c-> <c- o>/</c-> d <c- o>+</c-> <c- p>(</c->green <c- o><</c-> blue <c- o>?</c-> <c- mf>6</c-> <c- o>:</c-> <c- mf>0</c-><c- p>);</c-> <c- k>break</c-><c- p>;</c-> <c- k>case</c-> green<c- o>:</c-> hue <c- o>=</c-> <c- p>(</c->blue <c- o>-</c-> red<c- p>)</c-> <c- o>/</c-> d <c- o>+</c-> <c- mf>2</c-><c- p>;</c-> <c- k>break</c-><c- p>;</c-> <c- k>case</c-> blue<c- o>:</c-> hue <c- o>=</c-> <c- p>(</c->red <c- o>-</c-> green<c- p>)</c-> <c- o>/</c-> d <c- o>+</c-> <c- mf>4</c-><c- p>;</c-> <c- p>}</c-> hue <c- o>=</c-> hue <c- o>*</c-> <c- mf>60</c-><c- p>;</c-> <c- p>}</c-> <c- c1>// Very out of gamut colors can produce negative saturation</c-> <c- c1>// If so, just rotate the hue by 180 and use a positive saturation</c-> <c- c1>// see https://github.com/w3c/csswg-drafts/issues/9222</c-> <c- k>if</c-> <c- p>(</c->sat <c- o><</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> hue <c- o>+=</c-> <c- mf>180</c-><c- p>;</c-> sat <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->sat<c- p>);</c-> <c- p>}</c-> <c- k>if</c-> <c- p>(</c->hue <c- o>>=</c-> <c- mf>360</c-><c- p>)</c-> <c- p>{</c-> hue <c- o>-=</c-> <c- mf>360</c-><c- p>;</c-> <c- p>}</c-> <c- k>return</c-> <c- p>[</c->hue<c- p>,</c-> sat <c- o>*</c-> <c- mf>100</c-><c- p>,</c-> light <c- o>*</c-> <c- mf>100</c-><c- p>];</c-> <c- p>}</c-></pre> <h3 class="heading settled" data-level="7.3" id="hsl-examples">7.3. Examples of HSL Colors<a class="self-link" href="#hsl-examples"></a></h3> This section is not normative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section is not normative, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> The tables below illustrate a wide range of possible HSL colors. Each table represents one hue, selected at 30° intervals, to illustrate the common "core" hues: red, yellow, green, cyan, blue, magenta, and the six intermediary colors between these. In each table, the X axis represents the saturation while the Y axis represents the lightness. <div class="color-table" id="hsltable"> <table> <thead> <tr> <th colspan="7">0° Reds <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(255, 204, 204);"> <td style="background-color: rgb(250, 209, 209);"> <td style="background-color: rgb(245, 214, 214);"> <td style="background-color: rgb(240, 219, 219);"> <td style="background-color: rgb(235, 224, 224);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(255, 153, 153);"> <td style="background-color: rgb(245, 163, 163);"> <td style="background-color: rgb(235, 173, 173);"> <td style="background-color: rgb(224, 184, 184);"> <td style="background-color: rgb(214, 194, 194);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(255, 102, 102);"> <td style="background-color: rgb(240, 117, 117);"> <td style="background-color: rgb(224, 133, 133);"> <td style="background-color: rgb(209, 148, 148);"> <td style="background-color: rgb(194, 163, 163);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(255, 51, 51);"> <td style="background-color: rgb(235, 71, 71);"> <td style="background-color: rgb(214, 92, 92);"> <td style="background-color: rgb(194, 112, 112);"> <td style="background-color: rgb(173, 133, 133);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(255, 0, 0);"> <td style="background-color: rgb(230, 26, 26);"> <td style="background-color: rgb(204, 51, 51);"> <td style="background-color: rgb(179, 77, 77);"> <td style="background-color: rgb(153, 102, 102);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(204, 0, 0);"> <td style="background-color: rgb(184, 20, 20);"> <td style="background-color: rgb(163, 41, 41);"> <td style="background-color: rgb(143, 61, 61);"> <td style="background-color: rgb(122, 82, 82);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(153, 0, 0);"> <td style="background-color: rgb(138, 15, 15);"> <td style="background-color: rgb(122, 31, 31);"> <td style="background-color: rgb(107, 46, 46);"> <td style="background-color: rgb(92, 61, 61);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(102, 0, 0);"> <td style="background-color: rgb(92, 10, 10);"> <td style="background-color: rgb(82, 20, 20);"> <td style="background-color: rgb(71, 31, 31);"> <td style="background-color: rgb(61, 41, 41);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(51, 0, 0);"> <td style="background-color: rgb(46, 5, 5);"> <td style="background-color: rgb(41, 10, 10);"> <td style="background-color: rgb(36, 15, 15);"> <td style="background-color: rgb(31, 20, 20);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">30° Reds-Yellows (=Oranges) <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(255, 230, 204);"> <td style="background-color: rgb(250, 230, 209);"> <td style="background-color: rgb(245, 230, 214);"> <td style="background-color: rgb(240, 230, 219);"> <td style="background-color: rgb(235, 230, 224);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(255, 204, 153);"> <td style="background-color: rgb(245, 204, 163);"> <td style="background-color: rgb(235, 204, 173);"> <td style="background-color: rgb(224, 204, 184);"> <td style="background-color: rgb(214, 204, 194);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(255, 179, 102);"> <td style="background-color: rgb(240, 179, 117);"> <td style="background-color: rgb(224, 179, 133);"> <td style="background-color: rgb(209, 179, 148);"> <td style="background-color: rgb(194, 179, 163);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(255, 153, 51);"> <td style="background-color: rgb(235, 153, 71);"> <td style="background-color: rgb(214, 153, 92);"> <td style="background-color: rgb(194, 153, 112);"> <td style="background-color: rgb(173, 153, 133);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(255, 128, 0);"> <td style="background-color: rgb(230, 128, 26);"> <td style="background-color: rgb(204, 128, 51);"> <td style="background-color: rgb(179, 128, 77);"> <td style="background-color: rgb(153, 128, 102);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(204, 102, 0);"> <td style="background-color: rgb(184, 102, 20);"> <td style="background-color: rgb(163, 102, 41);"> <td style="background-color: rgb(143, 102, 61);"> <td style="background-color: rgb(122, 102, 82);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(153, 77, 0);"> <td style="background-color: rgb(138, 77, 15);"> <td style="background-color: rgb(122, 77, 31);"> <td style="background-color: rgb(107, 77, 46);"> <td style="background-color: rgb(92, 77, 61);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(102, 51, 0);"> <td style="background-color: rgb(92, 51, 10);"> <td style="background-color: rgb(82, 51, 20);"> <td style="background-color: rgb(71, 51, 31);"> <td style="background-color: rgb(61, 51, 41);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(51, 26, 0);"> <td style="background-color: rgb(46, 26, 5);"> <td style="background-color: rgb(41, 26, 10);"> <td style="background-color: rgb(36, 26, 15);"> <td style="background-color: rgb(31, 26, 20);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">60° Yellows <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(255, 255, 204);"> <td style="background-color: rgb(250, 250, 209);"> <td style="background-color: rgb(245, 245, 214);"> <td style="background-color: rgb(240, 240, 219);"> <td style="background-color: rgb(235, 235, 224);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(255, 255, 153);"> <td style="background-color: rgb(245, 245, 163);"> <td style="background-color: rgb(235, 235, 173);"> <td style="background-color: rgb(224, 224, 184);"> <td style="background-color: rgb(214, 214, 194);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(255, 255, 102);"> <td style="background-color: rgb(240, 240, 117);"> <td style="background-color: rgb(224, 224, 133);"> <td style="background-color: rgb(209, 209, 148);"> <td style="background-color: rgb(194, 194, 163);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(255, 255, 51);"> <td style="background-color: rgb(235, 235, 71);"> <td style="background-color: rgb(214, 214, 92);"> <td style="background-color: rgb(194, 194, 112);"> <td style="background-color: rgb(173, 173, 133);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(255, 255, 0);"> <td style="background-color: rgb(230, 230, 26);"> <td style="background-color: rgb(204, 204, 51);"> <td style="background-color: rgb(179, 179, 77);"> <td style="background-color: rgb(153, 153, 102);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(204, 204, 0);"> <td style="background-color: rgb(184, 184, 20);"> <td style="background-color: rgb(163, 163, 41);"> <td style="background-color: rgb(143, 143, 61);"> <td style="background-color: rgb(122, 122, 82);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(153, 153, 0);"> <td style="background-color: rgb(138, 138, 15);"> <td style="background-color: rgb(122, 122, 31);"> <td style="background-color: rgb(107, 107, 46);"> <td style="background-color: rgb(92, 92, 61);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(102, 102, 0);"> <td style="background-color: rgb(92, 92, 10);"> <td style="background-color: rgb(82, 82, 20);"> <td style="background-color: rgb(71, 71, 31);"> <td style="background-color: rgb(61, 61, 41);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(51, 51, 0);"> <td style="background-color: rgb(46, 46, 5);"> <td style="background-color: rgb(41, 41, 10);"> <td style="background-color: rgb(36, 36, 15);"> <td style="background-color: rgb(31, 31, 20);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">90° Yellow-Greens <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(230, 255, 204);"> <td style="background-color: rgb(230, 250, 209);"> <td style="background-color: rgb(230, 245, 214);"> <td style="background-color: rgb(230, 240, 219);"> <td style="background-color: rgb(230, 235, 224);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(204, 255, 153);"> <td style="background-color: rgb(204, 245, 163);"> <td style="background-color: rgb(204, 235, 173);"> <td style="background-color: rgb(204, 224, 184);"> <td style="background-color: rgb(204, 214, 194);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(179, 255, 102);"> <td style="background-color: rgb(179, 240, 117);"> <td style="background-color: rgb(179, 224, 133);"> <td style="background-color: rgb(179, 209, 148);"> <td style="background-color: rgb(179, 194, 163);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(153, 255, 51);"> <td style="background-color: rgb(153, 235, 71);"> <td style="background-color: rgb(153, 214, 92);"> <td style="background-color: rgb(153, 194, 112);"> <td style="background-color: rgb(153, 173, 133);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(128, 255, 0);"> <td style="background-color: rgb(128, 230, 26);"> <td style="background-color: rgb(128, 204, 51);"> <td style="background-color: rgb(128, 179, 77);"> <td style="background-color: rgb(128, 153, 102);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(102, 204, 0);"> <td style="background-color: rgb(102, 184, 20);"> <td style="background-color: rgb(102, 163, 41);"> <td style="background-color: rgb(102, 143, 61);"> <td style="background-color: rgb(102, 122, 82);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(77, 153, 0);"> <td style="background-color: rgb(77, 138, 15);"> <td style="background-color: rgb(77, 122, 31);"> <td style="background-color: rgb(77, 107, 46);"> <td style="background-color: rgb(77, 92, 61);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(51, 102, 0);"> <td style="background-color: rgb(51, 92, 10);"> <td style="background-color: rgb(51, 82, 20);"> <td style="background-color: rgb(51, 71, 31);"> <td style="background-color: rgb(51, 61, 41);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(26, 51, 0);"> <td style="background-color: rgb(26, 46, 5);"> <td style="background-color: rgb(26, 41, 10);"> <td style="background-color: rgb(26, 36, 15);"> <td style="background-color: rgb(26, 31, 20);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">120° Greens <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(204, 255, 204);"> <td style="background-color: rgb(209, 250, 209);"> <td style="background-color: rgb(214, 245, 214);"> <td style="background-color: rgb(219, 240, 219);"> <td style="background-color: rgb(224, 235, 224);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(153, 255, 153);"> <td style="background-color: rgb(163, 245, 163);"> <td style="background-color: rgb(173, 235, 173);"> <td style="background-color: rgb(184, 224, 184);"> <td style="background-color: rgb(194, 214, 194);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(102, 255, 102);"> <td style="background-color: rgb(117, 240, 117);"> <td style="background-color: rgb(133, 224, 133);"> <td style="background-color: rgb(148, 209, 148);"> <td style="background-color: rgb(163, 194, 163);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(51, 255, 51);"> <td style="background-color: rgb(71, 235, 71);"> <td style="background-color: rgb(92, 214, 92);"> <td style="background-color: rgb(112, 194, 112);"> <td style="background-color: rgb(133, 173, 133);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(0, 255, 0);"> <td style="background-color: rgb(26, 230, 26);"> <td style="background-color: rgb(51, 204, 51);"> <td style="background-color: rgb(77, 179, 77);"> <td style="background-color: rgb(102, 153, 102);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(0, 204, 0);"> <td style="background-color: rgb(20, 184, 20);"> <td style="background-color: rgb(41, 163, 41);"> <td style="background-color: rgb(61, 143, 61);"> <td style="background-color: rgb(82, 122, 82);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(0, 153, 0);"> <td style="background-color: rgb(15, 138, 15);"> <td style="background-color: rgb(31, 122, 31);"> <td style="background-color: rgb(46, 107, 46);"> <td style="background-color: rgb(61, 92, 61);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(0, 102, 0);"> <td style="background-color: rgb(10, 92, 10);"> <td style="background-color: rgb(20, 82, 20);"> <td style="background-color: rgb(31, 71, 31);"> <td style="background-color: rgb(41, 61, 41);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(0, 51, 0);"> <td style="background-color: rgb(5, 46, 5);"> <td style="background-color: rgb(10, 41, 10);"> <td style="background-color: rgb(15, 36, 15);"> <td style="background-color: rgb(20, 31, 20);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">150° Green-Cyans <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(204, 255, 230);"> <td style="background-color: rgb(209, 250, 230);"> <td style="background-color: rgb(214, 245, 230);"> <td style="background-color: rgb(219, 240, 230);"> <td style="background-color: rgb(224, 235, 230);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(153, 255, 204);"> <td style="background-color: rgb(163, 245, 204);"> <td style="background-color: rgb(173, 235, 204);"> <td style="background-color: rgb(184, 224, 204);"> <td style="background-color: rgb(194, 214, 204);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(102, 255, 179);"> <td style="background-color: rgb(117, 240, 179);"> <td style="background-color: rgb(133, 224, 179);"> <td style="background-color: rgb(148, 209, 179);"> <td style="background-color: rgb(163, 194, 179);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(51, 255, 153);"> <td style="background-color: rgb(71, 235, 153);"> <td style="background-color: rgb(92, 214, 153);"> <td style="background-color: rgb(112, 194, 153);"> <td style="background-color: rgb(133, 173, 153);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(0, 255, 128);"> <td style="background-color: rgb(26, 230, 128);"> <td style="background-color: rgb(51, 204, 128);"> <td style="background-color: rgb(77, 179, 128);"> <td style="background-color: rgb(102, 153, 128);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(0, 204, 102);"> <td style="background-color: rgb(20, 184, 102);"> <td style="background-color: rgb(41, 163, 102);"> <td style="background-color: rgb(61, 143, 102);"> <td style="background-color: rgb(82, 122, 102);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(0, 153, 77);"> <td style="background-color: rgb(15, 138, 77);"> <td style="background-color: rgb(31, 122, 77);"> <td style="background-color: rgb(46, 107, 77);"> <td style="background-color: rgb(61, 92, 77);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(0, 102, 51);"> <td style="background-color: rgb(10, 92, 51);"> <td style="background-color: rgb(20, 82, 51);"> <td style="background-color: rgb(31, 71, 51);"> <td style="background-color: rgb(41, 61, 51);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(0, 51, 26);"> <td style="background-color: rgb(5, 46, 26);"> <td style="background-color: rgb(10, 41, 26);"> <td style="background-color: rgb(15, 36, 26);"> <td style="background-color: rgb(20, 31, 26);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">180° Cyans <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(204, 255, 255);"> <td style="background-color: rgb(209, 250, 250);"> <td style="background-color: rgb(214, 245, 245);"> <td style="background-color: rgb(219, 240, 240);"> <td style="background-color: rgb(224, 235, 235);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(153, 255, 255);"> <td style="background-color: rgb(163, 245, 245);"> <td style="background-color: rgb(173, 235, 235);"> <td style="background-color: rgb(184, 224, 224);"> <td style="background-color: rgb(194, 214, 214);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(102, 255, 255);"> <td style="background-color: rgb(117, 240, 240);"> <td style="background-color: rgb(133, 224, 224);"> <td style="background-color: rgb(148, 209, 209);"> <td style="background-color: rgb(163, 194, 194);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(51, 255, 255);"> <td style="background-color: rgb(71, 235, 235);"> <td style="background-color: rgb(92, 214, 214);"> <td style="background-color: rgb(112, 194, 194);"> <td style="background-color: rgb(133, 173, 173);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(0, 255, 255);"> <td style="background-color: rgb(26, 230, 230);"> <td style="background-color: rgb(51, 204, 204);"> <td style="background-color: rgb(77, 179, 179);"> <td style="background-color: rgb(102, 153, 153);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(0, 204, 204);"> <td style="background-color: rgb(20, 184, 184);"> <td style="background-color: rgb(41, 163, 163);"> <td style="background-color: rgb(61, 143, 143);"> <td style="background-color: rgb(82, 122, 122);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(0, 153, 153);"> <td style="background-color: rgb(15, 138, 138);"> <td style="background-color: rgb(31, 122, 122);"> <td style="background-color: rgb(46, 107, 107);"> <td style="background-color: rgb(61, 92, 92);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(0, 102, 102);"> <td style="background-color: rgb(10, 92, 92);"> <td style="background-color: rgb(20, 82, 82);"> <td style="background-color: rgb(31, 71, 71);"> <td style="background-color: rgb(41, 61, 61);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(0, 51, 51);"> <td style="background-color: rgb(5, 46, 46);"> <td style="background-color: rgb(10, 41, 41);"> <td style="background-color: rgb(15, 36, 36);"> <td style="background-color: rgb(20, 31, 31);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">210° Cyan-Blues <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(204, 230, 255);"> <td style="background-color: rgb(209, 230, 250);"> <td style="background-color: rgb(214, 230, 245);"> <td style="background-color: rgb(219, 230, 240);"> <td style="background-color: rgb(224, 230, 235);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(153, 204, 255);"> <td style="background-color: rgb(163, 204, 245);"> <td style="background-color: rgb(173, 204, 235);"> <td style="background-color: rgb(184, 204, 224);"> <td style="background-color: rgb(194, 204, 214);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(102, 179, 255);"> <td style="background-color: rgb(117, 179, 240);"> <td style="background-color: rgb(133, 179, 224);"> <td style="background-color: rgb(148, 179, 209);"> <td style="background-color: rgb(163, 179, 194);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(51, 153, 255);"> <td style="background-color: rgb(71, 153, 235);"> <td style="background-color: rgb(92, 153, 214);"> <td style="background-color: rgb(112, 153, 194);"> <td style="background-color: rgb(133, 153, 173);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(0, 128, 255);"> <td style="background-color: rgb(26, 128, 230);"> <td style="background-color: rgb(51, 128, 204);"> <td style="background-color: rgb(77, 128, 179);"> <td style="background-color: rgb(102, 128, 153);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(0, 102, 204);"> <td style="background-color: rgb(20, 102, 184);"> <td style="background-color: rgb(41, 102, 163);"> <td style="background-color: rgb(61, 102, 143);"> <td style="background-color: rgb(82, 102, 122);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(0, 77, 153);"> <td style="background-color: rgb(15, 77, 138);"> <td style="background-color: rgb(31, 77, 122);"> <td style="background-color: rgb(46, 77, 107);"> <td style="background-color: rgb(61, 77, 92);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(0, 51, 102);"> <td style="background-color: rgb(10, 51, 92);"> <td style="background-color: rgb(20, 51, 82);"> <td style="background-color: rgb(31, 51, 71);"> <td style="background-color: rgb(41, 51, 61);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(0, 26, 51);"> <td style="background-color: rgb(5, 26, 46);"> <td style="background-color: rgb(10, 26, 41);"> <td style="background-color: rgb(15, 26, 36);"> <td style="background-color: rgb(20, 26, 31);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">240° blues <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(204, 204, 255);"> <td style="background-color: rgb(209, 209, 250);"> <td style="background-color: rgb(214, 214, 245);"> <td style="background-color: rgb(219, 219, 240);"> <td style="background-color: rgb(224, 224, 235);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(153, 153, 255);"> <td style="background-color: rgb(163, 163, 245);"> <td style="background-color: rgb(173, 173, 235);"> <td style="background-color: rgb(184, 184, 224);"> <td style="background-color: rgb(194, 194, 214);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(102, 102, 255);"> <td style="background-color: rgb(117, 117, 240);"> <td style="background-color: rgb(133, 133, 224);"> <td style="background-color: rgb(148, 148, 209);"> <td style="background-color: rgb(163, 163, 194);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(51, 51, 255);"> <td style="background-color: rgb(71, 71, 235);"> <td style="background-color: rgb(92, 92, 214);"> <td style="background-color: rgb(112, 112, 194);"> <td style="background-color: rgb(133, 133, 173);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(0, 0, 255);"> <td style="background-color: rgb(26, 26, 230);"> <td style="background-color: rgb(51, 51, 204);"> <td style="background-color: rgb(77, 77, 179);"> <td style="background-color: rgb(102, 102, 153);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(0, 0, 204);"> <td style="background-color: rgb(20, 20, 184);"> <td style="background-color: rgb(41, 41, 163);"> <td style="background-color: rgb(61, 61, 143);"> <td style="background-color: rgb(82, 82, 122);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(0, 0, 153);"> <td style="background-color: rgb(15, 15, 138);"> <td style="background-color: rgb(31, 31, 122);"> <td style="background-color: rgb(46, 46, 107);"> <td style="background-color: rgb(61, 61, 92);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(0, 0, 102);"> <td style="background-color: rgb(10, 10, 92);"> <td style="background-color: rgb(20, 20, 82);"> <td style="background-color: rgb(31, 31, 71);"> <td style="background-color: rgb(41, 41, 61);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(0, 0, 51);"> <td style="background-color: rgb(5, 5, 46);"> <td style="background-color: rgb(10, 10, 41);"> <td style="background-color: rgb(15, 15, 36);"> <td style="background-color: rgb(20, 20, 31);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">270° Blue-Magentas <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(230, 204, 255);"> <td style="background-color: rgb(230, 209, 250);"> <td style="background-color: rgb(230, 214, 245);"> <td style="background-color: rgb(230, 219, 240);"> <td style="background-color: rgb(230, 224, 235);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(204, 153, 255);"> <td style="background-color: rgb(204, 163, 245);"> <td style="background-color: rgb(204, 173, 235);"> <td style="background-color: rgb(204, 184, 224);"> <td style="background-color: rgb(204, 194, 214);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(179, 102, 255);"> <td style="background-color: rgb(179, 117, 240);"> <td style="background-color: rgb(179, 133, 224);"> <td style="background-color: rgb(179, 148, 209);"> <td style="background-color: rgb(179, 163, 194);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(153, 51, 255);"> <td style="background-color: rgb(153, 71, 235);"> <td style="background-color: rgb(153, 92, 214);"> <td style="background-color: rgb(153, 112, 194);"> <td style="background-color: rgb(153, 133, 173);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(128, 0, 255);"> <td style="background-color: rgb(128, 26, 230);"> <td style="background-color: rgb(128, 51, 204);"> <td style="background-color: rgb(128, 77, 179);"> <td style="background-color: rgb(128, 102, 153);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(102, 0, 204);"> <td style="background-color: rgb(102, 20, 184);"> <td style="background-color: rgb(102, 41, 163);"> <td style="background-color: rgb(102, 61, 143);"> <td style="background-color: rgb(102, 82, 122);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(77, 0, 153);"> <td style="background-color: rgb(77, 15, 138);"> <td style="background-color: rgb(77, 31, 122);"> <td style="background-color: rgb(77, 46, 107);"> <td style="background-color: rgb(77, 61, 92);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(51, 0, 102);"> <td style="background-color: rgb(51, 10, 92);"> <td style="background-color: rgb(51, 20, 82);"> <td style="background-color: rgb(51, 31, 71);"> <td style="background-color: rgb(51, 41, 61);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(26, 0, 51);"> <td style="background-color: rgb(26, 5, 46);"> <td style="background-color: rgb(26, 10, 41);"> <td style="background-color: rgb(26, 15, 36);"> <td style="background-color: rgb(26, 20, 31);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">300° Magentas <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(255, 204, 255);"> <td style="background-color: rgb(250, 209, 250);"> <td style="background-color: rgb(245, 214, 245);"> <td style="background-color: rgb(240, 219, 240);"> <td style="background-color: rgb(235, 224, 235);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(255, 153, 255);"> <td style="background-color: rgb(245, 163, 245);"> <td style="background-color: rgb(235, 173, 235);"> <td style="background-color: rgb(224, 184, 224);"> <td style="background-color: rgb(214, 194, 214);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(255, 102, 255);"> <td style="background-color: rgb(240, 117, 240);"> <td style="background-color: rgb(224, 133, 224);"> <td style="background-color: rgb(209, 148, 209);"> <td style="background-color: rgb(194, 163, 194);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(255, 51, 255);"> <td style="background-color: rgb(235, 71, 235);"> <td style="background-color: rgb(214, 92, 214);"> <td style="background-color: rgb(194, 112, 194);"> <td style="background-color: rgb(173, 133, 173);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(255, 0, 255);"> <td style="background-color: rgb(230, 26, 230);"> <td style="background-color: rgb(204, 51, 204);"> <td style="background-color: rgb(179, 77, 179);"> <td style="background-color: rgb(153, 102, 153);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(204, 0, 204);"> <td style="background-color: rgb(184, 20, 184);"> <td style="background-color: rgb(163, 41, 163);"> <td style="background-color: rgb(143, 61, 143);"> <td style="background-color: rgb(122, 82, 122);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(153, 0, 153);"> <td style="background-color: rgb(138, 15, 138);"> <td style="background-color: rgb(122, 31, 122);"> <td style="background-color: rgb(107, 46, 107);"> <td style="background-color: rgb(92, 61, 92);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(102, 0, 102);"> <td style="background-color: rgb(92, 10, 92);"> <td style="background-color: rgb(82, 20, 82);"> <td style="background-color: rgb(71, 31, 71);"> <td style="background-color: rgb(61, 41, 61);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(51, 0, 51);"> <td style="background-color: rgb(46, 5, 46);"> <td style="background-color: rgb(41, 10, 41);"> <td style="background-color: rgb(36, 15, 36);"> <td style="background-color: rgb(31, 20, 31);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> <table> <thead> <tr> <th colspan="7">330° Magenta-Reds <tr> <th> <th>100% <th>80% <th>60% <th>40% <th>20% <th>0% <tbody> <tr> <th>100% <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <td style="background-color: rgb(255, 255, 255);"> <tr> <th>90% <td style="background-color: rgb(255, 204, 230);"> <td style="background-color: rgb(250, 209, 230);"> <td style="background-color: rgb(245, 214, 230);"> <td style="background-color: rgb(240, 219, 230);"> <td style="background-color: rgb(235, 224, 230);"> <td style="background-color: rgb(230, 230, 230);"> <tr> <th>80% <td style="background-color: rgb(255, 153, 204);"> <td style="background-color: rgb(245, 163, 204);"> <td style="background-color: rgb(235, 173, 204);"> <td style="background-color: rgb(224, 184, 204);"> <td style="background-color: rgb(214, 194, 204);"> <td style="background-color: rgb(204, 204, 204);"> <tr> <th>70% <td style="background-color: rgb(255, 102, 179);"> <td style="background-color: rgb(240, 117, 179);"> <td style="background-color: rgb(224, 133, 179);"> <td style="background-color: rgb(209, 148, 179);"> <td style="background-color: rgb(194, 163, 179);"> <td style="background-color: rgb(179, 179, 179);"> <tr> <th>60% <td style="background-color: rgb(255, 51, 153);"> <td style="background-color: rgb(235, 71, 153);"> <td style="background-color: rgb(214, 92, 153);"> <td style="background-color: rgb(194, 112, 153);"> <td style="background-color: rgb(173, 133, 153);"> <td style="background-color: rgb(153, 153, 153);"> <tr> <th>50% <td style="background-color: rgb(255, 0, 128);"> <td style="background-color: rgb(230, 26, 128);"> <td style="background-color: rgb(204, 51, 128);"> <td style="background-color: rgb(179, 77, 128);"> <td style="background-color: rgb(153, 102, 128);"> <td style="background-color: rgb(128, 128, 128);"> <tr> <th>40% <td style="background-color: rgb(204, 0, 102);"> <td style="background-color: rgb(184, 20, 102);"> <td style="background-color: rgb(163, 41, 102);"> <td style="background-color: rgb(143, 61, 102);"> <td style="background-color: rgb(122, 82, 102);"> <td style="background-color: rgb(102, 102, 102);"> <tr> <th>30% <td style="background-color: rgb(153, 0, 77);"> <td style="background-color: rgb(138, 15, 77);"> <td style="background-color: rgb(122, 31, 77);"> <td style="background-color: rgb(107, 46, 77);"> <td style="background-color: rgb(92, 61, 77);"> <td style="background-color: rgb(77, 77, 77);"> <tr> <th>20% <td style="background-color: rgb(102, 0, 51);"> <td style="background-color: rgb(92, 10, 51);"> <td style="background-color: rgb(82, 20, 51);"> <td style="background-color: rgb(71, 31, 51);"> <td style="background-color: rgb(61, 41, 51);"> <td style="background-color: rgb(51, 51, 51);"> <tr> <th>10% <td style="background-color: rgb(51, 0, 26);"> <td style="background-color: rgb(46, 5, 26);"> <td style="background-color: rgb(41, 10, 26);"> <td style="background-color: rgb(36, 15, 26);"> <td style="background-color: rgb(31, 20, 26);"> <td style="background-color: rgb(26, 26, 26);"> <tr> <th>0% <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> <td style="background-color: rgb(0, 0, 0);"> </table> </div> <h2 class="heading settled" data-level="8" id="the-hwb-notation">8. HWB Colors: <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb④">hwb()</a> function<a class="self-link" href="#the-hwb-notation"></a></h2> <dfn class="dfn-paneled css" data-dfn-for="hwb()" data-dfn-type="value" data-export id="valdef-hwb-hwb">HWB</dfn> (short for Hue-Whiteness-Blackness) <a data-link-type="biblio" href="#biblio-hwb" title="HWB — A More Intuitive Hue-Based Color Model">[HWB]</a> is another method of specifying sRGB colors, similar to <a class="css" data-link-type="maybe" href="#valdef-hsl-hsl" id="ref-for-valdef-hsl-hsl">HSL</a>', but often even easier for humans to work with. It describes colors with a starting hue, then a degree of whiteness and blackness to mix into that base hue. Many color-pickers are based on the HWB color system, due to its intuitiveness. HWB colors resolve to sRGB. <figure id="fig-chrome-hwb-picker"> <img alt height="309" src="images/color-picker.png" width="545"> <figcaption> This is a screenshot of Chrome’s color picker, shown when a user activates an <code class="lang-markup highlight"><c- p><</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>"color"</c-><c- p>></c-></code>. The outer wheel is used to select the hue, then the relative amounts of white and black are selected by clicking on the inner triangle. </figcaption> </figure> The syntax of the <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb⑤">hwb()</a> function is: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-hwb"><c- nf>hwb</c-><c- p>()</c-></dfn> = <c- nf>hwb</c-><c- p>(</c-> <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue⑧"><hue></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④①">|</a> none<c- p>]</c-> <c- p>[</c-><a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①⑦"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④②">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①⑤"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④③">|</a> none<c- p>]</c-> <c- p>[</c-><a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①⑧"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④④">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①⑥"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑤">|</a> none<c- p>]</c-> <c- p>[</c-> / <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①③"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑥">|</a> none<c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⓪">?</a> <c- p>)</c-> </pre> <table id="prr-hwb"> <tbody> <tr> <th>Percentages <td>Allowed for W and B <tr> <th>Percent reference range <td> for W and B: 0% = 0.0, 100% = 100.0 </table> The first argument specifies the hue, and is interpreted identically to <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①①">hsl()</a>; this means it <a href="#disadvantage-hsl">suffers the same disadvantages</a> such as hue uniformity. The second argument specifies the amount of white to mix in, as a percentage from 0% (no whiteness) to 100% (full whiteness). Similarly, the third argument specifies the amount of black to mix in, also from 0% (no blackness) to 100% (full blackness). <div class="example" id="ex-hwb-simple"><a class="self-link" href="#ex-hwb-simple"></a> For example, hwb(150 20% 10%) is the same color as hsl(150 77.78% 55%) and rgb(20% 90% 55%). </div> Values outside of these ranges are not invalid; hue angles outside the range [0,360) will be normalized to that range and values of white and black which sum to 100% or greater will produce achromatic colors as described below. The resulting color can be thought of conceptually as a mixture of paint in the chosen hue, white paint, and black paint, with the relative amounts of each determined by the percentages. If the sum white+black is greater than or equal to 100%, it defines an achromatic color, i.e. a shade of gray; when converted to sRGB the R, G and B values are identical and have the value white / (white + black). <div class="example" id="ex-hwb-achromatic"><a class="self-link" href="#ex-hwb-achromatic"></a> For example, in the color hwb(45 40% 80%) white and black adds to 120, so this is an achromatic color whose R, G and B components are 40 / 40 + 80 = 0.33 rgb(33.33% 33.33% 33.33%). </div> Achromatic HWB colors no longer contain any hint of the chosen hue. In this case, the hue component is <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component⑨">powerless</a>. The fourth argument specifies the alpha channel of the color. It’s interpreted identically to the fourth argument of the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb⑨">rgb()</a> function. If omitted, it defaults to 100%. There is no Web compatibility issue with <a class="css" data-link-type="maybe" href="#valdef-hwb-hwb" id="ref-for-valdef-hwb-hwb">hwb</a>, which is new in this level of the specification, and so <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb⑥">hwb()</a> does not support a <a data-link-type="dfn" href="#legacy-color-syntax" id="ref-for-legacy-color-syntax⑤">legacy color syntax</a> that separates all of its arguments with commas. Using commas inside hwb() is an error. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hwb-001.html" title="css/css-color/hwb-001.html">hwb-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hwb-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hwb-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hwb-002.html" title="css/css-color/hwb-002.html">hwb-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hwb-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hwb-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hwb-003.html" title="css/css-color/hwb-003.html">hwb-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hwb-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hwb-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hwb-004.html" title="css/css-color/hwb-004.html">hwb-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hwb-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hwb-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/hwb-005.html" title="css/css-color/hwb-005.html">hwb-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/hwb-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/hwb-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-hwb.html" title="css/css-color/parsing/color-computed-hwb.html">color-computed-hwb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-hwb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-hwb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-hwb.html" title="css/css-color/parsing/color-invalid-hwb.html">color-invalid-hwb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-hwb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-hwb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-hwb.html" title="css/css-color/parsing/color-valid-hwb.html">color-valid-hwb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-hwb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-hwb.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="8.1" id="hwb-to-rgb">8.1. Converting HWB Colors to sRGB<a class="self-link" href="#hwb-to-rgb"></a></h3> Converting an HWB color to sRGB is straightforward, and related to how one converts HSL to RGB. The following Javascript implementation of the algorithm first normalizes the white and black components, so their sum is no larger than 100%. <pre class="include-code highlight"><c- d>/**</c-> <c- d> * @param {number} hue - Hue as degrees 0..360</c-> <c- d> * @param {number} white - Whiteness in reference range [0,100]</c-> <c- d> * @param {number} black - Blackness in reference range [0,100]</c-> <c- d> * @return {number[]} Array of RGB components 0..1</c-> <c- d> */</c-> <c- a>function</c-> hwbToRgb<c- p>(</c->hue<c- p>,</c-> white<c- p>,</c-> black<c- p>)</c-> <c- p>{</c-> white <c- o>/=</c-> <c- mf>100</c-><c- p>;</c-> black <c- o>/=</c-> <c- mf>100</c-><c- p>;</c-> <c- k>if</c-> <c- p>(</c->white <c- o>+</c-> black <c- o>>=</c-> <c- mf>1</c-><c- p>)</c-> <c- p>{</c-> <c- a>let</c-> gray <c- o>=</c-> white <c- o>/</c-> <c- p>(</c->white <c- o>+</c-> black<c- p>);</c-> <c- k>return</c-> <c- p>[</c->gray<c- p>,</c-> gray<c- p>,</c-> gray<c- p>];</c-> <c- p>}</c-> <c- a>let</c-> rgb <c- o>=</c-> hslToRgb<c- p>(</c->hue<c- p>,</c-> <c- mf>100</c-><c- p>,</c-> <c- mf>50</c-><c- p>);</c-> <c- k>for</c-> <c- p>(</c-><c- a>let</c-> i <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> i <c- o><</c-> <c- mf>3</c-><c- p>;</c-> i<c- o>++</c-><c- p>)</c-> <c- p>{</c-> rgb<c- p>[</c->i<c- p>]</c-> <c- o>*=</c-> <c- p>(</c-><c- mf>1</c-> <c- o>-</c-> white <c- o>-</c-> black<c- p>);</c-> rgb<c- p>[</c->i<c- p>]</c-> <c- o>+=</c-> white<c- p>;</c-> <c- p>}</c-> <c- k>return</c-> rgb<c- p>;</c-> <c- p>}</c-></pre> <h3 class="heading settled" data-level="8.2" id="rgb-to-hwb">8.2. Converting sRGB Colors to HWB<a class="self-link" href="#rgb-to-hwb"></a></h3> Conversion in the reverse direction proceeds similarly. <pre class="include-code highlight"><c- d>/**</c-> <c- d> * @param {number} red - Red component 0..1</c-> <c- d> * @param {number} green - Green component 0..1</c-> <c- d> * @param {number} blue - Blue component 0..1</c-> <c- d> * @return {number} Hue as degrees 0..360</c-> <c- d> */</c-> <c- a>function</c-> rgbToHue<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>)</c-> <c- p>{</c-> <c- c1>// Similar to rgbToHsl, except that saturation and lightness are not calculated, and</c-> <c- c1>// potential negative saturation is ignored.</c-> <c- a>let</c-> max <c- o>=</c-> Math<c- p>.</c->max<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>);</c-> <c- a>let</c-> min <c- o>=</c-> Math<c- p>.</c->min<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>);</c-> <c- a>let</c-> hue <c- o>=</c-> <c- kc>NaN</c-><c- p>;</c-> <c- a>let</c-> d <c- o>=</c-> max <c- o>-</c-> min<c- p>;</c-> <c- k>if</c-> <c- p>(</c->d <c- o>!==</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> <c- k>switch</c-> <c- p>(</c->max<c- p>)</c-> <c- p>{</c-> <c- k>case</c-> red<c- o>:</c-> hue <c- o>=</c-> <c- p>(</c->green <c- o>-</c-> blue<c- p>)</c-> <c- o>/</c-> d <c- o>+</c-> <c- p>(</c->green <c- o><</c-> blue <c- o>?</c-> <c- mf>6</c-> <c- o>:</c-> <c- mf>0</c-><c- p>);</c-> <c- k>break</c-><c- p>;</c-> <c- k>case</c-> green<c- o>:</c-> hue <c- o>=</c-> <c- p>(</c->blue <c- o>-</c-> red<c- p>)</c-> <c- o>/</c-> d <c- o>+</c-> <c- mf>2</c-><c- p>;</c-> <c- k>break</c-><c- p>;</c-> <c- k>case</c-> blue<c- o>:</c-> hue <c- o>=</c-> <c- p>(</c->red <c- o>-</c-> green<c- p>)</c-> <c- o>/</c-> d <c- o>+</c-> <c- mf>4</c-><c- p>;</c-> <c- p>}</c-> hue <c- o>*=</c-> <c- mf>60</c-><c- p>;</c-> <c- p>}</c-> <c- k>if</c-> <c- p>(</c->hue <c- o>>=</c-> <c- mf>360</c-><c- p>)</c-> <c- p>{</c-> hue <c- o>-=</c-> <c- mf>360</c-><c- p>;</c-> <c- p>}</c-> <c- k>return</c-> hue<c- p>;</c-> <c- p>}</c-> <c- d>/**</c-> <c- d> * @param {number} red - Red component 0..1</c-> <c- d> * @param {number} green - Green component 0..1</c-> <c- d> * @param {number} blue - Blue component 0..1</c-> <c- d> * @return {number[]} Array of HWB values: Hue as degrees 0..360, Whiteness and Blackness in reference range [0,100]</c-> <c- d> */</c-> <c- a>function</c-> rgbToHwb<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>)</c-> <c- p>{</c-> <c- a>var</c-> hue <c- o>=</c-> rgbToHue<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>);</c-> <c- a>var</c-> white <c- o>=</c-> Math<c- p>.</c->min<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>);</c-> <c- a>var</c-> black <c- o>=</c-> <c- mf>1</c-> <c- o>-</c-> Math<c- p>.</c->max<c- p>(</c->red<c- p>,</c-> green<c- p>,</c-> blue<c- p>);</c-> <c- k>return</c-><c- p>([</c->hue<c- p>,</c-> white<c- o>*</c-><c- mf>100</c-><c- p>,</c-> black<c- o>*</c-><c- mf>100</c-><c- p>]);</c-> <c- p>}</c-> </pre> <h3 class="heading settled" data-level="8.3" id="hwb-examples">8.3. Examples of HWB Colors<a class="self-link" href="#hwb-examples"></a></h3> This section is not normative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section is not normative, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> <div class="color-table"> <table> <tbody> <tr> <th> <th colspan="6">0° Reds <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#ff0000"> <td style="background-color:#cc0000"> <td style="background-color:#990000"> <td style="background-color:#660000"> <td style="background-color:#330000"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#ff3333"> <td style="background-color:#cc3333"> <td style="background-color:#993333"> <td style="background-color:#663333"> <td style="background-color:#333333"> <td style="background-color:#2a2b2b"> <tr> <th>40% <td style="background-color:#ff6666"> <td style="background-color:#cc6666"> <td style="background-color:#996666"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#ff9999"> <td style="background-color:#cc9999"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#ffcccc"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d4d5d5"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">30° Red-Yellows (Oranges) <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#ff8000"> <td style="background-color:#cc6600"> <td style="background-color:#994d00"> <td style="background-color:#663300"> <td style="background-color:#331900"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#ff9933"> <td style="background-color:#cc8033"> <td style="background-color:#996633"> <td style="background-color:#664d33"> <td style="background-color:#333333"> <td style="background-color:#2a2a2b"> <tr> <th>40% <td style="background-color:#ffb366"> <td style="background-color:#cc9966"> <td style="background-color:#998066"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#ffcc99"> <td style="background-color:#ccb399"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#ffe6cc"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d4d5d5"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">60° Yellows <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#ffff00"> <td style="background-color:#cccc00"> <td style="background-color:#999900"> <td style="background-color:#666600"> <td style="background-color:#333300"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#ffff33"> <td style="background-color:#cccc33"> <td style="background-color:#999933"> <td style="background-color:#666633"> <td style="background-color:#333333"> <td style="background-color:#2a2a2b"> <tr> <th>40% <td style="background-color:#ffff66"> <td style="background-color:#cccc66"> <td style="background-color:#999966"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#ffff99"> <td style="background-color:#cccc99"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#ffffcc"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d5d4d5"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">90° Yellow-Greens <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#80ff00"> <td style="background-color:#66cc00"> <td style="background-color:#4d9900"> <td style="background-color:#336600"> <td style="background-color:#1a3300"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#99ff33"> <td style="background-color:#80cc33"> <td style="background-color:#669933"> <td style="background-color:#4d6633"> <td style="background-color:#333333"> <td style="background-color:#2a2a2b"> <tr> <th>40% <td style="background-color:#b3ff66"> <td style="background-color:#99cc66"> <td style="background-color:#809966"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#ccff99"> <td style="background-color:#b3cc99"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#e6ffcc"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d5d4d5"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">120° Greens <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#00ff00"> <td style="background-color:#00cc00"> <td style="background-color:#009900"> <td style="background-color:#006600"> <td style="background-color:#003300"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#33ff33"> <td style="background-color:#33cc33"> <td style="background-color:#339933"> <td style="background-color:#336633"> <td style="background-color:#333333"> <td style="background-color:#2b2a2b"> <tr> <th>40% <td style="background-color:#66ff66"> <td style="background-color:#66cc66"> <td style="background-color:#669966"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#99ff99"> <td style="background-color:#99cc99"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#ccffcc"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d5d4d5"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">150° Green-Cyans <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#00ff7f"> <td style="background-color:#00cc66"> <td style="background-color:#00994c"> <td style="background-color:#006633"> <td style="background-color:#003319"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#33ff99"> <td style="background-color:#33cc7f"> <td style="background-color:#339966"> <td style="background-color:#33664c"> <td style="background-color:#333333"> <td style="background-color:#2b2a2a"> <tr> <th>40% <td style="background-color:#66ffb2"> <td style="background-color:#66cc99"> <td style="background-color:#66997f"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#99ffcc"> <td style="background-color:#99ccb3"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#ccffe5"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d5d4d5"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">180° Cyans <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#00ffff"> <td style="background-color:#00cccc"> <td style="background-color:#009999"> <td style="background-color:#006666"> <td style="background-color:#003333"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#33ffff"> <td style="background-color:#33cccc"> <td style="background-color:#339999"> <td style="background-color:#336666"> <td style="background-color:#333333"> <td style="background-color:#2b2a2a"> <tr> <th>40% <td style="background-color:#66ffff"> <td style="background-color:#66cccc"> <td style="background-color:#669999"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#99ffff"> <td style="background-color:#99cccc"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#ccffff"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d5d5d5"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">210° Cyan-Blues <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#007fff"> <td style="background-color:#0066cc"> <td style="background-color:#004c99"> <td style="background-color:#003366"> <td style="background-color:#001933"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#3399ff"> <td style="background-color:#337fcc"> <td style="background-color:#336699"> <td style="background-color:#334c66"> <td style="background-color:#333333"> <td style="background-color:#2b2a2a"> <tr> <th>40% <td style="background-color:#66b2ff"> <td style="background-color:#6699cc"> <td style="background-color:#667f99"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#99ccff"> <td style="background-color:#99b3cc"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#cce5ff"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d5d5d4"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">240° Blues <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#0000ff"> <td style="background-color:#0000cc"> <td style="background-color:#000099"> <td style="background-color:#000066"> <td style="background-color:#000033"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#3333ff"> <td style="background-color:#3333cc"> <td style="background-color:#333399"> <td style="background-color:#333366"> <td style="background-color:#333333"> <td style="background-color:#2b2b2a"> <tr> <th>40% <td style="background-color:#6666ff"> <td style="background-color:#6666cc"> <td style="background-color:#666699"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#9999ff"> <td style="background-color:#9999cc"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#ccccff"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d5d5d4"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">270° Blue-Magentas <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#7f00ff"> <td style="background-color:#6600cc"> <td style="background-color:#4c0099"> <td style="background-color:#330066"> <td style="background-color:#190033"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#9933ff"> <td style="background-color:#7f33cc"> <td style="background-color:#663399"> <td style="background-color:#4c3366"> <td style="background-color:#333333"> <td style="background-color:#2a2b2a"> <tr> <th>40% <td style="background-color:#b266ff"> <td style="background-color:#9966cc"> <td style="background-color:#7f6699"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#cc99ff"> <td style="background-color:#b399cc"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#e5ccff"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d5d5d4"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">300° Magentas <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#ff00ff"> <td style="background-color:#cc00cc"> <td style="background-color:#990099"> <td style="background-color:#660066"> <td style="background-color:#330033"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#ff33ff"> <td style="background-color:#cc33cc"> <td style="background-color:#993399"> <td style="background-color:#663366"> <td style="background-color:#333333"> <td style="background-color:#2a2b2a"> <tr> <th>40% <td style="background-color:#ff66ff"> <td style="background-color:#cc66cc"> <td style="background-color:#996699"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#ff99ff"> <td style="background-color:#cc99cc"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#ffccff"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d4d5d5"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> <table> <tbody> <tr> <th> <th colspan="6">330° Magenta-Reds <tr> <th>W\B <th>0% <th>20% <th>40% <th>60% <th>80% <th>100% <tr> <th>0% <td style="background-color:#ff0080"> <td style="background-color:#cc0066"> <td style="background-color:#99004d"> <td style="background-color:#660033"> <td style="background-color:#33001a"> <td style="background-color:#000000"> <tr> <th>20% <td style="background-color:#ff3399"> <td style="background-color:#cc3380"> <td style="background-color:#993366"> <td style="background-color:#66334d"> <td style="background-color:#333333"> <td style="background-color:#2a2b2a"> <tr> <th>40% <td style="background-color:#ff66b3"> <td style="background-color:#cc6699"> <td style="background-color:#996680"> <td style="background-color:#666666"> <td style="background-color:#555555"> <td style="background-color:#494949"> <tr> <th>60% <td style="background-color:#ff99cc"> <td style="background-color:#cc99b3"> <td style="background-color:#999999"> <td style="background-color:#808080"> <td style="background-color:#6d6d6d"> <td style="background-color:#606060"> <tr> <th>80% <td style="background-color:#ffcce6"> <td style="background-color:#cccccc"> <td style="background-color:#aaaaaa"> <td style="background-color:#929292"> <td style="background-color:#808080"> <td style="background-color:#717171"> <tr> <th>100% <td style="background-color:#ffffff"> <td style="background-color:#d4d5d5"> <td style="background-color:#b6b6b6"> <td style="background-color:#9f9f9f"> <td style="background-color:#8e8e8e"> <td style="background-color:#808080"> </table> </div> <h2 class="heading settled" data-level="9" id="lab-colors">9. Device-independent Colors: CIE Lab and LCH, Oklab and Oklch<a class="self-link" href="#lab-colors"></a></h2> <h3 class="informative heading settled" data-level="9.1" id="cie-lab">9.1. CIE Lab and LCH<a class="self-link" href="#cie-lab"></a></h3> This section is not normative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section is not normative, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> Physical measurements of a color are typically expressed in the CIE L*a*b* <a data-link-type="biblio" href="#biblio-cielab" title="ISO/CIE 11664-4:2019(E): Colorimetry — Part 4: CIE 1976 L*a*b* colour space">[CIELAB]</a> color space, created in 1976 by the <abbr title="Commission Internationale de l'Eclairage">CIE</abbr> and commonly referred to simply as Lab. Color conversions from one device to another may also use Lab as an intermediate step. Derived from human vision experiments, Lab represents the entire range of color that humans can see. Lab is a rectangular coordinate system with a central Lightness (L) axis. This value is usually written as a unitless number; for compatibility with the rest of CSS, it may also be written as a percentage. 100% means an L value of 100, not 1.0. L=0% or 0 is deep black (no light at all) while L=100% or 100 is a diffuse white. Usefully, L=50% or 50 is mid gray, by design, and equal increments in L are evenly spaced visually: the Lab color space is intended to be perceptually uniform. <figure id="lightness-vs-luminance"> <img alt height="575" src="images/L-axis.svg" width="240"> <img alt height="575" src="images/Luminance.svg" width="240"> <figcaption> This figure shows, to the left, the Lightness axis of the CIE Lab color space. Twenty-one neutral swatches are shown (L=0%, L=5%, to L=100%). The steps are equally spaced, visually. To the right, the same number of steps in <a data-link-type="dfn" href="#luminance" id="ref-for-luminance">luminance</a> are equally spaced in light energy but not equally spaced visually. </figcaption> </figure> The a and b axes convey hue; positive values along the a axis are a purplish red while negative values are the complementary color, a green. Similarly, positive values along the b axis are yellow and negative are the complementary blue/violet. Desaturated colors have small values of a and b and are close to the L axis; saturated colors lie far from the L axis. The illuminant is <a data-link-type="dfn" href="#d50-whitepoint" id="ref-for-d50-whitepoint">D50</a> white, a standardized daylight spectrum with a color temperature of 5000K, as reflected by a perfect diffuse reflector; it approximates the color of sunlight on a sunny day. D50 is also the whitepoint used for the profile connection space in ICC color interconversion, the whitepoint used in image editors which offer Lab editing, and the value used by physical measurement devices such as spectrophotometers and spectroradiometers, when they report measured colors in Lab. Conversion from colors specified using other white points is called a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="chromatic-adaptation-transform">chromatic adaptation transform</dfn>, which models the changes in the human visual system as we adapt to a new lighting condition. The linear Bradford algorithm <a data-link-type="biblio" href="#biblio-icc" title="ICC.1:2022 (Profile version 4.4.0.0)">[ICC]</a> (a simplification of the original Bradford algorithm <a data-link-type="biblio" href="#biblio-bradford-cat" title="A Chromatic Adaptation Transform and a Colour Inconstancy Index. Color Research & Application 23(3) 154-158">[Bradford-CAT]</a>) is the industry standard chromatic adaptation transform, and is easy to calculate as it is a simple matrix multiplication. CIE LCH has the same L axis as Lab, but uses polar coordinates C (chroma) and H (hue), making it a polar, cylindrical coordinate system. C is the geometric distance from the L axis and H is the angle from the positive a axis, towards the positive b axis. <figure id="fig-cie-lch-hues"> <img height="500" src="images/CH-plane-wheel.svg" width="500"> <figcaption> This figure shows the L=50 plane of the CIE Lab color space. 20 degree increments in CIE LCH are displayed as circles at three levels of Chroma: 20, 40 and 60. All the 20 Chroma colors fit inside sRGB gamut, some of 40 and 60 Chroma are outside. These out of gamut colors are visualized as grey, with a red warning outer stroke. </figcaption> </figure> Note: The L axis in Lab and LCH is not to be confused with the L axis in HSL. For example, in HSL, the sRGB colors blue (#00F) and yellow (#FF0) have the same value of L (50%) even though visually, blue is much darker. This is much clearer in Lab: sRGB blue is lab(29.567% 68.298 -112.0294) while sRGB yellow is lab(97.607% -15.753 93.388). In Lab and LCH, if two colors have the same measured L value, they have identical visual lightness. HSL and related polar RGB models were developed in an attempt to give similar usability benefits for RGB that LCH gave to Lab, but are significantly less accurate. Although the use of CIE Lab and LCH is widespread, it is known to have some problems. In particular: <dl> <dt>Hue linearity <dd> In the blue region (LCH Hue between 270° and 330°), visual hue departs from what LCH predicts. Plotting a set of blues of the same hue and differing Chroma, which should lie on a straight line from the neutral axis, instead form a curve. Put another way, as a saturated blue has it’s Chroma progressively reduced, it becomes noticeably purple. <dt>Hue uniformity <dd> While hues in LCH are in general evenly spaced, (and far better than HSL or HWB), uniformity is not perfect. <dt>Over-prediction of high Chroma differences <dd> For high Chroma colors, changes in Chroma are less noticeable than for more neutral colors. </dl> These deficiencies affect, for example, creation of evenly spaced gradients, gamut mapping from one color space to a smaller one, and computation of the visual difference between two colors. To compensate for this, formulae to predict the visual difference between two colors (delta E) have been made more accurate over time (but also, much more complex to compute). The current industry standard formula, delta E 2000, works well to mitigate some of the Lab and LCH problems. A sample implementation is given in <a href="#color-difference-2000">§ 18.1 ΔE2000</a>. This does not help with hue curvature, however. <h3 class="informative heading settled" data-level="9.2" id="ok-lab">9.2. Oklab and Oklch<a class="self-link" href="#ok-lab"></a></h3> This section is not normative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section is not normative, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> Recently, Oklab, an improved Lab-like space has been developed <a data-link-type="biblio" href="#biblio-oklab" title="A perceptual color space for image processing">[Oklab]</a>. The corresponding polar form is called Oklch. It was produced by numerical optimization of a large dataset of visually similar colors, and has improved hue linearity, hue uniformity, and chroma uniformity compared to CIE LCH. Like CIE Lab, there is a central lightness L axis which is usually written as a unitless number in the range [0,1]; for compatibility with the rest of CSS, it may be written as a percentage. 100% means an L value of 1.0. L=0% or 0.0 is deep black (no light at all) while L=100% or 1.0 is a diffuse white. Note: Unlike CIE Lab, which assumes adaptation to the diffuse white, Oklab assumes adaptation to the color being defined, which is intended to make it scale invariant. As with CIE Lab, the a and b axes convey hue; positive values along the a axis are a purplish red while negative values are the complementary color, a green. Similarly, positive values along the b axis are yellow and negative are the complementary blue/violet. The illuminant is <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint①">D65</a>, the same white point as most RGB color spaces. Oklch has the same L axis as Oklab, but uses polar coordinates C (chroma) and H (hue). Note: Unlike CIE LCH, where Chroma can reach values of 200 or more, Oklch Chroma ranges to 0.5 or so. The hue angles between CIE LCH and Oklch are broadly similar, but not identical. <figure id="CIELCH-blue-hueshift"> <img alt="diagram showing purpling in CIE LCH" height="1848" src="images/CIELCH-blue-slice.png" width="2434"> <figcaption>A constant CIE LCH hue slice, showing the sRGB gamut around primary blue. A noticeable purpling is immediately evident. </figcaption> </figure> <figure id="Oklch-blue-no-hueshift"> <img alt="diagram showing hue constancy in Oklch" height="1824" src="images/OKLCH-blue-slice.png" width="2485"> <figcaption>A constant Oklch hue slice, showing the sRGB gamut around primary blue. The visual hue remains constant. </figcaption> </figure> Because Oklab is more perceptually uniform than CIE Lab, the color difference is a straightforward distance in 3D space (root sum of squares). Although trivial, a sample implementation is give in <a href="#color-difference-OK">§ 18.2 ΔEOK</a>. <h3 class="heading settled" data-level="9.3" id="specifying-lab-lch">9.3. Specifying Lab and LCH: the <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab②">lab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch④">lch()</a> functional notations<a class="self-link" href="#specifying-lab-lch"></a></h3> CSS allows colors to be directly expressed in Lab and LCH. <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-lab"><c- nf>lab</c-><c- p>()</c-></dfn> = <c- nf>lab</c-><c- p>(</c-> <c- p>[</c-><a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①⑨"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑦">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①⑦"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑧">|</a> none<c- p>]</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②⓪"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④⑨">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①⑧"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⓪">|</a> none<c- p>]</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②①"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤①">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①⑨"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤②">|</a> none<c- p>]</c-> <c- p>[</c-> / <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①④"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤③">|</a> none<c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①①">?</a> <c- p>)</c-> </pre> <table id="prr-lab"> <tbody> <tr> <th>Percentages <td>Allowed for L, a and b <tr> <th>Percent reference range <td> for L: 0% = 0.0, 100% = 100.0 for a and b: -100% = -125, 100% = 125 </table> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-001.html" title="css/css-color/lab-001.html">lab-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-002.html" title="css/css-color/lab-002.html">lab-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-003.html" title="css/css-color/lab-003.html">lab-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-004.html" title="css/css-color/lab-004.html">lab-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-005.html" title="css/css-color/lab-005.html">lab-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-006.html" title="css/css-color/lab-006.html">lab-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-007.html" title="css/css-color/lab-007.html">lab-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-008.html" title="css/css-color/lab-008.html">lab-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-l-over-100-1.html" title="css/css-color/lab-l-over-100-1.html">lab-l-over-100-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-l-over-100-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-l-over-100-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lab-l-over-100-2.html" title="css/css-color/lab-l-over-100-2.html">lab-l-over-100-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lab-l-over-100-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lab-l-over-100-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-lab.html" title="css/css-color/parsing/color-computed-lab.html">color-computed-lab.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-lab.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-lab.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-lab.html" title="css/css-color/parsing/color-invalid-lab.html">color-invalid-lab.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-lab.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-lab.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-lab.html" title="css/css-color/parsing/color-valid-lab.html">color-valid-lab.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-lab.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-lab.html">(source)</a> </ul> </details> In <dfn class="dfn-paneled css" data-dfn-for="lab()" data-dfn-type="value" data-export id="valdef-lab-lab">Lab</dfn>, the first argument specifies the CIE Lightness, L. This is a number between 0% or 0 and 100% or 100 Values less than 0% or 0 must be clamped to 0% at parsed-value time; values greater than 100% or 100 are clamped to 100% at parsed-value time. The second and third arguments are the distances along the "a" and "b" axes in the Lab color space, as described in the previous section. These values are signed (allow both positive and negative values) and theoretically unbounded (but in practice do not exceed ±160). There is an optional fourth <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①⑤"><alpha-value></a> component, separated by a slash, representing the <a data-link-type="dfn" href="#alpha-channel" id="ref-for-alpha-channel">alpha component</a>. If the lightness of a Lab color (after clamping) is 0%, or 100% the color will be displayed as black, or white, respectively due to gamut mapping to the display. <div class="example" id="ex-lab-samples"> <a class="self-link" href="#ex-lab-samples"></a> <pre class="lang-css highlight"> <c- nf>lab</c-><c- p>(</c-><c- m>29.2345</c-><c- k>%</c-> <c- m>39.3825</c-> <c- m>20.0664</c-><c- p>);</c-> <c- nf>lab</c-><c- p>(</c-><c- m>52.2345</c-> <c- m>40.1645</c-> <c- m>59.9971</c-><c- p>);</c-> <c- nf>lab</c-><c- p>(</c-><c- m>60.2345</c-> <c- m>-5.3654</c-> <c- m>58.956</c-><c- p>);</c-> <c- nf>lab</c-><c- p>(</c-><c- m>62.2345</c-><c- k>%</c-> <c- m>-34.9638</c-> <c- m>47.7721</c-><c- p>);</c-> <c- nf>lab</c-><c- p>(</c-><c- m>67.5345</c-> <c- m>-8.6911</c-> <c- m>-41.6019</c-><c- p>);</c-> <c- nf>lab</c-><c- p>(</c-><c- m>29.69</c-><c- k>%</c-> <c- m>44.888</c-><c- k>%</c-> <c- m>-29.04</c-><c- k>%</c-><c- p>)</c-> </pre> </div> <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-lch"><c- nf>lch</c-><c- p>()</c-></dfn> = <c- nf>lch</c-><c- p>(</c-> <c- p>[</c-><a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②②"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤④">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②⓪"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑤">|</a> none<c- p>]</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②③"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑥">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②①"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑦">|</a> none<c- p>]</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue⑨"><hue></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑧">|</a> none<c- p>]</c-> <c- p>[</c-> / <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①⑥"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤⑨">|</a> none<c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①②">?</a> <c- p>)</c-> </pre> <table id="prr-lch"> <tbody> <tr> <th>Percentages <td>Allowed for L and C <tr> <th>Percent reference range <td> for L: 0% = 0.0, 100% = 100.0 for C: 0% = 0, 100% = 150 </table> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-001.html" title="css/css-color/lch-001.html">lch-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-002.html" title="css/css-color/lch-002.html">lch-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-003.html" title="css/css-color/lch-003.html">lch-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-004.html" title="css/css-color/lch-004.html">lch-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-005.html" title="css/css-color/lch-005.html">lch-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-006.html" title="css/css-color/lch-006.html">lch-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-007.html" title="css/css-color/lch-007.html">lch-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-008.html" title="css/css-color/lch-008.html">lch-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-009.html" title="css/css-color/lch-009.html">lch-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-010.html" title="css/css-color/lch-010.html">lch-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-l-over-100-1.html" title="css/css-color/lch-l-over-100-1.html">lch-l-over-100-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-l-over-100-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-l-over-100-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/lch-l-over-100-2.html" title="css/css-color/lch-l-over-100-2.html">lch-l-over-100-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/lch-l-over-100-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/lch-l-over-100-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> In CIE <dfn class="dfn-paneled css" data-dfn-for="lch()" data-dfn-type="value" data-export id="valdef-lch-lch">LCH</dfn> the first argument specifies the CIE Lightness L, interpreted identically to the Lightness argument of <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab③">lab()</a>. The second argument is the chroma C, (roughly representing the "amount of color"). Its minimum useful value is 0, while its maximum is theoretically unbounded (but in practice does not exceed 230). If the provided value is negative, it is clamped to 0 at parsed-value time. The third argument is the hue angle H. It’s interpreted similarly to the <a class="production css" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue①⓪"><hue></a> argument of <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①②">hsl()</a>, but doesn’t map hues to angles in the same way because they are evenly spaced perceptually. Instead, 0deg points along the positive "a" axis (toward purplish red), (as does 360deg, 720deg, etc.); 90deg points along the positive "b" axis (toward mustard yellow), 180deg points along the negative "a" axis (toward greenish cyan), and 270deg points along the negative "b" axis (toward sky blue). There is an optional fourth <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①⑦"><alpha-value></a> component, separated by a slash, representing the <a data-link-type="dfn" href="#alpha-channel" id="ref-for-alpha-channel①">alpha component</a>. If the chroma of an LCH color is 0%, the hue component is <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component①⓪">powerless</a>. If the lightness of an LCH color (after clamping) is 0%, or 100%, the color will be displayed as black, or white, respectively due to gamut mapping to the display. <div class="example" id="ex-lch-samples"> <a class="self-link" href="#ex-lch-samples"></a> <pre class="lang-css highlight"> <c- nf>lch</c-><c- p>(</c-><c- m>29.2345</c-><c- k>%</c-> <c- m>44.2</c-> <c- m>27</c-><c- p>);</c-> <c- nf>lch</c-><c- p>(</c-><c- m>52.2345</c-><c- k>%</c-> <c- m>72.2</c-> <c- m>56.2</c-><c- p>);</c-> <c- nf>lch</c-><c- p>(</c-><c- m>60.2345</c-> <c- m>59.2</c-> <c- m>95.2</c-><c- p>);</c-> <c- nf>lch</c-><c- p>(</c-><c- m>62.2345</c-><c- k>%</c-> <c- m>59.2</c-> <c- m>126.2</c-><c- p>);</c-> <c- nf>lch</c-><c- p>(</c-><c- m>67.5345</c-><c- k>%</c-> <c- m>42.5</c-> <c- m>258.2</c-><c- p>);</c-> <c- nf>lch</c-><c- p>(</c-><c- m>29.69</c-><c- k>%</c-> <c- m>45.553</c-><c- k>%</c-> <c- m>327.1</c-><c- p>)</c-> </pre> </div> There is no Web compatibility issue with <a class="css" data-link-type="maybe" href="#valdef-lab-lab" id="ref-for-valdef-lab-lab">lab</a> or <a class="css" data-link-type="maybe" href="#valdef-lch-lch" id="ref-for-valdef-lch-lch">lch</a>', which are new in this level of the specification, and so <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab④">lab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch⑤">lch()</a> do not support a <a data-link-type="dfn" href="#legacy-color-syntax" id="ref-for-legacy-color-syntax⑥">legacy color syntax</a> that separates all of their arguments with commas. Using commas inside these functions is an error. <h3 class="heading settled" data-level="9.4" id="specifying-oklab-oklch">9.4. Specifying Oklab and Oklch: the <a class="css" data-link-type="maybe" href="#funcdef-oklab" id="ref-for-funcdef-oklab②">oklab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-oklch" id="ref-for-funcdef-oklch③">oklch()</a> functional notations<a class="self-link" href="#specifying-oklab-oklch"></a></h3> CSS allows colors to be directly expressed in Oklab and Oklch. <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-oklab"><c- nf>oklab</c-><c- p>()</c-></dfn> = <c- nf>oklab</c-><c- p>(</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②④"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⓪">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②②"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥①">|</a> none<c- p>]</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②⑤"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥②">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②③"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥③">|</a> none<c- p>]</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②⑥"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥④">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②④"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑤">|</a> none<c- p>]</c-> <c- p>[</c-> / <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①⑧"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑥">|</a> none<c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①③">?</a> <c- p>)</c-> </pre> <table id="prr-oklab"> <tbody> <tr> <th>Percentages <td>Allowed for L, a and b <tr> <th>Percent reference range <td> for L: 0% = 0.0, 100% = 1.0 for a and b: -100% = -0.4, 100% = 0.4 </table> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-001.html" title="css/css-color/oklab-001.html">oklab-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-002.html" title="css/css-color/oklab-002.html">oklab-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-003.html" title="css/css-color/oklab-003.html">oklab-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-004.html" title="css/css-color/oklab-004.html">oklab-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-005.html" title="css/css-color/oklab-005.html">oklab-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-006.html" title="css/css-color/oklab-006.html">oklab-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-007.html" title="css/css-color/oklab-007.html">oklab-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-008.html" title="css/css-color/oklab-008.html">oklab-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-009.html" title="css/css-color/oklab-009.html">oklab-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-l-almost-0.html" title="css/css-color/oklab-l-almost-0.html">oklab-l-almost-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-l-almost-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-l-almost-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-l-almost-1.html" title="css/css-color/oklab-l-almost-1.html">oklab-l-almost-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-l-almost-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-l-almost-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-l-over-1-1.html" title="css/css-color/oklab-l-over-1-1.html">oklab-l-over-1-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-l-over-1-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-l-over-1-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklab-l-over-1-2.html" title="css/css-color/oklab-l-over-1-2.html">oklab-l-over-1-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklab-l-over-1-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklab-l-over-1-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> In <dfn class="dfn-paneled css" data-dfn-for="oklab()" data-dfn-type="value" data-export id="valdef-oklab-oklab">Oklab</dfn> the first argument specifies the Oklab Lightness. This is a number between 0% or 0 and 100% or 1.0. Values less than 0% or 0.0 must be clamped to 0% at parsed-value time; values greater than 100% or 1.0 are clamped to 100% at parsed-value time. The second and third arguments are the distances along the "a" and "b" axes in the Oklab color space, as described in the previous section. These values are signed (allow both positive and negative values) and theoretically unbounded (but in practice do not exceed ±0.5). There is an optional fourth <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value①⑨"><alpha-value></a> component, separated by a slash, representing the <a data-link-type="dfn" href="#alpha-channel" id="ref-for-alpha-channel②">alpha component</a>. If the lightness of an Oklab color is 0% or 0, or 100% or 1.0, the color will be displayed as black, or white, respectively due to gamut mapping to the display. <div class="example" id="ex-oklab-samples"> <a class="self-link" href="#ex-oklab-samples"></a> <pre class="lang-css highlight"> <c- nf>oklab</c-><c- p>(</c-><c- m>40.101</c-><c- k>%</c-> <c- m>0.1147</c-> <c- m>0.0453</c-><c- p>);</c-> <c- nf>oklab</c-><c- p>(</c-><c- m>59.686</c-><c- k>%</c-> <c- m>0.1009</c-> <c- m>0.1192</c-><c- p>);</c-> <c- nf>oklab</c-><c- p>(</c-><c- m>0.65125</c-> <c- m>-0.0320</c-> <c- m>0.1274</c-><c- p>);</c-> <c- nf>oklab</c-><c- p>(</c-><c- m>66.016</c-><c- k>%</c-> <c- m>-0.1084</c-> <c- m>0.1114</c-><c- p>);</c-> <c- nf>oklab</c-><c- p>(</c-><c- m>72.322</c-><c- k>%</c-> <c- m>-0.0465</c-> <c- m>-0.1150</c-><c- p>);</c-> <c- nf>oklab</c-><c- p>(</c-><c- m>42.1</c-><c- k>%</c-> <c- m>41</c-><c- k>%</c-> <c- m>-25</c-><c- k>%</c-><c- p>)</c-> </pre> </div> <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-oklch"><c- nf>oklch</c-><c- p>()</c-></dfn> = <c- nf>oklch</c-><c- p>(</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②⑦"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑦">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②⑤"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑧">|</a> none<c- p>]</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②⑧"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥⑨">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②⑥"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⓪">|</a> none<c- p>]</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue①①"><hue></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦①">|</a> none<c- p>]</c-> <c- p>[</c-> / <c- p>[</c-><a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value②⓪"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦②">|</a> none<c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①④">?</a> <c- p>)</c-> </pre> <table id="prr-oklch"> <tbody> <tr> <th>Percentages <td>Allowed for L and C <tr> <th>Percent reference range <td> for L: 0% = 0.0, 100% = 1.0 for C: 0% = 0.0 100% = 0.4 </table> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-001.html" title="css/css-color/oklch-001.html">oklch-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-002.html" title="css/css-color/oklch-002.html">oklch-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-003.html" title="css/css-color/oklch-003.html">oklch-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-004.html" title="css/css-color/oklch-004.html">oklch-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-005.html" title="css/css-color/oklch-005.html">oklch-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-006.html" title="css/css-color/oklch-006.html">oklch-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-007.html" title="css/css-color/oklch-007.html">oklch-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-008.html" title="css/css-color/oklch-008.html">oklch-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-009.html" title="css/css-color/oklch-009.html">oklch-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-010.html" title="css/css-color/oklch-010.html">oklch-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-011.html" title="css/css-color/oklch-011.html">oklch-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-l-almost-0.html" title="css/css-color/oklch-l-almost-0.html">oklch-l-almost-0.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-l-almost-0.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-l-almost-0.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-l-almost-1.html" title="css/css-color/oklch-l-almost-1.html">oklch-l-almost-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-l-almost-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-l-almost-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-l-over-1-1.html" title="css/css-color/oklch-l-over-1-1.html">oklch-l-over-1-1.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-l-over-1-1.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-l-over-1-1.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/oklch-l-over-1-2.html" title="css/css-color/oklch-l-over-1-2.html">oklch-l-over-1-2.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/oklch-l-over-1-2.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/oklch-l-over-1-2.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> In <dfn class="dfn-paneled css" data-dfn-for="oklch()" data-dfn-type="value" data-export id="valdef-oklch-oklch">Oklch</dfn> the first argument specifies the Oklch Lightness L, interpreted identically to the Lightness argument of <a class="css" data-link-type="maybe" href="#funcdef-oklab" id="ref-for-funcdef-oklab③">oklab()</a>. The second argument is the chroma C. Its minimum useful value is 0, while its maximum is theoretically unbounded (but in practice does not exceed 0.5). If the provided value is negative, it is clamped to 0 at parsed-value time. The third argument is the hue angle H. It’s interpreted similarly to the <a class="production css" data-link-type="type" href="#typedef-hue" id="ref-for-typedef-hue①②"><hue></a> arguments of <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①③">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch⑥">lch()</a>, but doesn’t map hues to angles in the same way. 0deg points along the positive "a" axis (toward purplish red), (as does 360deg, 720deg, etc.); 90deg points along the positive "b" axis (toward mustard yellow), 180deg points along the negative "a" axis (toward greenish cyan), and 270deg points along the negative "b" axis (toward sky blue). There is an optional fourth <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value②①"><alpha-value></a> component, separated by a slash, representing the <a data-link-type="dfn" href="#alpha-channel" id="ref-for-alpha-channel③">alpha component</a>. If the chroma of an Oklch color is 0% or 0, the hue component is <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component①①">powerless</a>. If the lightness of an Oklch color is 0% or 0, or 100% or 1.0, the color will be displayed as black, or white, respectively due to gamut mapping to the display. <div class="example" id="ex-oklch-samples"> <a class="self-link" href="#ex-oklch-samples"></a> <pre class="lang-css highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>40.101</c-><c- k>%</c-> <c- m>0.12332</c-> <c- m>21.555</c-><c- p>);</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>59.686</c-><c- k>%</c-> <c- m>0.15619</c-> <c- m>49.7694</c-><c- p>);</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>0.65125</c-> <c- m>0.13138</c-> <c- m>104.097</c-><c- p>);</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>0.66016</c-> <c- m>0.15546</c-> <c- m>134.231</c-><c- p>);</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>72.322</c-><c- k>%</c-> <c- m>0.12403</c-> <c- m>247.996</c-><c- p>);</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>42.1</c-><c- k>%</c-> <c- m>48.25</c-><c- k>%</c-> <c- m>328.4</c-><c- p>)</c-> </pre> </div> There is no Web compatibility issue with <a class="css" data-link-type="maybe" href="#valdef-oklab-oklab" id="ref-for-valdef-oklab-oklab">oklab</a> or <a class="css" data-link-type="maybe" href="#valdef-oklch-oklch" id="ref-for-valdef-oklch-oklch">oklch</a>', which are new in this level of the specification, and so <a class="css" data-link-type="maybe" href="#funcdef-oklab" id="ref-for-funcdef-oklab④">oklab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-oklch" id="ref-for-funcdef-oklch④">oklch()</a> do not support a <a data-link-type="dfn" href="#legacy-color-syntax" id="ref-for-legacy-color-syntax⑦">legacy color syntax</a> that separates all of their arguments with commas. Using commas inside these functions is an error. <h3 class="heading settled" data-level="9.5" id="lab-to-lch">9.5. Converting Lab or Oklab colors to LCH or Oklch colors<a class="self-link" href="#lab-to-lch"></a></h3> Conversion to the polar form is trivial: <ol> <li>H = atan2(b, a) <li>C = sqrt(a^2 + b^2) <li>L is the same </ol> For extremely small values of a and b (near-zero Chroma), although the visual color does not change from being on the neutral axis, small changes to the values can result in the reported hue angle swinging about wildly and being essentially random. In CSS, this means the hue is <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component①②">powerless</a>, and treated as <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component⑥">missing</a> when converted into LCH or Oklch; in non-CSS contexts this might be reflected as a missing value, such as NaN. <h3 class="heading settled" data-level="9.6" id="lch-to-lab">9.6. Converting LCH or Oklch colors to Lab or Oklab colors<a class="self-link" href="#lch-to-lab"></a></h3> Conversion to the rectangular form is trivial: <ol> <li>If H is missing, a = b = 0 <li> Otherwise, <ol> <li>a = C cos(H) <li>b = C sin(H) </ol> <li>L is the same </ol> <h2 class="heading settled" data-level="10" id="predefined">10. Predefined Color Spaces<a class="self-link" href="#predefined"></a></h2> CSS provides several predefined color spaces including <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3①">display-p3</a> <a data-link-type="biblio" href="#biblio-display-p3" title="Display P3">[Display-P3]</a>, which is a wide gamut space typical of current wide-gamut monitors, <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb">prophoto-rgb</a>, widely used by photographers and <a class="css" data-link-type="maybe" href="#valdef-color-rec2020" id="ref-for-valdef-color-rec2020">rec2020</a> <a data-link-type="biblio" href="#biblio-rec2020" title="Recommendation ITU-R BT.2020-2: Parameter values for ultra-high definition television systems for production and international programme exchange">[Rec.2020]</a>, which is a broadcast industry standard, ultra-wide gamut space capable of representing almost all visible real-world colors. <h3 class="heading settled" data-level="10.1" id="color-function">10.1. Specifying Predefined Colors: the <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color②">color()</a> function<a class="self-link" href="#color-function"></a></h3> The <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color③">color()</a> function allows a color to be specified in a particular, specified <a data-link-type="dfn" href="#color-space" id="ref-for-color-space⑤">color space</a> (rather than the implicit sRGB color space that most of the other color functions operate in). Its syntax is: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="function" data-export id="funcdef-color"><c- nf>color</c-><c- p>()</c-></dfn> = <c- nf>color</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-colorspace-params" id="ref-for-typedef-colorspace-params"><colorspace-params></a> <c- p>[</c-> / <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value②②"><alpha-value></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦③">|</a> none <c- p>]</c-> <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⑤">?</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-colorspace-params"><colorspace-params></dfn> = <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-predefined-rgb-params" id="ref-for-typedef-predefined-rgb-params"><predefined-rgb-params></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦④">|</a> <a class="production" data-link-type="type" href="#typedef-xyz-params" id="ref-for-typedef-xyz-params"><xyz-params></a><c- p>]</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-predefined-rgb-params"><predefined-rgb-params></dfn> = <a class="production" data-link-type="type" href="#typedef-predefined-rgb" id="ref-for-typedef-predefined-rgb"><predefined-rgb></a> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②⑦"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑤">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②⑨"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑥">|</a> none <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num②"><c- p>{</c-><c- m>3</c-><c- p>}</c-></a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-predefined-rgb"><predefined-rgb></dfn> = <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb①">srgb</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑦">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-srgb-linear" id="ref-for-valdef-color-srgb-linear">srgb-linear</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑧">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3②">display-p3</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦⑨">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb">a98-rgb</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧⓪">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb①">prophoto-rgb</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧①">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-rec2020" id="ref-for-valdef-color-rec2020①">rec2020</a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-xyz-params"><xyz-params></dfn> = <a class="production" data-link-type="type" href="#typedef-xyz-space" id="ref-for-typedef-xyz-space"><xyz-space></a> <c- p>[</c-> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②⑧"><number></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧②">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③⓪"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧③">|</a> none <c- p>]</c-><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num" id="ref-for-mult-num③"><c- p>{</c-><c- m>3</c-><c- p>}</c-></a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-xyz-space"><xyz-space></dfn> = <a class="css" data-link-type="maybe" href="#valdef-color-xyz" id="ref-for-valdef-color-xyz">xyz</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧④">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d50" id="ref-for-valdef-color-xyz-d50">xyz-d50</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧⑤">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d65" id="ref-for-valdef-color-xyz-d65">xyz-d65</a> </pre> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-color-function.html" title="css/css-color/parsing/color-computed-color-function.html">color-computed-color-function.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-color-function.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-color-function.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-color-function.html" title="css/css-color/parsing/color-invalid-color-function.html">color-invalid-color-function.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-color-function.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-color-function.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid-color-function.html" title="css/css-color/parsing/color-valid-color-function.html">color-valid-color-function.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid-color-function.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-color-function.html">(source)</a> </ul> </details> The color function takes parameters specifying a color, in an explicitly listed color space. It represents either an <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color①">invalid color</a>, as described below, or a <a data-link-type="dfn" href="#valid-color" id="ref-for-valid-color③">valid color</a>. The parameters have the following form: <ul> <li data-md> An <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident②"><ident></a> denoting one of the <a href="#predefined">predefined color spaces</a> (such as <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3③">display-p3</a>) Individual <a href="#predefined">predefined color spaces</a> may further restrict whether <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value②⑨"><number></a>s or <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③①"><percentage></a>s or both, may be used. If the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident③"><ident></a> names a non-existent color space (a name that does not match one of the <a href="#predefined">predefined color spaces</a>), this argument represents an <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color②">invalid color</a>. <li data-md> The three parameter values that the color space takes (RGB or XYZ values). </ul> An out of gamut color has component values less than 0 or 0%, or greater than 1 or 100%. These are not invalid, and are retained for intermediate computations; instead, for display, they are <a data-link-type="dfn" href="#css-gamut-mapped" id="ref-for-css-gamut-mapped①">css gamut mapped</a> using a relative colorimetric intent which brings the values (in the display color space) within the range 0/0% to 1/100% at actual-value time. <ul> <li data-md> An optional slash-separated <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value②③"><alpha-value></a>. </ul> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> There is no Web compatibility issue with <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color④">color()</a>, which is new in this level of the specification, and so color() does not support a <a data-link-type="dfn" href="#legacy-color-syntax" id="ref-for-legacy-color-syntax⑧">legacy color syntax</a> that separates all of its arguments with commas. Using commas inside this function is an error. A color which is either an <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color③">invalid color</a> or an <a data-link-type="dfn" href="#out-of-gamut" id="ref-for-out-of-gamut①">out of gamut</a> color <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cant-be-displayed">can’t be displayed</dfn>. If the specified color <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="can-be-displayed">can be displayed</dfn>, (that is, it isn’t an <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color④">invalid color</a> and isn’t <a data-link-type="dfn" href="#out-of-gamut" id="ref-for-out-of-gamut②">out of gamut</a>) then this is the actual value of the <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color⑥">color()</a> function. If the specified color is a <a data-link-type="dfn" href="#valid-color" id="ref-for-valid-color④">valid color</a> but <a data-link-type="dfn" href="#cant-be-displayed" id="ref-for-cant-be-displayed">can’t be displayed</a>, the actual value is derived from the specified color, <a data-link-type="dfn" href="#css-gamut-mapped" id="ref-for-css-gamut-mapped②">css gamut mapped</a> for display. If the color is an <a data-link-type="dfn" href="#invalid-color" id="ref-for-invalid-color⑤">invalid color</a>, the used value is <a data-link-type="dfn" href="#opaque-black" id="ref-for-opaque-black">opaque black</a>. <div class="example" id="ex-2020-oog-p3"> <a class="self-link" href="#ex-2020-oog-p3"></a> This very intense lime color is in-gamut for rec.2020: <pre class="lang-css highlight"><c- nf>color</c-><c- p>(</c->rec2020 <c- m>0.42053</c-> <c- m>0.979780</c-> <c- m>0.00579</c-><c- p>);</c-></pre> in LCH, that color is <pre class="lang-css highlight"><c- nf>lch</c-><c- p>(</c-><c- m>86.6146</c-><c- k>%</c-> <c- m>160.0000</c-> <c- m>136.0088</c-><c- p>);</c-></pre> in display-p3, that color is <pre class="lang-css highlight"><c- nf>color</c-><c- p>(</c->display-p3 <c- m>-0.6112</c-> <c- m>1.0079</c-> <c- m>-0.2192</c-><c- p>);</c-></pre> and is out of gamut for display-p3 (red and blue are negative, green is greater than 1). If you have a display-p3 screen, that color is: <ul> <li>valid <li>in gamut (for rec.2020) <li>out of gamut (for your display) <li>and so can’t be displayed </ul> The color used for display will be a less intense color produced automatically by gamut mapping. </div> <div class="invalid example" id="ex-profoto-bad"> <a class="self-link" href="#ex-profoto-bad"></a> This example has a typo! An intense green is provided in profoto-rgb space (which doesn’t exist). This makes it invalid, so the used value is <a data-link-type="dfn" href="#opaque-black" id="ref-for-opaque-black①">opaque black</a> <pre class="lang-css highlight"><c- nf>color</c-><c- p>(</c->profoto-rgb <c- m>0.4835</c-> <c- m>0.9167</c-> <c- m>0.2188</c-><c- p>)</c-></pre> </div> <h3 class="heading settled" data-level="10.2" id="predefined-sRGB">10.2. The Predefined sRGB Color Space: the <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb②">sRGB</a> keyword<a class="self-link" href="#predefined-sRGB"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="sRGB-space">sRGB</dfn> predefined color space defined below is the same as is used for legacy sRGB colors, such as <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⓪">rgb()</a>. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-srgb">srgb</dfn> <dd> The <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb③">srgb</a> <a data-link-type="biblio" href="#biblio-srgb" title="Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB">[SRGB]</a> color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The whitepoint is <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint②">D65</a>. <a data-link-type="biblio" href="#biblio-srgb" title="Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB">[SRGB]</a> specifies two viewing conditions, encoding and typical. The <a data-link-type="biblio" href="#biblio-icc" title="ICC.1:2022 (Profile version 4.4.0.0)">[ICC]</a> recommends using the encoding conditions for color conversion and for optimal viewing, which are the values in the table below. sRGB is the default color space for CSS, used for all the legacy color functions. It has the following characteristics: <table id="prr-color-srgb"> <thead> <tr> <td> <td>x <td>y <tbody> <tr> <th>Red chromaticity <td>0.640 <td>0.330 <tr> <th>Green chromaticity <td>0.300 <td>0.600 <tr> <th>Blue chromaticity <td>0.150 <td>0.060 <tr> <th>White chromaticity <td colspan="2"><a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint③">D65</a> <tr> <th>Transfer function <td colspan="2">see below <tr> <th>White luminance <td colspan="2">80.0 cd/m2 <tr> <th>Black luminance <td colspan="2">0.20 cd/m2 <tr> <th>Image state <td colspan="2">display-referred <tr> <th>Percentages <td colspan="2">Allowed for R, G and B <tr> <th>Percent reference range <td>for R,G,B: 0% = 0.0, 100% = 1.0 </table> <pre class="lang-javascript highlight"><c- a>let</c-> sign <c- o>=</c-> c <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->c<c- p>);</c-> <c- k>if</c-> <c- p>(</c->abs <c- o><=</c-> <c- mf>0.04045</c-><c- p>)</c-> <c- p>{</c-> cl <c- o>=</c-> c <c- o>/</c-> <c- mf>12.92</c-><c- p>;</c-> <c- p>}</c-> <c- k>else</c-> <c- p>{</c-> cl <c- o>=</c-> sign <c- o>*</c-> <c- p>(</c->Math<c- p>.</c->pow<c- p>((</c->abs <c- o>+</c-> <c- mf>0.055</c-><c- p>)</c-> <c- o>/</c-> <c- mf>1.055</c-><c- p>,</c-> <c- mf>2.4</c-><c- p>));</c-> <c- p>}</c-> </pre> c is the gamma-encoded red, green or blue component. cl is the corresponding linear-light component. <figure id="fig-srgb-lch"> <img alt="diagram of sRGB primaries and secondaries in LCH" height="520" src="images/sRGB-prim-sec.svg" width="540"> <figcaption>Visualization of the sRGB color space in LCH. The primaries and secondaries are shown.</figcaption> </figure> </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-001.html" title="css/css-color/predefined-001.html">predefined-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-002.html" title="css/css-color/predefined-002.html">predefined-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="10.3" id="predefined-sRGB-linear">10.3. The Predefined Linear-light sRGB Color Space: the <a class="css" data-link-type="maybe" href="#valdef-color-srgb-linear" id="ref-for-valdef-color-srgb-linear①">srgb-linear</a> keyword<a class="self-link" href="#predefined-sRGB-linear"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="sRGB-linear-space">sRGB-linear</dfn> predefined color space is the same as <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb④">srgb</a> except that the transfer function is linear-light (there is no gamma-encoding). <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-srgb-linear">srgb-linear</dfn> <dd> The <a class="css" data-link-type="maybe" href="#valdef-color-srgb-linear" id="ref-for-valdef-color-srgb-linear②">srgb-linear</a> <a data-link-type="biblio" href="#biblio-srgb" title="Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB">[SRGB]</a> color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The whitepoint is <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint④">D65</a>. It has the following characteristics: <table id="prr-color-srgb-linear"> <thead> <tr> <td> <td>x <td>y <tbody> <tr> <th>Red chromaticity <td>0.640 <td>0.330 <tr> <th>Green chromaticity <td>0.300 <td>0.600 <tr> <th>Blue chromaticity <td>0.150 <td>0.060 <tr> <th>White chromaticity <td colspan="2"><a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint⑤">D65</a> <tr> <th>Transfer function <td colspan="2">unity, see below <tr> <th>White luminance <td colspan="2">80.0 cd/m2 <tr> <th>Black luminance <td colspan="2">0.20 cd/m2 <tr> <th>Image state <td colspan="2">display-referred <tr> <th>Percentages <td colspan="2">Allowed for R, G and B <tr> <th>Percent reference range <td>for R,G,B: 0% = 0.0, 100% = 1.0 </table> <pre class="lang-javascript highlight">cl <c- o>=</c-> c<c- p>;</c-> </pre> c is the red, green or blue component. cl is the corresponding linear-light component, which is identical. To avoid banding artifacts, a <a href="#predefined-precision-table">higher precision is required</a> for <a class="css" data-link-type="maybe" href="#valdef-color-srgb-linear" id="ref-for-valdef-color-srgb-linear③">srgb-linear</a> than for <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb⑤">srgb</a>. <div class="example" id="srgb-linear-swatches"> <a class="self-link" href="#srgb-linear-swatches"></a> For example, these are the same color <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->srgb <c- m>0.691</c-> <c- m>0.139</c-> <c- m>0.259</c-><c- p>)</c-> <c- nf>color</c-><c- p>(</c->srgb-linear <c- m>0.435</c-> <c- m>0.017</c-> <c- m>0.055</c-><c- p>)</c-> </pre> </div> </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/srgb-linear-001.html" title="css/css-color/srgb-linear-001.html">srgb-linear-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/srgb-linear-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/srgb-linear-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/srgb-linear-002.html" title="css/css-color/srgb-linear-002.html">srgb-linear-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/srgb-linear-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/srgb-linear-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/srgb-linear-003.html" title="css/css-color/srgb-linear-003.html">srgb-linear-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/srgb-linear-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/srgb-linear-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/srgb-linear-004.html" title="css/css-color/srgb-linear-004.html">srgb-linear-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/srgb-linear-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/srgb-linear-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="10.4" id="predefined-display-p3">10.4. The Predefined Display P3 Color Space: the <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3④">display-p3</a> keyword<a class="self-link" href="#predefined-display-p3"></a></h3> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-display-p3">display-p3</dfn> <dd> The <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3⑤">display-p3</a> <a data-link-type="biblio" href="#biblio-display-p3" title="Display P3">[Display-P3]</a> color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. It uses the same primary chromaticities as <a data-link-type="biblio" href="#biblio-dci-p3" title="SMPTE Recommended Practice - D-Cinema Quality — Reference Projector and Environment">[DCI-P3]</a>, but with a <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint⑥">D65</a> whitepoint, and the same transfer curve as sRGB. Modern displays, TVs, laptop screens and phone screens are able to display all, or nearly all, of the display-p3 gamut. It has the following characteristics: <table id="prr-color-display-p3"> <thead> <tr> <td> <td>x <td>y <tbody> <tr> <th>Red chromaticity <td>0.680 <td>0.320 <tr> <th>Green chromaticity <td>0.265 <td>0.690 <tr> <th>Blue chromaticity <td>0.150 <td>0.060 <tr> <th>White chromaticity <td colspan="2"><a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint⑦">D65</a> <tr> <th>Transfer function <td colspan="2">same as srgb <tr> <th>White luminance <td colspan="2">80.0 cd/m2 <tr> <th>Black luminance <td colspan="2">0.80 cd/m2 <tr> <th>Image state <td colspan="2">display-referred <tr> <th>Percentages <td colspan="2">Allowed for R, G and B <tr> <th>Percent reference range <td>for R,G,B: 0% = 0.0, 100% = 1.0 </table> <figure id="fig-displayp3-lch"> <img alt="diagram of P3 primaries and secondaries in LCH" height="560" src="images/P3-prim-sec.svg" width="580"> <figcaption>Visualization of the P3 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. P3 primaries have higher Chroma. </figcaption> </figure> </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-005.html" title="css/css-color/predefined-005.html">predefined-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-006.html" title="css/css-color/predefined-006.html">predefined-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/display-p3-001.html" title="css/css-color/display-p3-001.html">display-p3-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/display-p3-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/display-p3-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/display-p3-002.html" title="css/css-color/display-p3-002.html">display-p3-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/display-p3-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/display-p3-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/display-p3-003.html" title="css/css-color/display-p3-003.html">display-p3-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/display-p3-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/display-p3-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/display-p3-004.html" title="css/css-color/display-p3-004.html">display-p3-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/display-p3-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/display-p3-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/display-p3-005.html" title="css/css-color/display-p3-005.html">display-p3-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/display-p3-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/display-p3-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/display-p3-006.html" title="css/css-color/display-p3-006.html">display-p3-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/display-p3-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/display-p3-006.html">(source)</a> </ul> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.html">2d.color.space.p3.fillText.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.shadow.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.shadow.html">2d.color.space.p3.fillText.shadow.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.shadow.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.shadow.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.strokeText.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.strokeText.html">2d.color.space.p3.strokeText.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.strokeText.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.strokeText.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html">2d.color.space.p3.to.p3.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html">2d.color.space.p3.to.srgb.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html">2d.color.space.p3.toBlob.p3.canvas.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html">2d.color.space.p3.toBlob.with.putImageData.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.jpeg.p3.canvas.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.jpeg.p3.canvas.html">2d.color.space.p3.toDataURL.jpeg.p3.canvas.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.jpeg.p3.canvas.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.jpeg.p3.canvas.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.html">2d.color.space.p3.toDataURL.p3.canvas.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.with.putImageData.html" title="html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.with.putImageData.html">2d.color.space.p3.toDataURL.with.putImageData.html</a> <a class="wpt-live" href="http://wpt.live/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.with.putImageData.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.with.putImageData.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="10.5" id="predefined-a98-rgb">10.5. The Predefined A98 RGB Color Space: the <a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb①">a98-rgb</a> keyword<a class="self-link" href="#predefined-a98-rgb"></a></h3> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-a98-rgb">a98-rgb</dfn> <dd> The <a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb②">a98-rgb</a> color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The transfer curve is a gamma function, close to but not exactly 1/2.2. It has the following characteristics: <table id="prr-color-a98-rgb"> <thead> <tr> <td> <td>x <td>y <tbody> <tr> <th>Red chromaticity <td>0.6400 <td>0.3300 <tr> <th>Green chromaticity <td>0.2100 <td>0.7100 <tr> <th>Blue chromaticity <td>0.1500 <td>0.0600 <tr> <th>White chromaticity <td colspan="2"><a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint⑧">D65</a> <tr> <th>Transfer function <td colspan="2">256/563 <tr> <th>White luminance <td colspan="2">160.0 cd/m2 <tr> <th>Black luminance <td colspan="2">0.5557 cd/m2 <tr> <th>Image state <td colspan="2">display-referred <tr> <th>Percentages <td colspan="2">Allowed for R, G and B <tr> <th>Percent reference range <td>for R,G,B: 0% = 0.0, 100% = 1.0 </table> <figure id="fig-a89-lch"> <img alt="diagram of a98 primaries and secondaries in LCH" height="560" src="images/a98-prim-sec.svg" width="640"> <figcaption>Visualization of the A98 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. a98 primaries have higher Chroma, especially the yellow, green and cyan. </figcaption> </figure> </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-007.html" title="css/css-color/predefined-007.html">predefined-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-008.html" title="css/css-color/predefined-008.html">predefined-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/a98rgb-001.html" title="css/css-color/a98rgb-001.html">a98rgb-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/a98rgb-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/a98rgb-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/a98rgb-002.html" title="css/css-color/a98rgb-002.html">a98rgb-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/a98rgb-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/a98rgb-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/a98rgb-003.html" title="css/css-color/a98rgb-003.html">a98rgb-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/a98rgb-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/a98rgb-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/a98rgb-004.html" title="css/css-color/a98rgb-004.html">a98rgb-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/a98rgb-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/a98rgb-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="10.6" id="predefined-prophoto-rgb">10.6. The Predefined ProPhoto RGB Color Space: the <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb②">prophoto-rgb</a> keyword<a class="self-link" href="#predefined-prophoto-rgb"></a></h3> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-prophoto-rgb">prophoto-rgb</dfn> <dd> The <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb③">prophoto-rgb</a> color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1]. The transfer curve is a gamma function with a value of 1/1.8, and a small linear portion near black. The white point is <a data-link-type="dfn" href="#d50-whitepoint" id="ref-for-d50-whitepoint①">D50</a>, the same as is used by CIE Lab. Thus, conversion to CIE Lab does not require the chromatic adaptation step. The ProPhoto RGB space uses hyper-saturated, non physically realizable primaries. These were chosen to allow a wide color gamut and in particular, to minimize hue shifts under tonal manipulation. It is often used in digital photography as a wide gamut color space for the archival version of photographic images. The <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb④">prophoto-rgb</a> color space allows CSS to specify colors that will match colors in such images having the same RGB values. The ProPhoto RGB space was originally developed by Kodak and is described in <a data-link-type="biblio" href="#biblio-wolfe" title="Design and Optimization of the ProPhoto RGB Color Encodings">[Wolfe]</a>. It was standardized by ISO as <a data-link-type="biblio" href="#biblio-romm" title="ISO 22028-2:2013 Photography and graphic technology — Extended colour encodings for digital image storage, manipulation and interchange — Part 2: Reference output medium metric RGB colour image encoding (ROMM RGB)">[ROMM]</a>,<a data-link-type="biblio" href="#biblio-romm-rgb" title="ROMM RGB">[ROMM-RGB]</a>. The white luminance is given as a range, and the viewing flare (and thus, the black luminance) is 0.5% to 1.0% of this. It has the following characteristics: <table id="prr-color-prophoto-rgb"> <thead> <tr> <td> <td>x <td>y <tbody> <tr> <th>Red chromaticity <td>0.734699 <td>0.265301 <tr> <th>Green chromaticity <td>0.159597 <td>0.840403 <tr> <th>Blue chromaticity <td>0.036598 <td>0.000105 <tr> <th>White chromaticity <td colspan="2"><a data-link-type="dfn" href="#d50-whitepoint" id="ref-for-d50-whitepoint②">D50</a> <tr> <th>Transfer function <td colspan="2">see below <tr> <th>White luminance <td colspan="2">160.0 to 640.0 cd/m2 <tr> <th>Black luminance <td colspan="2">See text <tr> <th>Image state <td colspan="2">display-referred <tr> <th>Percentages <td colspan="2">Allowed for R, G and B <tr> <th>Percent reference range <td>for R,G,B: 0% = 0.0, 100% = 1.0 </table> <pre class="lang-javascript highlight"><c- a>const</c-> E <c- o>=</c-> <c- mf>16</c-><c- o>/</c-><c- mf>512</c-><c- p>;</c-> <c- a>let</c-> sign <c- o>=</c-> c <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->c<c- p>);</c-> <c- k>if</c-> <c- p>(</c->abs <c- o><=</c-> E<c- p>)</c-> <c- p>{</c-> cl <c- o>=</c-> c <c- o>/</c-> <c- mf>16</c-><c- p>;</c-> <c- p>}</c-> <c- k>else</c-> <c- p>{</c-> cl <c- o>=</c-> sign <c- o>*</c-> Math<c- p>.</c->pow<c- p>(</c->c<c- p>,</c-> <c- mf>1.8</c-><c- p>);</c-> <c- p>}</c-> </pre> c is the gamma-encoded red, green or blue component. cl is the corresponding linear-light component. <figure id="fig-prophoto-lch"> <img alt="diagram of prophoto primaries and secondaries in LCH" height="760" src="images/prophoto-prim-sec.svg" width="780"> <figcaption>Visualization of the prophoto-rgb color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. prophoto-rgb primaries and secondaries have much higher Chroma, but much of this ultrawide gamut does not correspond to physically realizable colors. </figcaption> </figure> </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-009.html" title="css/css-color/predefined-009.html">predefined-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-010.html" title="css/css-color/predefined-010.html">predefined-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/prophoto-rgb-001.html" title="css/css-color/prophoto-rgb-001.html">prophoto-rgb-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/prophoto-rgb-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/prophoto-rgb-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/prophoto-rgb-002.html" title="css/css-color/prophoto-rgb-002.html">prophoto-rgb-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/prophoto-rgb-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/prophoto-rgb-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/prophoto-rgb-003.html" title="css/css-color/prophoto-rgb-003.html">prophoto-rgb-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/prophoto-rgb-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/prophoto-rgb-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/prophoto-rgb-004.html" title="css/css-color/prophoto-rgb-004.html">prophoto-rgb-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/prophoto-rgb-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/prophoto-rgb-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/prophoto-rgb-005.html" title="css/css-color/prophoto-rgb-005.html">prophoto-rgb-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/prophoto-rgb-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/prophoto-rgb-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="10.7" id="predefined-rec2020">10.7. The Predefined ITU-R BT.2020-2 Color Space: the <a class="css" data-link-type="maybe" href="#valdef-color-rec2020" id="ref-for-valdef-color-rec2020②">rec2020</a> keyword<a class="self-link" href="#predefined-rec2020"></a></h3> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-rec2020">rec2020</dfn> <dd> The <a class="css" data-link-type="maybe" href="#valdef-color-rec2020" id="ref-for-valdef-color-rec2020③">rec2020</a> <a data-link-type="biblio" href="#biblio-rec2020" title="Recommendation ITU-R BT.2020-2: Parameter values for ultra-high definition television systems for production and international programme exchange">[Rec.2020]</a> color space accepts three numeric parameters, representing the red, green, and blue channels of the color. In-gamut colors have all three components in the range [0, 1], ("full-range", in video terminology). ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television. The primaries are physically realizable, but with difficulty as they lie very close to the spectral locus. Current displays are unable to reproduce the full gamut of rec2020. Coverage is expected to increase over time as displays improve. It has the following characteristics: <table id="prr-color-rec2020"> <thead> <tr> <td> <td>x <td>y <tbody> <tr> <th>Red chromaticity <td>0.708 <td>0.292 <tr> <th>Green chromaticity <td>0.170 <td>0.797 <tr> <th>Blue chromaticity <td>0.131 <td>0.046 <tr> <th>White chromaticity <td colspan="2"><a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint⑨">D65</a> <tr> <th>Transfer function <td colspan="2">see below, from <a data-link-type="biblio" href="#biblio-rec2020" title="Recommendation ITU-R BT.2020-2: Parameter values for ultra-high definition television systems for production and international programme exchange">[Rec.2020]</a> table 4 <tr> <th>Image state <td colspan="2">display-referred <tr> <th>Percentages <td colspan="2">Allowed for R, G and B <tr> <th>Percent reference range <td>for R,G,B: 0% = 0.0, 100% = 1.0 </table> <pre class="lang-javascript highlight"><c- a>const</c-> α <c- o>=</c-> <c- mf>1.09929682680944</c-> <c- p>;</c-> <c- a>const</c-> β <c- o>=</c-> <c- mf>0.018053968510807</c-><c- p>;</c-> <c- a>let</c-> sign <c- o>=</c-> c <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->c<c- p>);</c-> <c- k>if</c-> <c- p>(</c->abs <c- o><</c-> β <c- o>*</c-> <c- mf>4.5</c-> <c- p>)</c-> <c- p>{</c-> cl <c- o>=</c-> c <c- o>/</c-> <c- mf>4.5</c-><c- p>;</c-> <c- p>}</c-> <c- k>else</c-> <c- p>{</c-> cl <c- o>=</c-> sign <c- o>*</c-> <c- p>(</c->Math<c- p>.</c->pow<c- p>((</c->abs <c- o>+</c-> α <c- o>-</c-><c- mf>1</c-> <c- p>)</c-> <c- o>/</c-> α<c- p>,</c-> <c- mf>1</c-><c- o>/</c-><c- mf>0.45</c-><c- p>));</c-> <c- p>}</c-> </pre> c is the gamma-encoded red, green or blue component. cl is the corresponding linear-light component. <figure id="fig-rec2020-lch"> <img alt="diagram of rec2020 primaries and secondaries in LCH" height="580" src="images/2020-prim-sec.svg" width="670"> <figcaption>Visualization of the rec2020 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. rec2020 primaries have much higher Chroma. </figcaption> </figure> </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-011.html" title="css/css-color/predefined-011.html">predefined-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-012.html" title="css/css-color/predefined-012.html">predefined-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rec2020-001.html" title="css/css-color/rec2020-001.html">rec2020-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rec2020-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rec2020-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rec2020-002.html" title="css/css-color/rec2020-002.html">rec2020-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rec2020-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rec2020-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rec2020-003.html" title="css/css-color/rec2020-003.html">rec2020-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rec2020-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rec2020-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rec2020-004.html" title="css/css-color/rec2020-004.html">rec2020-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rec2020-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rec2020-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/rec2020-005.html" title="css/css-color/rec2020-005.html">rec2020-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/rec2020-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/rec2020-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="10.8" id="predefined-xyz">10.8. The Predefined CIE XYZ Color Spaces: the <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d50" id="ref-for-valdef-color-xyz-d50①">xyz-d50</a>, <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d65" id="ref-for-valdef-color-xyz-d65①">xyz-d65</a>, and <a class="css" data-link-type="maybe" href="#valdef-color-xyz" id="ref-for-valdef-color-xyz①">xyz</a> keywords<a class="self-link" href="#predefined-xyz"></a></h3> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-xyz-d50">xyz-d50</dfn>, <dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-xyz-d65">xyz-d65</dfn>, <dfn class="dfn-paneled css" data-dfn-for="color()" data-dfn-type="value" data-export id="valdef-color-xyz">xyz</dfn> <dd> The <a class="css" data-link-type="maybe" href="#valdef-color-xyz" id="ref-for-valdef-color-xyz②">xyz</a> color space accepts three numeric parameters, representing the X,Y and Z values. It represents the CIE XYZ <a data-link-type="biblio" href="#biblio-colorimetry" title="Colorimetry, Fourth Edition. CIE 015:2018">[COLORIMETRY]</a> color space, scaled such that diffuse white has a <a data-link-type="dfn" href="#luminance" id="ref-for-luminance①">luminance</a> (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white for <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d50" id="ref-for-valdef-color-xyz-d50②">xyz-d50</a> is <a data-link-type="dfn" href="#d50-whitepoint" id="ref-for-d50-whitepoint③">D50</a>, while the reference white for <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d65" id="ref-for-valdef-color-xyz-d65②">xyz-d65</a> and <a class="css" data-link-type="maybe" href="#valdef-color-xyz" id="ref-for-valdef-color-xyz③">xyz</a> is <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint①⓪">D65</a>. Values greater than 1.0/100% are allowed and must not be clamped; colors where Y is greater than 1.0 represent colors brighter than diffuse white. Values less than 0/0% are uncommon, but can occur as a result of chromatic adaptation, and likewise must not be clamped. It has the following characteristics: <table id="prr-color-xyz"> <tbody> <tr> <th>Percentages <td>Allowed for X,Y,Z <tr> <th>Percent reference range <td>for X,Y,Z: 0% = 0.0, 100% = 1.0 </table> <div class="example" id="ex-xyz"> <a class="self-link" href="#ex-xyz"></a> These are exactly equivalent: <pre class="lang-css highlight"> #7654CD <c- nf>rgb</c-><c- p>(</c-><c- m>46.27</c-><c- k>%</c-> <c- m>32.94</c-><c- k>%</c-> <c- m>80.39</c-><c- k>%</c-><c- p>)</c-> <c- nf>lab</c-><c- p>(</c-><c- m>44.36</c-><c- k>%</c-> <c- m>36.05</c-> <c- m>-58.99</c-><c- p>)</c-> <c- nf>color</c-><c- p>(</c->xyz-d50 <c- m>0.2005</c-> <c- m>0.14089</c-> <c- m>0.4472</c-><c- p>)</c-> <c- nf>color</c-><c- p>(</c->xyz-d65 <c- m>0.21661</c-> <c- m>0.14602</c-> <c- m>0.59452</c-><c- p>)</c-> </pre> </div> <div class="example" id="ex-xyz-white"> <a class="self-link" href="#ex-xyz-white"></a> These colors are exactly equivalent, and represent white: <pre class="lang-css highlight"> #FFFFFF <c- nf>color</c-><c- p>(</c->xyz-d50 <c- m>0.9643</c-> <c- m>1</c-> <c- m>0.8251</c-><c- p>)</c-> <c- nf>color</c-><c- p>(</c->xyz-d65 <c- m>0.9505</c-> <c- m>1</c-> <c- m>1.089</c-><c- p>)</c-> </pre> </div> </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/predefined-016.html" title="css/css-color/predefined-016.html">predefined-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/predefined-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/predefined-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-001.html" title="css/css-color/xyz-001.html">xyz-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-002.html" title="css/css-color/xyz-002.html">xyz-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-003.html" title="css/css-color/xyz-003.html">xyz-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-004.html" title="css/css-color/xyz-004.html">xyz-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-005.html" title="css/css-color/xyz-005.html">xyz-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d50-001.html" title="css/css-color/xyz-d50-001.html">xyz-d50-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d50-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d50-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d50-002.html" title="css/css-color/xyz-d50-002.html">xyz-d50-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d50-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d50-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d50-003.html" title="css/css-color/xyz-d50-003.html">xyz-d50-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d50-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d50-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d50-004.html" title="css/css-color/xyz-d50-004.html">xyz-d50-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d50-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d50-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d50-005.html" title="css/css-color/xyz-d50-005.html">xyz-d50-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d50-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d50-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d65-001.html" title="css/css-color/xyz-d65-001.html">xyz-d65-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d65-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d65-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d65-002.html" title="css/css-color/xyz-d65-002.html">xyz-d65-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d65-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d65-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d65-003.html" title="css/css-color/xyz-d65-003.html">xyz-d65-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d65-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d65-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d65-004.html" title="css/css-color/xyz-d65-004.html">xyz-d65-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d65-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d65-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/xyz-d65-005.html" title="css/css-color/xyz-d65-005.html">xyz-d65-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/xyz-d65-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/xyz-d65-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-valid.html" title="css/css-color/parsing/color-valid.html">color-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="10.9" id="predefined-to-lab-oklab">10.9. Converting Predefined Color Spaces to Lab or Oklab<a class="self-link" href="#predefined-to-lab-oklab"></a></h3> For all predefined RGB color spaces, conversion to Lab requires several steps, although in practice all but the first step are linear calculations and can be combined. <ol id="predefined-to-lab"> <li>Convert from gamma-encoded RGB to linear-light RGB (undo gamma encoding) <li>Convert from linear RGB to CIE XYZ <li>If needed, convert from a <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint①①">D65</a> whitepoint (used by <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb⑥">sRGB</a>, <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3⑥">display-p3</a>, <a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb③">a98-rgb</a> and <a class="css" data-link-type="maybe" href="#valdef-color-rec2020" id="ref-for-valdef-color-rec2020④">rec2020</a>) to the <a data-link-type="dfn" href="#d50-whitepoint" id="ref-for-d50-whitepoint④">D50</a> whitepoint used in Lab, with the linear Bradford transform. <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb⑤">prophoto-rgb</a> already has a D50 whitepoint. <li>Convert D50-adapted XYZ to Lab </ol> Conversion to Oklab is similar, but the chromatic adaptation step is only needed for <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb⑥">prophoto-rgb</a>. <ol id="predefined-to-oklab"> <li>Convert from gamma-encoded RGB to linear-light RGB (undo gamma encoding) <li>Convert from linear RGB to CIE XYZ <li>If needed, convert from a <a data-link-type="dfn" href="#d50-whitepoint" id="ref-for-d50-whitepoint⑥">D50</a> whitepoint (used by <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb⑦">prophoto-rgb</a>) to the <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint①②">D65</a> whitepoint used in Oklab, with the linear Bradford transform. <li>Convert D65-adapted XYZ to Oklab </ol> There is sample JavaScript code for these conversions in <a href="#color-conversion-code">§ 17 Sample code for Color Conversions</a>. <h3 class="heading settled" data-level="10.10" id="oklab-lab-to-predefined">10.10. Converting Lab or Oklab to Predefined RGB Color Spaces<a class="self-link" href="#oklab-lab-to-predefined"></a></h3> Conversion from Lab to predefined spaces like <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3⑦">display-p3</a> or <a class="css" data-link-type="maybe" href="#valdef-color-rec2020" id="ref-for-valdef-color-rec2020⑤">rec2020</a> also requires multiple steps, and again in practice all but the last step are linear calculations and can be combined. <ol id="lab-to-predefined"> <li>Convert Lab to (D50-adapted) XYZ <li>If needed, convert from a <a data-link-type="dfn" href="#d50-whitepoint" id="ref-for-d50-whitepoint⑦">D50</a> whitepoint (used by Lab) to the <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint①③">D65</a> whitepoint used in sRGB and most other RGB spaces, with the linear Bradford transform. <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb⑧">prophoto-rgb</a>' does not require this step. <li>Convert from (D65-adapted) CIE XYZ to linear RGB <li>Convert from linear-light RGB to RGB (do gamma encoding) </ol> Conversion from Oklab is similar, but the chromatic adaptation step is only needed for <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb⑨">prophoto-rgb</a>. <ol id="oklab-to-predefined"> <li>Convert Oklab to (D65-adapted) XYZ <li>If needed, convert from a <a data-link-type="dfn" href="#d65-whitepoint" id="ref-for-d65-whitepoint①④">D65</a> whitepoint (used by Oklab) to the <a data-link-type="dfn" href="#d50-whitepoint" id="ref-for-d50-whitepoint⑧">D50</a> whitepoint used in <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb①⓪">prophoto-rgb</a>, with the linear Bradford transform. <li>Convert from (D65-adapted) CIE XYZ to linear RGB <li>Convert from linear-light RGB to RGB (do gamma encoding) </ol> There is sample JavaScript code for these conversions in <a href="#color-conversion-code">§ 17 Sample code for Color Conversions</a>. Implementations may choose to implement these steps in some other way (for example, using an ICC profile with relative colorimetric rendering intent) provided the results are the same for colors inside both the source and destination gamuts. <h3 class="heading settled" data-level="10.11" id="predefined-to-predefined">10.11. Converting Between Predefined RGB Color Spaces<a class="self-link" href="#predefined-to-predefined"></a></h3> Conversion from one predefined RGB color space to another requires multiple steps, one of which is only needed when the whitepoints differ. To convert from src to dest: <ol> <li>Convert from gamma-encoded srcRGB to linear-light srcRGB (undo gamma encoding) <li>Convert from linear srcRGB to CIE XYZ <li>If src and dest have different whitepoints, convert the XYZ value from srcWhite to destWhite with the linear Bradford transform. <li>Convert from CIE XYZ to linear destRGB <li>Convert from linear-light destRGB to destRGB (do gamma encoding) </ol> There is sample JavaScript code for this conversion for the predefined RGB color spaces, in <a href="#color-conversion-code">§ 17 Sample code for Color Conversions</a>. <h3 class="heading settled" data-level="10.12" id="alpha">10.12. Simple Alpha Compositing<a class="self-link" href="#alpha"></a></h3> When drawing, implementations must handle alpha according to the rules in <a href="https://www.w3.org/TR/compositing-1/#simplealphacompositing">Section 5.1 Simple alpha compositing</a> of <a data-link-type="biblio" href="#biblio-compositing" title="Compositing and Blending Level 1">[Compositing]</a>. <h2 class="heading settled algorithm" data-algorithm="to convert a color" data-level="11" id="color-conversion">11. Converting Colors<a class="self-link" href="#color-conversion"></a></h2> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section provides an algorithm used later, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> Colors may be converted from one color space to another and, provided that there is no gamut mapping and that each color space can represent out of gamut colors, (for RGB spaces, this means that the transfer function is defined over the extended range) then (subject to numerical precision and round-off error) the two colors will look the same and represent the same color sensation. To convert a color <var>col1</var> in a source color space <var>src</var> with white point <var>src-white</var> to a color <var>col2</var> in destination color space <var>dest</var> with white point <var>dest-white</var>: <ol> <li id="convert-polrect"><a class="self-link" href="#convert-polrect"></a>If <var>src</var> is in a <a data-link-type="dfn" href="#cylindrical-polar-color" id="ref-for-cylindrical-polar-color①">cylindrical polar color</a> representation, first convert <var>col1</var> to the corresponding <a data-link-type="dfn" href="#rectangular-orthogonal-color" id="ref-for-rectangular-orthogonal-color①">rectangular orthogonal color</a> representation and let this be the new <var>col1</var>. Replace any <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component⑦">missing component</a> with zero. <li id="convert-tolinear"><a class="self-link" href="#convert-tolinear"></a>If <var>src</var> is not a linear-light representation, convert it to linear light (undo gamma-encoding) and let this be the new <var>col1</var>. <li id="convert-toXYZ"><a class="self-link" href="#convert-toXYZ"></a>Convert <var>col1</var> to CIE XYZ with a given whitepoint <var>src-white</var> and let this be <var>xyz</var>. <li id="convert-CAT"><a class="self-link" href="#convert-CAT"></a>If <var>dest-white</var> is not the same as <var>src-white</var>, chromatically adapt <var>xyz</var> to <var>dest-white</var> using a linear Bradford <a data-link-type="dfn" href="#chromatic-adaptation-transform" id="ref-for-chromatic-adaptation-transform">chromatic adaptation transform</a>, and let this be the new <var>xyz</var>. <li id="convert-destpolar"><a class="self-link" href="#convert-destpolar"></a>If <var>dest</var> is a <a data-link-type="dfn" href="#cylindrical-polar-color" id="ref-for-cylindrical-polar-color②">cylindrical polar color</a> representation, let <var>dest-rect</var> be the corresponding <a data-link-type="dfn" href="#rectangular-orthogonal-color" id="ref-for-rectangular-orthogonal-color②">rectangular orthogonal color</a> representation. Otherwise, let <var>dest-rect</var> be <var>dest</var>. <li id="convert-fromXYZ"><a class="self-link" href="#convert-fromXYZ"></a>Convert <var>xyz</var> to <var>dest</var>, followed by applying any transfer function (gamma encoding), producing <var>col2</var>. <li id="convert-display"><a class="self-link" href="#convert-display"></a>If <var>dest</var> is a physical output color space, such as a display, then <var>col2</var> must be <a data-link-type="dfn" href="#css-gamut-mapped" id="ref-for-css-gamut-mapped③">css gamut mapped</a> so that it <a data-link-type="dfn" href="#can-be-displayed" id="ref-for-can-be-displayed">can be displayed</a>. <li id="convert-rectpol"><a class="self-link" href="#convert-rectpol"></a>If <var>dest-rect</var> is not the same as <var>dest</var>, in other words <var>dest</var> is a <a data-link-type="dfn" href="#cylindrical-polar-color" id="ref-for-cylindrical-polar-color③">cylindrical polar color</a> representation, convert from <var>dest-rect</var> to <var>dest</var>, and let this be <var>col2</var>. This may produce <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component⑧">missing component</a>s. </ol> <h2 class="heading settled" data-level="12" id="interpolation">12. Color Interpolation<a class="self-link" href="#interpolation"></a></h2> Color interpolation happens with gradients, compositing, filters, transitions, animations, and color mixing and color modification functions. Interpolation between two <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①⑧"><color></a> values takes place by executing the following steps: <ol> <li>checking the two colors for <a data-link-type="dfn" href="#analogous-components" id="ref-for-analogous-components">analogous components</a> which will be <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="carried-forward">carried forward</dfn> <li>converting them to a given color space which will be referred to as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="interpolation-color-space">interpolation color space</dfn> below. If one or both colors are already in the interpolation colorspace, this conversion changes any <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component①③">powerless</a> components to <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component⑨">missing</a> values <li>(if required) re-inserting <a data-link-type="dfn" href="#carried-forward" id="ref-for-carried-forward">carried forward</a> values in the converted colors <li>(if required) fixing up the hues, depending on the selected <a class="production css" data-link-type="type" href="#typedef-hue-interpolation-method" id="ref-for-typedef-hue-interpolation-method"><hue-interpolation-method></a> <li>changing the color components to <a data-link-type="dfn" href="#premultiplied" id="ref-for-premultiplied">premultiplied</a> form <li>linearly interpolating each component of the computed value of the color separately <li>undoing <a data-link-type="dfn" href="#premultiplied" id="ref-for-premultiplied①">premultiplication</a> </ol> Interpolating to or from <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor①⓪">currentcolor</a> is possible. The numerical value used for this purpose is the used value. <h3 class="heading settled" data-level="12.1" id="interpolation-space">12.1. Color Space for Interpolation<a class="self-link" href="#interpolation-space"></a></h3> Various features in CSS depend on interpolating colors. <div class="example" id="ex-interpolating-specs"> <a class="self-link" href="#ex-interpolating-specs"></a> Examples include: <ul> <li data-md> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-4/#typedef-gradient" id="ref-for-typedef-gradient"><gradient></a> <li data-md> <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/filter-effects-1/#propdef-filter" id="ref-for-propdef-filter">filter</a> <li data-md> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-animations-1/#propdef-animation" id="ref-for-propdef-animation">animation</a> <li data-md> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-transitions-1/#propdef-transition" id="ref-for-propdef-transition">transition</a> <li data-md> <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-5/#funcdef-color-mix" id="ref-for-funcdef-color-mix①">color-mix()</a> <li data-md> <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-5/#relative-color" id="ref-for-relative-color">relative color</a> syntax </ul> </div> Mixing or otherwise combining colors has different results depending on the <a data-link-type="dfn" href="#interpolation-color-space" id="ref-for-interpolation-color-space">interpolation color space</a> used. Thus, different color spaces may be more appropriate for each interpolation use case. <ul> <li data-md> In some cases, the result of physically mixing two colored lights is desired. In that case, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity. <li data-md> If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab color space (and the older Lab), are designed to be perceptually uniform. <li data-md> If avoiding graying out in color mixing is desired, i.e. maximizing chroma throughout the transition, Oklch (and the older LCH) work well for that. <li data-md> Lastly, compatibility with legacy Web content may be the most important consideration. The sRGB color space, which is neither linear-light nor perceptually uniform, is the choice here, even though it produces poorer results (overly dark or greyish mixes). </ul> These features are collectively termed the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="host-syntax">host syntax</dfn>. They are not used by this specification itself, only exposed so that other specifications can use them; see e.g. use in <a href="https://drafts.csswg.org/css-images-4/#linear-gradients"><cite>CSS Images 4</cite> § 3.1 Linear Gradients: the linear-gradient() notation</a>. The host syntax should define what the default <a data-link-type="dfn" href="#interpolation-color-space" id="ref-for-interpolation-color-space①">interpolation color space</a> should be for each case, and optionally provide syntax for authors to override this default. If such syntax is part of a property value, it should use a <a class="production css" data-link-type="type" href="#color-interpolation-method" id="ref-for-color-interpolation-method"><color-interpolation-method></a> token, defined below for easy reference from other specifications. This ensures consistency across CSS, and that further customizations on how color interpolation is performed can automatically percolate across all of CSS. <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-color-space"><color-space></dfn> = <rectangular-color-space> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧⑥">|</a> <polar-color-space> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-rectangular-color-space"><rectangular-color-space></dfn> = <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb⑦">srgb</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧⑦">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-srgb-linear" id="ref-for-valdef-color-srgb-linear④">srgb-linear</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧⑧">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3⑧">display-p3</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧⑨">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb④">a98-rgb</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨⓪">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb①①">prophoto-rgb</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨①">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-rec2020" id="ref-for-valdef-color-rec2020⑥">rec2020</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨②">|</a> <a class="css" data-link-type="maybe" href="#valdef-lab-lab" id="ref-for-valdef-lab-lab①">lab</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨③">|</a> <a class="css" data-link-type="maybe" href="#valdef-oklab-oklab" id="ref-for-valdef-oklab-oklab①">oklab</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨④">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-xyz" id="ref-for-valdef-color-xyz④">xyz</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨⑤">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d50" id="ref-for-valdef-color-xyz-d50③">xyz-d50</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨⑥">|</a> <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d65" id="ref-for-valdef-color-xyz-d65③">xyz-d65</a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-polar-color-space"><polar-color-space></dfn> = <a class="css" data-link-type="maybe" href="#valdef-hsl-hsl" id="ref-for-valdef-hsl-hsl①">hsl</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨⑦">|</a> <a class="css" data-link-type="maybe" href="#valdef-hwb-hwb" id="ref-for-valdef-hwb-hwb①">hwb</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨⑧">|</a> <a class="css" data-link-type="maybe" href="#valdef-lch-lch" id="ref-for-valdef-lch-lch①">lch</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨⑨">|</a> <a class="css" data-link-type="maybe" href="#valdef-oklch-oklch" id="ref-for-valdef-oklch-oklch①">oklch</a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-hue-interpolation-method"><hue-interpolation-method></dfn> = <c- p>[</c-> shorter <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪⓪">|</a> longer <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪①">|</a> increasing <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪②">|</a> decreasing <c- p>]</c-> hue <dfn class="dfn-paneled" data-dfn-type="type" data-export id="color-interpolation-method"><color-interpolation-method></dfn> = in <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-rectangular-color-space" id="ref-for-typedef-rectangular-color-space"><rectangular-color-space></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪③">|</a> <a class="production" data-link-type="type" href="#typedef-polar-color-space" id="ref-for-typedef-polar-color-space"><polar-color-space></a> <a class="production" data-link-type="type" href="#typedef-hue-interpolation-method" id="ref-for-typedef-hue-interpolation-method①"><hue-interpolation-method></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①⑥">?</a> <c- p>]</c-> </pre> The keywords in the definitions of <a class="production css" data-link-type="type" href="#typedef-rectangular-color-space" id="ref-for-typedef-rectangular-color-space①"><rectangular-color-space></a> and <a class="production css" data-link-type="type" href="#typedef-polar-color-space" id="ref-for-typedef-polar-color-space①"><polar-color-space></a> each refer to their corresponding color space, represented in CSS either by the functional syntax with the same name, or (if no such function is present), by the corresponding <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident④"><ident></a> in the <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color⑦">color()</a> function. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/color-mix-percents-01.html" title="css/css-color/color-mix-percents-01.html">color-mix-percents-01.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/color-mix-percents-01.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/color-mix-percents-01.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/color-mix-percents-02.html" title="css/css-color/color-mix-percents-02.html">color-mix-percents-02.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/color-mix-percents-02.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/color-mix-percents-02.html">(source)</a> </ul> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradients-with-transparent.html" title="css/css-images/gradients-with-transparent.html">gradients-with-transparent.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradients-with-transparent.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradients-with-transparent.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-eval-001.html" title="css/css-images/gradient/gradient-eval-001.html">gradient-eval-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-eval-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-eval-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-eval-002.html" title="css/css-images/gradient/gradient-eval-002.html">gradient-eval-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-eval-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-eval-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-eval-003.html" title="css/css-images/gradient/gradient-eval-003.html">gradient-eval-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-eval-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-eval-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-eval-004.html" title="css/css-images/gradient/gradient-eval-004.html">gradient-eval-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-eval-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-eval-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-eval-005.html" title="css/css-images/gradient/gradient-eval-005.html">gradient-eval-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-eval-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-eval-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-eval-006.html" title="css/css-images/gradient/gradient-eval-006.html">gradient-eval-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-eval-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-eval-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-eval-007.html" title="css/css-images/gradient/gradient-eval-007.html">gradient-eval-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-eval-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-eval-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-eval-008.html" title="css/css-images/gradient/gradient-eval-008.html">gradient-eval-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-eval-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-eval-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-eval-009.html" title="css/css-images/gradient/gradient-eval-009.html">gradient-eval-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-eval-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-eval-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/gradient-none-interpolation.html" title="css/css-images/gradient/gradient-none-interpolation.html">gradient-none-interpolation.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/gradient-none-interpolation.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/gradient-none-interpolation.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/legacy-color-gradient.html" title="css/css-images/gradient/legacy-color-gradient.html">legacy-color-gradient.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/legacy-color-gradient.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/legacy-color-gradient.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/oklab-gradient.html" title="css/css-images/gradient/oklab-gradient.html">oklab-gradient.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/oklab-gradient.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/oklab-gradient.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/srgb-gradient.html" title="css/css-images/gradient/srgb-gradient.html">srgb-gradient.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/srgb-gradient.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/srgb-gradient.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/srgb-linear-gradient.html" title="css/css-images/gradient/srgb-linear-gradient.html">srgb-linear-gradient.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/srgb-linear-gradient.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/srgb-linear-gradient.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/gradient/xyz-gradient.html" title="css/css-images/gradient/xyz-gradient.html">xyz-gradient.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/gradient/xyz-gradient.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/gradient/xyz-gradient.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/parsing/gradient-interpolation-method-valid.html" title="css/css-images/parsing/gradient-interpolation-method-valid.html">gradient-interpolation-method-valid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/parsing/gradient-interpolation-method-valid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/parsing/gradient-interpolation-method-valid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/parsing/gradient-interpolation-method-invalid.html" title="css/css-images/parsing/gradient-interpolation-method-invalid.html">gradient-interpolation-method-invalid.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/parsing/gradient-interpolation-method-invalid.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/parsing/gradient-interpolation-method-invalid.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-images/parsing/gradient-interpolation-method-computed.html" title="css/css-images/parsing/gradient-interpolation-method-computed.html">gradient-interpolation-method-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-images/parsing/gradient-interpolation-method-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-images/parsing/gradient-interpolation-method-computed.html">(source)</a> </ul> </details> If the host syntax does not define what color space interpolation should take place in, it defaults to Oklab. Authors that prefer interpolation in sRGB in a particular instance can opt-in to the old behavior by explicitly specifying sRGB as the <a data-link-type="dfn" href="#interpolation-color-space" id="ref-for-interpolation-color-space②">interpolation color space</a>, for example on a particular gradient where that result is desired. If the colors to be interpolated are outside the gamut of the <a data-link-type="dfn" href="#interpolation-color-space" id="ref-for-interpolation-color-space③">interpolation color space</a> , then once converted to that space, they will contain out of range values. These are not clipped, but the values are interpolated as-is. <h3 class="heading settled" data-level="12.2" id="interpolation-missing">12.2. Interpolating with Missing Components<a class="self-link" href="#interpolation-missing"></a></h3> In the course of converting the two colors to the <a data-link-type="dfn" href="#interpolation-color-space" id="ref-for-interpolation-color-space④">interpolation color space</a>, any <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component①⓪">missing components</a> would be replaced with the value 0. Thus, the first stage in interpolating two colors is to classify any <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component①①">missing components</a> in the input colors, and compare them to the components of the <a data-link-type="dfn" href="#interpolation-color-space" id="ref-for-interpolation-color-space⑤">interpolation color space</a>. If any <a data-link-type="dfn" href="#analogous-components" id="ref-for-analogous-components①">analogous components</a> which are missing components are found, they will be carried forward and re-inserted in the converted color before premultiplication, and before linear interpolation takes place. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="analogous-components">analogous components</dfn> are as follows: <table> <tbody> <tr> <th>Category <th>Components <tr> <td>Reds <td>r,x <tr> <td>Greens <td>g,y <tr> <td>Blues <td>b,z <tr> <td>Lightness <td>L <tr> <td>Colorfulness <td>C, S <tr> <td>Hue <td>H <tr> <td>Opponent a <td>a <tr> <td>Opponent b <td>b </table> Note: for the purposes of this classification, the XYZ spaces are considered super-saturated RGB spaces. Also, despite Saturation being Lightness-dependent, it falls in the same category as Chroma here. The Whiteness and Blackness components of HWB have no analogs in other color spaces. <div class="example" id="ex-analogous-hue"> <a class="self-link" href="#ex-analogous-hue"></a> For example, if these two colors are to be interpolated in Oklch, the missing hue in the CIE LCH color is analogous to the hue component of Oklch and will be carried forward while the missing blue component in the second color is not analogous to any Oklch component and will not be carried forward: <pre class="highlight"> <c- nf>lch</c-><c- p>(</c-><c- m>50</c-><c- k>%</c-> <c- m>0.02</c-> none<c- p>)</c-> <c- nf>color</c-><c- p>(</c->display-p3 <c- m>0.7</c-> <c- m>0.5</c-> none<c- p>)</c-> </pre> which convert to <pre class="highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>56.897</c-><c- k>%</c-> <c- m>0.0001</c-> <c- m>0</c-><c- p>)</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>63.612</c-><c- k>%</c-> <c- m>0.1522</c-> <c- m>78.748</c-><c- p>)</c-> </pre> and with carried forward <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component①③">missing component</a> re-inserted, the two colors to be interpolated are: <pre class="highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>56.897</c-><c- k>%</c-> <c- m>0.0001</c-> none<c- p>)</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>63.612</c-><c- k>%</c-> <c- m>0.1522</c-> <c- m>78.748</c-><c- p>)</c-> </pre> </div> If a color with a carried forward <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component①④">missing component</a> is interpolated with another color which is not missing that component, the missing component is treated as having the other color’s component value. Therefore, the carrying-forward step must be performed before any <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component①④">powerless component</a> handling. <div class="example" id="ex-oklch-missing-hue"> <a class="self-link" href="#ex-oklch-missing-hue"></a> For example, if these two colors are interpolated, the second of which has a missing hue: <pre class="highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>78.3</c-><c- k>%</c-> <c- m>0.108</c-> <c- m>326.5</c-><c- p>)</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>39.2</c-><c- k>%</c-> <c- m>0.4</c-> none<c- p>)</c-> </pre> Then the actual colors to be interpolated are <pre class="highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>78.3</c-><c- k>%</c-> <c- m>0.108</c-> <c- m>326.5</c-><c- p>)</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>39.2</c-><c- k>%</c-> <c- m>0.4</c-> <c- m>326.5</c-><c- p>)</c-> </pre> and not <pre class="highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>78.3</c-><c- k>%</c-> <c- m>0.108</c-> <c- m>326.5</c-><c- p>)</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>39.2</c-><c- k>%</c-> <c- m>0.4</c-> <c- m>0</c-><c- p>)</c-> </pre> </div> If the carried forward <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component①⑥">missing component</a> is alpha, the color must be <a data-link-type="dfn" href="#premultiplied" id="ref-for-premultiplied②">premultiplied</a> with this carried forward value, not with the zero value that would have resulted from color conversion. <div class="example" id="ex-oklch-missing-alpha"> <a class="self-link" href="#ex-oklch-missing-alpha"></a> For example, if these two colors are interpolated, the second of which has a missing alpha: <pre class="highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>0.783</c-> <c- m>0.108</c-> <c- m>326.5</c-> / <c- m>0.5</c-><c- p>)</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>0.392</c-> <c- m>0.4</c-> <c- m>0</c-> / none<c- p>)</c-> </pre> Then the actual colors to be interpolated are <pre class="highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>78.3</c-><c- k>%</c-> <c- m>0.108</c-> <c- m>326.5</c-> / <c- m>0.5</c-><c- p>)</c-> <c- nf>oklch</c-><c- p>(</c-><c- m>39.2</c-><c- k>%</c-> <c- m>0.4</c-> <c- m>0</c-> / <c- m>0.5</c-><c- p>)</c-> </pre> giving the premultiplied Oklch values [0.3915, 0.054, 326] and [0.196, 0.2, 0]. </div> If both colors are <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component①⑦">missing</a> a given component, the interpolated color will also be missing that component. <h3 class="heading settled" data-level="12.3" id="interpolation-alpha">12.3. Interpolating with Alpha<a class="self-link" href="#interpolation-alpha"></a></h3> When the colors to be interpolated are not fully opaque, they are first <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="premultiplied">premultiplied</dfn> as follows: <ul> <li data-md> If the alpha value is <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none⑤">none</a>, the premultiplied value is the un-premultiplied value. Otherwise, <li data-md> If any component value is <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none⑥">none</a>, the premultiplied value is also none. <li data-md> For <a data-link-type="dfn" href="#rectangular-orthogonal-color" id="ref-for-rectangular-orthogonal-color③">rectangular orthogonal color</a> coordinate systems, all component values are multiplied by the alpha value. <li data-md> For <a data-link-type="dfn" href="#cylindrical-polar-color" id="ref-for-cylindrical-polar-color④">cylindrical polar color</a> coordinate systems, the hue angle is not premultiplied, but the other two axes are premultiplied. </ul> To obtain a color value from a premultiplied color value, <ul> <li data-md> If the interpolated alpha value is zero or <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none⑧">none</a>, the un-premultiplied value is the premultiplied value. Otherwise, <li data-md> If any component value is <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none⑨">none</a>, the un-premultiplied value is also none. <li data-md> otherwise, each component which had been premultiplied is divided by the interpolated alpha value. </ul> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-transitions/animations/color-transition-premultiplied.html" title="css/css-transitions/animations/color-transition-premultiplied.html">color-transition-premultiplied.html</a> <a class="wpt-live" href="http://wpt.live/css/css-transitions/animations/color-transition-premultiplied.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-transitions/animations/color-transition-premultiplied.html">(source)</a> </ul> </details> <details class="note" id="premultiplied①"> <summary>Why is premultiplied alpha useful?</summary> <a class="self-link" href="#premultiplied①"></a> Interpolating colors using the premultiplied representations tends to produce more attractive transitions than the non-premultiplied representations, particularly when transitioning from a fully opaque color to fully transparent. Note that transitions where either the transparency or the color are held constant (for example, transitioning between <code class="lang-css highlight"><c- nf>rgba</c-><c- p>(</c-><c- m>255</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>100</c-><c- k>%</c-><c- p>)</c-></code> (opaque red) and <code class="lang-css highlight"><c- nf>rgba</c-><c- p>(</c-><c- m>0</c-><c- p>,</c-><c- m>0</c-><c- p>,</c-><c- m>255</c-><c- p>,</c-><c- m>100</c-><c- k>%</c-><c- p>)</c-></code> (opaque blue), or <code class="lang-css highlight"><c- nf>rgba</c-><c- p>(</c-><c- m>255</c-><c- p>,</c-><c- m>0</c-><c- p>,</c-><c- m>0</c-><c- p>,</c-><c- m>100</c-><c- k>%</c-><c- p>)</c-></code> (opaque red) and <code class="lang-css highlight"><c- nf>rgba</c-><c- p>(</c-><c- m>255</c-><c- p>,</c-><c- m>0</c-><c- p>,</c-><c- m>0</c-><c- p>,</c-><c- m>0</c-><c- k>%</c-><c- p>)</c-></code> (transparent red)) have identical results whether the color interpolation is done in premultiplied or non-premultiplied color-space. Differences only arise when both the color and transparency differ between the two endpoints. <div class="example" id="ex-gradient-transition-premultiply"> <a class="self-link" href="#ex-gradient-transition-premultiply"></a> The following example illustrates the difference between a gradient transitioning via pre-multiplied values (in this case sRGB, since all colors involved are legacy colors) and one transitioning (incorrectly) via non-premultiplied values. In both of these examples, the gradient is drawn over a white background. Both gradients could be written with the following value: <pre class="highlight"><c- nf>linear-gradient</c-><c- p>(</c-><c- m>90</c-><c- k>deg</c-><c- p>,</c-> red<c- p>,</c-> transparent<c- p>,</c-> blue<c- p>)</c-></pre> With premultiplied colors, transitions to or from "transparent" always look nice: <object data="images/gradient2.svg" height="100" width="200">(Image requires SVG)</object> On the other hand, if a gradient were to incorrectly transition in non-premultiplied space, the center of the gradient would be a noticeably grayish color, because "transparent" is actually a shorthand for rgba(0,0,0,0), or transparent black, meaning that the red transitions to a black as it loses opacity, and similarly with the blue’s transition: <object data="images/gradient3.svg" height="100" width="200">(Image requires SVG)</object> </div> </details> <div class="example" id="ex-premultiplied-srgb"> <a class="self-link" href="#ex-premultiplied-srgb"></a> For example, to interpolate, in the sRGB color space, the two sRGB colors rgb(24% 12% 98% / 0.4) and rgb(62% 26% 64% / 0.6) they would first be converted to premultiplied form [9.6% 4.8% 39.2% ] and [37.2% 15.6% 38.4%] before interpolation. The midpoint of linearly interpolating these colors would be [23.4% 10.2% 38.8%] which, with an alpha value of 0.5, is rgb(46.8% 20.4% 77.6% / 0.5) when premultiplication is undone. </div> <div class="example" id="ex-premultiplied-lab"> <a class="self-link" href="#ex-premultiplied-lab"></a> To interpolate, in the Lab color space, the two colors rgb(76% 62% 03% / 0.4) and color(display-p3 0.84 0.19 0.72 / 0.6) they are first converted to lab lab(66.927% 4.873 68.622 / 0.4) lab(53.503% 82.672 -33.901 / 0.6) then the L, a and b coordinates are premultiplied before interpolation [26.771% 1.949 27.449] and [32.102% 49.603 -20.341]. The midpoint of linearly interpolating these would be [29.4365% 25.776 3.554] which, with an alpha value of 0.5, is lab(58.873% 51.552 7.108) / 0.5) when premultiplication is undone. </div> <div class="example" id="ex-premultiplied-lch"> <a class="self-link" href="#ex-premultiplied-lch"></a> To interpolate, in the chroma-preserving LCH color space, the same two colors rgb(76% 62% 03% / 0.4) and color(display-p3 0.84 0.19 0.72 / 0.6) they are first converted to LCH lch(66.93% 68.79 85.94 / 0.4) lch(53.5% 89.35 337.7 / 0.6) then the L and C coordinates (but not H) are premultiplied before interpolation [26.771% 27.516 85.94] and [32.102% 53.61 337.7]. The midpoint of linearly interpolating these, along the shorter hue arc (the default) would be [29.4365% 40.563 31.82] which, with an alpha value of 0.5, is lch(58.873% 81.126 31.82) / 0.5) when premultiplication is undone. </div> There is sample JavaScript code for alpha premultiplication and un-premultiplication, for both polar and rectangular color spaces, in <a href="#color-conversion-code">§ 17 Sample code for Color Conversions</a>. <h3 class="heading settled" data-level="12.4" id="hue-interpolation">12.4. Hue Interpolation<a class="self-link" href="#hue-interpolation"></a></h3> For color functions with a hue angle (LCH, HSL, HWB etc), there are multiple ways to interpolate. As arcs greater than 360° are rarely desirable, hue angles are fixed up prior to interpolation so that per-component interpolation is done over less than 360°, often less than 180°. Host syntax can specify any of the following algorithms for hue interpolation (angles in the following are in degrees, but the logic is the same regardless of how they are specified). Specifying a hue interpolation strategy is already part of the <a class="production css" data-link-type="type" href="#color-interpolation-method" id="ref-for-color-interpolation-method①"><color-interpolation-method></a> syntax via the <a class="production css" data-link-type="type" href="#typedef-hue-interpolation-method" id="ref-for-typedef-hue-interpolation-method②"><hue-interpolation-method></a> token. Unless otherwise specified, if no specific hue interpolation algorithm is selected by the host syntax, the default is shorter. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/color-mix-percents-01.html" title="css/css-color/color-mix-percents-01.html">color-mix-percents-01.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/color-mix-percents-01.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/color-mix-percents-01.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/color-mix-percents-02.html" title="css/css-color/color-mix-percents-02.html">color-mix-percents-02.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/color-mix-percents-02.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/color-mix-percents-02.html">(source)</a> </ul> </details> Note: As a reminder, if the interpolating colors were not already in the specified interpolation color space, then converting them will turn any <a data-link-type="dfn" href="#powerless-color-component" id="ref-for-powerless-color-component①⑤">powerless components</a> into <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component①⑨">missing components</a>. <h4 class="heading settled" data-level="12.4.1" id="hue-shorter">12.4.1. <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="shorter">shorter</dfn><a class="self-link" href="#hue-shorter"></a></h4> Hue angles are interpolated to take the shorter of the two arcs between the starting and ending hues. <div class="example" id="ex-shorter"><a class="self-link" href="#ex-shorter"></a> For example, the midpoint when interpolating in Oklch from a red oklch(0.6 0.24 30) to a yellow oklch(0.8 0.15 90) would be at a hue angle of 30 + (90 - 30) * 0.5 = 60 degrees, along the shorter arc between the two colors, giving a deep orange oklch(0.7 0.195 60) </div> Angles are adjusted so that <var>θ₂ - θ₁</var> ∈ [-180, 180]. In pseudo-Javascript: <pre class="highlight">if <c- p>(</c->θ₂ - θ₁ > <c- m>180</c-><c- p>)</c-> <c- p>{</c-> θ₁ += <c- m>360</c-><c- p>;</c-> <c- p>}</c-> else if <c- p>(</c->θ₂ - θ₁ < <c- m>-180</c-><c- p>)</c-> <c- p>{</c-> θ₂ += <c- m>360</c-><c- p>;</c-> <c- p>}</c-> </pre> <h4 class="heading settled" data-level="12.4.2" id="hue-longer">12.4.2. <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="longer">longer</dfn><a class="self-link" href="#hue-longer"></a></h4> Hue angles are interpolated to take the longer of the two arcs between the starting and ending hues. <div class="example" id="ex-longer"><a class="self-link" href="#ex-longer"></a> For example, the midpoint when interpolating in Oklch from a red oklch(0.6 0.24 30) to a yellow oklch(0.8 0.15 90) would be at a hue angle of (30 + 360 + 90) * 0.5 = 240 degrees, along the longer arc between the two colors, giving a sky blue oklch(0.7 0.195 240) </div> Angles are adjusted so that <var>θ₂ - θ₁</var> ∈ {(-360, -180], [180, 360)}. In pseudo-Javascript: <pre class="highlight">if <c- p>(</c-><c- m>0</c-> < θ₂ - θ₁ < <c- m>180</c-><c- p>)</c-> <c- p>{</c-> θ₁ += <c- m>360</c-><c- p>;</c-> <c- p>}</c-> else if <c- p>(</c-><c- m>-180</c-> < θ₂ - θ₁ <= <c- m>0</c-><c- p>)</c-> <c- p>{</c-> θ₂ += <c- m>360</c-><c- p>;</c-> <c- p>}</c-> </pre> <h4 class="heading settled" data-level="12.4.3" id="hue-increasing">12.4.3. <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="increasing">increasing</dfn><a class="self-link" href="#hue-increasing"></a></h4> Hue angles are interpolated so that, as they progress from the first color to the second, the angle is always increasing. If the angle increases to 360 it is reset to zero, and then continues increasing. Depending on the difference between the two angles, this will either look the same as shorter or as longer. However, if one of the hue angles is being animated, and the hue angle difference passes through 180 degrees, the interpolation will not flip to the other arc. <div class="example" id="ex-increasing"> <a class="self-link" href="#ex-increasing"></a> For example, the midpoint when interpolating in Oklch from a deep brown oklch(0.5 0.1 30) to a turquoise oklch(0.7 0.1 190) would be at a hue angle of (30 + 190) * 0.5 = 110 degrees, giving a khaki oklch(0.6 0.1 110). However, if the hue of the second color is animated to oklch(0.7 0.1 230), the midpoint of the interpolation will be (30 + 230) * 0.5 = 130 degrees, continuing in the same increasing direction, giving another green oklch(0.6 0.1 130) rather than flipping to the opponent color part-way through the animation. </div> Angles are adjusted so that <var>θ₂ - θ₁</var> ∈ [0, 360). In pseudo-Javascript: <pre class="highlight">if <c- p>(</c->θ₂ < θ₁<c- p>)</c-> <c- p>{</c-> θ₂ += <c- m>360</c-><c- p>;</c-> <c- p>}</c-> </pre> <h4 class="heading settled" data-level="12.4.4" id="hue-decreasing">12.4.4. <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="decreasing">decreasing</dfn><a class="self-link" href="#hue-decreasing"></a></h4> Hue angles are interpolated so that, as they progress from the first color to the second, the angle is always decreasing. If the angle decreases to 0 it is reset to 360, and then continues decreasing. Depending on the difference between the two angles, this will either look the same as shorter or as longer. However, if one of the hue angles is being animated, and the hue angle difference passes through 180 degrees, the interpolation will not flip to the other arc. <div class="example" id="ex-decreasing"> <a class="self-link" href="#ex-decreasing"></a> For example, the midpoint when interpolating in Oklch from a deep brown oklch(0.5 0.1 30) to a turquoise oklch(0.7 0.1 190) would be at a hue angle of (30 + 360 + 190) * 0.5 = 290 degrees, giving a purple oklch(0.6 0.1 290). However, if the hue of the second color is animated to oklch(0.7 0.1 230), the midpoint of the interpolation will be (30 + 360 + 230) * 0.5 = 310 degrees, continuing in the same decreasing direction, giving another purple oklch(0.6 0.1 310) rather than flipping to the opponent color part-way through the animation. </div> Angles are adjusted so that <var>θ₂ - θ₁</var> ∈ (-360, 0]. In pseudo-Javascript: <pre class="highlight">if <c- p>(</c->θ₁ < θ₂<c- p>)</c-> <c- p>{</c-> θ₁ += <c- m>360</c-><c- p>;</c-> <c- p>}</c-> </pre> <h2 class="heading settled" data-level="13" id="gamut-mapping">13. Gamut Mapping <a class="self-link" href="#gamut-mapping"></a></h2> <h3 class="heading settled" data-level="13.1" id="gamut-mapping-intro">13.1. An Introduction to Gamut Mapping<a class="self-link" href="#gamut-mapping-intro"></a></h3> Note: This section provides important context for the specific requirements described elsewhere in the document. This section is non-normative <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section is not normative, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> When a color in an origin color space is converted to another, destination color space which has a smaller gamut, some colors will be outside the destination gamut. For intermediate color calculations, these out of gamut values are preserved. However, if the destination is the display device (a screen, or a printer) then out of gamut values must be converted to an in-gamut color. Gamut mapping is the process of finding an in-gamut color with the least objectionable change in visual appearance. <h4 class="heading settled" data-level="13.1.1" id="GM-clip">13.1.1. Clipping<a class="self-link" href="#GM-clip"></a></h4> The simplest and least acceptable method is simply to clip the component values to the displayable range. This changes the proportions of the three primary colors (for an RGB display), resulting in a hue shift. <div class="example" id="ex-gamut-clip-hue-shift"> <a class="self-link" href="#ex-gamut-clip-hue-shift"></a> For example, consider the color <code class="highlight"><c- nf>color</c-><c- p>(</c->srgb-linear <c- m>0.5</c-> <c- m>1</c-> <c- m>3</c-><c- p>)</c-></code>. Because this is a linear-light color space, we can compare the intensities of the three components and see that the amount of blue light is three times the amount of green, while the amount of red light is half that of green. There is six times as much blue primary as red. In Oklch, this color has a hue angle of 265.1° If we now clip this color to bring it into gamut for sRGB, we get <code class="highlight"><c- nf>color</c-><c- p>(</c->srgb-linear <c- m>0.5</c-> <c- m>1</c-> <c- m>1</c-><c- p>)</c-></code>. The amount of blue light is the same as green. In Oklch, this color has a hue angle of 196.1°, a substantial change of 69°. </div> <h4 class="heading settled" data-level="13.1.2" id="GM-closest">13.1.2. Closest Color (MINDE)<a class="self-link" href="#GM-closest"></a></h4> A better method is to map colors, in a perceptually uniform color space, by finding the closest in-gamut color (so-called minimum ΔE or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="minde">MINDE</dfn>). Clearly, the success of this technique depends on the degree of uniformity of the gamut mapping color space and the predictive accuracy of the deltaE function used. However, when doing gamut mapping changes in Hue are particularly objectionable; changes in Chroma are more tolerable, and small changes in Lightness can also be acceptable especially if the alternative is a larger Chroma reduction. MINDE weights changes in each dimension equally, and thus gives suboptimal results. <h4 class="heading settled" data-level="13.1.3" id="GM-chroma">13.1.3. Chroma Reduction<a class="self-link" href="#GM-chroma"></a></h4> To improve on MINDE algorithms, colors are mapped in a perceptually uniform, polar color space by holding the hue constant, and reducing the chroma until the color falls in gamut. <div class="example" id="ex-gamutmap-p3-yellow-to-srgb"> <a class="self-link" href="#ex-gamutmap-p3-yellow-to-srgb"></a> In this example, Display P3 primary yellow (<code class="highlight"><c- nf>color</c-><c- p>(</c->display-p3 <c- m>1</c-> <c- m>1</c-> <c- m>0</c-><c- p>)</c-></code>) is being mapped to an sRGB display. The gamut mapping color space is Oklch. <pre class="lang-css highlight"><c- nf>color</c-><c- p>(</c->display-p3 <c- m>1</c-> <c- m>1</c-> <c- m>0</c-><c- p>)</c-></pre> is <pre class="lang-css highlight"><c- nf>color</c-><c- p>(</c->srgb <c- m>1</c-> <c- m>1</c-> <c- m>-0.3463</c-><c- p>)</c-></pre> which is <pre class="lang-css highlight"><c- nf>color</c-><c- p>(</c->oklch <c- m>0.96476</c-> <c- m>0.24503</c-> <c- m>110.23</c-><c- p>)</c-></pre> By progressively reducing the chroma component until the resulting color falls inside the sRGB gamut (has no components negative, or greater than one) a gamut mapped color is obtained. <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->oklch <c- m>0.96476</c-> <c- m>0.21094</c-> <c- m>110.23</c-><c- p>)</c-></pre> which is <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->srgb <c- m>0.99116</c-> <c- m>0.99733</c-> <c- m>0.00001</c-><c- p>)</c-> </pre> <figure id="gamutmap-p3-yellow"> <img alt height="565" src="./images/slice-ok-110.23.svg" width="776"> <figcaption>A constant-hue slice of Oklch color space. The vertical axis represents lightness, the horizontal axis is chroma. The color to be mapped, shown as a yellow circle, has the chroma reduced while keeping hue and lightness constant. The color therefore moves along the maroon line in the diagram, towards the neutral axis on the left. The gamut boundary of sRGB is shown in green. </figcaption> </figure> </div> A practical implementation will converge more quickly than a linear reduction; either by binary search, or by computing the geometric intersection of the line of constant hue and lightness with the gamut boundary. <h4 class="heading settled" data-level="13.1.4" id="GM-excessive-reduction">13.1.4. Excessive Chroma Reduction<a class="self-link" href="#GM-excessive-reduction"></a></h4> Also, this simple approach will give sub-optimal results for certain colors, principally very light colors like yellow and cyan, if the upper edge of the gamut boundary is shallow, or even slightly concave. The line of constant lightness can skim just above the gamut boundary, resulting in an excessively low chroma in those cases. The choice of color space will affect the acceptability of the gamut mapped colors. <div class="example" id="CIELCH-p3-yellow-noclip"> <a class="self-link" href="#CIELCH-p3-yellow-noclip"></a> In this example, Display P3 primary yellow (<code class="highlight"><c- nf>color</c-><c- p>(</c->display-p3 <c- m>1</c-> <c- m>1</c-> <c- m>0</c-></code>) has the chroma progressively reduced in CIE LCH color space. <figure id="fig-cielch-p3-yellow-noclip"> <img alt src="./images/lab-yellow-LCH-fade.svg" width="700"> <figcaption> In the upper part of this diagram, colors which are inside the gamut of sRGB are displayed as-is. Colors inside the gamut of Display P3 (but outside sRGB) are in salmon. Colors outside the gamut of Display P3 are in red. The lower part of the diagram shows the linear-light intensities of the Display P3 red, green and blue components. </figcaption> </figure> It can be seen that reduction in CIE LCH chroma makes the red intensity curve up, out of Display P3 gamut; by the time it falls again the chroma is very low. Simple gamut mapping in CIE LCH would give unsatisfactory results. </div> <div class="example" id="Oklch-p3-yellow-noclip"> <a class="self-link" href="#Oklch-p3-yellow-noclip"></a> In this example, Display P3 primary yellow (<code class="highlight"><c- nf>color</c-><c- p>(</c->display-p3 <c- m>1</c-> <c- m>1</c-> <c- m>0</c-></code>) has the chroma progressively reduced, but this time in Oklch color space. <figure id="fig-oklch=pr=yellow-noclip"> <img alt src="./images/p3-yellow-oklab.svg" width="700"> <figcaption> In the upper part of this diagram, colors which are inside the gamut of sRGB are displayed as-is. Colors inside the gamut of Display P3 (but outside sRGB) are in salmon. Colors outside the gamut of Display P3 are in red. The lower part of the diagram shows the linear-light intensities of the Display P3 red, green and blue components. </figcaption> </figure> It can be seen that reduction in Oklch chroma is better behaved. Colors do not go outside the Display P3 gamut, and the resulting gamut-mapped yellow has good chroma. Simple gamut mapping in OK LCH would give acceptable results. </div> <h4 class="heading settled" data-level="13.1.5" id="GM-chroma-local-MINDE">13.1.5. Chroma Reduction with Local Clipping<a class="self-link" href="#GM-chroma-local-MINDE"></a></h4> The simple chroma-reduction algorithm can be improved: at each step, the color difference is computed between the current mapped color and a clipped version of that color. If the current color is outside the gamut boundary, but the color difference between it and the clipped version is below the threshold for a just noticeable difference (JND), the clipped version of the color is returned as the mapped result. Effectively, this is doing a MINDE mapping at each stage, but constrained so the hue and lightness changes are very small, and thus are not noticeable. <div class="example" id="CIELCH-p3-yellow-clip"> <a class="self-link" href="#CIELCH-p3-yellow-clip"></a> In this example, Display P3 primary yellow (<code class="highlight"><c- nf>color</c-><c- p>(</c->display-p3 <c- m>1</c-> <c- m>1</c-> <c- m>0</c-></code>) has the chroma progressively reduced in CIE LCH color space, with the local clip modification. <figure id="fig-cielch-p3-yellow-clip"> <img alt src="./images/lab-yellow-LCH-clip-fade.svg" width="700"> <figcaption> In the upper part of this diagram, colors which are inside the gamut of sRGB are displayed as-is. Colors inside the gamut of Display P3 (but outside sRGB) are in salmon. Colors outside the gamut of Display P3 are in red. The lower part of the diagram shows the linear-light intensities of the Display P3 red, green and blue components. </figcaption> </figure> It can be seen that reduction in CIE LCH chroma still makes the red intensity curve up, out of Display P3 gamut; but less than before and the sRGB boundary is found much more quickly. Gamut mapping in CIE LCH with local clip would give acceptable results. </div> <div class="example" id="Oklch-p3-yellow-clip"> <a class="self-link" href="#Oklch-p3-yellow-clip"></a> In this example, Display P3 primary yellow (<code class="highlight"><c- nf>color</c-><c- p>(</c->display-p3 <c- m>1</c-> <c- m>1</c-> <c- m>0</c-></code>) has the chroma progressively reduced, but this time in Oklch color space and with the local clip modification. <figure id="fig-oklch-p3-yellow-clip"> <img alt src="./images/p3-yellow-oklab-clip.svg" width="700"> <figcaption> In the upper part of this diagram, colors which are inside the gamut of sRGB are displayed as-is. Colors inside the gamut of Display P3 (but outside sRGB) are in salmon. Colors outside the gamut of Display P3 are in red. The lower part of the diagram shows the linear-light intensities of the Display P3 red, green and blue components. </figcaption> </figure> It can be seen that reduction in Oklch chroma, which was already good, is further improved by the local clip modification. Simple gamut mapping in CIE LCH with local clip would give excellent results. </div> <h4 class="heading settled" data-level="13.1.6" id="GM-hue-curvature">13.1.6. Deviations from Perceptual Uniformity: Hue Curvature<a class="self-link" href="#GM-hue-curvature"></a></h4> Using the CIE LCH color space and deltaE2000 distance metric, is known to give suboptimal results with significant hue shifts, for colors in the hue range 270° to 330°. <figure id="fig-cielch-blue-curvature"> <img alt height="1848" src="./images/CIELCH-blue-slice.png" width="2434"> <figcaption> A constant-hue slice of CIE LCH color space, at a hue angle of 301.37° corresponding to sRGB primary blue. The vertical axis is Lightness, the horizontal axis is Chroma. Between chroma of 25 and 75, the hue is visibly purple, becoming more blue between 100 and 131. The same phenomenon continues past 131, but cannot be shown on an sRGB display. </figcaption> </figure> Using Oklch color space and deltaEOK distance metric avoids this issue at all hue angles. <figure id="fig-oklch-blue-linearity"> <img alt height="1824" src="./images/OKLCH-blue-slice.png" width="2485"> <figcaption> A constant-hue slice of Oklch color space, at a hue angle of 264.06° corresponding to sRGB primary blue. The vertical axis is Lightness, the horizontal axis is Chroma. The hue is visibly the same at all values of chroma, up to 0.315 (the sRGB limit at this hue). It continues to be constant beyond this point, although that cannot be shown on an sRGB diagram. </figcaption> </figure> <h3 class="heading settled algorithm" data-algorithm="to CSS gamut map" data-level="13.2" id="css-gamut-mapping">13.2. CSS Gamut Mapping to an RGB Destination<a class="self-link" href="#css-gamut-mapping"></a></h3> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Actual values of color are not exposed to script, making this hard to test in an automated manner. <ul class="wpt-tests-list"></ul> <hr> </details> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="css-gamut-mapping-algorithm">CSS gamut mapping algorithm</dfn> applies to individual, Standard Dynamic Range (SDR) CSS colors which are out of gamut of an RGB display and thus require to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="css-gamut-mapped">css gamut mapped</dfn>. It implements a relative colorimetric intent, and colors inside the destination gamut are unchanged. Note: other situations, in particular mapping to printer gamuts where the maximum black level is significantly above zero, will require different algorithms which align the respective black and white points, which will result in lightness changes for very light and very dark colors as chroma is reduced.. Note: this algorithm is for individual, distinct colors; for color images, where relationships between neighboring pixels are important and the aim is to preserve detail and texture, a perceptual rendering intent is more appropriate and in that case, colors inside the destination gamut could be changed. CSS gamut mapping occurs in the <a href="#ok-lab">Oklch color space</a>, and the color difference formula used is <a href="#color-difference-OK">deltaEOK</a>. The <a href="#GM-chroma-local-MINDE">local-MINDE</a> improvement is used. For colors which are out of range on the Lightness axis, white is returned in the destination color space if the Lightness is greater than or equal to 1.0, while black is returned in the destination color space if the Lightness is less than or equal to 0.0. For the binary search implementation, at each step in the search, the deltaEOK is computed between the current mapped color and a clipped version of that color. If the current color is outside the gamut boundary, but the deltaEOK between it and the clipped version is below a threshold for a just noticeable difference (JND), the clipped version of the color is returned as the mapped result. For the geometric implementation, having found the exact intersection, project outwards (towards higher chroma) along the line of constant lightness until either: <ul> <li data-md> the deltaEOK between the projected point and a clipped version of that point exceeds one JND, or <li data-md> the chroma of the projected point is equal to the chroma of the original color (i.e. do not project past the original color) </ul> Then return the clipped version of the color as the mapped result. For the Oklch color space, one JND is is an Oklch difference of 0.02. Note: In CIE Lab color space, where the range of the Lightness component is 0 to 100, using deltaE2000, one JND is 2. Because the range of Lightness in Oklab and Oklch is 0 to 1, using deltaEOK, one JND is 100 times smaller. <h4 class="heading settled" data-level="13.2.1" id="binsearch">13.2.1. Sample Pseudocode for the Binary Search Gamut Mapping Algorithm with Local MINDE<a class="self-link" href="#binsearch"></a></h4> <div class="algorithm" data-algorithm="to CSS gamut map a color"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="css-gamut-map">CSS gamut map</dfn> a color <var>origin</var> in color space <var>origin color space</var> to be in gamut of a destination color space <var>destination</var>: <ol> <li>if <var>destination</var> has no gamut limits (XYZ-D65, XYZ-D50, Lab, LCH, Oklab, Oklch) convert <var>origin</var> to <var>destination</var> and return it as the gamut mapped color <li>let <var>origin_Oklch</var> be <var>origin</var> converted from <var>origin color space</var> to the Oklch color space <li>if the Lightness of <var>origin_Oklch</var> is greater than or equal to 100%, convert `oklab(1 0 0 / origin.alpha)` to <var>destination</var> and return it as the gamut mapped color <li>if the Lightness of <var>origin_Oklch</var> is less than than or equal to 0%, convert `oklab(0 0 0 / origin.alpha)` to <var>destination</var> and return it as the gamut mapped color <li>let inGamut(<var>color</var>) be a function which returns true if, when passed a color, that color is inside the gamut of <var>destination</var>. For HSL and HWB, it returns true if the color is inside the gamut of sRGB. <li>if inGamut(<var>origin_Oklch</var>) is true, convert <var>origin_Oklch</var> to <var>destination</var> and return it as the gamut mapped color <li>otherwise, let delta(<var>one</var>, <var>two</var>) be a function which returns the deltaEOK of color <var>one</var> compared to color <var>two</var> <li>let <var>JND</var> be 0.02 <li>let <var>epsilon</var> be 0.0001 <li>let clip(<var>color</var>) be a function which converts <var>color</var> to <var>destination</var>, clamps each component to the bounds of the reference range for that component and returns the result <li>set <var>current</var> to <var>origin_Oklch</var> <li>set <var>clipped</var> to clip(<var>current</var>) <li>set <var>E</var> to delta(<var>clipped</var>, <var>current</var>) <li> if <var>E</var> < <var>JND</var> <ol> <li>return <var>clipped</var> as the gamut mapped color </ol> <li>set <var>min</var> to zero <li>set <var>max</var> to the Oklch chroma of <var>origin_Oklch</var> <li> let <var>min_inGamut</var> be a boolean that represents when <var>min</var> is still in gamut, and set it to true <li> while (<var>max</var> - <var>min</var> is greater than <var>epsilon</var>) repeat the following steps <ol> <li>set <var>chroma</var> to (<var>min</var> + <var>max</var>) /2 <li>set the chroma component of <var>current</var> to <var>chroma</var> <li>if <var>min_inGamut</var> is true and also if inGamut(<var>current</var>) is true, set <var>min</var> to <var>chroma</var> and continue to repeat these steps <li> otherwise, carry out these steps: <ol> <li>set <var>clipped</var> to clip(<var>current</var>) <li>set <var>E</var> to delta(<var>clipped</var>, <var>current</var>) <li> if <var>E</var> < <var>JND</var> <ol> <li>if (<var>JND</var> - <var>E</var> < <var>epsilon</var>) return <var>clipped</var> as the gamut mapped color <li> otherwise, <ol> <li>set <var>min_inGamut</var> to false <li>set <var>min</var> to <var>chroma</var> </ol> </ol> <li>otherwise, set <var>max</var> to <var>chroma</var> and continue to repeat these steps </ol> </ol> <li>return <var>clipped</var> as the gamut mapped color </ol> </div> <h2 class="heading settled" data-level="14" id="resolving-color-values">14. Resolving <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color①⑨"><color></a> Values<a class="self-link" href="#resolving-color-values"></a></h2> Unless otherwise specified for a particular property, <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#specified-value" id="ref-for-specified-value">specified</a> colors are resolved to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="computed color" id="computed-color"><a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed</a> colors</dfn> and then further to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="used color" id="used-color"><a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value②">used</a> colors</dfn> as described below. The <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#resolved-value" id="ref-for-resolved-value">resolved value</a> of a <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②⓪"><color></a> is its <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value③">used value</a>. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-hex-color.html" title="css/css-color/parsing/color-computed-hex-color.html">color-computed-hex-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-hex-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-hex-color.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-named-color.html" title="css/css-color/parsing/color-computed-named-color.html">color-computed-named-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-named-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-named-color.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-hex-color.html" title="css/css-color/parsing/color-invalid-hex-color.html">color-invalid-hex-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-hex-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-hex-color.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-invalid-named-color.html" title="css/css-color/parsing/color-invalid-named-color.html">color-invalid-named-color.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-invalid-named-color.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-named-color.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/system-color-compute.html" title="css/css-color/system-color-compute.html">system-color-compute.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/system-color-compute.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/system-color-compute.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="14.1" id="resolving-sRGB-values">14.1. Resolving sRGB values<a class="self-link" href="#resolving-sRGB-values"></a></h3> This applies to: <ul> <li data-md> <a data-link-type="dfn" href="#hex-color" id="ref-for-hex-color③">hex colors</a> <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①①">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba⑦">rgba()</a> values <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①④">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla⑨">hsla()</a> values <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb⑧">hwb()</a> values <li data-md> <a data-link-type="dfn" href="#named-color" id="ref-for-named-color②">named colors</a> <li data-md> <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors①">system colors</a> <li data-md> <a href="#deprecated-system-colors">deprecated-colors</a> </ul> It does not apply to: <ul> <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color⑧">color()</a> values using the <a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb⑧">srgb</a> or <a class="css" data-link-type="maybe" href="#valdef-color-srgb-linear" id="ref-for-valdef-color-srgb-linear⑤">srgb-linear</a> <a data-link-type="dfn" href="#color-space" id="ref-for-color-space⑥">color space</a>s. </ul> If the sRGB color was explicitly specified by the author as a <a data-link-type="dfn" href="#named-color" id="ref-for-named-color③">named color</a>, or as a <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors②">system color</a>, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#declared-value" id="ref-for-declared-value">declared value</a> is that named or system color, converted to <a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a>. The computed and used value is the corresponding sRGB color, paired with the specified alpha channel (after clamping to [0, 1]) and defaulting to opaque if unspecified). <div class="example" id="ex-named-case"> <a class="self-link" href="#ex-named-case"></a> The author-provided mixed-case form below has a declared value in all lowercase. <pre class="lang-css highlight"> pUrPlE purple</pre> </div> Otherwise, the declared, computed and used value is the corresponding sRGB color, paired with the specified alpha channel (after clamping to [0, 1]) and defaulting to opaque if unspecified). For historical reasons, when <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc">calc()</a> in sRGB colors resolves to a single value, the declared value serialises without the "calc(" ")" wrapper. <div class="example" id="ex-srgb-calc-specified"><a class="self-link" href="#ex-srgb-calc-specified"></a> For example, if a color is given as rgb(calc(64 * 2) 127 255) the declared value will be rgb(128 127 255) and not rgb(calc(128) 127 255). </div> <div class="example" id="ex-srgb-hsl-calc-specified"><a class="self-link" href="#ex-srgb-hsl-calc-specified"></a> For example, if a color is given as hsl(38.82 calc(2 * 50%) 50%) the declared value will be rgb(255 165.2 0) because the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc①">calc()</a> is lost during HSL to RGB conversion. </div> Also for historical reasons, when calc() is simplified down to a single value, the color values are clamped to [0.0, 255.0]. <div class="example" id="ex-srgb-clamped-calc-specified"><a class="self-link" href="#ex-srgb-clamped-calc-specified"></a> For example, if a color is given as rgb(calc(100 * 4) 127 calc(20 - 35)) the declared value will be rgb(255 127 0) and not rgb(calc(400) 127 calc(-15)). </div> This clamping also takes care of values such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#valdef-calc-infinity" id="ref-for-valdef-calc-infinity">Infinity</a>, -Infiinity, and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#valdef-calc-nan" id="ref-for-valdef-calc-nan">NaN</a> which will clamp at 255, 0 and 0 respectively. <div class="example" id="ex-hsl-computed"> <a class="self-link" href="#ex-hsl-computed"></a> For example, the computed value of <pre class="lang-css highlight"> <c- nf>hsl</c-><c- p>(</c-><c- m>38.824</c-> <c- m>100</c-><c- k>%</c-> <c- m>50</c-><c- k>%</c-><c- p>)</c-></pre> is <pre class="lang-css highlight"> <c- nf>rgb</c-><c- p>(</c-><c- m>255</c-><c- p>,</c-> <c- m>165</c-><c- p>,</c-> <c- m>0</c-><c- p>)</c-></pre> </div> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-hsl.html" title="css/css-color/parsing/color-computed-hsl.html">color-computed-hsl.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-hsl.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-hsl.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-hwb.html" title="css/css-color/parsing/color-computed-hwb.html">color-computed-hwb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-hwb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-hwb.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-rgb.html" title="css/css-color/parsing/color-computed-rgb.html">color-computed-rgb.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-rgb.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-rgb.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="14.2" id="resolving-lab-lch-values">14.2. Resolving Lab and LCH values<a class="self-link" href="#resolving-lab-lch-values"></a></h3> This applies to <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab⑤">lab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch⑦">lch()</a> values. The declared, computed and used value is the corresponding CIE Lab or LCH color (after clamping of L, C and H) paired with the specified alpha channel (as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③⓪"><number></a>, not a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③②"><percentage></a>; and defaulting to opaque if unspecified). <div class="example" id="ex-lch-computed"> <a class="self-link" href="#ex-lch-computed"></a> For example, the computed value of <pre class="lang-css highlight"> <c- nf>lch</c-><c- p>(</c-><c- m>52.2345</c-><c- k>%</c-> <c- m>72.2</c-> <c- m>56.2</c-> / <c- m>1</c-><c- p>)</c-></pre> is <pre class="lang-css highlight"> <c- nf>lch</c-><c- p>(</c-><c- m>52.2345</c-><c- k>%</c-> <c- m>72.2</c-> <c- m>56.2</c-><c- p>)</c-></pre> </div> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-lab.html" title="css/css-color/parsing/color-computed-lab.html">color-computed-lab.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-lab.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-lab.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="14.3" id="resolving-oklab-oklch-values">14.3. Resolving Oklab and Oklch values<a class="self-link" href="#resolving-oklab-oklch-values"></a></h3> This applies to <a class="css" data-link-type="maybe" href="#funcdef-oklab" id="ref-for-funcdef-oklab⑤">oklab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-oklch" id="ref-for-funcdef-oklch⑤">oklch()</a> values. The declared, computed and used value is the corresponding Oklab or Oklch color (after clamping of L, C and H) paired with the specified alpha channel (as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③①"><number></a>, not a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③③"><percentage></a>; and defaulting to opaque if unspecified). <div class="example" id="ex-oklch-computed"> <a class="self-link" href="#ex-oklch-computed"></a> For example, the computed value of <pre class="lang-css highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>42.1</c-><c- k>%</c-> <c- m>0.192</c-> <c- m>328.6</c-> / <c- m>1</c-><c- p>)</c-></pre> is <pre class="lang-css highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>42.1</c-><c- k>%</c-> <c- m>0.192</c-> <c- m>328.6</c-><c- p>)</c-></pre> </div> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-lab.html" title="css/css-color/parsing/color-computed-lab.html">color-computed-lab.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-lab.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-lab.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="14.4" id="resolving-color-function-values">14.4. Resolving values of the <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color⑨">color()</a> function<a class="self-link" href="#resolving-color-function-values"></a></h3> The declared, computed and used value is the color in the specified <a data-link-type="dfn" href="#color-space" id="ref-for-color-space⑦">color space</a>, paired with the specified alpha channel (as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③②"><number></a>, not a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③④"><percentage></a>; and defaulting to opaque if unspecified). <div class="example" id="ex-p3-computed"> <a class="self-link" href="#ex-p3-computed"></a> For example, the computed value of <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->display-p3 <c- m>0.823</c-> <c- m>0.6554</c-> <c- m>0.2537</c-> /<c- m>1</c-><c- p>)</c-></pre> is <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->display-p3 <c- m>0.823</c-> <c- m>0.6554</c-> <c- m>0.2537</c-><c- p>)</c-></pre> </div> For colors specified in the <a class="css" data-link-type="maybe" href="#valdef-color-xyz" id="ref-for-valdef-color-xyz⑤">xyz</a> <a data-link-type="dfn" href="#color-space" id="ref-for-color-space⑧">color space</a>, which is an alias of the <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d65" id="ref-for-valdef-color-xyz-d65④">xyz-d65</a> color space, the computed and used value is in the xyz-d65 color space. <div class="example" id="ex-xyz-computed"> <a class="self-link" href="#ex-xyz-computed"></a> For example, the computed value of <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->xyz <c- m>0.472</c-> <c- m>0.372</c-> <c- m>0.131</c-><c- p>)</c-></pre> is <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->xyz-d65 <c- m>0.472</c-> <c- m>0.372</c-> <c- m>0.131</c-><c- p>)</c-></pre> </div> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed-color-function.html" title="css/css-color/parsing/color-computed-color-function.html">color-computed-color-function.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed-color-function.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-color-function.html">(source)</a> </ul> </details> <h3 class="heading settled" data-level="14.5" id="resolving-other-colors">14.5. Resolving other colors<a class="self-link" href="#resolving-other-colors"></a></h3> This applies to <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors③">system colors</a> (including the <a class="production css" data-link-type="type" href="#typedef-deprecated-color" id="ref-for-typedef-deprecated-color"><deprecated-color></a>s), <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent③">transparent</a>, and currentcolor. The declared value for each <a class="production css" data-link-type="type" href="#typedef-system-color" id="ref-for-typedef-system-color①⓪"><system-color></a> keyword and <a class="production css" data-link-type="type" href="#typedef-deprecated-color" id="ref-for-typedef-deprecated-color①"><deprecated-color></a> keyword is itself. The computed value is the corresponding color in its color space. However, such colors must not be altered by 'forced colors mode'. <div class="example" id="ex-system-resolve"> <a class="self-link" href="#ex-system-resolve"></a> For example, in this html: <pre class="lang-html highlight"><c- p><</c-><c- f>button</c-> <c- e>style</c-><c- o>=</c-><c- s>"color: </c-><c- s> ButtonText; background: </c-><c- s> ButtonFace"</c-><c- p>></</c-><c- f>button</c-><c- p>></c-></pre> The declared value of the color property is "ButtonText" while the computed value could be, for example, rgb(0, 0, 0). </div> The declared value of <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent④">transparent</a> is "transparent" while the computed and used value is <a data-link-type="dfn" href="#transparent-black" id="ref-for-transparent-black①">transparent black</a>. The <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor①①">currentcolor</a> keyword computes to itself. In the <a class="property css" data-link-type="property" href="#propdef-color" id="ref-for-propdef-color④">color</a> property, the used value of currentcolor is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#inherited-value" id="ref-for-inherited-value">inherited value</a>. In any other property, its used value is the used value of the color property on the same element. Note: This means that if the <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor①②">currentcolor</a> value is inherited, it’s inherited as a keyword, not as the value of the <a class="property css" data-link-type="property" href="#propdef-color" id="ref-for-propdef-color⑥">color</a> property, so descendants will use their own color property to resolve it. <div class="example" id="ex-currentcolor-resolve"> <a class="self-link" href="#ex-currentcolor-resolve"></a> For example, given this html: <pre class="lang-html highlight"><c- p><</c-><c- f>div</c-><c- p>></c-> <c- p><</c-><c- f>p</c-><c- p>></c->Assume this example text is long enough to wrap on multiple lines. <c- p></</c-><c- f>p</c-><c- p>></c-> <c- p></</c-><c- f>div</c-><c- p>></c-> </pre> and this css: <pre class="lang-css highlight">div <c- p>{</c-> <c- k>color</c-><c- p>:</c-> forestgreen<c- p>;</c-> <c- k>text-shadow</c-><c- p>:</c-> currentColor<c- p>;</c-> <c- p>}</c-> p <c- p>{</c-> <c- k>color</c-><c- p>:</c-> mediumseagreen<c- p>;</c-> <c- p>}</c-> p::firstline <c- p>{</c-> <c- k>color</c-><c- p>:</c-> yellowgreen<c- p>;</c-> <c- p>}</c-> </pre> The used value of the inherited property text-shadow on the first line fragment would be yellowgreen. </div> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/currentcolor-001.html" title="css/css-color/currentcolor-001.html">currentcolor-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/currentcolor-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/currentcolor-002.html" title="css/css-color/currentcolor-002.html">currentcolor-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/currentcolor-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/currentcolor-003.html" title="css/css-color/currentcolor-003.html">currentcolor-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/currentcolor-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/currentcolor-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/system-color-compute.html" title="css/css-color/system-color-compute.html">system-color-compute.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/system-color-compute.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/system-color-compute.html">(source)</a> </ul> </details> <h2 class="heading settled" data-level="15" id="serializing-color-values">15. Serializing <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②①"><color></a> Values<a class="self-link" href="#serializing-color-values"></a></h2> This section updates and replaces that part of CSS Object Model, section <a href="https://drafts.csswg.org/cssom-1/#serializing-css-values"> Serializing CSS Values</a>, which relates to serializing <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②②"><color></a> values. In this section, the strings used in the specification and the corresponding characters are as follows. <table class="data"> <tbody> <tr> <th>String <th>Character(s) <tr> <td>" " <td>U+0020 SPACE <tr> <td>"#" <td>U+0023 NUMBER SIGN <tr> <td>"," <td>U+002C COMMA <tr> <td>"-" <td>U+002D HYPHEN-MINUS <tr> <td>"." <td>U+002E FULL STOP <tr> <td>"/" <td>U+002F SOLIDUS <tr> <td>"none" <td>U+006E LATIN SMALL LETTER N U+006F LATIN SMALL LETTER O U+006E LATIN SMALL LETTER N U+0065 LATIN SMALL LETTER E </table> The string "." shall be used as a decimal separator, regardless of locale, and there shall be no thousands separator. For syntactic forms which support <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component②⓪">missing color components</a>, the value <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none①①">none</a> (equivalently NONE, nOnE, etc), shall be serialized in all-lowercase as the string "none". <h3 class="heading settled" data-level="15.1" id="serializing-alpha-values">15.1. Serializing alpha values<a class="self-link" href="#serializing-alpha-values"></a></h3> This applies to any <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②③"><color></a> value which can take an optional alpha value. It does not apply to the opacity property. If, after clamping to the range [0, 1] the alpha is 1, it is omitted from the serialization; an implicit value of 1 (fully opaque) is the default. If the alpha is any other value than 1, it is explicitly included in the serialization as described below. If the value is internally represented as an integer between 0 and 255 inclusive (i.e. 8-bit unsigned integer), follow these steps: <ol> <li>Let <var>alpha</var> be the given integer. <li>If there exists an integer between 0 and 100 inclusive that, when multiplied with 2.55 and rounded to the closest integer (rounding up if two values are equally close), equals <var>alpha</var>, let <var>rounded</var> be that integer divided by 100. <li>Otherwise, let <var>rounded</var> be <var>alpha</var> divided by 0.255 and rounded to the closest integer (rounding up if two values are equally close), divided by 1000. <li>Return the result of serializing <var>rounded</var> as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③③"><number></a>. </ol> Otherwise, return the result of serializing the given value (as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③④"><number></a>, not a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③⑤"><percentage></a>). <div class="example" id="ex-alpha-255"> <a class="self-link" href="#ex-alpha-255"></a> For example, if the alpha is stored as the 8-bit unsigned integer 237, the integer 93 satisfies the criterion because Math.round(93 * 2.55) is 237, and so the alpha is serialized as "0.93". However, if the alpha is stored as the 8-bit unsigned integer 236, there is no such integer (92 maps to 235 while 94 maps to 240), and so since 236 ÷ 0.255 = 925.490196078 the alpha is serialized as "0.92549" (no more than 6 figures, trailing zeroes omitted). </div> The <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③⑤"><number></a> value is expressed in base ten, with the "." character as decimal separator. The leading zero must not be omitted. Trailing zeroes must be omitted. <div class="example" id="ex-alpha-trimzero"> <a class="self-link" href="#ex-alpha-trimzero"></a> For example, an alpha value of 70% will be serialized as the string "0.7" which has a leading zero before the decimal separator, "." as decimal separator (even if the current locale would use some other character, such as ","), and all digits after the "7" would be "0" and are omitted. </div> The precision with which alpha values are retained, and thus the number of decimal places in the serialized value, is not defined in this specification, but must at least be sufficient to round-trip integer percentage values. Thus, the serialized value must contain at least two decimal places (unless trailing zeroes have been removed). Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated. <div class="example" id="ex-alpha-round"> <a class="self-link" href="#ex-alpha-round"></a> For example, an alpha value of 12.3456789% could be serialized as the strings "0.12" or "0.123" or "0.1234" or "0.12346" (rounding the value of 5 towards +∞ because the following digit is 6) or any longer, rounded serialization of the same form. </div> Because <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value②④"><alpha-value></a>s which were specified outside the valid range are clamped at parse time, the declared value will be clamped. However, per <a href="https://drafts.csswg.org/css-values-4/#calc-range"><cite>CSS Values 4</cite> § 10.12 Range Checking</a>, <alpha-value>s specified using calc() are not clamped when the specified form is serialized; but the computed values are clamped. <div class="example" id="ex-alpha-clamp"> <a class="self-link" href="#ex-alpha-clamp"></a> For example an alpha value which was specified directly as 120% would be serialized as the string "1". However, if it was specified as calc(2*60%) the declared value would be serialized as the string "calc(1.2)". </div> <h3 class="heading settled" data-level="15.2" id="serializing-sRGB-values">15.2. Serializing sRGB values<a class="self-link" href="#serializing-sRGB-values"></a></h3> The serialized form of the following sRGB values: <ul> <li data-md> <a data-link-type="dfn" href="#hex-color" id="ref-for-hex-color④">hex colors</a> <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①②">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba⑧">rgba()</a> values <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①⑤">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla①⓪">hsla()</a> values <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb⑨">hwb()</a> values <li data-md> <a data-link-type="dfn" href="#named-color" id="ref-for-named-color④">named colors</a> <li data-md> <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors④">system colors</a> <li data-md> <a href="#deprecated-system-colors">deprecated-colors</a> <li data-md> <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent⑤">transparent</a> </ul> is derived from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#declared-value" id="ref-for-declared-value①">declared value</a>. When serializing the value of a property which was set by the author to a CSS <a data-link-type="dfn" href="#named-color" id="ref-for-named-color⑤">named color</a>, a <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors⑤">system color</a>, a <a href="#deprecated-system-colors">deprecated-color</a>, or <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent⑥">transparent</a> therefore, for the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#declared-value" id="ref-for-declared-value②">declared value</a>, the <a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a> keyword value is retained. For the computed and used value, the corresponding sRGB value is used. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/system-color-compute.html" title="css/css-color/system-color-compute.html">system-color-compute.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/system-color-compute.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/system-color-compute.html">(source)</a> </ul> </details> Thus, the serialized declared value of <a class="css" data-link-type="maybe" href="#valdef-color-transparent" id="ref-for-valdef-color-transparent⑦">transparent</a> is the string "transparent", while the serialized computed value of transparent is the string "rgba(0, 0, 0, 0)". For all other sRGB values, the declared, computed and used value is the corresponding sRGB value. During serialization, any <a data-link-type="dfn" href="#missing-color-component" id="ref-for-missing-color-component②①">missing</a> values are converted to 0. <h4 class="heading settled" data-level="15.2.1" id="HTML-compatible-serialization-of-srgb">15.2.1. HTML-compatible serialization of sRGB values<a class="self-link" href="#HTML-compatible-serialization-of-srgb"></a></h4> If the following conditions are all true: <ol> <li>The color space is sRGB <li>The alpha is 1 <li>The RGB component values are internally represented as integers between 0 and 255 inclusive (i.e. 8-bit unsigned integer) <li><dfn class="dfn-paneled" data-dfn-for="color serialization" data-dfn-type="dfn" data-export id="color-serialization-html-compatible-serialization-is-requested">HTML-compatible serialization is requested</dfn> </ol> Then corresponding sRGB values are serialized in 6-digit <a data-link-type="dfn" href="#hex-color" id="ref-for-hex-color⑤">hex color notation</a> as follows: A seven-character string consisting of the character "#", followed immediately by the two-digit hexadecimal representations of the red component, the green component, and the blue component, in that order, using <a href="https://infra.spec.whatwg.org/#ascii-lower-hex-digit">ASCII lower hex digits</a>. No spaces are permitted. <div class="example" id="ex-canvas-srgb"> <a class="self-link" href="#ex-canvas-srgb"></a> For example, fill style is set to magenta: <pre class="highlight" lang-js>context.fillStyle = <c- s>"rgb(255, 0, 255)"</c-> console.<c- nf>log</c-><c- p>(</c->context.fillStyle<c- p>);</c-> // <c- s>"#ff00ff"</c-> </pre> The color space is sRGB, the representation is 8 bits per component, the data format does not produce <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none①②">none</a> values nor does it support extended range values, and the alpha is 1. The HTML-compatible serialization is the string "#ff00ff" (not "#FF00FF"). </div> Otherwise, for sRGB the <a href="#css-serialization-of-srgb">CSS serialization of sRGB values is used</a> and for other color spaces, the relevant <a href="#serializing-color-values">serialization</a> of the <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②④"><color></a> value. <div class="example" id="ex-canvas-p3"> <a class="self-link" href="#ex-canvas-p3"></a> For example, fill style is set to a dark brown, in CIE Lab: <pre class="highlight" lang-js>context.fillStyle = <c- s>"lab(29% 39 20)"</c-><c- p>;</c-> console.<c- nf>log</c-><c- p>(</c->context.fillStyle<c- p>);</c-> // <c- s>"lab(29 39 20)"</c-> </pre> The CSS serialization is the string "lab(29 39 20)". </div> <div class="example" id="ex-srgb-alpha"> <a class="self-link" href="#ex-srgb-alpha"></a> For example, fill style is set to semi-transparent magenta: <pre class="highlight" lang-js>context.fillStyle = <c- s>"#ff00ffed"</c-><c- p>;</c-> console.<c- nf>log</c-><c- p>(</c->context.fillStyle<c- p>);</c-> // <c- s>"rgba(255, 0, 255, 0.93)"</c-> </pre> The alpha is not 1, so the CSS serialization is the string "rgba(255, 0, 255, 0.93)". </div> <h4 class="heading settled" data-level="15.2.2" id="css-serialization-of-srgb">15.2.2. CSS serialization of sRGB values<a class="self-link" href="#css-serialization-of-srgb"></a></h4> Corresponding sRGB values use either the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①③">rgb()</a> or <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba⑨">rgba()</a> form (depending on whether the (clamped) alpha is exactly 1, or not), with all <a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a> letters for the function name. For compatibility, the sRGB component values are serialized in <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③⑥"><number></a> form, not <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③⑥"><percentage></a>. Also for compatibility, the component values are serialized in base 10, with a range of [0-255], regardless of the bit depth with which they are stored. <a href="#serializing-alpha-values">As noted earlier</a>, unitary alpha values are not explicitly serialized. Also, for compatibility, if the alpha is exactly 1, the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①④">rgb()</a> form is used, with an implicit alpha; otherwise, the <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba①⓪">rgba()</a> form is used, with an explicit alpha value. For compatibility, the legacy form with comma separators is used; exactly one ASCII space follows each comma. This includes the comma (not slash) used to separate the blue component of <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba①①">rgba()</a> from the alpha value. <div class="example" id="ex-rgb-ser-int-rgba"> <a class="self-link" href="#ex-rgb-ser-int-rgba"></a> For example, the serialized value of <pre class="lang-css highlight"> <c- nf>rgb</c-><c- p>(</c-><c- m>29</c-> <c- m>164</c-> <c- m>192</c-> / <c- m>95</c-><c- k>%</c-><c- p>)</c-></pre> is the string "rgba(29, 164, 192, 0.95)" </div> <div class="example" id="ex-hwb-serial"> <a class="self-link" href="#ex-hwb-serial"></a> For example, an author-supplied value: <pre class="lang-css highlight"> <c- nf>hwb</c-><c- p>(</c-><c- m>740</c-><c- k>deg</c-> <c- m>20</c-><c- k>%</c-> <c- m>30</c-><c- k>%</c-> / <c- m>50</c-><c- k>%</c-><c- p>)</c-> </pre> Would be normalized first to <pre class="lang-css highlight"> <c- nf>hwb</c-><c- p>(</c-><c- m>20</c-> <c- m>20</c-><c- k>%</c-> <c- m>30</c-><c- k>%</c-> / <c- m>50</c-><c- k>%</c-><c- p>)</c-> </pre> and then converted to sRGB and serialized as <pre class="lang-css highlight"> <c- nf>rgba</c-><c- p>(</c-><c- m>178.5</c-><c- p>,</c-> <c- m>93.5</c-><c- p>,</c-> <c- m>51</c-><c- p>,</c-> <c- m>0.5</c-><c- p>)</c-> </pre> The precision of the returned result is <a href="#sRGB-precision">described below</a>. </div> Note: contrary to CSS Color 3, the parameters of the <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑤">rgb()</a> function are of type <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③⑦"><number></a>, not <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value"><integer></a>. Thus, any higher precision than eight bits is indicated with a fractional part. The precision with which sRGB component values are retained, and thus the number of significant figures in the serialized value, is not defined in this specification, but must at least be sufficient to round-trip eight bit values. Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated. Note: authors of scripts which expect color values returned from getComputedStyle to have <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value①"><integer></a> component values, are advised to update them to also cope with <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③⑧"><number></a>. <div class="example" id="ex-rgb-number"> <a class="self-link" href="#ex-rgb-number"></a> For example, <pre class="lang-css highlight"> <c- nf>rgb</c-><c- p>(</c-><c- m>146.064</c-> <c- m>107.457</c-> <c- m>131.223</c-><c- p>)</c-></pre> is now valid, and equal to <pre class="lang-css highlight"> <c- nf>rgb</c-><c- p>(</c-><c- m>57.28</c-><c- k>%</c-> <c- m>42.14</c-><c- k>%</c-> <c- m>51.46</c-><c- k>%</c-><c- p>)</c-></pre> A conformant serialized form for both, is the string "rgb(146.06, 107.46, 131.2)". </div> Trailing fractional zeroes in any component values must be omitted; if the fractional part consists of all zeroes, the decimal point must also be omitted. This means that sRGB colors specified with integer component values will serialize with backwards-compatible integer values. <div class="example" id="ex-rgb-notrail"> <a class="self-link" href="#ex-rgb-notrail"></a> The serialized computed value of <pre class="lang-css highlight"> <a class="css" data-link-type="maybe" href="#valdef-color-goldenrod" id="ref-for-valdef-color-goldenrod">goldenrod</a></pre> is the string "rgb(218, 165, 32)" and not the string "rgb(218.000, 165.000, 32.000)" </div> <h3 class="heading settled" data-level="15.3" id="serializing-lab-lch">15.3. Serializing Lab and LCH values<a class="self-link" href="#serializing-lab-lch"></a></h3> The serialized form of <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch⑧">lch()</a> and <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab⑥">lab()</a> values is derived from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value②">computed value</a> and uses the lab() or lch() forms, with <a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a> letters for the function name. The component values are serialized in base 10; the L, a, b and C component values are serialized as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value③⑨"><number></a>, using the <a href="#prr-lab">Lab percentage reference ranges</a> or the <a href="#prr-lch">LCH percentage reference ranges</a> as appropriate to perform percentage to number conversion; thus 0% L maps to 0 and 100% L maps to 100. A single ASCII space character " " must be used as the separator between the component values. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed.html" title="css/css-color/parsing/color-computed.html">color-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed.html">(source)</a> </ul> </details> <div class="example" id="ex-lab-zero-a"> <a class="self-link" href="#ex-lab-zero-a"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>lab</c-><c- p>(</c-><c- m>56.200</c-><c- k>%</c-> <c- m>0.000</c-> <c- m>83.600</c-><c- p>)</c-></pre> is the string "lab(56.2 0 83.6)" </div> <div class="example" id="ex-lab-percent-b"> <a class="self-link" href="#ex-lab-percent-b"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>lab</c-><c- p>(</c-><c- m>56.200</c-><c- k>%</c-> <c- m>0.000</c-> <c- m>66.88</c-><c- k>%</c-><c- p>)</c-></pre> is the string "lab(56.2 0 83.6)" </div> Trailing fractional zeroes in any component values must be omitted; if the fractional part consists of all zeroes, the decimal point must also be omitted. <div class="example" id="ex-lch-serial"> <a class="self-link" href="#ex-lch-serial"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>lch</c-><c- p>(</c-><c- m>37</c-><c- k>%</c-> <c- m>105.0</c-> <c- m>305.00</c-><c- p>)</c-></pre> is the string "lch(37 105 305)", not "lch(37 105.0 305.00)". </div> The precision with which <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab⑧">lab()</a> component values are retained, and thus the number of significant figures in the serialized value, is not defined in this specification, but due to the wide gamut must be sufficient to round-trip L values between 0 and 100, and a and b values between ±127, with at least sixteen bit precision; this will result in at least three decimal places unless trailing zeroes have been omitted. (half float or float, is recommended for internal storage). Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated. Note: a and b values outside ±125 are possible with ultrawide gamut spaces. For example, all of the <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb①②">prophoto-rgb</a> primaries and secondaries exceed this range, but are within ±200. <a href="#serializing-alpha-values">As noted earlier</a>, unitary alpha values are not explicitly serialized. Non-unitary alpha values must be explicitly serialized, and the string " / " (an ASCII space, then forward slash, then another space) must be used to separate the b component value from the alpha value. <div class="example" id="ex-lch-alpha"> <a class="self-link" href="#ex-lch-alpha"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>lch</c-><c- p>(</c-><c- m>56.2</c-><c- k>%</c-> <c- m>83.6</c-> <c- m>357.4</c-> /<c- m>93</c-><c- k>%</c-><c- p>)</c-></pre> is the string "lch(56.2 83.6 357.4 / 0.93)" not "lch(56.2% 83.6 357.4 / 0.93)" </div> <h3 class="heading settled" data-level="15.4" id="serializing-oklab-oklch">15.4. Serializing Oklab and Oklch values<a class="self-link" href="#serializing-oklab-oklch"></a></h3> The serialized form of <a class="css" data-link-type="maybe" href="#funcdef-oklch" id="ref-for-funcdef-oklch⑥">oklch()</a> and <a class="css" data-link-type="maybe" href="#funcdef-oklab" id="ref-for-funcdef-oklab⑥">oklab()</a> values is derived from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value③">computed value</a> and uses the oklab() or oklch() forms, with <a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a> letters for the function name. The component values are serialized in base 10; the L, a, b and C component values are serialized as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value④⓪"><number></a> using the <a href="#prr-oklab">Oklab percentage reference ranges</a> or the <a href="#prr-oklch">Oklch percentage reference ranges</a> as appropriate to perform percentage to number conversion; thus 0% L maps to 0 and 100% L maps to 1.0. A single ASCII space character " " must be used as the separator between the component values. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed.html" title="css/css-color/parsing/color-computed.html">color-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed.html">(source)</a> </ul> </details> <div class="example" id="ex-oklab-trailzero"> <a class="self-link" href="#ex-oklab-trailzero"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>oklab</c-><c- p>(</c-><c- m>54.0</c-><c- k>%</c-> <c- m>-0.10</c-> <c- m>-0.02</c-><c- p>)</c-></pre> is the string "oklab(0.54 -0.1 -0.02)" not "oklab(54 -0.1 -0.02)" or "oklab(54% -0.1 -0.02)" </div> <div class="example" id="ex-oklab-percent-a-b"> <a class="self-link" href="#ex-oklab-percent-a-b"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>oklab</c-><c- p>(</c-><c- m>54.0</c-> <c- m>-25</c-><c- k>%</c-> <c- m>-5</c-><c- k>%</c-><c- p>)</c-></pre> is the string "oklab(0.54 -0.1 -0.02)" not "oklab(54 -0.25 -0.05)" </div> Trailing fractional zeroes in any component values must be omitted; if the fractional part consists of all zeroes, the decimal point must also be omitted. <div class="example" id="ex-oklch-serial"> <a class="self-link" href="#ex-oklch-serial"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>56.43</c-><c- k>%</c-> <c- m>0.0900</c-> <c- m>123.40</c-><c- p>)</c-></pre> is the string "oklch(0.5643 0.09 123.4)", not "oklch(0.5643 0.0900 123.40)". </div> The precision with which <a class="css" data-link-type="maybe" href="#funcdef-oklab" id="ref-for-funcdef-oklab⑧">oklab()</a> component values are retained, and thus the number of significant figures in the serialized value, is not defined in this specification, but due to the wide gamut must be sufficient to round-trip L values between 0 and 1 (0% and 100%), and a, b and C values between ±0.5, with at least sixteen bit precision; this will result in at least five decimal places unless trailing zeroes have been omitted. (half float or float, is recommended for internal storage). Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated. Note: a, b and C values outside ±0.5 are possible with ultrawide gamut spaces. For example, the <a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb①③">prophoto-rgb</a> green and blue primaries exceed this range, with C of 0.526 and 1.413 respectively. <a href="#serializing-alpha-values">As noted earlier</a>, unitary alpha values are not explicitly serialized. Non-unitary alpha values must be explicitly serialized, and the string " / " (an ASCII space, then forward slash, then another space) must be used to separate the final color component (b, or C) value from the alpha value. <div class="example" id="ex-oklch-alpha"> <a class="self-link" href="#ex-oklch-alpha"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>oklch</c-><c- p>(</c-><c- m>53.85</c-><c- k>%</c-> <c- m>0.1725</c-> <c- m>320.67</c-> / <c- m>70</c-><c- k>%</c-><c- p>)</c-></pre> is the string "oklch(0.5385 0.1725 320.67 / 0.7)" </div> <h3 class="heading settled" data-level="15.5" id="serializing-color-function-values">15.5. Serializing values of the <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①⓪">color()</a> function<a class="self-link" href="#serializing-color-function-values"></a></h3> The serialized form of <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①①">color()</a> values is derived from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value④">computed value</a> and uses the color() form, with <a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a> letters for the function name and the color space name. The component values are serialized in base 10, as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value④①"><number></a>. A single ASCII space character " " must be used as the separator between the component values, and also between the color space name and the first color component. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/parsing/color-computed.html" title="css/css-color/parsing/color-computed.html">color-computed.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/parsing/color-computed.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed.html">(source)</a> </ul> </details> <div class="example" id="ex-color-serial"> <a class="self-link" href="#ex-color-serial"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->dIsPlAy-P3 <c- m>0.964</c-> <c- m>0.763</c-> <c- m>0.787</c-><c- p>)</c-></pre> is the string "color(display-p3 0.96 0.76 0.79)", if two decimal places are retained. Notice that 0.787 has rounded up to 0.79, rather than being truncated to 0.78. </div> Trailing fractional zeroes in any component values must be omitted; if the fractional part consists of all zeroes, the decimal point must also be omitted. <div class="example" id="ex-color-trailzero"> <a class="self-link" href="#ex-color-trailzero"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->rec2020 <c- m>0.400</c-> <c- m>0.660</c-> <c- m>0.340</c-><c- p>)</c-></pre> is the string "color(rec2020 0.4 0.66 0.34)", not "color(rec2020 0.400 0.660 0.340)". </div> If the color space is sRGB, the color space is still explicitly required in the serialized result. For the predefined color spaces, the minimum precision for round-tripping is as follows: <table class="data" id="predefined-precision-table"> <tbody> <tr> <th>color space <th>Minimum bits <tr> <td><a class="css" data-link-type="maybe" href="#valdef-color-srgb" id="ref-for-valdef-color-srgb⑨">srgb</a> <td>10 <tr> <td><a class="css" data-link-type="maybe" href="#valdef-color-srgb-linear" id="ref-for-valdef-color-srgb-linear⑥">srgb-linear</a> <td>12 <tr> <td><a class="css" data-link-type="maybe" href="#valdef-color-display-p3" id="ref-for-valdef-color-display-p3⑨">display-p3</a> <td>10 <tr> <td><a class="css" data-link-type="maybe" href="#valdef-color-a98-rgb" id="ref-for-valdef-color-a98-rgb⑤">a98-rgb</a> <td>10 <tr> <td><a class="css" data-link-type="maybe" href="#valdef-color-prophoto-rgb" id="ref-for-valdef-color-prophoto-rgb①④">prophoto-rgb</a> <td>12 <tr> <td><a class="css" data-link-type="maybe" href="#valdef-color-rec2020" id="ref-for-valdef-color-rec2020⑦">rec2020</a> <td>12 <tr> <td><a class="css" data-link-type="maybe" href="#valdef-color-xyz" id="ref-for-valdef-color-xyz⑥">xyz</a>, <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d50" id="ref-for-valdef-color-xyz-d50④">xyz-d50</a>, <a class="css" data-link-type="maybe" href="#valdef-color-xyz-d65" id="ref-for-valdef-color-xyz-d65⑥">xyz-d65</a> <td>16 </table> (16bit, half-float, or float per component is recommended for internal storage). Values must be <a href="https://drafts.csswg.org/css-values-4/#combine-integers">rounded towards +∞</a>, not truncated. Note: compared to the legacy forms such as <a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑥">rgb()</a>, <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①⑥">hsl()</a> and so on, color(srgb) has a higher minimum precision requirement. Stylesheet authors who prefer higher precision are thus encouraged to use the color(srgb) form. <a href="#serializing-alpha-values">As noted earlier</a>, unitary alpha values are not explicitly serialized. Non-unitary alpha values must be explicitly serialized, and the string " / " (an ASCII space, then forward slash, then another space) must be used to separate the final color component value from the alpha value. <div class="example" id="ex-color-prophoto-alpha-serial"> <a class="self-link" href="#ex-color-prophoto-alpha-serial"></a> The serialized value of <pre class="lang-css highlight"> <c- nf>color</c-><c- p>(</c->prophoto-rgb <c- m>0.2804</c-> <c- m>0.40283</c-> <c- m>0.42259</c->/<c- m>85</c-><c- k>%</c-><c- p>)</c-></pre> is the string "color(prophoto-rgb 0.28 0.403 0.423 / 0.85)", if three decimal places are retained. </div> <h3 class="heading settled" data-level="15.6" id="serializing-other-colors">15.6. Serializing other colors<a class="self-link" href="#serializing-other-colors"></a></h3> This applies to <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor①③">currentcolor</a>. The serialized form of this value is derived from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value⑤">computed value</a> and uses <a href="https://infra.spec.whatwg.org/#ascii-lowercase">ASCII lowercase</a> letters for the color name. The serialized form of <a class="css" data-link-type="maybe" href="#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor①④">currentColor</a> is the string "currentcolor". <h2 class="heading settled" data-level="16" id="sample">16. Default Style Rules<a class="self-link" href="#sample"></a></h2> The following stylesheet is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML documents. <pre class="lang-css highlight"><c- c>/* traditional desktop user agent colors for hyperlinks */</c-> :link <c- p>{</c-> <c- k>color</c-><c- p>:</c-> LinkText<c- p>;</c-> <c- p>}</c-> :visited <c- p>{</c-> <c- k>color</c-><c- p>:</c-> VisitedText<c- p>;</c-> <c- p>}</c-> :active <c- p>{</c-> <c- k>color</c-><c- p>:</c-> ActiveText<c- p>;</c-> <c- p>}</c-> </pre> <h2 class="heading settled" data-level="17" id="color-conversion-code">17. Sample code for Color Conversions<a class="self-link" href="#color-conversion-code"></a></h2> This section is not normative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section is not normative, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> For clarity, <a href="multiply-matrices.js">a library</a> is used for matrix multiplication. (This is more readable than inlining all the multiplies and adds). The matrices are in <a href="https://www.scratchapixel.com/lessons/mathematics-physics-for-computer-graphics/geometry/row-major-vs-column-major-vector">column-major order</a>. <pre class="include-code highlight"><c- c1>// Sample code for color conversions</c-> <c- c1>// Conversion can also be done using ICC profiles and a Color Management System</c-> <c- c1>// For clarity, a library is used for matrix multiplication (multiply-matrices.js)</c-> <c- c1>// standard white points, defined by 4-figure CIE x,y chromaticities</c-> <c- a>const</c-> D50 <c- o>=</c-> <c- p>[</c-><c- mf>0.3457</c-> <c- o>/</c-> <c- mf>0.3585</c-><c- p>,</c-> <c- mf>1.00000</c-><c- p>,</c-> <c- p>(</c-><c- mf>1.0</c-> <c- o>-</c-> <c- mf>0.3457</c-> <c- o>-</c-> <c- mf>0.3585</c-><c- p>)</c-> <c- o>/</c-> <c- mf>0.3585</c-><c- p>];</c-> <c- a>const</c-> D65 <c- o>=</c-> <c- p>[</c-><c- mf>0.3127</c-> <c- o>/</c-> <c- mf>0.3290</c-><c- p>,</c-> <c- mf>1.00000</c-><c- p>,</c-> <c- p>(</c-><c- mf>1.0</c-> <c- o>-</c-> <c- mf>0.3127</c-> <c- o>-</c-> <c- mf>0.3290</c-><c- p>)</c-> <c- o>/</c-> <c- mf>0.3290</c-><c- p>];</c-> <c- c1>// sRGB-related functions</c-> <c- a>function</c-> lin_sRGB<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of sRGB values</c-> <c- c1>// where in-gamut values are in the range [0 - 1]</c-> <c- c1>// to linear light (un-companded) form.</c-> <c- c1>// https://en.wikipedia.org/wiki/SRGB</c-> <c- c1>// Extended transfer function:</c-> <c- c1>// for negative values, linear portion is extended on reflection of axis,</c-> <c- c1>// then reflected power function is used.</c-> <c- k>return</c-> RGB<c- p>.</c->map<c- p>(</c-><c- a>function</c-> <c- p>(</c->val<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> sign <c- o>=</c-> val <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->val<c- p>);</c-> <c- k>if</c-> <c- p>(</c->abs <c- o><=</c-> <c- mf>0.04045</c-><c- p>)</c-> <c- p>{</c-> <c- k>return</c-> val <c- o>/</c-> <c- mf>12.92</c-><c- p>;</c-> <c- p>}</c-> <c- k>return</c-> sign <c- o>*</c-> <c- p>(</c->Math<c- p>.</c->pow<c- p>((</c->abs <c- o>+</c-> <c- mf>0.055</c-><c- p>)</c-> <c- o>/</c-> <c- mf>1.055</c-><c- p>,</c-> <c- mf>2.4</c-><c- p>));</c-> <c- p>});</c-> <c- p>}</c-> <c- a>function</c-> gam_sRGB<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light sRGB values in the range 0.0-1.0</c-> <c- c1>// to gamma corrected form</c-> <c- c1>// https://en.wikipedia.org/wiki/SRGB</c-> <c- c1>// Extended transfer function:</c-> <c- c1>// For negative values, linear portion extends on reflection</c-> <c- c1>// of axis, then uses reflected pow below that</c-> <c- k>return</c-> RGB<c- p>.</c->map<c- p>(</c-><c- a>function</c-> <c- p>(</c->val<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> sign <c- o>=</c-> val <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->val<c- p>);</c-> <c- k>if</c-> <c- p>(</c->abs <c- o>></c-> <c- mf>0.0031308</c-><c- p>)</c-> <c- p>{</c-> <c- k>return</c-> sign <c- o>*</c-> <c- p>(</c-><c- mf>1.055</c-> <c- o>*</c-> Math<c- p>.</c->pow<c- p>(</c->abs<c- p>,</c-> <c- mf>1</c-><c- o>/</c-><c- mf>2.4</c-><c- p>)</c-> <c- o>-</c-> <c- mf>0.055</c-><c- p>);</c-> <c- p>}</c-> <c- k>return</c-> <c- mf>12.92</c-> <c- o>*</c-> val<c- p>;</c-> <c- p>});</c-> <c- p>}</c-> <c- a>function</c-> lin_sRGB_to_XYZ<c- p>(</c->rgb<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light sRGB values to CIE XYZ</c-> <c- c1>// using sRGB's own white, D65 (no chromatic adaptation)</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>506752</c-> <c- o>/</c-> <c- mf>1228815</c-><c- p>,</c-> <c- mf>87881</c-> <c- o>/</c-> <c- mf>245763</c-><c- p>,</c-> <c- mf>12673</c-> <c- o>/</c-> <c- mf>70218</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>87098</c-> <c- o>/</c-> <c- mf>409605</c-><c- p>,</c-> <c- mf>175762</c-> <c- o>/</c-> <c- mf>245763</c-><c- p>,</c-> <c- mf>12673</c-> <c- o>/</c-> <c- mf>175545</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>7918</c-> <c- o>/</c-> <c- mf>409605</c-><c- p>,</c-> <c- mf>87881</c-> <c- o>/</c-> <c- mf>737289</c-><c- p>,</c-> <c- mf>1001167</c-> <c- o>/</c-> <c- mf>1053270</c-> <c- p>],</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> rgb<c- p>);</c-> <c- p>}</c-> <c- a>function</c-> XYZ_to_lin_sRGB<c- p>(</c->XYZ<c- p>)</c-> <c- p>{</c-> <c- c1>// convert XYZ to linear-light sRGB</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>12831</c-> <c- o>/</c-> <c- mf>3959</c-><c- p>,</c-> <c- o>-</c-><c- mf>329</c-> <c- o>/</c-> <c- mf>214</c-><c- p>,</c-> <c- o>-</c-><c- mf>1974</c-> <c- o>/</c-> <c- mf>3959</c-> <c- p>],</c-> <c- p>[</c-> <c- o>-</c-><c- mf>851781</c-> <c- o>/</c-> <c- mf>878810</c-><c- p>,</c-> <c- mf>1648619</c-> <c- o>/</c-> <c- mf>878810</c-><c- p>,</c-> <c- mf>36519</c-> <c- o>/</c-> <c- mf>878810</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>705</c-> <c- o>/</c-> <c- mf>12673</c-><c- p>,</c-> <c- o>-</c-><c- mf>2585</c-> <c- o>/</c-> <c- mf>12673</c-><c- p>,</c-> <c- mf>705</c-> <c- o>/</c-> <c- mf>667</c-> <c- p>],</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> XYZ<c- p>);</c-> <c- p>}</c-> <c- c1>// display-p3-related functions</c-> <c- a>function</c-> lin_P3<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of display-p3 RGB values in the range 0.0 - 1.0</c-> <c- c1>// to linear light (un-companded) form.</c-> <c- k>return</c-> lin_sRGB<c- p>(</c->RGB<c- p>);</c-> <c- c1>// same as sRGB</c-> <c- p>}</c-> <c- a>function</c-> gam_P3<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light display-p3 RGB in the range 0.0-1.0</c-> <c- c1>// to gamma corrected form</c-> <c- k>return</c-> gam_sRGB<c- p>(</c->RGB<c- p>);</c-> <c- c1>// same as sRGB</c-> <c- p>}</c-> <c- a>function</c-> lin_P3_to_XYZ<c- p>(</c->rgb<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light display-p3 values to CIE XYZ</c-> <c- c1>// using D65 (no chromatic adaptation)</c-> <c- c1>// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>608311</c-> <c- o>/</c-> <c- mf>1250200</c-><c- p>,</c-> <c- mf>189793</c-> <c- o>/</c-> <c- mf>714400</c-><c- p>,</c-> <c- mf>198249</c-> <c- o>/</c-> <c- mf>1000160</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>35783</c-> <c- o>/</c-> <c- mf>156275</c-><c- p>,</c-> <c- mf>247089</c-> <c- o>/</c-> <c- mf>357200</c-><c- p>,</c-> <c- mf>198249</c-> <c- o>/</c-> <c- mf>2500400</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0</c-> <c- o>/</c-> <c- mf>1</c-><c- p>,</c-> <c- mf>32229</c-> <c- o>/</c-> <c- mf>714400</c-><c- p>,</c-> <c- mf>5220557</c-> <c- o>/</c-> <c- mf>5000800</c-> <c- p>],</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> rgb<c- p>);</c-> <c- p>}</c-> <c- a>function</c-> XYZ_to_lin_P3<c- p>(</c->XYZ<c- p>)</c-> <c- p>{</c-> <c- c1>// convert XYZ to linear-light P3</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>446124</c-> <c- o>/</c-> <c- mf>178915</c-><c- p>,</c-> <c- o>-</c-><c- mf>333277</c-> <c- o>/</c-> <c- mf>357830</c-><c- p>,</c-> <c- o>-</c-><c- mf>72051</c-> <c- o>/</c-> <c- mf>178915</c-> <c- p>],</c-> <c- p>[</c-> <c- o>-</c-><c- mf>14852</c-> <c- o>/</c-> <c- mf>17905</c-><c- p>,</c-> <c- mf>63121</c-> <c- o>/</c-> <c- mf>35810</c-><c- p>,</c-> <c- mf>423</c-> <c- o>/</c-> <c- mf>17905</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>11844</c-> <c- o>/</c-> <c- mf>330415</c-><c- p>,</c-> <c- o>-</c-><c- mf>50337</c-> <c- o>/</c-> <c- mf>660830</c-><c- p>,</c-> <c- mf>316169</c-> <c- o>/</c-> <c- mf>330415</c-> <c- p>],</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> XYZ<c- p>);</c-> <c- p>}</c-> <c- c1>// prophoto-rgb functions</c-> <c- a>function</c-> lin_ProPhoto<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of prophoto-rgb values</c-> <c- c1>// where in-gamut colors are in the range [0.0 - 1.0]</c-> <c- c1>// to linear light (un-companded) form.</c-> <c- c1>// Transfer curve is gamma 1.8 with a small linear portion</c-> <c- c1>// Extended transfer function</c-> <c- a>const</c-> Et2 <c- o>=</c-> <c- mf>16</c-><c- o>/</c-><c- mf>512</c-><c- p>;</c-> <c- k>return</c-> RGB<c- p>.</c->map<c- p>(</c-><c- a>function</c-> <c- p>(</c->val<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> sign <c- o>=</c-> val <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->val<c- p>);</c-> <c- k>if</c-> <c- p>(</c->abs <c- o><=</c-> Et2<c- p>)</c-> <c- p>{</c-> <c- k>return</c-> val <c- o>/</c-> <c- mf>16</c-><c- p>;</c-> <c- p>}</c-> <c- k>return</c-> sign <c- o>*</c-> Math<c- p>.</c->pow<c- p>(</c->abs<c- p>,</c-> <c- mf>1.8</c-><c- p>);</c-> <c- p>});</c-> <c- p>}</c-> <c- a>function</c-> gam_ProPhoto<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light prophoto-rgb in the range 0.0-1.0</c-> <c- c1>// to gamma corrected form</c-> <c- c1>// Transfer curve is gamma 1.8 with a small linear portion</c-> <c- c1>// TODO for negative values, extend linear portion on reflection of axis, then add pow below that</c-> <c- a>const</c-> Et <c- o>=</c-> <c- mf>1</c-><c- o>/</c-><c- mf>512</c-><c- p>;</c-> <c- k>return</c-> RGB<c- p>.</c->map<c- p>(</c-><c- a>function</c-> <c- p>(</c->val<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> sign <c- o>=</c-> val <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->val<c- p>);</c-> <c- k>if</c-> <c- p>(</c->abs <c- o>>=</c-> Et<c- p>)</c-> <c- p>{</c-> <c- k>return</c-> sign <c- o>*</c-> Math<c- p>.</c->pow<c- p>(</c->abs<c- p>,</c-> <c- mf>1</c-><c- o>/</c-><c- mf>1.8</c-><c- p>);</c-> <c- p>}</c-> <c- k>return</c-> <c- mf>16</c-> <c- o>*</c-> val<c- p>;</c-> <c- p>});</c-> <c- p>}</c-> <c- a>function</c-> lin_ProPhoto_to_XYZ<c- p>(</c->rgb<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light prophoto-rgb values to CIE D50 XYZ</c-> <c- c1>// matrix cannot be expressed in rational form, but is calculated to 64 bit accuracy</c-> <c- c1>// see https://github.com/w3c/csswg-drafts/issues/7675</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>0.79776664490064230</c-><c- p>,</c-> <c- mf>0.13518129740053308</c-><c- p>,</c-> <c- mf>0.03134773412839220</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0.28807482881940130</c-><c- p>,</c-> <c- mf>0.71183523424187300</c-><c- p>,</c-> <c- mf>0.00008993693872564</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0.00000000000000000</c-><c- p>,</c-> <c- mf>0.00000000000000000</c-><c- p>,</c-> <c- mf>0.82510460251046020</c-> <c- p>]</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> rgb<c- p>);</c-> <c- p>}</c-> <c- a>function</c-> XYZ_to_lin_ProPhoto<c- p>(</c->XYZ<c- p>)</c-> <c- p>{</c-> <c- c1>// convert D50 XYZ to linear-light prophoto-rgb</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>1.34578688164715830</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.25557208737979464</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.05110186497554526</c-> <c- p>],</c-> <c- p>[</c-> <c- o>-</c-><c- mf>0.54463070512490190</c-><c- p>,</c-> <c- mf>1.50824774284514680</c-><c- p>,</c-> <c- mf>0.02052744743642139</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0.00000000000000000</c-><c- p>,</c-> <c- mf>0.00000000000000000</c-><c- p>,</c-> <c- mf>1.21196754563894520</c-> <c- p>]</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> XYZ<c- p>);</c-> <c- p>}</c-> <c- c1>// a98-rgb functions</c-> <c- a>function</c-> lin_a98rgb<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of a98-rgb values in the range 0.0 - 1.0</c-> <c- c1>// to linear light (un-companded) form.</c-> <c- c1>// negative values are also now accepted</c-> <c- k>return</c-> RGB<c- p>.</c->map<c- p>(</c-><c- a>function</c-> <c- p>(</c->val<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> sign <c- o>=</c-> val <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->val<c- p>);</c-> <c- k>return</c-> sign <c- o>*</c-> Math<c- p>.</c->pow<c- p>(</c->abs<c- p>,</c-> <c- mf>563</c-><c- o>/</c-><c- mf>256</c-><c- p>);</c-> <c- p>});</c-> <c- p>}</c-> <c- a>function</c-> gam_a98rgb<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light a98-rgb in the range 0.0-1.0</c-> <c- c1>// to gamma corrected form</c-> <c- c1>// negative values are also now accepted</c-> <c- k>return</c-> RGB<c- p>.</c->map<c- p>(</c-><c- a>function</c-> <c- p>(</c->val<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> sign <c- o>=</c-> val <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->val<c- p>);</c-> <c- k>return</c-> sign <c- o>*</c-> Math<c- p>.</c->pow<c- p>(</c->abs<c- p>,</c-> <c- mf>256</c-><c- o>/</c-><c- mf>563</c-><c- p>);</c-> <c- p>});</c-> <c- p>}</c-> <c- a>function</c-> lin_a98rgb_to_XYZ<c- p>(</c->rgb<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light a98-rgb values to CIE XYZ</c-> <c- c1>// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html</c-> <c- c1>// has greater numerical precision than section 4.3.5.3 of</c-> <c- c1>// https://www.adobe.com/digitalimag/pdfs/AdobeRGB1998.pdf</c-> <c- c1>// but the values below were calculated from first principles</c-> <c- c1>// from the chromaticity coordinates of R G B W</c-> <c- c1>// see matrixmaker.html</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>573536</c-> <c- o>/</c-> <c- mf>994567</c-><c- p>,</c-> <c- mf>263643</c-> <c- o>/</c-> <c- mf>1420810</c-><c- p>,</c-> <c- mf>187206</c-> <c- o>/</c-> <c- mf>994567</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>591459</c-> <c- o>/</c-> <c- mf>1989134</c-><c- p>,</c-> <c- mf>6239551</c-> <c- o>/</c-> <c- mf>9945670</c-><c- p>,</c-> <c- mf>374412</c-> <c- o>/</c-> <c- mf>4972835</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>53769</c-> <c- o>/</c-> <c- mf>1989134</c-><c- p>,</c-> <c- mf>351524</c-> <c- o>/</c-> <c- mf>4972835</c-><c- p>,</c-> <c- mf>4929758</c-> <c- o>/</c-> <c- mf>4972835</c-> <c- p>],</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> rgb<c- p>);</c-> <c- p>}</c-> <c- a>function</c-> XYZ_to_lin_a98rgb<c- p>(</c->XYZ<c- p>)</c-> <c- p>{</c-> <c- c1>// convert XYZ to linear-light a98-rgb</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>1829569</c-> <c- o>/</c-> <c- mf>896150</c-><c- p>,</c-> <c- o>-</c-><c- mf>506331</c-> <c- o>/</c-> <c- mf>896150</c-><c- p>,</c-> <c- o>-</c-><c- mf>308931</c-> <c- o>/</c-> <c- mf>896150</c-> <c- p>],</c-> <c- p>[</c-> <c- o>-</c-><c- mf>851781</c-> <c- o>/</c-> <c- mf>878810</c-><c- p>,</c-> <c- mf>1648619</c-> <c- o>/</c-> <c- mf>878810</c-><c- p>,</c-> <c- mf>36519</c-> <c- o>/</c-> <c- mf>878810</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>16779</c-> <c- o>/</c-> <c- mf>1248040</c-><c- p>,</c-> <c- o>-</c-><c- mf>147721</c-> <c- o>/</c-> <c- mf>1248040</c-><c- p>,</c-> <c- mf>1266979</c-> <c- o>/</c-> <c- mf>1248040</c-> <c- p>],</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> XYZ<c- p>);</c-> <c- p>}</c-> <c- c1>//Rec. 2020-related functions</c-> <c- a>function</c-> lin_2020<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of rec2020 RGB values in the range 0.0 - 1.0</c-> <c- c1>// to linear light (un-companded) form.</c-> <c- c1>// ITU-R BT.2020-2 p.4</c-> <c- a>const</c-> α <c- o>=</c-> <c- mf>1.09929682680944</c-> <c- p>;</c-> <c- a>const</c-> β <c- o>=</c-> <c- mf>0.018053968510807</c-><c- p>;</c-> <c- k>return</c-> RGB<c- p>.</c->map<c- p>(</c-><c- a>function</c-> <c- p>(</c->val<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> sign <c- o>=</c-> val <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->val<c- p>);</c-> <c- k>if</c-> <c- p>(</c->abs <c- o><</c-> β <c- o>*</c-> <c- mf>4.5</c-> <c- p>)</c-> <c- p>{</c-> <c- k>return</c-> val <c- o>/</c-> <c- mf>4.5</c-><c- p>;</c-> <c- p>}</c-> <c- k>return</c-> sign <c- o>*</c-> <c- p>(</c->Math<c- p>.</c->pow<c- p>((</c->abs <c- o>+</c-> α <c- o>-</c-><c- mf>1</c-> <c- p>)</c-> <c- o>/</c-> α<c- p>,</c-> <c- mf>1</c-><c- o>/</c-><c- mf>0.45</c-><c- p>));</c-> <c- p>});</c-> <c- p>}</c-> <c- a>function</c-> gam_2020<c- p>(</c->RGB<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light rec2020 RGB in the range 0.0-1.0</c-> <c- c1>// to gamma corrected form</c-> <c- c1>// ITU-R BT.2020-2 p.4</c-> <c- a>const</c-> α <c- o>=</c-> <c- mf>1.09929682680944</c-> <c- p>;</c-> <c- a>const</c-> β <c- o>=</c-> <c- mf>0.018053968510807</c-><c- p>;</c-> <c- k>return</c-> RGB<c- p>.</c->map<c- p>(</c-><c- a>function</c-> <c- p>(</c->val<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> sign <c- o>=</c-> val <c- o><</c-> <c- mf>0</c-><c- o>?</c-> <c- o>-</c-><c- mf>1</c-> <c- o>:</c-> <c- mf>1</c-><c- p>;</c-> <c- a>let</c-> abs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->val<c- p>);</c-> <c- k>if</c-> <c- p>(</c->abs <c- o>></c-> β <c- p>)</c-> <c- p>{</c-> <c- k>return</c-> sign <c- o>*</c-> <c- p>(</c->α <c- o>*</c-> Math<c- p>.</c->pow<c- p>(</c->abs<c- p>,</c-> <c- mf>0.45</c-><c- p>)</c-> <c- o>-</c-> <c- p>(</c->α <c- o>-</c-> <c- mf>1</c-><c- p>));</c-> <c- p>}</c-> <c- k>return</c-> <c- mf>4.5</c-> <c- o>*</c-> val<c- p>;</c-> <c- p>});</c-> <c- p>}</c-> <c- a>function</c-> lin_2020_to_XYZ<c- p>(</c->rgb<c- p>)</c-> <c- p>{</c-> <c- c1>// convert an array of linear-light rec2020 values to CIE XYZ</c-> <c- c1>// using D65 (no chromatic adaptation)</c-> <c- c1>// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>63426534</c-> <c- o>/</c-> <c- mf>99577255</c-><c- p>,</c-> <c- mf>20160776</c-> <c- o>/</c-> <c- mf>139408157</c-><c- p>,</c-> <c- mf>47086771</c-> <c- o>/</c-> <c- mf>278816314</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>26158966</c-> <c- o>/</c-> <c- mf>99577255</c-><c- p>,</c-> <c- mf>472592308</c-> <c- o>/</c-> <c- mf>697040785</c-><c- p>,</c-> <c- mf>8267143</c-> <c- o>/</c-> <c- mf>139408157</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0</c-> <c- o>/</c-> <c- mf>1</c-><c- p>,</c-> <c- mf>19567812</c-> <c- o>/</c-> <c- mf>697040785</c-><c- p>,</c-> <c- mf>295819943</c-> <c- o>/</c-> <c- mf>278816314</c-> <c- p>],</c-> <c- p>];</c-> <c- c1>// 0 is actually calculated as 4.994106574466076e-17</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> rgb<c- p>);</c-> <c- p>}</c-> <c- a>function</c-> XYZ_to_lin_2020<c- p>(</c->XYZ<c- p>)</c-> <c- p>{</c-> <c- c1>// convert XYZ to linear-light rec2020</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>30757411</c-> <c- o>/</c-> <c- mf>17917100</c-><c- p>,</c-> <c- o>-</c-><c- mf>6372589</c-> <c- o>/</c-> <c- mf>17917100</c-><c- p>,</c-> <c- o>-</c-><c- mf>4539589</c-> <c- o>/</c-> <c- mf>17917100</c-> <c- p>],</c-> <c- p>[</c-> <c- o>-</c-><c- mf>19765991</c-> <c- o>/</c-> <c- mf>29648200</c-><c- p>,</c-> <c- mf>47925759</c-> <c- o>/</c-> <c- mf>29648200</c-><c- p>,</c-> <c- mf>467509</c-> <c- o>/</c-> <c- mf>29648200</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>792561</c-> <c- o>/</c-> <c- mf>44930125</c-><c- p>,</c-> <c- o>-</c-><c- mf>1921689</c-> <c- o>/</c-> <c- mf>44930125</c-><c- p>,</c-> <c- mf>42328811</c-> <c- o>/</c-> <c- mf>44930125</c-> <c- p>],</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> XYZ<c- p>);</c-> <c- p>}</c-> <c- c1>// Chromatic adaptation</c-> <c- a>function</c-> D65_to_D50<c- p>(</c->XYZ<c- p>)</c-> <c- p>{</c-> <c- c1>// Bradford chromatic adaptation from D65 to D50</c-> <c- c1>// The matrix below is the result of three operations:</c-> <c- c1>// - convert from XYZ to retinal cone domain</c-> <c- c1>// - scale components from one reference white to another</c-> <c- c1>// - convert back to XYZ</c-> <c- c1>// see https://github.com/LeaVerou/color.js/pull/354/files</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>1.0479297925449969</c-><c- p>,</c-> <c- mf>0.022946870601609652</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.05019226628920524</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0.02962780877005599</c-><c- p>,</c-> <c- mf>0.9904344267538799</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.017073799063418826</c-> <c- p>],</c-> <c- p>[</c-> <c- o>-</c-><c- mf>0.009243040646204504</c-><c- p>,</c-> <c- mf>0.015055191490298152</c-><c- p>,</c-> <c- mf>0.7518742814281371</c-> <c- p>]</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> XYZ<c- p>);</c-> <c- p>}</c-> <c- a>function</c-> D50_to_D65<c- p>(</c->XYZ<c- p>)</c-> <c- p>{</c-> <c- c1>// Bradford chromatic adaptation from D50 to D65</c-> <c- c1>// See https://github.com/LeaVerou/color.js/pull/360/files</c-> <c- a>var</c-> M <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>0.955473421488075</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.02309845494876471</c-><c- p>,</c-> <c- mf>0.06325924320057072</c-> <c- p>],</c-> <c- p>[</c-> <c- o>-</c-><c- mf>0.0283697093338637</c-><c- p>,</c-> <c- mf>1.0099953980813041</c-><c- p>,</c-> <c- mf>0.021041441191917323</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0.012314014864481998</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.020507649298898964</c-><c- p>,</c-> <c- mf>1.330365926242124</c-> <c- p>]</c-> <c- p>];</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->M<c- p>,</c-> XYZ<c- p>);</c-> <c- p>}</c-> <c- c1>// CIE Lab and LCH</c-> <c- a>function</c-> XYZ_to_Lab<c- p>(</c->XYZ<c- p>)</c-> <c- p>{</c-> <c- c1>// Assuming XYZ is relative to D50, convert to CIE Lab</c-> <c- c1>// from CIE standard, which now defines these as a rational fraction</c-> <c- a>var</c-> ε <c- o>=</c-> <c- mf>216</c-><c- o>/</c-><c- mf>24389</c-><c- p>;</c-> <c- c1>// 6^3/29^3</c-> <c- a>var</c-> κ <c- o>=</c-> <c- mf>24389</c-><c- o>/</c-><c- mf>27</c-><c- p>;</c-> <c- c1>// 29^3/3^3</c-> <c- c1>// compute xyz, which is XYZ scaled relative to reference white</c-> <c- a>var</c-> xyz <c- o>=</c-> XYZ<c- p>.</c->map<c- p>((</c->value<c- p>,</c-> i<c- p>)</c-> <c- p>=></c-> value <c- o>/</c-> D50<c- p>[</c->i<c- p>]);</c-> <c- c1>// now compute f</c-> <c- a>var</c-> f <c- o>=</c-> xyz<c- p>.</c->map<c- p>(</c->value <c- p>=></c-> value <c- o>></c-> ε <c- o>?</c-> Math<c- p>.</c->cbrt<c- p>(</c->value<c- p>)</c-> <c- o>:</c-> <c- p>(</c->κ <c- o>*</c-> value <c- o>+</c-> <c- mf>16</c-><c- p>)</c-><c- o>/</c-><c- mf>116</c-><c- p>);</c-> <c- k>return</c-> <c- p>[</c-> <c- p>(</c-><c- mf>116</c-> <c- o>*</c-> f<c- p>[</c-><c- mf>1</c-><c- p>])</c-> <c- o>-</c-> <c- mf>16</c-><c- p>,</c-> <c- c1>// L</c-> <c- mf>500</c-> <c- o>*</c-> <c- p>(</c->f<c- p>[</c-><c- mf>0</c-><c- p>]</c-> <c- o>-</c-> f<c- p>[</c-><c- mf>1</c-><c- p>]),</c-> <c- c1>// a</c-> <c- mf>200</c-> <c- o>*</c-> <c- p>(</c->f<c- p>[</c-><c- mf>1</c-><c- p>]</c-> <c- o>-</c-> f<c- p>[</c-><c- mf>2</c-><c- p>])</c-> <c- c1>// b</c-> <c- p>];</c-> <c- c1>// L in range [0,100]. For use in CSS, add a percent</c-> <c- p>}</c-> <c- a>function</c-> Lab_to_XYZ<c- p>(</c->Lab<c- p>)</c-> <c- p>{</c-> <c- c1>// Convert Lab to D50-adapted XYZ</c-> <c- c1>// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html</c-> <c- a>var</c-> κ <c- o>=</c-> <c- mf>24389</c-><c- o>/</c-><c- mf>27</c-><c- p>;</c-> <c- c1>// 29^3/3^3</c-> <c- a>var</c-> ε <c- o>=</c-> <c- mf>216</c-><c- o>/</c-><c- mf>24389</c-><c- p>;</c-> <c- c1>// 6^3/29^3</c-> <c- a>var</c-> f <c- o>=</c-> <c- p>[];</c-> <c- c1>// compute f, starting with the luminance-related term</c-> f<c- p>[</c-><c- mf>1</c-><c- p>]</c-> <c- o>=</c-> <c- p>(</c->Lab<c- p>[</c-><c- mf>0</c-><c- p>]</c-> <c- o>+</c-> <c- mf>16</c-><c- p>)</c-><c- o>/</c-><c- mf>116</c-><c- p>;</c-> f<c- p>[</c-><c- mf>0</c-><c- p>]</c-> <c- o>=</c-> Lab<c- p>[</c-><c- mf>1</c-><c- p>]</c-><c- o>/</c-><c- mf>500</c-> <c- o>+</c-> f<c- p>[</c-><c- mf>1</c-><c- p>];</c-> f<c- p>[</c-><c- mf>2</c-><c- p>]</c-> <c- o>=</c-> f<c- p>[</c-><c- mf>1</c-><c- p>]</c-> <c- o>-</c-> Lab<c- p>[</c-><c- mf>2</c-><c- p>]</c-><c- o>/</c-><c- mf>200</c-><c- p>;</c-> <c- c1>// compute xyz</c-> <c- a>var</c-> xyz <c- o>=</c-> <c- p>[</c-> Math<c- p>.</c->pow<c- p>(</c->f<c- p>[</c-><c- mf>0</c-><c- p>],</c-><c- mf>3</c-><c- p>)</c-> <c- o>></c-> ε <c- o>?</c-> Math<c- p>.</c->pow<c- p>(</c->f<c- p>[</c-><c- mf>0</c-><c- p>],</c-><c- mf>3</c-><c- p>)</c-> <c- o>:</c-> <c- p>(</c-><c- mf>116</c-><c- o>*</c->f<c- p>[</c-><c- mf>0</c-><c- p>]</c-><c- o>-</c-><c- mf>16</c-><c- p>)</c-><c- o>/</c->κ<c- p>,</c-> Lab<c- p>[</c-><c- mf>0</c-><c- p>]</c-> <c- o>></c-> κ <c- o>*</c-> ε <c- o>?</c-> Math<c- p>.</c->pow<c- p>((</c->Lab<c- p>[</c-><c- mf>0</c-><c- p>]</c-><c- o>+</c-><c- mf>16</c-><c- p>)</c-><c- o>/</c-><c- mf>116</c-><c- p>,</c-><c- mf>3</c-><c- p>)</c-> <c- o>:</c-> Lab<c- p>[</c-><c- mf>0</c-><c- p>]</c-><c- o>/</c->κ<c- p>,</c-> Math<c- p>.</c->pow<c- p>(</c->f<c- p>[</c-><c- mf>2</c-><c- p>],</c-><c- mf>3</c-><c- p>)</c-> <c- o>></c-> ε <c- o>?</c-> Math<c- p>.</c->pow<c- p>(</c->f<c- p>[</c-><c- mf>2</c-><c- p>],</c-><c- mf>3</c-><c- p>)</c-> <c- o>:</c-> <c- p>(</c-><c- mf>116</c-><c- o>*</c->f<c- p>[</c-><c- mf>2</c-><c- p>]</c-><c- o>-</c-><c- mf>16</c-><c- p>)</c-><c- o>/</c->κ <c- p>];</c-> <c- c1>// Compute XYZ by scaling xyz by reference white</c-> <c- k>return</c-> xyz<c- p>.</c->map<c- p>((</c->value<c- p>,</c-> i<c- p>)</c-> <c- p>=></c-> value <c- o>*</c-> D50<c- p>[</c->i<c- p>]);</c-> <c- p>}</c-> <c- a>function</c-> Lab_to_LCH<c- p>(</c->Lab<c- p>)</c-> <c- p>{</c-> <c- c1>// Convert to polar form</c-> <c- a>var</c-> hue <c- o>=</c-> Math<c- p>.</c->atan2<c- p>(</c->Lab<c- p>[</c-><c- mf>2</c-><c- p>],</c-> Lab<c- p>[</c-><c- mf>1</c-><c- p>])</c-> <c- o>*</c-> <c- mf>180</c-> <c- o>/</c-> Math<c- p>.</c->PI<c- p>;</c-> <c- k>return</c-> <c- p>[</c-> Lab<c- p>[</c-><c- mf>0</c-><c- p>],</c-> <c- c1>// L is still L</c-> Math<c- p>.</c->sqrt<c- p>(</c->Math<c- p>.</c->pow<c- p>(</c->Lab<c- p>[</c-><c- mf>1</c-><c- p>],</c-> <c- mf>2</c-><c- p>)</c-> <c- o>+</c-> Math<c- p>.</c->pow<c- p>(</c->Lab<c- p>[</c-><c- mf>2</c-><c- p>],</c-> <c- mf>2</c-><c- p>)),</c-> <c- c1>// Chroma</c-> hue <c- o>>=</c-> <c- mf>0</c-> <c- o>?</c-> hue <c- o>:</c-> hue <c- o>+</c-> <c- mf>360</c-> <c- c1>// Hue, in degrees [0 to 360)</c-> <c- p>];</c-> <c- p>}</c-> <c- a>function</c-> LCH_to_Lab<c- p>(</c->LCH<c- p>)</c-> <c- p>{</c-> <c- c1>// Convert from polar form</c-> <c- k>return</c-> <c- p>[</c-> LCH<c- p>[</c-><c- mf>0</c-><c- p>],</c-> <c- c1>// L is still L</c-> LCH<c- p>[</c-><c- mf>1</c-><c- p>]</c-> <c- o>*</c-> Math<c- p>.</c->cos<c- p>(</c->LCH<c- p>[</c-><c- mf>2</c-><c- p>]</c-> <c- o>*</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mf>180</c-><c- p>),</c-> <c- c1>// a</c-> LCH<c- p>[</c-><c- mf>1</c-><c- p>]</c-> <c- o>*</c-> Math<c- p>.</c->sin<c- p>(</c->LCH<c- p>[</c-><c- mf>2</c-><c- p>]</c-> <c- o>*</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mf>180</c-><c- p>)</c-> <c- c1>// b</c-> <c- p>];</c-> <c- p>}</c-> <c- c1>// OKLab and OKLCH</c-> <c- c1>// https://bottosson.github.io/posts/oklab/</c-> <c- c1>// XYZ <-> LMS matrices recalculated for consistent reference white</c-> <c- c1>// see https://github.com/w3c/csswg-drafts/issues/6642#issuecomment-943521484</c-> <c- c1>// recalculated for 64bit precision</c-> <c- c1>// see https://github.com/color-js/color.js/pull/357</c-> <c- a>function</c-> XYZ_to_OKLab<c- p>(</c->XYZ<c- p>)</c-> <c- p>{</c-> <c- c1>// Given XYZ relative to D65, convert to OKLab</c-> <c- a>var</c-> XYZtoLMS <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>0.8190224379967030</c-><c- p>,</c-> <c- mf>0.3619062600528904</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.1288737815209879</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0.0329836539323885</c-><c- p>,</c-> <c- mf>0.9292868615863434</c-><c- p>,</c-> <c- mf>0.0361446663506424</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0.0481771893596242</c-><c- p>,</c-> <c- mf>0.2642395317527308</c-><c- p>,</c-> <c- mf>0.6335478284694309</c-> <c- p>]</c-> <c- p>];</c-> <c- a>var</c-> LMStoOKLab <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>0.2104542683093140</c-><c- p>,</c-> <c- mf>0.7936177747023054</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.0040720430116193</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>1.9779985324311684</c-><c- p>,</c-> <c- o>-</c-><c- mf>2.4285922420485799</c-><c- p>,</c-> <c- mf>0.4505937096174110</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>0.0259040424655478</c-><c- p>,</c-> <c- mf>0.7827717124575296</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.8086757549230774</c-> <c- p>]</c-> <c- p>];</c-> <c- a>var</c-> LMS <c- o>=</c-> multiplyMatrices<c- p>(</c->XYZtoLMS<c- p>,</c-> XYZ<c- p>);</c-> <c- c1>// JavaScript Math.cbrt returns a sign-matched cube root</c-> <c- c1>// beware if porting to other languages</c-> <c- c1>// especially if tempted to use a general power function</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->LMStoOKLab<c- p>,</c-> LMS<c- p>.</c->map<c- p>(</c->c <c- p>=></c-> Math<c- p>.</c->cbrt<c- p>(</c->c<c- p>)));</c-> <c- c1>// L in range [0,1]. For use in CSS, multiply by 100 and add a percent</c-> <c- p>}</c-> <c- a>function</c-> OKLab_to_XYZ<c- p>(</c->OKLab<c- p>)</c-> <c- p>{</c-> <c- c1>// Given OKLab, convert to XYZ relative to D65</c-> <c- a>var</c-> LMStoXYZ <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>1.2268798758459243</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.5578149944602171</c-><c- p>,</c-> <c- mf>0.2813910456659647</c-> <c- p>],</c-> <c- p>[</c-> <c- o>-</c-><c- mf>0.0405757452148008</c-><c- p>,</c-> <c- mf>1.1122868032803170</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.0717110580655164</c-> <c- p>],</c-> <c- p>[</c-> <c- o>-</c-><c- mf>0.0763729366746601</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.4214933324022432</c-><c- p>,</c-> <c- mf>1.5869240198367816</c-> <c- p>]</c-> <c- p>];</c-> <c- a>var</c-> OKLabtoLMS <c- o>=</c-> <c- p>[</c-> <c- p>[</c-> <c- mf>1.0000000000000000</c-><c- p>,</c-> <c- mf>0.3963377773761749</c-><c- p>,</c-> <c- mf>0.2158037573099136</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>1.0000000000000000</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.1055613458156586</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.0638541728258133</c-> <c- p>],</c-> <c- p>[</c-> <c- mf>1.0000000000000000</c-><c- p>,</c-> <c- o>-</c-><c- mf>0.0894841775298119</c-><c- p>,</c-> <c- o>-</c-><c- mf>1.2914855480194092</c-> <c- p>]</c-> <c- p>];</c-> <c- a>var</c-> LMSnl <c- o>=</c-> multiplyMatrices<c- p>(</c->OKLabtoLMS<c- p>,</c-> OKLab<c- p>);</c-> <c- k>return</c-> multiplyMatrices<c- p>(</c->LMStoXYZ<c- p>,</c-> LMSnl<c- p>.</c->map<c- p>(</c->c <c- p>=></c-> c <c- o>**</c-> <c- mf>3</c-><c- p>));</c-> <c- p>}</c-> <c- a>function</c-> OKLab_to_OKLCH<c- p>(</c->OKLab<c- p>)</c-> <c- p>{</c-> <c- a>var</c-> hue <c- o>=</c-> Math<c- p>.</c->atan2<c- p>(</c->OKLab<c- p>[</c-><c- mf>2</c-><c- p>],</c-> OKLab<c- p>[</c-><c- mf>1</c-><c- p>])</c-> <c- o>*</c-> <c- mf>180</c-> <c- o>/</c-> Math<c- p>.</c->PI<c- p>;</c-> <c- k>return</c-> <c- p>[</c-> OKLab<c- p>[</c-><c- mf>0</c-><c- p>],</c-> <c- c1>// L is still L</c-> Math<c- p>.</c->sqrt<c- p>(</c->OKLab<c- p>[</c-><c- mf>1</c-><c- p>]</c-> <c- o>**</c-> <c- mf>2</c-> <c- o>+</c-> OKLab<c- p>[</c-><c- mf>2</c-><c- p>]</c-> <c- o>**</c-> <c- mf>2</c-><c- p>),</c-> <c- c1>// Chroma</c-> hue <c- o>>=</c-> <c- mf>0</c-> <c- o>?</c-> hue <c- o>:</c-> hue <c- o>+</c-> <c- mf>360</c-> <c- c1>// Hue, in degrees [0 to 360)</c-> <c- p>];</c-> <c- p>}</c-> <c- a>function</c-> OKLCH_to_OKLab<c- p>(</c->OKLCH<c- p>)</c-> <c- p>{</c-> <c- k>return</c-> <c- p>[</c-> OKLCH<c- p>[</c-><c- mf>0</c-><c- p>],</c-> <c- c1>// L is still L</c-> OKLCH<c- p>[</c-><c- mf>1</c-><c- p>]</c-> <c- o>*</c-> Math<c- p>.</c->cos<c- p>(</c->OKLCH<c- p>[</c-><c- mf>2</c-><c- p>]</c-> <c- o>*</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mf>180</c-><c- p>),</c-> <c- c1>// a</c-> OKLCH<c- p>[</c-><c- mf>1</c-><c- p>]</c-> <c- o>*</c-> Math<c- p>.</c->sin<c- p>(</c->OKLCH<c- p>[</c-><c- mf>2</c-><c- p>]</c-> <c- o>*</c-> Math<c- p>.</c->PI <c- o>/</c-> <c- mf>180</c-><c- p>)</c-> <c- c1>// b</c-> <c- p>];</c-> <c- p>}</c-> <c- c1>// Premultiplied alpha conversions</c-> <c- a>function</c-> rectangular_premultiply<c- p>(</c->color<c- p>,</c-> alpha<c- p>)</c-> <c- p>{</c-> <c- c1>// given a color in a rectangular orthogonal colorspace</c-> <c- c1>// and an alpha value</c-> <c- c1>// return the premultiplied form</c-> <c- k>return</c-> color<c- p>.</c->map<c- p>((</c->c<c- p>)</c-> <c- p>=></c-> c <c- o>*</c-> alpha<c- p>)</c-> <c- p>}</c-> <c- a>function</c-> rectangular_un_premultiply<c- p>(</c->color<c- p>,</c-> alpha<c- p>)</c-> <c- p>{</c-> <c- c1>// given a premultiplied color in a rectangular orthogonal colorspace</c-> <c- c1>// and an alpha value</c-> <c- c1>// return the actual color</c-> <c- k>if</c-> <c- p>(</c->alpha <c- o>===</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> <c- k>return</c-> color<c- p>;</c-> <c- c1>// avoid divide by zero</c-> <c- p>}</c-> <c- k>return</c-> color<c- p>.</c->map<c- p>((</c->c<c- p>)</c-> <c- p>=></c-> c <c- o>/</c-> alpha<c- p>)</c-> <c- p>}</c-> <c- a>function</c-> polar_premultiply<c- p>(</c->color<c- p>,</c-> alpha<c- p>,</c-> hueIndex<c- p>)</c-> <c- p>{</c-> <c- c1>// given a color in a cylindicalpolar colorspace</c-> <c- c1>// and an alpha value</c-> <c- c1>// return the premultiplied form.</c-> <c- c1>// the index says which entry in the color array corresponds to hue angle</c-> <c- c1>// for example, in OKLCH it would be 2</c-> <c- c1>// while in HSL it would be 0</c-> <c- k>return</c-> color<c- p>.</c->map<c- p>((</c->c<c- p>,</c-> i<c- p>)</c-> <c- p>=></c-> c <c- o>*</c-> <c- p>(</c->hueIndex <c- o>===</c-> i<c- o>?</c-> <c- mf>1</c-> <c- o>:</c-> alpha<c- p>))</c-> <c- p>}</c-> <c- a>function</c-> polar_un_premultiply<c- p>(</c->color<c- p>,</c-> alpha<c- p>,</c-> hueIndex<c- p>)</c-> <c- p>{</c-> <c- c1>// given a color in a cylindicalpolar colorspace</c-> <c- c1>// and an alpha value</c-> <c- c1>// return the actual color.</c-> <c- c1>// the hueIndex says which entry in the color array corresponds to hue angle</c-> <c- c1>// for example, in OKLCH it would be 2</c-> <c- c1>// while in HSL it would be 0</c-> <c- k>if</c-> <c- p>(</c->alpha <c- o>===</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> <c- k>return</c-> color<c- p>;</c-> <c- c1>// avoid divide by zero</c-> <c- p>}</c-> <c- k>return</c-> color<c- p>.</c->map<c- p>((</c->c<c- p>,</c-> i<c- p>)</c-> <c- p>=></c-> c <c- o>/</c-> <c- p>(</c->hueIndex <c- o>===</c-> i<c- o>?</c-> <c- mf>1</c-> <c- o>:</c-> alpha<c- p>))</c-> <c- p>}</c-> <c- c1>// Convenience functions can easily be defined, such as</c-> <c- a>function</c-> hsl_premultiply<c- p>(</c->color<c- p>,</c-> alpha<c- p>)</c-> <c- p>{</c-> <c- k>return</c-> polar_premultiply<c- p>(</c->color<c- p>,</c-> alpha<c- p>,</c-> <c- mf>0</c-><c- p>);</c-> <c- p>}</c-> </pre> <h2 class="heading settled" data-level="18" id="color-difference-code">18. Sample Code for ΔE2000 and ΔEOK Color Differences<a class="self-link" href="#color-difference-code"></a></h2> This section is not normative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> This section is not normative, it does not need tests. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="heading settled" data-level="18.1" id="color-difference-2000">18.1. ΔE2000<a class="self-link" href="#color-difference-2000"></a></h3> The simplest color difference metric, ΔE76, is simply the Euclidean distance in Lab color space. While this is a good first approximation, color-critical industries such as printing and fabric dyeing soon developed improved formulae. Currently, the most widely used formula is ΔE2000. It corrects a number of known asymmetries and non-linearities compared to ΔE76. Because the formula is complex, and critically dependent on the sign of various intermediate calculations, implementations are often incorrect <a data-link-type="biblio" href="#biblio-sharma" title="The CIEDE2000 Color-Difference Formula: Implementation Notes, Supplementary Test Data, and Mathematical Observations">[Sharma]</a>. The sample code below has been <a href="https://colorjs.io/test/?test=delta">validated</a> to five significant figures against the test suite of paired Lab values and expected ΔE2000 published by <a data-link-type="biblio" href="#biblio-sharma" title="The CIEDE2000 Color-Difference Formula: Implementation Notes, Supplementary Test Data, and Mathematical Observations">[Sharma]</a> and is correct. <pre class="include-code highlight"><c- c1>// deltaE2000 is a statistically significant improvement</c-> <c- c1>// over deltaE76 and deltaE94,</c-> <c- c1>// and is recommended by the CIE and Idealliance</c-> <c- c1>// especially for color differences less than 10 deltaE76</c-> <c- c1>// but is wicked complicated</c-> <c- c1>// and many implementations have small errors!</c-> <c- d>/**</c-> <c- d> * @param {number[]} reference - Array of CIE Lab values: L as 0..100, a and b as around -150..150</c-> <c- d> * @param {number[]} sample - Array of CIE Lab values: L as 0..100, a and b as around -150..150</c-> <c- d> * @return {number} How different a color sample is from reference</c-> <c- d> */</c-> <c- a>function</c-> deltaE2000 <c- p>(</c->reference<c- p>,</c-> sample<c- p>)</c-> <c- p>{</c-> <c- c1>// Given a reference and a sample color,</c-> <c- c1>// both in CIE Lab,</c-> <c- c1>// calculate deltaE 2000.</c-> <c- c1>// This implementation assumes the parametric</c-> <c- c1>// weighting factors kL, kC and kH</c-> <c- c1>// (for the influence of viewing conditions)</c-> <c- c1>// are all 1, as seems typical.</c-> <c- a>let</c-> <c- p>[</c->L1<c- p>,</c-> a1<c- p>,</c-> b1<c- p>]</c-> <c- o>=</c-> reference<c- p>;</c-> <c- a>let</c-> <c- p>[</c->L2<c- p>,</c-> a2<c- p>,</c-> b2<c- p>]</c-> <c- o>=</c-> sample<c- p>;</c-> <c- a>let</c-> C1 <c- o>=</c-> Math<c- p>.</c->sqrt<c- p>(</c->a1 <c- o>**</c-> <c- mf>2</c-> <c- o>+</c-> b1 <c- o>**</c-> <c- mf>2</c-><c- p>);</c-> <c- a>let</c-> C2 <c- o>=</c-> Math<c- p>.</c->sqrt<c- p>(</c->a2 <c- o>**</c-> <c- mf>2</c-> <c- o>+</c-> b2 <c- o>**</c-> <c- mf>2</c-><c- p>);</c-> <c- a>let</c-> Cbar <c- o>=</c-> <c- p>(</c->C1 <c- o>+</c-> C2<c- p>)</c-><c- o>/</c-><c- mf>2</c-><c- p>;</c-> <c- c1>// mean Chroma</c-> <c- c1>// calculate a-axis asymmetry factor from mean Chroma</c-> <c- c1>// this turns JND ellipses for near-neutral colors back into circles</c-> <c- a>let</c-> C7 <c- o>=</c-> Math<c- p>.</c->pow<c- p>(</c->Cbar<c- p>,</c-> <c- mf>7</c-><c- p>);</c-> <c- a>const</c-> Gfactor <c- o>=</c-> Math<c- p>.</c->pow<c- p>(</c-><c- mf>25</c-><c- p>,</c-> <c- mf>7</c-><c- p>);</c-> <c- a>let</c-> G <c- o>=</c-> <c- mf>0.5</c-> <c- o>*</c-> <c- p>(</c-><c- mf>1</c-> <c- o>-</c-> Math<c- p>.</c->sqrt<c- p>(</c->C7<c- o>/</c-><c- p>(</c->C7<c- o>+</c->Gfactor<c- p>)));</c-> <c- c1>// scale a axes by asymmetry factor</c-> <c- c1>// this by the way is why there is no Lab2000 color space</c-> <c- a>let</c-> adash1 <c- o>=</c-> <c- p>(</c-><c- mf>1</c-> <c- o>+</c-> G<c- p>)</c-> <c- o>*</c-> a1<c- p>;</c-> <c- a>let</c-> adash2 <c- o>=</c-> <c- p>(</c-><c- mf>1</c-> <c- o>+</c-> G<c- p>)</c-> <c- o>*</c-> a2<c- p>;</c-> <c- c1>// calculate new Chroma from scaled a and original b axes</c-> <c- a>let</c-> Cdash1 <c- o>=</c-> Math<c- p>.</c->sqrt<c- p>(</c->adash1 <c- o>**</c-> <c- mf>2</c-> <c- o>+</c-> b1 <c- o>**</c-> <c- mf>2</c-><c- p>);</c-> <c- a>let</c-> Cdash2 <c- o>=</c-> Math<c- p>.</c->sqrt<c- p>(</c->adash2 <c- o>**</c-> <c- mf>2</c-> <c- o>+</c-> b2 <c- o>**</c-> <c- mf>2</c-><c- p>);</c-> <c- c1>// calculate new hues, with zero hue for true neutrals</c-> <c- c1>// and in degrees, not radians</c-> <c- a>const</c-> π <c- o>=</c-> Math<c- p>.</c->PI<c- p>;</c-> <c- a>const</c-> r2d <c- o>=</c-> <c- mf>180</c-> <c- o>/</c-> π<c- p>;</c-> <c- a>const</c-> d2r <c- o>=</c-> π <c- o>/</c-> <c- mf>180</c-><c- p>;</c-> <c- a>let</c-> h1 <c- o>=</c-> <c- p>(</c->adash1 <c- o>===</c-> <c- mf>0</c-> <c- o>&&</c-> b1 <c- o>===</c-> <c- mf>0</c-><c- p>)</c-><c- o>?</c-> <c- mf>0</c-><c- o>:</c-> Math<c- p>.</c->atan2<c- p>(</c->b1<c- p>,</c-> adash1<c- p>);</c-> <c- a>let</c-> h2 <c- o>=</c-> <c- p>(</c->adash2 <c- o>===</c-> <c- mf>0</c-> <c- o>&&</c-> b2 <c- o>===</c-> <c- mf>0</c-><c- p>)</c-><c- o>?</c-> <c- mf>0</c-><c- o>:</c-> Math<c- p>.</c->atan2<c- p>(</c->b2<c- p>,</c-> adash2<c- p>);</c-> <c- k>if</c-> <c- p>(</c->h1 <c- o><</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> h1 <c- o>+=</c-> <c- mf>2</c-> <c- o>*</c-> π<c- p>;</c-> <c- p>}</c-> <c- k>if</c-> <c- p>(</c->h2 <c- o><</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> h2 <c- o>+=</c-> <c- mf>2</c-> <c- o>*</c-> π<c- p>;</c-> <c- p>}</c-> h1 <c- o>*=</c-> r2d<c- p>;</c-> h2 <c- o>*=</c-> r2d<c- p>;</c-> <c- c1>// Lightness and Chroma differences; sign matters</c-> <c- a>let</c-> ΔL <c- o>=</c-> L2 <c- o>-</c-> L1<c- p>;</c-> <c- a>let</c-> ΔC <c- o>=</c-> Cdash2 <c- o>-</c-> Cdash1<c- p>;</c-> <c- c1>// Hue difference, taking care to get the sign correct</c-> <c- a>let</c-> hdiff <c- o>=</c-> h2 <c- o>-</c-> h1<c- p>;</c-> <c- a>let</c-> hsum <c- o>=</c-> h1 <c- o>+</c-> h2<c- p>;</c-> <c- a>let</c-> habs <c- o>=</c-> Math<c- p>.</c->abs<c- p>(</c->hdiff<c- p>);</c-> <c- a>let</c-> Δh<c- p>;</c-> <c- k>if</c-> <c- p>(</c->Cdash1 <c- o>*</c-> Cdash2 <c- o>===</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> Δh <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c->habs <c- o><=</c-> <c- mf>180</c-><c- p>)</c-> <c- p>{</c-> Δh <c- o>=</c-> hdiff<c- p>;</c-> <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c->hdiff <c- o>></c-> <c- mf>180</c-><c- p>)</c-> <c- p>{</c-> Δh <c- o>=</c-> hdiff <c- o>-</c-> <c- mf>360</c-><c- p>;</c-> <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c->hdiff <c- o><</c-> <c- o>-</c-><c- mf>180</c-><c- p>)</c-> <c- p>{</c-> Δh <c- o>=</c-> hdiff <c- o>+</c-> <c- mf>360</c-><c- p>;</c-> <c- p>}</c-> <c- k>else</c-> <c- p>{</c-> console<c- p>.</c->log<c- p>(</c-><c- u>"the unthinkable has happened"</c-><c- p>);</c-> <c- p>}</c-> <c- c1>// weighted Hue difference, more for larger Chroma</c-> <c- a>let</c-> ΔH <c- o>=</c-> <c- mf>2</c-> <c- o>*</c-> Math<c- p>.</c->sqrt<c- p>(</c->Cdash2 <c- o>*</c-> Cdash1<c- p>)</c-> <c- o>*</c-> Math<c- p>.</c->sin<c- p>(</c->Δh <c- o>*</c-> d2r <c- o>/</c-> <c- mf>2</c-><c- p>);</c-> <c- c1>// calculate mean Lightness and Chroma</c-> <c- a>let</c-> Ldash <c- o>=</c-> <c- p>(</c->L1 <c- o>+</c-> L2<c- p>)</c-><c- o>/</c-><c- mf>2</c-><c- p>;</c-> <c- a>let</c-> Cdash <c- o>=</c-> <c- p>(</c->Cdash1 <c- o>+</c-> Cdash2<c- p>)</c-><c- o>/</c-><c- mf>2</c-><c- p>;</c-> <c- a>let</c-> Cdash7 <c- o>=</c-> Math<c- p>.</c->pow<c- p>(</c->Cdash<c- p>,</c-> <c- mf>7</c-><c- p>);</c-> <c- c1>// Compensate for non-linearity in the blue region of Lab.</c-> <c- c1>// Four possibilities for hue weighting factor,</c-> <c- c1>// depending on the angles, to get the correct sign</c-> <c- a>let</c-> hdash<c- p>;</c-> <c- k>if</c-> <c- p>(</c->Cdash1 <c- o>==</c-> <c- mf>0</c-> <c- o>&&</c-> Cdash2 <c- o>==</c-> <c- mf>0</c-><c- p>)</c-> <c- p>{</c-> hdash <c- o>=</c-> hsum<c- p>;</c-> <c- c1>// which should be zero</c-> <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c->habs <c- o><=</c-> <c- mf>180</c-><c- p>)</c-> <c- p>{</c-> hdash <c- o>=</c-> hsum <c- o>/</c-> <c- mf>2</c-><c- p>;</c-> <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c->hsum <c- o><</c-> <c- mf>360</c-><c- p>)</c-> <c- p>{</c-> hdash <c- o>=</c-> <c- p>(</c->hsum <c- o>+</c-> <c- mf>360</c-><c- p>)</c-> <c- o>/</c-> <c- mf>2</c-><c- p>;</c-> <c- p>}</c-> <c- k>else</c-> <c- p>{</c-> hdash <c- o>=</c-> <c- p>(</c->hsum <c- o>-</c-> <c- mf>360</c-><c- p>)</c-> <c- o>/</c-> <c- mf>2</c-><c- p>;</c-> <c- p>}</c-> <c- c1>// positional corrections to the lack of uniformity of CIELAB</c-> <c- c1>// These are all trying to make JND ellipsoids more like spheres</c-> <c- c1>// SL Lightness crispening factor</c-> <c- c1>// a background with L=50 is assumed</c-> <c- a>let</c-> lsq <c- o>=</c-> <c- p>(</c->Ldash <c- o>-</c-> <c- mf>50</c-><c- p>)</c-> <c- o>**</c-> <c- mf>2</c-><c- p>;</c-> <c- a>let</c-> SL <c- o>=</c-> <c- mf>1</c-> <c- o>+</c-> <c- p>((</c-><c- mf>0.015</c-> <c- o>*</c-> lsq<c- p>)</c-> <c- o>/</c-> Math<c- p>.</c->sqrt<c- p>(</c-><c- mf>20</c-> <c- o>+</c-> lsq<c- p>));</c-> <c- c1>// SC Chroma factor, similar to those in CMC and deltaE 94 formulae</c-> <c- a>let</c-> SC <c- o>=</c-> <c- mf>1</c-> <c- o>+</c-> <c- mf>0.045</c-> <c- o>*</c-> Cdash<c- p>;</c-> <c- c1>// Cross term T for blue non-linearity</c-> <c- a>let</c-> T <c- o>=</c-> <c- mf>1</c-><c- p>;</c-> T <c- o>-=</c-> <c- p>(</c-><c- mf>0.17</c-> <c- o>*</c-> Math<c- p>.</c->cos<c- p>((</c-> hdash <c- o>-</c-> <c- mf>30</c-><c- p>)</c-> <c- o>*</c-> d2r<c- p>));</c-> T <c- o>+=</c-> <c- p>(</c-><c- mf>0.24</c-> <c- o>*</c-> Math<c- p>.</c->cos<c- p>(</c-> <c- mf>2</c-> <c- o>*</c-> hdash <c- o>*</c-> d2r<c- p>));</c-> T <c- o>+=</c-> <c- p>(</c-><c- mf>0.32</c-> <c- o>*</c-> Math<c- p>.</c->cos<c- p>(((</c-><c- mf>3</c-> <c- o>*</c-> hdash<c- p>)</c-> <c- o>+</c-> <c- mf>6</c-><c- p>)</c-> <c- o>*</c-> d2r<c- p>));</c-> T <c- o>-=</c-> <c- p>(</c-><c- mf>0.20</c-> <c- o>*</c-> Math<c- p>.</c->cos<c- p>(((</c-><c- mf>4</c-> <c- o>*</c-> hdash<c- p>)</c-> <c- o>-</c-> <c- mf>63</c-><c- p>)</c-> <c- o>*</c-> d2r<c- p>));</c-> <c- c1>// SH Hue factor depends on Chroma,</c-> <c- c1>// as well as adjusted hue angle like deltaE94.</c-> <c- a>let</c-> SH <c- o>=</c-> <c- mf>1</c-> <c- o>+</c-> <c- mf>0.015</c-> <c- o>*</c-> Cdash <c- o>*</c-> T<c- p>;</c-> <c- c1>// RT Hue rotation term compensates for rotation of JND ellipses</c-> <c- c1>// and Munsell constant hue lines</c-> <c- c1>// in the medium-high Chroma blue region</c-> <c- c1>// (Hue 225 to 315)</c-> <c- a>let</c-> Δθ <c- o>=</c-> <c- mf>30</c-> <c- o>*</c-> Math<c- p>.</c->exp<c- p>(</c-><c- o>-</c-><c- mf>1</c-> <c- o>*</c-> <c- p>(((</c->hdash <c- o>-</c-> <c- mf>275</c-><c- p>)</c-><c- o>/</c-><c- mf>25</c-><c- p>)</c-> <c- o>**</c-> <c- mf>2</c-><c- p>));</c-> <c- a>let</c-> RC <c- o>=</c-> <c- mf>2</c-> <c- o>*</c-> Math<c- p>.</c->sqrt<c- p>(</c->Cdash7<c- o>/</c-><c- p>(</c->Cdash7 <c- o>+</c-> Gfactor<c- p>));</c-> <c- a>let</c-> RT <c- o>=</c-> <c- o>-</c-><c- mf>1</c-> <c- o>*</c-> Math<c- p>.</c->sin<c- p>(</c-><c- mf>2</c-> <c- o>*</c-> Δθ <c- o>*</c-> d2r<c- p>)</c-> <c- o>*</c-> RC<c- p>;</c-> <c- c1>// Finally calculate the deltaE, term by term as root sum of squares</c-> <c- a>let</c-> dE <c- o>=</c-> <c- p>(</c->ΔL <c- o>/</c-> SL<c- p>)</c-> <c- o>**</c-> <c- mf>2</c-><c- p>;</c-> dE <c- o>+=</c-> <c- p>(</c->ΔC <c- o>/</c-> SC<c- p>)</c-> <c- o>**</c-> <c- mf>2</c-><c- p>;</c-> dE <c- o>+=</c-> <c- p>(</c->ΔH <c- o>/</c-> SH<c- p>)</c-> <c- o>**</c-> <c- mf>2</c-><c- p>;</c-> dE <c- o>+=</c-> RT <c- o>*</c-> <c- p>(</c->ΔC <c- o>/</c-> SC<c- p>)</c-> <c- o>*</c-> <c- p>(</c->ΔH <c- o>/</c-> SH<c- p>);</c-> <c- k>return</c-> Math<c- p>.</c->sqrt<c- p>(</c->dE<c- p>);</c-> <c- c1>// Yay!!!</c-> <c- p>};</c-></pre> <h3 class="heading settled" data-level="18.2" id="color-difference-OK">18.2. ΔEOK<a class="self-link" href="#color-difference-OK"></a></h3> Because Oklab does not suffer from the hue linearity, hue uniformity, and chroma non-linearities of CIE Lab, the color difference metric does not need to correct for them and so is simply the Euclidean distance in Oklab color space. <pre class="include-code highlight"><c- c1>// Calculate deltaE OK</c-> <c- c1>// simple root sum of squares</c-> <c- d>/**</c-> <c- d> * @param {number[]} reference - Array of OKLab values: L as 0..1, a and b as -1..1</c-> <c- d> * @param {number[]} sample - Array of OKLab values: L as 0..1, a and b as -1..1</c-> <c- d> * @return {number} How different a color sample is from reference</c-> <c- d> */</c-> <c- a>function</c-> deltaEOK <c- p>(</c->reference<c- p>,</c-> sample<c- p>)</c-> <c- p>{</c-> <c- a>let</c-> <c- p>[</c->L1<c- p>,</c-> a1<c- p>,</c-> b1<c- p>]</c-> <c- o>=</c-> reference<c- p>;</c-> <c- a>let</c-> <c- p>[</c->L2<c- p>,</c-> a2<c- p>,</c-> b2<c- p>]</c-> <c- o>=</c-> sample<c- p>;</c-> <c- a>let</c-> ΔL <c- o>=</c-> L1 <c- o>-</c-> L2<c- p>;</c-> <c- a>let</c-> Δa <c- o>=</c-> a1 <c- o>-</c-> a2<c- p>;</c-> <c- a>let</c-> Δb <c- o>=</c-> b1 <c- o>-</c-> b2<c- p>;</c-> <c- k>return</c-> Math<c- p>.</c->sqrt<c- p>(</c->ΔL <c- o>**</c-> <c- mf>2</c-> <c- o>+</c-> Δa <c- o>**</c-> <c- mf>2</c-> <c- o>+</c-> Δb <c- o>**</c-> <c- mf>2</c-><c- p>);</c-> <c- p>}</c-></pre> <h2 class="no-num heading settled" id="deprecated-system-colors"> Appendix A: Deprecated CSS System Colors<a class="self-link" href="#deprecated-system-colors"></a></h2> Earlier versions of CSS defined several additional <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors⑥">system colors</a>. These color keywords have been deprecated, however, as they are insufficient for their original purpose (making website elements look like their native OS counterparts), represent a security risk by making it easier for a webpage to “spoof” a native OS dialog, and increase fingerprinting surface, compromising user privacy. User agents must support these keywords, and to mitigate fingerprinting must map them to the (undeprecated) <a data-link-type="dfn" href="#css-system-colors" id="ref-for-css-system-colors⑦">system colors</a> as listed below. Authors must not use these keywords. The deprecated system colors are represented as the <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-deprecated-color"><a class="production css" data-link-type="type" href="#typedef-deprecated-color" id="ref-for-typedef-deprecated-color②"><deprecated-color></a></dfn> sub-type, and are defined as: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-activeborder">ActiveBorder</dfn> <dd>Active window border. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonborder" id="ref-for-valdef-color-buttonborder②">ButtonBorder</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-activecaption">ActiveCaption</dfn> <dd>Active window caption. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas⑤">Canvas</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-appworkspace">AppWorkspace</dfn> <dd>Background color of multiple document interface. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas⑥">Canvas</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-background">Background</dfn> <dd>Desktop background. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas⑦">Canvas</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-buttonhighlight">ButtonHighlight</dfn> <dd>The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonface" id="ref-for-valdef-color-buttonface②">ButtonFace</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-buttonshadow">ButtonShadow</dfn> <dd>The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonface" id="ref-for-valdef-color-buttonface③">ButtonFace</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-captiontext">CaptionText</dfn> <dd>Text in caption, size box, and scrollbar arrow box. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvastext" id="ref-for-valdef-color-canvastext①">CanvasText</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-inactiveborder">InactiveBorder</dfn> <dd>Inactive window border. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonborder" id="ref-for-valdef-color-buttonborder③">ButtonBorder</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-inactivecaption">InactiveCaption</dfn> <dd>Inactive window caption. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas⑧">Canvas</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-inactivecaptiontext">InactiveCaptionText</dfn> <dd>Color of text in an inactive caption. Same as <a class="css" data-link-type="maybe" href="#valdef-color-graytext" id="ref-for-valdef-color-graytext①">GrayText</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-infobackground">InfoBackground</dfn> <dd>Background color for tooltip controls. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas⑨">Canvas</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-infotext">InfoText</dfn> <dd>Text color for tooltip controls. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvastext" id="ref-for-valdef-color-canvastext②">CanvasText</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-menu">Menu</dfn> <dd>Menu background. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas①⓪">Canvas</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-menutext">MenuText</dfn> <dd>Text in menus. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvastext" id="ref-for-valdef-color-canvastext③">CanvasText</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-scrollbar">Scrollbar</dfn> <dd>Scroll bar gray area. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas①①">Canvas</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-threeddarkshadow">ThreeDDarkShadow</dfn> <dd>The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonborder" id="ref-for-valdef-color-buttonborder④">ButtonBorder</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-threedface">ThreeDFace</dfn> <dd>The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonface" id="ref-for-valdef-color-buttonface④">ButtonFace</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-threedhighlight">ThreeDHighlight</dfn> <dd>The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonborder" id="ref-for-valdef-color-buttonborder⑤">ButtonBorder</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-threedlightshadow">ThreeDLightShadow</dfn> <dd>The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonborder" id="ref-for-valdef-color-buttonborder⑥">ButtonBorder</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-threedshadow">ThreeDShadow</dfn> <dd>The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonborder" id="ref-for-valdef-color-buttonborder⑦">ButtonBorder</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-window">Window</dfn> <dd>Window background. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvas" id="ref-for-valdef-color-canvas①②">Canvas</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-windowframe">WindowFrame</dfn> <dd>Window frame. Same as <a class="css" data-link-type="maybe" href="#valdef-color-buttonborder" id="ref-for-valdef-color-buttonborder⑧">ButtonBorder</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<color>, <deprecated-color>" data-dfn-type="value" data-export id="valdef-color-windowtext">WindowText</dfn> <dd>Text in windows. Same as <a class="css" data-link-type="maybe" href="#valdef-color-canvastext" id="ref-for-valdef-color-canvastext④">CanvasText</a>. </dl> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <ul class="wpt-tests-list"> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-001.html" title="css/css-color/deprecated-sameas-001.html">deprecated-sameas-001.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-001.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-001.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-002.html" title="css/css-color/deprecated-sameas-002.html">deprecated-sameas-002.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-002.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-002.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-003.html" title="css/css-color/deprecated-sameas-003.html">deprecated-sameas-003.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-003.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-003.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-004.html" title="css/css-color/deprecated-sameas-004.html">deprecated-sameas-004.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-004.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-004.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-005.html" title="css/css-color/deprecated-sameas-005.html">deprecated-sameas-005.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-005.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-005.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-006.html" title="css/css-color/deprecated-sameas-006.html">deprecated-sameas-006.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-006.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-006.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-007.html" title="css/css-color/deprecated-sameas-007.html">deprecated-sameas-007.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-007.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-007.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-008.html" title="css/css-color/deprecated-sameas-008.html">deprecated-sameas-008.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-008.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-008.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-009.html" title="css/css-color/deprecated-sameas-009.html">deprecated-sameas-009.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-009.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-009.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-010.html" title="css/css-color/deprecated-sameas-010.html">deprecated-sameas-010.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-010.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-010.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-011.html" title="css/css-color/deprecated-sameas-011.html">deprecated-sameas-011.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-011.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-011.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-012.html" title="css/css-color/deprecated-sameas-012.html">deprecated-sameas-012.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-012.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-012.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-013.html" title="css/css-color/deprecated-sameas-013.html">deprecated-sameas-013.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-013.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-013.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-014.html" title="css/css-color/deprecated-sameas-014.html">deprecated-sameas-014.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-014.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-014.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-015.html" title="css/css-color/deprecated-sameas-015.html">deprecated-sameas-015.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-015.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-015.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-016.html" title="css/css-color/deprecated-sameas-016.html">deprecated-sameas-016.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-016.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-016.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-017.html" title="css/css-color/deprecated-sameas-017.html">deprecated-sameas-017.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-017.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-017.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-018.html" title="css/css-color/deprecated-sameas-018.html">deprecated-sameas-018.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-018.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-018.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-019.html" title="css/css-color/deprecated-sameas-019.html">deprecated-sameas-019.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-019.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-019.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-020.html" title="css/css-color/deprecated-sameas-020.html">deprecated-sameas-020.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-020.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-020.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-021.html" title="css/css-color/deprecated-sameas-021.html">deprecated-sameas-021.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-021.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-021.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-022.html" title="css/css-color/deprecated-sameas-022.html">deprecated-sameas-022.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-022.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-022.html">(source)</a> <li class="wpt-test"><a class="wpt-name" href="https://wpt.fyi/results/css/css-color/deprecated-sameas-023.html" title="css/css-color/deprecated-sameas-023.html">deprecated-sameas-023.html</a> <a class="wpt-live" href="http://wpt.live/css/css-color/deprecated-sameas-023.html">(live test)</a> <a class="wpt-source" href="https://github.com/web-platform-tests/wpt/blob/master/css/css-color/deprecated-sameas-023.html">(source)</a> </ul> </details> <h2 class="no-num heading settled" id="quirky-color"> Appendix B: Deprecated Quirky Hex Colors<a class="self-link" href="#quirky-color"></a></h2> When CSS is being parsed in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks">quirks mode</a>, <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-quirky-color"><a class="production css" data-link-type="type" href="#typedef-quirky-color" id="ref-for-typedef-quirky-color"><quirky-color></a></dfn> is a type of <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②⑤"><color></a> that is only valid in certain properties: <ul> <li data-md> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color" id="ref-for-propdef-background-color">background-color</a> <li data-md> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-borders-4/#propdef-border-color" id="ref-for-propdef-border-color①">border-color</a> <li data-md> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-borders-4/#propdef-border-top-color" id="ref-for-propdef-border-top-color">border-top-color</a> <li data-md> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-borders-4/#propdef-border-right-color" id="ref-for-propdef-border-right-color">border-right-color</a> <li data-md> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-borders-4/#propdef-border-bottom-color" id="ref-for-propdef-border-bottom-color">border-bottom-color</a> <li data-md> <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-borders-4/#propdef-border-left-color" id="ref-for-propdef-border-left-color">border-left-color</a> <li data-md> <a class="property css" data-link-type="property" href="#propdef-color" id="ref-for-propdef-color⑧">color</a> </ul> It is not valid in properties that include or reference these properties, such as the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background</a> shorthand, or inside <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#functional-notation" id="ref-for-functional-notation①">functional notations</a> such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-5/#funcdef-color-mix" id="ref-for-funcdef-color-mix②">color-mix()</a> Additionally, while <a class="production css" data-link-type="type" href="#typedef-quirky-color" id="ref-for-typedef-quirky-color①"><quirky-color></a> must be valid as a <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②⑥"><color></a> when parsing the affected properties in the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports">@supports</a> rule, it is not valid for those properties when used in the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/css-conditional-3/#dom-css-supports-conditiontext" id="ref-for-dom-css-supports-conditiontext">CSS.supports()</a></code> method. A <a class="production css" data-link-type="type" href="#typedef-quirky-color" id="ref-for-typedef-quirky-color②"><quirky-color></a> can be represented as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token"><number-token></a>, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token"><dimension-token></a>, or <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token"><ident-token></a>, according to the following rules: <ul> <li data-md> If it’s an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token①"><ident-token></a>, the token’s representation must contain exactly 3 or 6 characters, all hexadecimal digits. It represents a <a class="production css" data-link-type="type" href="#typedef-hex-color" id="ref-for-typedef-hex-color①"><hex-color></a> with the same value. <li data-md> If it’s a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token①"><number-token></a>, it must have its integer flag set. Serialize the integer’s value. If the serialization has less than 6 characters, prepend "0" characters to it until it is 6 characters long. It represents a <a class="production css" data-link-type="type" href="#typedef-hex-color" id="ref-for-typedef-hex-color②"><hex-color></a> with the same value. <li data-md> If it’s a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token①"><dimension-token></a>, it must have its integer flag set. Serialize the integer’s value, and append the representation of the token’s unit. If the result has less than 6 characters, prepend "0" characters to it until it is 6 characters long. It represents a <a class="production css" data-link-type="type" href="#typedef-hex-color" id="ref-for-typedef-hex-color③"><hex-color></a> with the same value. </ul> (In other words, Quirks Mode allows hex colors to be written without the leading "#", but with weird parsing rules.) <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> quirky hex colors <ul class="wpt-tests-list"></ul> <hr> </details> <h2 class="no-num no-ref heading settled" id="acknowledgments"> Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> In addition to <a href="https://www.w3.org/TR/css-color-3/#acknowledgments">those who contributed to CSS Color 3</a>, the editors would like to thank Emilio Cobos Álvarez, Alexey Ardov, Chris Bai, Amelia Bellamy-Royds, Lars Borg, Mike Bremford, Andreu Botella, Dan Burzo, Max Derhak, fantasai, Simon Fraser, Devon Govett, Phil Green, Dean Jackson, Andreas Kraushaar, Pierre-Anthony Lemieux, Tiaan Louw, Cameron McCormack, Romain Menke, Chris Murphy, Isaac Muse, Jonathan Neal, Chris Needham, Björn Ottosson, Christoph Päper, Brad Pettit, Xidorn Quan, Craig Revie, Melanie Richards, Florian Rivoal, Jacob Rus, Joseph Salowey, Simon Sapin, Igor Snitkin, Lea Verou, Mark Watson, James Stuckey Weber, Sam Weinig, and Natalie Weizenbaum. <h2 class="no-num heading settled" id="changes"> Changes<a class="self-link" href="#changes"></a></h2> <h3 class="heading settled" id="changes-from-20240213">Changes since the <a href="https://www.w3.org/TR/2024/CRD-css-color-4-20240213/">Candidate Recommendation Draft of 13 Feb 2024</a><a class="self-link" href="#changes-from-20240213"></a></h3> <ul> <li>Added another xyz-d65 and xyz-d50 example <li>Clarify which component (Y) in XYZ corresponds to brightness <li>Clarified that CSS gamut mapping applies on actual, not used, values <li>Removed hue normalization from the hslToRgb sample code, as the input is already normalized at parse time <li>Corrected the pseudo-code for step 4 of the gamut mapping algorithm <li>Clarified that interpolation is the most common situation which combines two colors, but not the only one. <li>Ensured adequate contrast for text in the deltaE table <li>Removed remaining use of the term <absolute-color-function>, use <absolute-color> function instead for consistency <li>Updated acknowledgements section <li>Added gamut mesh diagram <li>Described CSSOM serialization in terms of declared values rather than specified values <li>Added exported definition of luminance <li>Added production rule for <opacity-value> <li>Clarified when results from hslToRgb will be in [0,1] <li>Clarified that once linearized, RGB spaces are additive </ul> <h3 class="heading settled" id="changes-from-20221101">Changes since the <a href="https://www.w3.org/TR/2022/CRD-css-color-4-20221101/">Candidate Recommendation Draft of 1 November 2022</a> <a class="self-link" href="#changes-from-20221101"></a></h3> <ul> <li>Added steps for serializing a uint8_t alpha, moved from cssom-1 <li>Restored parse-time clamping of HSL negative saturation to 0, which is current interop behavior from CSS Color 3 <li>When interpolating, always convert colorspace, so that powerless components become missing <li>Clarified when alpha 1 is omitted from serialization <li>Removed redundant constraining of hue angles to [0,360] as this is already done. <li>Corrected description of ActiveCaption, which is a background. <li>Disambiguated opacity and alpha. Opacity property now uses opacity-value (which has different clamping behavior to alpha-value) <li>Clarified that carrying forward happens before premultiplication <li>Updated gamut mapping algorithm <li>Fixed a few issues regarding hue interpolation <li>Clarified that HWB white or black at 100% is insufficient criterion for an achromatic color; it is the sum which matters. <li>Avoid returning negative saturation in rgb to hsl conversion; adjust the hue to point to "the other side" instead <li>Use 64 bit accurate matrices for ProPhoto, which does not have a rational form <li>Oklab matrices recalculated for 64bit precision (returns same results as before, at 32 bit precision) <li>Consistently return output of GMA in the destination color space, even if no mapping is performed because the destination is unbounded <li>Added explanation for why one JND for Oklab is 0.02, not 2 <li>Clarified that resolving sRGB values does not apply to the color() function <li>Moved alpha value definition up to the opacity property, clarified that opacity specified values are not clamped. <li>System Colors now explicitly permit spoofing, to preserve privacy <li>Corrected the inverse chromatic adaptation matrix for D50 to D65 <li>Consistently distinguish linear Bradfrod from the original, more complicated, Bradford chromatic adaptation algorithm <li>In the gamut mapping algorithm, return clipped as the gamut mapped result, avoiding un-necessary steps <li>Updated chromatic adaptation matrices to higher precision <li>Added Add 'parse a css color' algorithm, so non-CSS specs using colors don’t have to reinvent the machinery here. <li>Clarified that geometric gamut mapping must not project chroma back beyond the original color <li>Use the term "geometric" rather than "analytical" in gamut mapping discussion <li>Aligned prose for HSL into line with the grammar (percent and number both allowed) <li>Fixed an LCH alpha interpolation example, which was erroneously un-premultiplying the hue angle <li>Corrected the sRGB and display-p3 transfer function. (This only affected the result if a component had the exact value 10.31475 / 255, which is not possible at 8 or 10 bits per component) <li>Clarified that the specified values of system colors are still themselves <li>Added mention of PNG cICP chunk for tagging images <li>Described behaviour of hue increasing and decreasing when 0/360 is passed <li>Aligned description of powerlessnes in HSL with the other polar color models <li>Explicitly defined order of operations for color interpolation <li>Added mention of degenerate numeric constants in calc() <li>Clarified that calc() in sRGB has early resolution, and clamps the result <li>Clarified that HWB hue has the same disadvantages as HSL hue <li>Added luminance to lightness comparison and figure <li>Added descriptions and examples for hue interpolation keywords <li>Use normative prose for achromatic HWB colors <li>Corrected hue interpolation angle range; [0,360) not [0,360] <li>Expressed that displaying as black or white when L=0% or 100% is due to gamut mapping. Removed incorrect assertions of powerlessness <li>Dropped the confusing "representing black" and "representing white" comments <li>Clarified that opponent a and b are analogous <li>Specified RGB channels using reference ranges rather than prose, for consistency <li>Explicitly referenced percent reference ranges for percentage to number conversion when serializing Lab, LCH, Oklab, Oklch <li>Required Oklab interpolation, remove previous "may", describe explicit opt-out <li>Labelled the Lab, LCH, Oklab and Oklch tutorial sections as non-normative. Moved some definitions out of the non-normative section. <li>Clarified that, when interpolating, checking for analogous components happens before color space conversion <li>Back-ported hwb() syntax changes and reference ranges from CSS Color 5 <li>Defined carry-forward operations must happen before powerless operations <li>Clarified it is color components which must be all-number or all-percentage, in legacy rgb() syntax <li>Clarified for legacy syntax that color components must be all-percentage or all-number <li>Added examples of specified out of range alpha, with and without calc() <li>Placed examples of serializing with trimmed trailing zeroes colorer to the relevant text <li>clarified example, used value of text-shadow <li>Clarified resolving currentColor <li>Updated acknowledgments <li>Stop claiming that achromatic colors have missing a,b, or chroma <li>HSL and HWB changed to unbounded gamut, to promote round-tripping <li>Defined percentage reference range for HSL <li>Modern color syntax hsl() and hsla() allow mixed number and percentage components <li>Modern color syntax rgb() and rgba() allow mixed number and percentage components <li>Define the term "modern color syntax" (legacy color syntax already defined). <li>Consistently use the term "analogous components" <li>Changed to allow all predefined color spaces for interpolation <li>Clarified that for color(), three parameters (RGB or XYZ) are required <li>Clarified serialization of named colors, system colors, and transparent <li>Define specified value for Lab, LCH, Oklab, Oklch <li>Define specified value for other sRGB colors <li>Define specified values for named and system colors <li>Clamp alpha, Lightness, Chroma and Hue at parsed-value time <li>Remove passing mention of specular white and CIE Lightness <li>No longer require as-specified Hue to be retained; clamp to [0, 360] <li>Consistent serialization of Lightness and number in examples <li>Minor typos and editorial clarifications </ul> <h3 class="heading settled" id="changes-from-20220705">Changes since the <a href="https://www.w3.org/TR/2022/CR-css-color-4-20220705/">Candidate Recommendation of 5 July 2022</a> <a class="self-link" href="#changes-from-20220705"></a></h3> <ul> <li>Removed hue interpolation "specified" value <li>Defined hue interpolation angle more precisely, maintaining differences of 360deg <li>Added example of carried forward alpha for premultiplication <li>Clarified a,b and C,h powerless at L=100% representing white. <li>Removed handwavy mention of L=400 which applies to hdr-CIELAB not CIE Lab <li>Consistent capitalization of Oklab and Oklch <li>Moved definitions of valid color, invalid color, out of gamut and in gamut to terminology section <li>Fixed definition of "longer" hue interpolation <li>Further clarified the concept of a host syntax <li>Accessibility improvements for color swatches <li>Made explicit that legacy forms do not support "none" <li>Remove "none" from the hue production, as it is not allowed in legacy syntax <li>Removed some dangling references to CMYK and CMYKOGV, moved to CSS Color5 <li>Clarified how missing values in colors to be interpolated are carried forward <li>Updated syntax of xyz-params so they take numbers and percentage, to align with prose <li>Ensure all examples and figures have IDs, self-links <li>Clarified importance to implementors of reading the gamut mapping introduction <li>Removed left-over mention of custom color spaces (feature was moved to CSS Color 5) <li>Refactor syntax of <color> and <alpha-value> <li>Editorial refactoring for better reading order. <li>Updated pseudocode for gamut mapping algorithm, remove un-needed deltaE calls </ul> <h3 class="heading settled" id="changes-from-20220628">Changes since the <a href="https://www.w3.org/TR/2022/WD-css-color-4-20220628/">Working Draft of 28 June 2022</a> <a class="self-link" href="#changes-from-20220628"></a></h3> <ul> <li>Updated status for Candidate Recommendation </ul> <h3 class="heading settled" id="changes-from-20220428">Changes since the <a href="https://www.w3.org/TR/2022/WD-css-color-4-20220428/">Working Draft of 28 April 2022</a> <a class="self-link" href="#changes-from-20220428"></a></h3> <ul> <li>Moved opacity property up to the top of the module, next to color property, before getting into details. <li>Improved description of the color property, in particular effect on other properties <li>Corrected longer hue adjust equation, for equal-modulo-360 colors <li>Added two new System colors: AccentColor and AccentColorText <li>Described overall color space conversion steps in new section <li>Accounted for <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none①③">none</a> alpha in premultiplication and un-premultiplication </ul> <h3 class="heading settled" id="changes-from-20211215">Changes since the <a href="https://www.w3.org/TR/2021/WD-css-color-4-20211215/">Working Draft of 15 December 2021</a> <a class="self-link" href="#changes-from-20211215"></a></h3> <ul> <li>Made system colors fully resolve, but forbid their alteration in forced colors mode <li>Removed forgiveness for incorrect number of parameters in color() function <li>Changed serialization of CIE Lightness and OK Lightness to number rather than percentage. <li>Marked deprecated system color equivalences as at-risk <li>Added reference ranges to percentage values for CIE and OK L,a,b,C <li>Noted that there is sample code for performing and undoing premultiplication, for both rectangular and polar color spaces. <li>Added out of range clamping to the gamut mapping prose, as well as the pseudocode <li>Added normative reference for ProPhoto RGB / ROMM <li>Corrected sRGB and Display P3 black point value for reference surround <li>Added normative reference for Display P3 <li>Avoided an infinite loop in gamut reduction, with colors whiter than white or darker than black <li>Clarified serialization of the <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none①④">none</a> value <li>Clarified the opt-in to interpolation in Oklab, for non-legacy colors <li>Defined how premultiplication works, with the <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none①⑤">none</a> value <li>Clarified that missing values in rgb serialize as 0 <li>Clarified the use of calc() with the <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none①⑥">none</a> value <li>Typo, inconsistent casing on System Colors <li>Added example of SelectedItem with SelectedItemText <li>Explicitly noted the presence or absence of legacy colors <li>Added normative reference for CIE XYZ <li>Added normative reference for HWB and HSL <li>Clarified that <a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb①⓪">hwb()</a> is not a legacy syntax so does not support the older, comma-separated syntactic form <li>Clarified that only legacy colors will gamut map, the others are unbounded <li>Use distinct terms, spectrophotometer and spectroradiometer <li>Assorted minor typos fixed, and grammatical improvements </ul> <h3 class="no-num heading settled" id="changes-from-20210601">Changes since the <a href="https://www.w3.org/TR/2021/WD-css-color-4-20210601/">Working Draft of 1 June 2021</a> <a class="self-link" href="#changes-from-20210601"></a></h3> <ul> <li>Added gamut mapping section and defined a CSS gamut mapping algorithm as chroma reduction in Oklch with local MINDE. <li>Computed value of color(xyz ...) is color(xyz-d65 ...) <li>Added srgb-linear to interpolation color spaces <li>Updated Changes from Colors 3 section <li>Added Resolving Oklab and Oklch values section <li>Added srgb-linear color space <li>Moved @color-profile and device-cmyk to level 5 per CSSWG resolution <li>Defined interpolation color space <li>Clarified that matrices are row-major and linked to the matrix multiplication library <li>Split old Security & Privacy section into separate sections <li>Defined quirks-mode quirky hex colors <li>Removed fallback colors from device-cmyk <li>Host syntax that does not declare a default now uses Oklab by default <li>Added sample code for deltaE OK <li>Added sample conversion code for OKlab and Oklch <li>Added oklab() and oklch() functions Added description of Oklab and Oklch <li>Added description of CIE LCH deficiencies <li>Allowed all components of a color to be "missing" via the <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none①⑦">none</a> keyword, defined when components are "powerless" and automatically become missing in some cases, and fixed all references to "NaN" channels to use the "missing" concept. <li>Defined explicit x,y whitepoint values, use consistently throughout <li>Defined the term host syntax <li>Defined context for resolving override-color colors <li>Added a new pair of system colors <li>Corrected HSL and HWB sample code <li>Replaced table of HSL values with error-free version <li>Added Lea Verou as co-editor by WG resolution <li>Clarified that hue angle is unbounded <li>MarkText example corrected <li>Added diagrams, corrected examples <li>Some editorial clarifications <li>Minor typos corrected, markup corrections </ul> <h3 class="no-num heading settled" id="changes-from-20201112">Changes since the <a href="https://www.w3.org/TR/2020/WD-css-color-4-20201112/">Working Draft of 12 November 2020</a> <a class="self-link" href="#changes-from-20201112"></a></h3> <ul> <li>Noted indeterminate hue ssue on near-neutral Lab values converted to LCH <li>Clarified which steps are linear combinations in RGB Lab interconversion <li>Added components descriptor to @color-profile, for use in CSS Color 5 <li>All predefined RGB color spaces are defined over the extended range <li>Clarified that there is no gamut mapping or gamut clipping step prior to color interpolation <li>Clarified interpolation of legacy sRGB syntaxes <li>Removed the lab option from <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①③">color()</a> <li>List steps to interconvert between predefined color spaces <li>Consistent use of the term color space (two words) <li>Provided more guidance on selecting color space for mixing <li>Recalculated an example to increase precision <li>Added hue interpolation example <li>Simplified <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①④">color()</a> syntax by removing the fallback options <li>Clarified the types of ICC profile that may be linked from @color-profile <li>Support for the rare ICC Named Colors was removed <li>Improved precision of standard whitepoint chromaticities <li>Removed a trademark from description of one predefined color space <li>Rephrased interpolation to be more generic wrt to interpolation space <li>Corrected Accessibility Considerations section <li>Clarified that the color space argument for <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①⑤">color()</a> is mandatory, even for sRGB <li>Clarified that currentColor is not restricted to sRGB <li>Small correction to the sRGB to XYZ to sRGB matrices, improve round-tripping <li>Clarified the rec2020 transfer function, citing the correct ITU Rec BT.2020-2 reference <li>Correct fallback examples to use the correct syntax <li>Don’t force non-legacy colors to interpolate in a gamma-encoded space <li>Define premultiplied alpha interpolation <li>Start to address interpolation to and from currentColor <li>Define hue interpolation with NaN <li>Generalize color interpolation <li>Define interpolation to be in Lab, with override to LCG <li>Corrections to hue interpolation <li>Defined hue angle interpolation <li>Added interpolation section <li>Corrected syntax in some examples <li>Clarify exactly which components are allowed percentages, in <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①⑥">color()</a> <li>Change to serialize <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch①⓪">lch()</a> as itself rather than as <a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab⑨">lab()</a> <li>Minimum 10 bits per component precision for non-legacy sRGB in <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①⑦">color()</a> <li>color space no longer optional in <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①⑧">color()</a> <li>Consistent minimum precision between lab() and color(lab) <li>Clarified fallback procedure for the color() function – first valid in-gamut color, else first valid color which is then gamut mapped, else transparent black <li>Clarified difference between opacity property and colors with opacity, notably for rendering overlapping text glyphs <li>Added sample (but verified correct) code for ΔE2000 <li>Added definition of previously-undefined term chromaticity, with examples; define chromaticity diagram. <li>Added explanation of color additivity, with examples <li>Added source links to WPT tests <li>Export definition of color, and valid color, for other specifications to reference <li>Define minimum number of bits per component, for serialization <li>Updated "applies to" definitions (CSS-wide change) <li>Added image state (display referred or scene referred) for predefined color spaces <li>Listed white point correlated color temperature (e.g. D65) alongside chromaticity coordinates, for clarity <li>Clarified that rounding is towards +∞ <li>Correction of typos, markup corrections, link fixes </ul> <h3 class="no-num heading settled" id="changes-from-20191105">Changes since <a href="https://www.w3.org/TR/2019/WD-css-color-4-20191105/">Working Draft of 5 November 2019</a><a class="self-link" href="#changes-from-20191105"></a></h3> <ul> <li>Export some terms for use in other specifications <li>Update requirement from WCAG 2.0 to 2.1 <li>Fully specify Unicode characters used for serialization <li>Define serialization of special named colors <li>Define serialization of device-cmyk() <li>Define serialization of <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color①⑨">color()</a> <li>Fully define RGB serialization, in maximally web-compatible way <li>Define serialization of Lab and LCH <li>Fully define serialization of alpha values <li>Consistency pass to avoid accidental RFC2119 <li>Add IDs to all the examples, to enable referencing <li>Separate resolved color and serialized color sections <li>(Security) ICC profiles have no executable code <li>Define what out-of-range means for profiled colors <li>Clarify out-of-range clamping <li>Add examples of specified values <li>Clarify computed values <li>Resist fingerprinting, with mandatory mappings for deprecated system colors <li>Added explanatory note on history and reason for standardizing X11 colors <li>Correct hwb sample code <li>Add table of DeltaE2000 values for MacBeth patches <li>Add note on ICC profile Internet Media type <li>Add reference to PNG sRGB chunk <li>Clarify CMYK to Lab interconversion <li>Clarify RGB to Lab interconversion <li>More comparison of HSL vs. LCH <li>More description for Rec BT.2020 color space <li>Updated description of prophoto-rgb <li>Removed duplicate "keywords" from Value Definitions section <li>Added an example of an invalid color <li>Added example with multiple fallbacks <li>Assorted typos and markup fixes <li>Clarify handling for undeclared custom color spaces <li>Clarify some examples and explanatory notes <li>Handling for valid and invalid ICC profiles <li>Define handling for images with explicit tagged color space <li>Define color space for 4k, SDR video <li>State that user contrast settings mst take precedence <li>Clarify meaning of system colors outside for forced-color mode <li>Update default style rules <li>Add CIE XYZ color space to <a class="css" data-link-type="maybe" href="#funcdef-color" id="ref-for-funcdef-color②⓪">color()</a> <li>Greater clarity on hue angles, NaN explicitly allowed <li>Improve section on system color pairings, require AA accessible contrast <li>Warn of interaction between overlapping glyphs and the opacity property <li>Correct grammar in color definition <li>Improve description of Highlight/HighlightText <li>Correct prophoto-rgb transfer function <li>More precision for prophoto-rgb primaries <li>Started to define "can’t be displayed" <li>Removed paragraph about canvas surface <li>Added the buttonborder, mark, and marktext system colors <li>Added reverse conversion, sRGB to HWB <li>Clarified polar spaces are cylindrical, not spherical <li>Added an Accessibility Considerations section <li>Started to describe chroma-reduction gamut mapping rather than per-component clipping <li>Corrected white chromaticity for rec2020 <li>Made device-cmyk available by @color-profile; updated CMYK to color algorithm to only use naive conversion as a last resort <li>Added print-oriented CMYK and KCMYOGV examples <li>User-defined color spaces now dashed-ident, making predefined color spaces extensible without clashes <li>Added lab option to the color() function <li>Added normative reference for CIE Lab <li>Clarified that prophoto-rgb uses <a data-link-type="dfn" href="#d50-whitepoint" id="ref-for-d50-whitepoint⑨">D50</a> whitepoint so does not require adaptation <li>Clarified direction of increasing angle in LCH <li>Clarified that color names are ASCII case insensitive <li>Initial value of the "color" property is now CanvasText <li>Removed confusing gray() function per CSS WG resolution <li>Collect scattered definitions into new <a href="#terminology">Color terminology</a> section <li>Add helpful figures and more examples <li>Minor editorial clarifications, spell check, fixing typos, bikeshed markup fixes </ul> <h3 class="no-num heading settled" id="changes-from-20160705">Changes since <a href="http://www.w3.org/TR/2016/WD-css-color-4-20160705/">Working Draft of 05 July 2016</a><a class="self-link" href="#changes-from-20160705"></a></h3> <ul> <li>Changed Lightness in Lab and LCH to be a percentage, for CSS compatibility <li>Clamping of color values clarified <li>Percentage opacity is now allowed <li>Define terms sRGB and linear-light sRGB, for use by other specs <li>Add new list of CSS system colors; renaming Text to CanvasText <li>Make system color keywords compute to themselves <li>Add computed/used entry for system colors <li>Rewrite intro to non-deprecated system colors to center their use around forced-colors mode rather than generic use <li>Consistent hyphenation of predefined color spaces <li>Restore text about non-opaque elements painting at layers even when not positioned <li>Initial value of the "color" property is now black <li>Clarify hue in LCH is modulo 360deg (change now reverted) <li>Clarify allowed range of L in LCH and Lab, and meaning of L=100 <li>Update references for color spaces used in video <li>Add prophoto-rgb predefined color space <li>Correct black and white luminance levels for display-p3 <li>Clarify display-p3 transfer function <li>Add a98-rgb color space, correct table of primary chromaticities <li>Clarify that currentColor’s computed value is not the resolved color <li>Update syntax is examples to conform to latest specification <li>Remove the color-mod() function <li>Drop the "media" from propdef tables <li>Export, and consistently use, "transparent black" and "opaque black" <li>Clarify calculated values such as percents <li>Clarify required precision and rounding behavior for color channels <li>Clarify "color" property has no effect on color font glyphs (unless specifically referenced, e.g. with currentColor) <li>Clarify how color values are resolved <li>Clarify that HSL, HWB and named colors resolve to sRGB <li>Simplify conversion from device-cmyk to sRGB <li>Describe previous, comma-using color syntaxes as "legacy"; change examples to commaless form <li>Remove superfluous requirement that displayed colors be restricted to device gamut (like there was any other option!) <li>Rename P3 to display-p3; avoid claiming this is DCI P3, as these are not the same <li>Improved description of the parameters to the "color()" function <li>Disallow predefined spaces from "@color-profile" identifier <li>Add canonical order to "color", "color-adjust" and "opacity" property definitions <li>Switch definition of alpha compositing from SVG11 to CSS Compositing <li>Clarify sample conversion code is non-normative <li>Add Security and Privacy Considerations <li>Update several references to most current versions <li>Convert inline issues to links to GitHub issues <li>Minor editorial clarifications, formatting and markup improvements </ul> <h3 class="heading settled" id="changes-from-3"> Changes from Colors 3<a class="self-link" href="#changes-from-3"></a></h3> The primary change, compared to CSS Color 3, is that CSS colors are no longer restricted to the narrow gamut of sRGB. To support this, several brand new features have been added: <ol> <li>predefined, wide color gamut RGB color spaces <li><a class="css" data-link-type="maybe" href="#funcdef-lab" id="ref-for-funcdef-lab①⓪">lab()</a>, <a class="css" data-link-type="maybe" href="#funcdef-lch" id="ref-for-funcdef-lch①①">lch()</a>, <a class="css" data-link-type="maybe" href="#funcdef-oklab" id="ref-for-funcdef-oklab⑨">oklab()</a> and <a class="css" data-link-type="maybe" href="#funcdef-oklch" id="ref-for-funcdef-oklch⑧">oklch()</a> functions, for device-independent color </ol> Other technical changes: <ol> <li>Serialization of <a class="production css" data-link-type="type" href="#typedef-color" id="ref-for-typedef-color②⑦"><color></a> is now specified here, rather than in the CSS Object Model <li><a class="css" data-link-type="maybe" href="#funcdef-hwb" id="ref-for-funcdef-hwb①①">hwb()</a> function, for specifying sRGB colors in the HWB notation. <li>Addition of named color <a class="css" data-link-type="maybe" href="#valdef-color-rebeccapurple" id="ref-for-valdef-color-rebeccapurple">rebeccapurple</a>. </ol> In addition, there have been some syntactic changes: <ol> <li><a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑦">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba①②">rgba()</a> functions now accept <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value④②"><number></a> rather than <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value②"><integer></a>. <li><a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①⑦">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla①①">hsla()</a> functions now accept <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#angle-value" id="ref-for-angle-value①"><angle></a> as well as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value④③"><number></a> for hues. <li><a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑧">rgb()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba①③">rgba()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①⑧">hsl()</a> and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla①②">hsla()</a> are now aliases of each other (all of them have an optional alpha). <li><a class="css" data-link-type="maybe" href="#funcdef-rgb" id="ref-for-funcdef-rgb①⑨">rgb()</a>, <a class="css" data-link-type="maybe" href="#funcdef-rgba" id="ref-for-funcdef-rgba①④">rgba()</a>, <a class="css" data-link-type="maybe" href="#funcdef-hsl" id="ref-for-funcdef-hsl①⑨">hsl()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-hsla" id="ref-for-funcdef-hsla①③">hsla()</a> have all gained a new syntax consisting of space-separated arguments and an optional slash-separated opacity. All the color functions use this syntax form now, in keeping with <a href="https://wiki.csswg.org/ideas/functional-notation#general-principles">CSS’s functional-notation design principles</a>. <li>All uses of <a class="production css" data-link-type="type" href="#typedef-color-alpha-value" id="ref-for-typedef-color-alpha-value②⑥"><alpha-value></a> now accept <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③⑦"><percentage></a> as well as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value④④"><number></a>. <li>4 and 8-digit hex colors have been added, to specify transparency. <li>The <a class="css" data-link-type="maybe" href="#valdef-color-none" id="ref-for-valdef-color-none①⑧">none</a> value has been added, to represent powerless components. </ol> <h2 class="heading settled" data-level="19" id="security">19. Security Considerations<a class="self-link" href="#security"></a></h2> The system colors, if they actually correspond to the user’s system colors, pose a security risk, as they make it easier for a malware site to create user interfaces that appear to be from the system. However, as several system colors are now defined to be "generic", this risk is believed to be mitigated. <h2 class="heading settled" data-level="20" id="privacy">20. Privacy Considerations<a class="self-link" href="#privacy"></a></h2> This specification defines "system" colors, which theoretically can expose details of the user’s OS settings, which is a fingerprinting risk. <h2 class="heading settled" data-level="21" id="a11y-sec">21. Accessibility Considerations<a class="self-link" href="#a11y-sec"></a></h2> This specification <a href="#accessibility">encourages authors to not use color alone</a> as a distinguishing feature. This specification <a href="#css-system-colors" id="ref-for-css-system-colors⑨">encourages browsers to ensure adequate contrast for specific system color foreground/background pairs</a>. A harder requirement with specific AA or AAA contrast ratios was considered, but since browsers are often just passing along color choices made by the OS, or selected by users (who may have particular requirements, including lower contrast for people living with migraines or epileptic seizures), the CSSWG was unable to require a specific contrast level. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code class="highlight">class=<c- s>"example"</c-></code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code class="highlight">class=<c- s>"note"</c-></code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code class="highlight">"advisement"</c->></code>, like this: UAs MUST provide an accessible alternative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#valdef-color-a98-rgb">a98-rgb</a>, in § 10.5 <li><a href="#absolute-color">absolute color</a>, in § 4.1 <li><a href="#valdef-color-accentcolor">AccentColor</a>, in § 6.2 <li><a href="#valdef-color-accentcolortext">AccentColorText</a>, in § 6.2 <li><a href="#valdef-color-activeborder">ActiveBorder</a>, in § Unnumbered section <li><a href="#valdef-color-activecaption">ActiveCaption</a>, in § Unnumbered section <li><a href="#valdef-color-activetext">ActiveText</a>, in § 6.2 <li><a href="#additive-color-space">additive color space</a>, in § 2 <li><a href="#valdef-color-aliceblue">aliceblue</a>, in § 6.1 <li><a href="#alpha-channel">alpha channel</a>, in § 4 <li><a href="#alpha-channel">alpha component</a>, in § 4 <li><a href="#typedef-color-alpha-value"><alpha-value></a>, in § 4.2 <li><a href="#analogous-components">analogous components</a>, in § 12.2 <li><a href="#valdef-color-antiquewhite">antiquewhite</a>, in § 6.1 <li><a href="#valdef-color-appworkspace">AppWorkspace</a>, in § Unnumbered section <li><a href="#valdef-color-aqua">aqua</a>, in § 6.1 <li><a href="#valdef-color-aquamarine">aquamarine</a>, in § 6.1 <li><a href="#valdef-color-azure">azure</a>, in § 6.1 <li><a href="#valdef-color-background">Background</a>, in § Unnumbered section <li><a href="#valdef-color-beige">beige</a>, in § 6.1 <li><a href="#valdef-color-bisque">bisque</a>, in § 6.1 <li><a href="#valdef-color-black">black</a>, in § 6.1 <li><a href="#valdef-color-blanchedalmond">blanchedalmond</a>, in § 6.1 <li><a href="#valdef-color-blue">blue</a>, in § 6.1 <li><a href="#valdef-color-blueviolet">blueviolet</a>, in § 6.1 <li><a href="#valdef-color-brown">brown</a>, in § 6.1 <li><a href="#valdef-color-burlywood">burlywood</a>, in § 6.1 <li><a href="#valdef-color-buttonborder">ButtonBorder</a>, in § 6.2 <li><a href="#valdef-color-buttonface">ButtonFace</a>, in § 6.2 <li><a href="#valdef-color-buttonhighlight">ButtonHighlight</a>, in § Unnumbered section <li><a href="#valdef-color-buttonshadow">ButtonShadow</a>, in § Unnumbered section <li><a href="#valdef-color-buttontext">ButtonText</a>, in § 6.2 <li><a href="#valdef-color-cadetblue">cadetblue</a>, in § 6.1 <li><a href="#calibrated">calibrated</a>, in § 2 <li><a href="#can-be-displayed">can be displayed</a>, in § 10.1 <li><a href="#cant-be-displayed">can’t be displayed</a>, in § 10.1 <li><a href="#valdef-color-canvas">Canvas</a>, in § 6.2 <li><a href="#valdef-color-canvastext">CanvasText</a>, in § 6.2 <li><a href="#valdef-color-captiontext">CaptionText</a>, in § Unnumbered section <li><a href="#carried-forward">carried forward</a>, in § 12 <li><a href="#characterized">characterized</a>, in § 2 <li><a href="#valdef-color-chartreuse">chartreuse</a>, in § 6.1 <li><a href="#valdef-color-chocolate">chocolate</a>, in § 6.1 <li><a href="#chromatic-adaptation-transform">chromatic adaptation transform</a>, in § 9.1 <li><a href="#chromaticity">chromaticity</a>, in § 2 <li><a href="#typedef-color"><color></a>, in § 4.1 <li> color <ul> <li><a href="#propdef-color">(property)</a>, in § 3.2 <li><a href="#color">definition of</a>, in § 2 </ul> <li><a href="#funcdef-color">color()</a>, in § 10.1 <li><a href="#typedef-color-base"><color-base></a>, in § 4.1 <li><a href="#typedef-color-function"><color-function></a>, in § 4.1 <li><a href="#color-functions">color functions</a>, in § 4 <li><a href="#color-interpolation-method"><color-interpolation-method></a>, in § 12.1 <li><a href="#typedef-color-space"><color-space></a>, in § 12.1 <li><a href="#color-space">color space</a>, in § 2 <li><a href="#typedef-colorspace-params"><colorspace-params></a>, in § 10.1 <li><a href="#computed-color">computed color</a>, in § 14 <li><a href="#valdef-color-coral">coral</a>, in § 6.1 <li><a href="#valdef-color-cornflowerblue">cornflowerblue</a>, in § 6.1 <li><a href="#valdef-color-cornsilk">cornsilk</a>, in § 6.1 <li><a href="#valdef-color-crimson">crimson</a>, in § 6.1 <li><a href="#css-gamut-map">CSS gamut map</a>, in § 13.2.1 <li><a href="#css-gamut-mapped">css gamut mapped</a>, in § 13.2 <li><a href="#css-gamut-mapping-algorithm">CSS gamut mapping algorithm</a>, in § 13.2 <li><a href="#valdef-color-currentcolor">currentcolor</a>, in § 6.4 <li><a href="#valdef-color-cyan">cyan</a>, in § 6.1 <li><a href="#cylindrical-polar-color">cylindrical polar color</a>, in § 4 <li><a href="#d50-whitepoint">D50</a>, in § 2 <li><a href="#d50-whitepoint">D50 whitepoint</a>, in § 2 <li><a href="#d65-whitepoint">D65</a>, in § 2 <li><a href="#d65-whitepoint">D65 whitepoint</a>, in § 2 <li><a href="#valdef-color-darkblue">darkblue</a>, in § 6.1 <li><a href="#valdef-color-darkcyan">darkcyan</a>, in § 6.1 <li><a href="#valdef-color-darkgoldenrod">darkgoldenrod</a>, in § 6.1 <li><a href="#valdef-color-darkgray">darkgray</a>, in § 6.1 <li><a href="#valdef-color-darkgreen">darkgreen</a>, in § 6.1 <li><a href="#valdef-color-darkgrey">darkgrey</a>, in § 6.1 <li><a href="#valdef-color-darkkhaki">darkkhaki</a>, in § 6.1 <li><a href="#valdef-color-darkmagenta">darkmagenta</a>, in § 6.1 <li><a href="#valdef-color-darkolivegreen">darkolivegreen</a>, in § 6.1 <li><a href="#valdef-color-darkorange">darkorange</a>, in § 6.1 <li><a href="#valdef-color-darkorchid">darkorchid</a>, in § 6.1 <li><a href="#valdef-color-darkred">darkred</a>, in § 6.1 <li><a href="#valdef-color-darksalmon">darksalmon</a>, in § 6.1 <li><a href="#valdef-color-darkseagreen">darkseagreen</a>, in § 6.1 <li><a href="#valdef-color-darkslateblue">darkslateblue</a>, in § 6.1 <li><a href="#valdef-color-darkslategray">darkslategray</a>, in § 6.1 <li><a href="#valdef-color-darkslategrey">darkslategrey</a>, in § 6.1 <li><a href="#valdef-color-darkturquoise">darkturquoise</a>, in § 6.1 <li><a href="#valdef-color-darkviolet">darkviolet</a>, in § 6.1 <li><a href="#decreasing">decreasing</a>, in § 12.4.4 <li><a href="#valdef-color-deeppink">deeppink</a>, in § 6.1 <li><a href="#valdef-color-deepskyblue">deepskyblue</a>, in § 6.1 <li><a href="#typedef-deprecated-color"><deprecated-color></a>, in § Unnumbered section <li><a href="#valdef-color-dimgray">dimgray</a>, in § 6.1 <li><a href="#valdef-color-dimgrey">dimgrey</a>, in § 6.1 <li><a href="#valdef-color-display-p3">display-p3</a>, in § 10.4 <li><a href="#valdef-color-dodgerblue">dodgerblue</a>, in § 6.1 <li><a href="#valdef-color-field">Field</a>, in § 6.2 <li><a href="#valdef-color-fieldtext">FieldText</a>, in § 6.2 <li><a href="#valdef-color-firebrick">firebrick</a>, in § 6.1 <li><a href="#valdef-color-floralwhite">floralwhite</a>, in § 6.1 <li><a href="#valdef-color-forestgreen">forestgreen</a>, in § 6.1 <li><a href="#valdef-color-fuchsia">fuchsia</a>, in § 6.1 <li><a href="#valdef-color-gainsboro">gainsboro</a>, in § 6.1 <li><a href="#gamut">gamut</a>, in § 2 <li><a href="#valdef-color-ghostwhite">ghostwhite</a>, in § 6.1 <li><a href="#valdef-color-gold">gold</a>, in § 6.1 <li><a href="#valdef-color-goldenrod">goldenrod</a>, in § 6.1 <li><a href="#valdef-color-gray">gray</a>, in § 6.1 <li><a href="#valdef-color-graytext">GrayText</a>, in § 6.2 <li><a href="#valdef-color-green">green</a>, in § 6.1 <li><a href="#valdef-color-greenyellow">greenyellow</a>, in § 6.1 <li><a href="#valdef-color-grey">grey</a>, in § 6.1 <li><a href="#typedef-hex-color"><hex-color></a>, in § 5.2 <li><a href="#hex-color">hex color</a>, in § 5.2 <li><a href="#hex-color">hex color notation</a>, in § 5.2 <li><a href="#valdef-color-highlight">Highlight</a>, in § 6.2 <li><a href="#valdef-color-highlighttext">HighlightText</a>, in § 6.2 <li><a href="#valdef-color-honeydew">honeydew</a>, in § 6.1 <li><a href="#host-syntax">host syntax</a>, in § 12.1 <li><a href="#valdef-color-hotpink">hotpink</a>, in § 6.1 <li><a href="#valdef-hsl-hsl">HSL</a>, in § 7 <li><a href="#funcdef-hsl">hsl()</a>, in § 7 <li><a href="#funcdef-hsla">hsla()</a>, in § 7 <li><a href="#color-serialization-html-compatible-serialization-is-requested">HTML-compatible serialization is requested</a>, in § 15.2.1 <li><a href="#typedef-hue"><hue></a>, in § 4.3 <li><a href="#typedef-hue-interpolation-method"><hue-interpolation-method></a>, in § 12.1 <li><a href="#valdef-hwb-hwb">HWB</a>, in § 8 <li><a href="#funcdef-hwb">hwb()</a>, in § 8 <li><a href="#valdef-color-inactiveborder">InactiveBorder</a>, in § Unnumbered section <li><a href="#valdef-color-inactivecaption">InactiveCaption</a>, in § Unnumbered section <li><a href="#valdef-color-inactivecaptiontext">InactiveCaptionText</a>, in § Unnumbered section <li><a href="#increasing">increasing</a>, in § 12.4.3 <li><a href="#valdef-color-indianred">indianred</a>, in § 6.1 <li><a href="#valdef-color-indigo">indigo</a>, in § 6.1 <li><a href="#valdef-color-infobackground">InfoBackground</a>, in § Unnumbered section <li><a href="#valdef-color-infotext">InfoText</a>, in § Unnumbered section <li><a href="#in-gamut">in-gamut</a>, in § 2 <li><a href="#interpolation-color-space">interpolation color space</a>, in § 12 <li><a href="#invalid-color">invalid color</a>, in § 2 <li><a href="#valdef-color-ivory">ivory</a>, in § 6.1 <li><a href="#valdef-color-khaki">khaki</a>, in § 6.1 <li><a href="#valdef-lab-lab">Lab</a>, in § 9.3 <li><a href="#funcdef-lab">lab()</a>, in § 9.3 <li><a href="#valdef-color-lavender">lavender</a>, in § 6.1 <li><a href="#valdef-color-lavenderblush">lavenderblush</a>, in § 6.1 <li><a href="#valdef-color-lawngreen">lawngreen</a>, in § 6.1 <li><a href="#valdef-lch-lch">LCH</a>, in § 9.3 <li><a href="#funcdef-lch">lch()</a>, in § 9.3 <li><a href="#legacy-color-syntax">legacy color syntax</a>, in § 4.1.2 <li><a href="#typedef-legacy-hsla-syntax"><legacy-hsla-syntax></a>, in § 7 <li><a href="#typedef-legacy-hsl-syntax"><legacy-hsl-syntax></a>, in § 7 <li><a href="#typedef-legacy-rgba-syntax"><legacy-rgba-syntax></a>, in § 5.1 <li><a href="#typedef-legacy-rgb-syntax"><legacy-rgb-syntax></a>, in § 5.1 <li><a href="#valdef-color-lemonchiffon">lemonchiffon</a>, in § 6.1 <li><a href="#valdef-color-lightblue">lightblue</a>, in § 6.1 <li><a href="#valdef-color-lightcoral">lightcoral</a>, in § 6.1 <li><a href="#valdef-color-lightcyan">lightcyan</a>, in § 6.1 <li><a href="#valdef-color-lightgoldenrodyellow">lightgoldenrodyellow</a>, in § 6.1 <li><a href="#valdef-color-lightgray">lightgray</a>, in § 6.1 <li><a href="#valdef-color-lightgreen">lightgreen</a>, in § 6.1 <li><a href="#valdef-color-lightgrey">lightgrey</a>, in § 6.1 <li><a href="#valdef-color-lightpink">lightpink</a>, in § 6.1 <li><a href="#valdef-color-lightsalmon">lightsalmon</a>, in § 6.1 <li><a href="#valdef-color-lightseagreen">lightseagreen</a>, in § 6.1 <li><a href="#valdef-color-lightskyblue">lightskyblue</a>, in § 6.1 <li><a href="#valdef-color-lightslategray">lightslategray</a>, in § 6.1 <li><a href="#valdef-color-lightslategrey">lightslategrey</a>, in § 6.1 <li><a href="#valdef-color-lightsteelblue">lightsteelblue</a>, in § 6.1 <li><a href="#valdef-color-lightyellow">lightyellow</a>, in § 6.1 <li><a href="#valdef-color-lime">lime</a>, in § 6.1 <li><a href="#valdef-color-limegreen">limegreen</a>, in § 6.1 <li><a href="#valdef-color-linen">linen</a>, in § 6.1 <li><a href="#valdef-color-linktext">LinkText</a>, in § 6.2 <li><a href="#longer">longer</a>, in § 12.4.2 <li><a href="#luminance">luminance</a>, in § 2 <li><a href="#valdef-color-magenta">magenta</a>, in § 6.1 <li><a href="#valdef-color-mark">Mark</a>, in § 6.2 <li><a href="#valdef-color-marktext">MarkText</a>, in § 6.2 <li><a href="#valdef-color-maroon">maroon</a>, in § 6.1 <li><a href="#valdef-color-mediumaquamarine">mediumaquamarine</a>, in § 6.1 <li><a href="#valdef-color-mediumblue">mediumblue</a>, in § 6.1 <li><a href="#valdef-color-mediumorchid">mediumorchid</a>, in § 6.1 <li><a href="#valdef-color-mediumpurple">mediumpurple</a>, in § 6.1 <li><a href="#valdef-color-mediumseagreen">mediumseagreen</a>, in § 6.1 <li><a href="#valdef-color-mediumslateblue">mediumslateblue</a>, in § 6.1 <li><a href="#valdef-color-mediumspringgreen">mediumspringgreen</a>, in § 6.1 <li><a href="#valdef-color-mediumturquoise">mediumturquoise</a>, in § 6.1 <li><a href="#valdef-color-mediumvioletred">mediumvioletred</a>, in § 6.1 <li><a href="#valdef-color-menu">Menu</a>, in § Unnumbered section <li><a href="#valdef-color-menutext">MenuText</a>, in § Unnumbered section <li><a href="#valdef-color-midnightblue">midnightblue</a>, in § 6.1 <li><a href="#minde">MINDE</a>, in § 13.1.2 <li><a href="#valdef-color-mintcream">mintcream</a>, in § 6.1 <li><a href="#missing-color-component">missing</a>, in § 4.4 <li><a href="#missing-color-component">missing color component</a>, in § 4.4 <li><a href="#missing-color-component">missing component</a>, in § 4.4 <li><a href="#valdef-color-mistyrose">mistyrose</a>, in § 6.1 <li><a href="#valdef-color-moccasin">moccasin</a>, in § 6.1 <li><a href="#modern-color-syntax">modern color syntax</a>, in § 4.1.1 <li><a href="#typedef-modern-hsla-syntax"><modern-hsla-syntax></a>, in § 7 <li><a href="#typedef-modern-hsl-syntax"><modern-hsl-syntax></a>, in § 7 <li><a href="#typedef-modern-rgba-syntax"><modern-rgba-syntax></a>, in § 5.1 <li><a href="#typedef-modern-rgb-syntax"><modern-rgb-syntax></a>, in § 5.1 <li><a href="#typedef-named-color"><named-color></a>, in § 6.1 <li><a href="#named-color">named color</a>, in § 6.1 <li><a href="#valdef-color-navajowhite">navajowhite</a>, in § 6.1 <li><a href="#valdef-color-navy">navy</a>, in § 6.1 <li><a href="#valdef-color-none">none</a>, in § 4.4 <li><a href="#valdef-oklab-oklab">Oklab</a>, in § 9.4 <li><a href="#funcdef-oklab">oklab()</a>, in § 9.4 <li><a href="#valdef-oklch-oklch">Oklch</a>, in § 9.4 <li><a href="#funcdef-oklch">oklch()</a>, in § 9.4 <li><a href="#valdef-color-oldlace">oldlace</a>, in § 6.1 <li><a href="#valdef-color-olive">olive</a>, in § 6.1 <li><a href="#valdef-color-olivedrab">olivedrab</a>, in § 6.1 <li><a href="#propdef-opacity">opacity</a>, in § 3.3 <li><a href="#typedef-opacity-opacity-value"><opacity-value></a>, in § 3.3 <li><a href="#opaque-black">opaque black</a>, in § 4 <li><a href="#valdef-color-orange">orange</a>, in § 6.1 <li><a href="#valdef-color-orangered">orangered</a>, in § 6.1 <li><a href="#valdef-color-orchid">orchid</a>, in § 6.1 <li><a href="#out-of-gamut">out of gamut</a>, in § 2 <li><a href="#valdef-color-palegoldenrod">palegoldenrod</a>, in § 6.1 <li><a href="#valdef-color-palegreen">palegreen</a>, in § 6.1 <li><a href="#valdef-color-paleturquoise">paleturquoise</a>, in § 6.1 <li><a href="#valdef-color-palevioletred">palevioletred</a>, in § 6.1 <li><a href="#valdef-color-papayawhip">papayawhip</a>, in § 6.1 <li><a href="#parse-a-css-color-value">parse a CSS <color> value</a>, in § 4.5 <li><a href="#valdef-color-peachpuff">peachpuff</a>, in § 6.1 <li><a href="#valdef-color-peru">peru</a>, in § 6.1 <li><a href="#valdef-color-pink">pink</a>, in § 6.1 <li><a href="#valdef-color-plum">plum</a>, in § 6.1 <li><a href="#typedef-polar-color-space"><polar-color-space></a>, in § 12.1 <li><a href="#valdef-color-powderblue">powderblue</a>, in § 6.1 <li><a href="#powerless-color-component">powerless</a>, in § 4.4.1 <li><a href="#powerless-color-component">powerless color component</a>, in § 4.4.1 <li><a href="#powerless-color-component">powerless component</a>, in § 4.4.1 <li><a href="#typedef-predefined-rgb"><predefined-rgb></a>, in § 10.1 <li><a href="#typedef-predefined-rgb-params"><predefined-rgb-params></a>, in § 10.1 <li><a href="#premultiplied">premultiplied</a>, in § 12.3 <li><a href="#valdef-color-prophoto-rgb">prophoto-rgb</a>, in § 10.6 <li><a href="#valdef-color-purple">purple</a>, in § 6.1 <li><a href="#typedef-quirky-color"><quirky-color></a>, in § Unnumbered section <li><a href="#valdef-color-rebeccapurple">rebeccapurple</a>, in § 6.1 <li><a href="#valdef-color-rec2020">rec2020</a>, in § 10.7 <li><a href="#typedef-rectangular-color-space"><rectangular-color-space></a>, in § 12.1 <li><a href="#rectangular-orthogonal-color">rectangular orthogonal color</a>, in § 4 <li><a href="#valdef-color-red">red</a>, in § 6.1 <li><a href="#funcdef-rgb">rgb()</a>, in § 5.1 <li><a href="#funcdef-rgba">rgba()</a>, in § 5.1 <li><a href="#valdef-color-rosybrown">rosybrown</a>, in § 6.1 <li><a href="#valdef-color-royalblue">royalblue</a>, in § 6.1 <li><a href="#valdef-color-saddlebrown">saddlebrown</a>, in § 6.1 <li><a href="#valdef-color-salmon">salmon</a>, in § 6.1 <li><a href="#valdef-color-sandybrown">sandybrown</a>, in § 6.1 <li><a href="#valdef-color-scrollbar">Scrollbar</a>, in § Unnumbered section <li><a href="#valdef-color-seagreen">seagreen</a>, in § 6.1 <li><a href="#valdef-color-seashell">seashell</a>, in § 6.1 <li><a href="#valdef-color-selecteditem">SelectedItem</a>, in § 6.2 <li><a href="#valdef-color-selecteditemtext">SelectedItemText</a>, in § 6.2 <li><a href="#shorter">shorter</a>, in § 12.4.1 <li><a href="#valdef-color-sienna">sienna</a>, in § 6.1 <li><a href="#valdef-color-silver">silver</a>, in § 6.1 <li><a href="#valdef-color-skyblue">skyblue</a>, in § 6.1 <li><a href="#valdef-color-slateblue">slateblue</a>, in § 6.1 <li><a href="#valdef-color-slategray">slategray</a>, in § 6.1 <li><a href="#valdef-color-slategrey">slategrey</a>, in § 6.1 <li><a href="#valdef-color-snow">snow</a>, in § 6.1 <li><a href="#valdef-color-springgreen">springgreen</a>, in § 6.1 <li><a href="#sRGB-space">sRGB</a>, in § 10.2 <li><a href="#valdef-color-srgb">srgb</a>, in § 10.2 <li><a href="#sRGB-linear-space">sRGB-linear</a>, in § 10.3 <li><a href="#valdef-color-srgb-linear">srgb-linear</a>, in § 10.3 <li><a href="#valdef-color-steelblue">steelblue</a>, in § 6.1 <li><a href="#typedef-system-color"><system-color></a>, in § 6.2 <li><a href="#system-color-pairings">system color pairings</a>, in § 6.2 <li><a href="#css-system-colors">system colors</a>, in § 6.1 <li><a href="#tagged-image">tagged image</a>, in § 3.4 <li><a href="#valdef-color-tan">tan</a>, in § 6.1 <li><a href="#valdef-color-teal">teal</a>, in § 6.1 <li><a href="#valdef-color-thistle">thistle</a>, in § 6.1 <li><a href="#valdef-color-threeddarkshadow">ThreeDDarkShadow</a>, in § Unnumbered section <li><a href="#valdef-color-threedface">ThreeDFace</a>, in § Unnumbered section <li><a href="#valdef-color-threedhighlight">ThreeDHighlight</a>, in § Unnumbered section <li><a href="#valdef-color-threedlightshadow">ThreeDLightShadow</a>, in § Unnumbered section <li><a href="#valdef-color-threedshadow">ThreeDShadow</a>, in § Unnumbered section <li><a href="#valdef-color-tomato">tomato</a>, in § 6.1 <li><a href="#valdef-color-transparent">transparent</a>, in § 6.3 <li><a href="#transparent-black">transparent black</a>, in § 4 <li><a href="#valdef-color-turquoise">turquoise</a>, in § 6.1 <li><a href="#untagged-image">untagged image</a>, in § 3.5 <li><a href="#untagged-video">untagged video</a>, in § 3.5 <li><a href="#used-color">used color</a>, in § 14 <li><a href="#valid-color">valid color</a>, in § 2 <li><a href="#valdef-color-violet">violet</a>, in § 6.1 <li><a href="#valdef-color-visitedtext">VisitedText</a>, in § 6.2 <li><a href="#valdef-color-wheat">wheat</a>, in § 6.1 <li><a href="#valdef-color-white">white</a>, in § 6.1 <li><a href="#white-point">white point</a>, in § 2 <li><a href="#valdef-color-whitesmoke">whitesmoke</a>, in § 6.1 <li><a href="#valdef-color-window">Window</a>, in § Unnumbered section <li><a href="#valdef-color-windowframe">WindowFrame</a>, in § Unnumbered section <li><a href="#valdef-color-windowtext">WindowText</a>, in § Unnumbered section <li><a href="#valdef-color-xyz">xyz</a>, in § 10.8 <li><a href="#valdef-color-xyz-d50">xyz-d50</a>, in § 10.8 <li><a href="#valdef-color-xyz-d65">xyz-d65</a>, in § 10.8 <li><a href="#typedef-xyz-params"><xyz-params></a>, in § 10.1 <li><a href="#typedef-xyz-space"><xyz-space></a>, in § 10.1 <li><a href="#valdef-color-yellow">yellow</a>, in § 6.1 <li><a href="#valdef-color-yellowgreen">yellowgreen</a>, in § 6.1 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-ANIMATIONS-1]</a> defines the following terms: <ul> <li>animation </ul> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>background <li>background-color </ul> <li> <a data-link-type="biblio">[CSS-BORDERS-4]</a> defines the following terms: <ul> <li>border-bottom-color <li>border-color <li>border-left-color <li>border-right-color <li>border-top-color </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>computed value <li>declared value <li>inherited value <li>initial value <li>specified value <li>used value </ul> <li> <a data-link-type="biblio">[CSS-COLOR-5]</a> defines the following terms: <ul> <li>color-mix() <li>relative color </ul> <li> <a data-link-type="biblio">[CSS-COLOR-ADJUST-1]</a> defines the following terms: <ul> <li>forced colors mode </ul> <li> <a data-link-type="biblio">[CSS-CONDITIONAL-3]</a> defines the following terms: <ul> <li>@supports <li>supports(conditionText) </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-4]</a> defines the following terms: <ul> <li><gradient> </ul> <li> <a data-link-type="biblio">[CSS-SYNTAX-3]</a> defines the following terms: <ul> <li><dimension-token> <li><hash-token> <li><ident-token> <li><number-token> <li>parse </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-4]</a> defines the following terms: <ul> <li>text-emphasis-color </ul> <li> <a data-link-type="biblio">[CSS-TRANSITIONS-1]</a> defines the following terms: <ul> <li>transition </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li># <li>, <li><angle> <li><ident> <li><integer> <li><number> <li><percentage> <li>? <li>calc() <li>canonical unit <li>CSS-wide keywords <li>functional notation <li>infinity <li>keyword <li>NaN <li>{A} <li>| </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>auto <li>stacking context <li>z-index </ul> <li> <a data-link-type="biblio">[CSSOM-1]</a> defines the following terms: <ul> <li>resolved value </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>element <li>quirks mode </ul> <li> <a data-link-type="biblio">[FILTER-EFFECTS-1]</a> defines the following terms: <ul> <li>filter </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>mark </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>string </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-5]</a> defines the following terms: <ul> <li>media feature </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-bradford-cat">[Bradford-CAT] <dd>Ming R. Luo; R. W. G. Hunt. <cite>A Chromatic Adaptation Transform and a Colour Inconstancy Index. Color Research & Application 23(3) 154-158</cite>. June 1998. <dt id="biblio-cielab">[CIELAB] <dd><a href="http://cie.co.at/publications/colorimetry-part-4-cie-1976-lab-colour-space-1"><cite>ISO/CIE 11664-4:2019(E): Colorimetry — Part 4: CIE 1976 L*a*b* colour space</cite></a>. 2019. Published. URL: <a href="http://cie.co.at/publications/colorimetry-part-4-cie-1976-lab-colour-space-1">http://cie.co.at/publications/colorimetry-part-4-cie-1976-lab-colour-space-1</a> <dt id="biblio-colorimetry">[COLORIMETRY] <dd><a href="http://www.cie.co.at/publications/colorimetry-4th-edition"><cite>Colorimetry, Fourth Edition. CIE 015:2018</cite></a>. 2018. URL: <a href="http://www.cie.co.at/publications/colorimetry-4th-edition">http://www.cie.co.at/publications/colorimetry-4th-edition</a> <dt id="biblio-compositing">[Compositing] <dd>Chris Harrelson. <a href="https://drafts.fxtf.org/compositing-1/"><cite>Compositing and Blending Level 1</cite></a>. URL: <a href="https://drafts.fxtf.org/compositing-1/">https://drafts.fxtf.org/compositing-1/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-borders-4">[CSS-BORDERS-4] <dd><a href="https://drafts.csswg.org/css-borders-4/"><cite>CSS Borders and Box Decorations Module Level 4</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-borders-4/">https://drafts.csswg.org/css-borders-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt id="biblio-css-color-adjust-1">[CSS-COLOR-ADJUST-1] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-color-adjust-1/"><cite>CSS Color Adjustment Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-adjust-1/">https://drafts.csswg.org/css-color-adjust-1/</a> <dt id="biblio-css-conditional-3">[CSS-CONDITIONAL-3] <dd>Chris Lilley; David Baron; Elika Etemad. <a href="https://drafts.csswg.org/css-conditional-3/"><cite>CSS Conditional Rules Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-conditional-3/">https://drafts.csswg.org/css-conditional-3/</a> <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://drafts.csswg.org/css-syntax/"><cite>CSS Syntax Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-syntax/">https://drafts.csswg.org/css-syntax/</a> <dt id="biblio-css-text-decor-4">[CSS-TEXT-DECOR-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-text-decor-4/"><cite>CSS Text Decoration Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-decor-4/">https://drafts.csswg.org/css-text-decor-4/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-cssom-1">[CSSOM-1] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://drafts.csswg.org/cssom/"><cite>CSS Object Model (CSSOM)</cite></a>. URL: <a href="https://drafts.csswg.org/cssom/">https://drafts.csswg.org/cssom/</a> <dt id="biblio-display-p3">[Display-P3] <dd>Apple, Inc. <a href="https://www.color.org/chardata/rgb/DisplayP3.xalter"><cite>Display P3</cite></a>. 2022-02. URL: <a href="https://www.color.org/chardata/rgb/DisplayP3.xalter">https://www.color.org/chardata/rgb/DisplayP3.xalter</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> <dt id="biblio-hsl">[HSL] <dd>George H. Joblove, Donald Greenberg. <a href="https://doi.org/10.1145/965139.807362"><cite>Color spaces for computer graphics</cite></a>. August 1978. URL: <a href="https://doi.org/10.1145/965139.807362">https://doi.org/10.1145/965139.807362</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> <dt id="biblio-hwb">[HWB] <dd>Alvy Ray Smith. <a href="http://alvyray.com/Papers/CG/HWB_JGTv208.pdf"><cite>HWB — A More Intuitive Hue-Based Color Model</cite></a>. 1996. URL: <a href="http://alvyray.com/Papers/CG/HWB_JGTv208.pdf">http://alvyray.com/Papers/CG/HWB_JGTv208.pdf</a> <dt id="biblio-icc">[ICC] <dd><a href="http://www.color.org/specification/ICC.1-2022-05.pdf"><cite>ICC.1:2022 (Profile version 4.4.0.0)</cite></a>. May 2022. URL: <a href="http://www.color.org/specification/ICC.1-2022-05.pdf">http://www.color.org/specification/ICC.1-2022-05.pdf</a> <dt id="biblio-infra">[INFRA] <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/"><cite>Infra Standard</cite></a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> <dt id="biblio-itu-r-bt601">[ITU-R-BT.601] <dd><a href="https://www.itu.int/rec/R-REC-BT.601/"><cite>Recommendation ITU-R BT.601-7 (03/2011), Studio encoding parameters of digital television for standard 4:3 and wide screen 16:9 aspect ratios</cite></a>. 8 March 2011. Recommendation. URL: <a href="https://www.itu.int/rec/R-REC-BT.601/">https://www.itu.int/rec/R-REC-BT.601/</a> <dt id="biblio-itu-r-bt709">[ITU-R-BT.709] <dd><a href="https://www.itu.int/rec/R-REC-BT.709/"><cite>Recommendation ITU-R BT.709-6 (06/2015), Parameter values for the HDTV standards for production and international programme exchange</cite></a>. 17 June 2015. Recommendation. URL: <a href="https://www.itu.int/rec/R-REC-BT.709/">https://www.itu.int/rec/R-REC-BT.709/</a> <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5] <dd>Dean Jackson; et al. <a href="https://drafts.csswg.org/mediaqueries-5/"><cite>Media Queries Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/mediaqueries-5/">https://drafts.csswg.org/mediaqueries-5/</a> <dt id="biblio-oklab">[Oklab] <dd>Björn Ottosson. <a href="https://bottosson.github.io/posts/oklab/"><cite>A perceptual color space for image processing</cite></a>. December 2020. URL: <a href="https://bottosson.github.io/posts/oklab/">https://bottosson.github.io/posts/oklab/</a> <dt id="biblio-rec2020">[Rec.2020] <dd><a href="http://www.itu.int/rec/R-REC-BT.2020/en"><cite>Recommendation ITU-R BT.2020-2: Parameter values for ultra-high definition television systems for production and international programme exchange</cite></a>. October 2015. URL: <a href="http://www.itu.int/rec/R-REC-BT.2020/en">http://www.itu.int/rec/R-REC-BT.2020/en</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-romm">[ROMM] <dd><a href="https://www.iso.org/standard/56591.html"><cite>ISO 22028-2:2013 Photography and graphic technology — Extended colour encodings for digital image storage, manipulation and interchange — Part 2: Reference output medium metric RGB colour image encoding (ROMM RGB)</cite></a>. 2013-04. URL: <a href="https://www.iso.org/standard/56591.html">https://www.iso.org/standard/56591.html</a> <dt id="biblio-smpte296">[SMPTE296] <dd><a href="https://doi.org/10.5594/SMPTE.ST296.2012"><cite>ST 296:2012, 1280 × 720 Progressive Image 4:2:2 and 4:4:4 Sample Structure — Analog and Digital Representation and Analog Interface</cite></a>. 17 May 2012. Standard. URL: <a href="https://doi.org/10.5594/SMPTE.ST296.2012">https://doi.org/10.5594/SMPTE.ST296.2012</a> <dt id="biblio-srgb">[SRGB] <dd><a href="https://webstore.iec.ch/publication/6169"><cite>Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB</cite></a>. URL: <a href="https://webstore.iec.ch/publication/6169">https://webstore.iec.ch/publication/6169</a> <dt id="biblio-svg11">[SVG11] <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/"><cite>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</cite></a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1] <dd>David Baron; et al. <a href="https://drafts.csswg.org/css-animations/"><cite>CSS Animations Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-animations/">https://drafts.csswg.org/css-animations/</a> <dt id="biblio-css-color-5">[CSS-COLOR-5] <dd>Chris Lilley; et al. <a href="https://drafts.csswg.org/css-color-5/"><cite>CSS Color Module Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-5/">https://drafts.csswg.org/css-color-5/</a> <dt id="biblio-css-images-4">[CSS-IMAGES-4] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-images-4/"><cite>CSS Images Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-images-4/">https://drafts.csswg.org/css-images-4/</a> <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1] <dd>David Baron; et al. <a href="https://drafts.csswg.org/css-transitions/"><cite>CSS Transitions</cite></a>. URL: <a href="https://drafts.csswg.org/css-transitions/">https://drafts.csswg.org/css-transitions/</a> <dt id="biblio-css3-text-decor">[CSS3-TEXT-DECOR] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-text-decor-3/"><cite>CSS Text Decoration Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-decor-3/">https://drafts.csswg.org/css-text-decor-3/</a> <dt id="biblio-dci-p3">[DCI-P3] <dd><a href="http://ieeexplore.ieee.org/document/7290729/"><cite>SMPTE Recommended Practice - D-Cinema Quality — Reference Projector and Environment</cite></a>. 2011. URL: <a href="http://ieeexplore.ieee.org/document/7290729/">http://ieeexplore.ieee.org/document/7290729/</a> <dt id="biblio-filter-effects-1">[FILTER-EFFECTS-1] <dd>Dirk Schulze; Dean Jackson. <a href="https://drafts.fxtf.org/filter-effects-1/"><cite>Filter Effects Module Level 1</cite></a>. URL: <a href="https://drafts.fxtf.org/filter-effects-1/">https://drafts.fxtf.org/filter-effects-1/</a> <dt id="biblio-jpeg">[JPEG] <dd>Eric Hamilton. <a href="https://www.w3.org/Graphics/JPEG/jfif3.pdf"><cite>JPEG File Interchange Format</cite></a>. September 1992. URL: <a href="https://www.w3.org/Graphics/JPEG/jfif3.pdf">https://www.w3.org/Graphics/JPEG/jfif3.pdf</a> <dt id="biblio-png">[PNG] <dd>Chris Lilley; et al. <a href="https://w3c.github.io/png/"><cite>Portable Network Graphics (PNG) Specification (Third Edition)</cite></a>. URL: <a href="https://w3c.github.io/png/">https://w3c.github.io/png/</a> <dt id="biblio-romm-rgb">[ROMM-RGB] <dd><a href="https://www.color.org/chardata/rgb/rommrgb.xalter"><cite>ROMM RGB</cite></a>. URL: <a href="https://www.color.org/chardata/rgb/rommrgb.xalter">https://www.color.org/chardata/rgb/rommrgb.xalter</a> <dt id="biblio-sharma">[Sharma] <dd>G. Sharma; W. Wu; E. N. Dalal. <a href="https://www.hajim.rochester.edu/ece/sites/gsharma/ciede2000/"><cite>The CIEDE2000 Color-Difference Formula: Implementation Notes, Supplementary Test Data, and Mathematical Observations</cite></a>. February 2005. URL: <a href="https://www.hajim.rochester.edu/ece/sites/gsharma/ciede2000/">https://www.hajim.rochester.edu/ece/sites/gsharma/ciede2000/</a> <dt id="biblio-tiff">[TIFF] <dd><a href="https://www.loc.gov/preservation/digital/formats/fdd/fdd000022.shtml"><cite>TIFF Revision 6.0</cite></a>. 3 June 1992. URL: <a href="https://www.loc.gov/preservation/digital/formats/fdd/fdd000022.shtml">https://www.loc.gov/preservation/digital/formats/fdd/fdd000022.shtml</a> <dt id="biblio-wcag21">[WCAG21] <dd>Michael Cooper; et al. <a href="https://w3c.github.io/wcag/guidelines/22/"><cite>Web Content Accessibility Guidelines (WCAG) 2.1</cite></a>. URL: <a href="https://w3c.github.io/wcag/guidelines/22/">https://w3c.github.io/wcag/guidelines/22/</a> <dt id="biblio-wolfe">[Wolfe] <dd>Geoff Wolfe. <a href="http://www.realtimerendering.com/blog/2011-color-and-imaging-conference-part-vi-special-session/"><cite>Design and Optimization of the ProPhoto RGB Color Encodings</cite></a>. 2011-12-21. URL: <a href="http://www.realtimerendering.com/blog/2011-color-and-imaging-conference-part-vi-special-session/">http://www.realtimerendering.com/blog/2011-color-and-imaging-conference-part-vi-special-session/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-color" id="ref-for-propdef-color⑨">color</a> <td><color> <td>CanvasText <td>all elements and text <td>yes <td>N/A <td>by computed value type <td>per grammar <td>computed color, see resolving color values <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-opacity" id="ref-for-propdef-opacity⑦">opacity</a> <td><opacity-value> <td>1 <td>all elements <td>no <td>map to the range [0,1] <td>by computed value type <td>per grammar <td>specified number, clamped to the range [0,1] </table> </div> <details class="mdn-anno unpositioned" data-anno-for="the-color-property"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" title="The color CSS property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.">color</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE3+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="transparency"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/opacity" title="The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.">opacity</a> In all current engines. <div class="support"> Firefox1+Safari2+Chrome1+ <hr> Opera9+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/opacity" title="The opacity attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.">Attribute/opacity</a> In no current engines. <div class="support"> Firefox?Safari?Chrome? <hr> Opera?Edge? <hr> Edge (Legacy)?IE? <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="color-function"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color" title="The color() functional notation allows a color to be specified in a particular, specified colorspace rather than the implicit sRGB colorspace that most of the other color functions operate in.">color_value/color</a> In all current engines. <div class="support"> Firefox113+Safari15+Chrome111+ <hr> Opera?Edge111+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="currentcolor-color"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor" title="The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.">color_value#currentcolor</a> In all current engines. <div class="support"> Firefox1.5+Safari4+Chrome1+ <hr> Opera9.5+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="the-hsl-notation"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl" title="The hsl() functional notation expresses an sRGB color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.">color_value/hsl</a> In all current engines. <div class="support"> Firefox1+Safari3.1+Chrome1+ <hr> Opera9.5+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="rgb-functions"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla" title="The hsl() functional notation expresses an sRGB color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.">color_value/hsla</a> In all current engines. <div class="support"> Firefox3+Safari3.1+Chrome1+ <hr> Opera10+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb" title="The rgb() functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.">color_value/rgb</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgba" title="The rgb() functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.">color_value/rgba</a> In all current engines. <div class="support"> Firefox3+Safari3.1+Chrome1+ <hr> Opera10+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="the-hwb-notation"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb" title="The hwb() functional notation expresses a given color according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency.">color_value/hwb</a> In all current engines. <div class="support"> Firefox96+Safari15+Chrome101+ <hr> Opera?Edge101+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="lab-colors"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab" title="The lab() functional notation expresses a given color in the CIE L*a*b* color space. Lab represents the entire range of color that humans can see.">color_value/lab</a> In all current engines. <div class="support"> Firefox113+Safari15+Chrome111+ <hr> Opera?Edge111+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch" title="The lch() functional notation expresses a given color in the LCH color space. It has the same L axis as lab(), but uses polar coordinates C (Chroma) and H (Hue).">color_value/lch</a> In all current engines. <div class="support"> Firefox113+Safari15+Chrome111+ <hr> Opera?Edge111+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="named-colors"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color" title="The <named-color> CSS data type is the name of a color, such as red, blue, black, or lightseagreen. Syntactically, a <named-color> is an <ident>.">named-color</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE3+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="ok-lab"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab" title="The oklab() functional notation expresses a given color in the Oklab color space, which attempts to mimic how color is perceived by the human eye. The oklab() works with a Cartesian coordinate system on the Oklab color space, the a- and b-axes. If you want a polar color system, chroma and hue, use oklch().">color_value/oklab</a> In all current engines. <div class="support"> Firefox113+Safari15.4+Chrome111+ <hr> Opera?Edge111+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch" title="The oklch() functional notation expresses a given color in the Oklch color space. It has the same L axis as oklab(), but uses polar coordinates C (Chroma) and H (Hue).">color_value/oklch</a> In all current engines. <div class="support"> Firefox113+Safari15.4+Chrome111+ <hr> Opera?Edge111+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="hex-notation"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color" title="The <hex-color> CSS data type is a notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency.">hex-color</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE3+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="css-system-colors"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/system-color" title="The <system-color> CSS data type usually reflects the default color choices used for the different parts of a web page.">system-color</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE3+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="transparent-color"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color#transparent" title="The <named-color> CSS data type is the name of a color, such as red, blue, black, or lightseagreen. Syntactically, a <named-color> is an <ident>.">named-color#transparent</a> In all current engines. <div class="support"> Firefox3+Safari3.1+Chrome1+ <hr> Opera10+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="color-syntax"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" title="The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.">color_value</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE3+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "0190963b": {"dfnID":"0190963b","dfnText":"<hash-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-hash-token"}],"title":"5.2. \nThe RGB Hexadecimal Notations: #RRGGBB"}],"url":"https://drafts.csswg.org/css-syntax-3/#typedef-hash-token"}, "04aee887": {"dfnID":"04aee887","dfnText":"border-left-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-color"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-borders-4/#propdef-border-left-color"}, "060efe1f": {"dfnID":"060efe1f","dfnText":"border-top-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-color"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-borders-4/#propdef-border-top-color"}, "0698d556": {"dfnID":"0698d556","dfnText":"string","external":true,"refSections":[{"refs":[{"id":"ref-for-string"}],"title":"4.5. \nParsing a <color> Value"}],"url":"https://infra.spec.whatwg.org/#string"}, "07308da5": {"dfnID":"07308da5","dfnText":"<ident-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-ident-token"},{"id":"ref-for-typedef-ident-token\u2460"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-syntax-3/#typedef-ident-token"}, "11fb4d5b": {"dfnID":"11fb4d5b","dfnText":"background-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-color"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color"}, "15f5b381": {"dfnID":"15f5b381","dfnText":"<percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-percentage-value"},{"id":"ref-for-percentage-value\u2460"}],"title":"3.3. \nTransparency: the opacity property"},{"refs":[{"id":"ref-for-percentage-value\u2461"}],"title":"4.1.1. \nModern (Space-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-percentage-value\u2462"}],"title":"4.1.2. \nLegacy (Comma-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-percentage-value\u2463"}],"title":"4.2. \nRepresenting Transparency in Colors: the <alpha-value> syntax"},{"refs":[{"id":"ref-for-percentage-value\u2464"},{"id":"ref-for-percentage-value\u2465"},{"id":"ref-for-percentage-value\u2466"},{"id":"ref-for-percentage-value\u2467"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-percentage-value\u2468"},{"id":"ref-for-percentage-value\u2460\u24ea"},{"id":"ref-for-percentage-value\u2460\u2460"},{"id":"ref-for-percentage-value\u2460\u2461"},{"id":"ref-for-percentage-value\u2460\u2462"},{"id":"ref-for-percentage-value\u2460\u2463"},{"id":"ref-for-percentage-value\u2460\u2464"},{"id":"ref-for-percentage-value\u2460\u2465"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-percentage-value\u2460\u2466"},{"id":"ref-for-percentage-value\u2460\u2467"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-percentage-value\u2460\u2468"},{"id":"ref-for-percentage-value\u2461\u24ea"},{"id":"ref-for-percentage-value\u2461\u2460"},{"id":"ref-for-percentage-value\u2461\u2461"},{"id":"ref-for-percentage-value\u2461\u2462"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-percentage-value\u2461\u2463"},{"id":"ref-for-percentage-value\u2461\u2464"},{"id":"ref-for-percentage-value\u2461\u2465"},{"id":"ref-for-percentage-value\u2461\u2466"},{"id":"ref-for-percentage-value\u2461\u2467"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-percentage-value\u2461\u2468"},{"id":"ref-for-percentage-value\u2462\u24ea"},{"id":"ref-for-percentage-value\u2462\u2460"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-percentage-value\u2462\u2461"}],"title":"14.2. \nResolving Lab and LCH values"},{"refs":[{"id":"ref-for-percentage-value\u2462\u2462"}],"title":"14.3. \nResolving Oklab and Oklch values"},{"refs":[{"id":"ref-for-percentage-value\u2462\u2463"}],"title":"14.4. \nResolving values of the color() function"},{"refs":[{"id":"ref-for-percentage-value\u2462\u2464"}],"title":"15.1. \nSerializing alpha values"},{"refs":[{"id":"ref-for-percentage-value\u2462\u2465"}],"title":"15.2.2. CSS serialization of sRGB values"},{"refs":[{"id":"ref-for-percentage-value\u2462\u2466"}],"title":"\nChanges from Colors 3"}],"url":"https://drafts.csswg.org/css-values-4/#percentage-value"}, "16310992": {"dfnID":"16310992","dfnText":"<number>","external":true,"refSections":[{"refs":[{"id":"ref-for-number-value"},{"id":"ref-for-number-value\u2460"},{"id":"ref-for-number-value\u2461"}],"title":"3.3. \nTransparency: the opacity property"},{"refs":[{"id":"ref-for-number-value\u2462"}],"title":"4.1.1. \nModern (Space-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-number-value\u2463"}],"title":"4.1.2. \nLegacy (Comma-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-number-value\u2464"}],"title":"4.2. \nRepresenting Transparency in Colors: the <alpha-value> syntax"},{"refs":[{"id":"ref-for-number-value\u2465"}],"title":"4.3. \nRepresenting Cylindrical-coordinate Hues: the <hue> syntax"},{"refs":[{"id":"ref-for-number-value\u2466"},{"id":"ref-for-number-value\u2467"},{"id":"ref-for-number-value\u2468"},{"id":"ref-for-number-value\u2460\u24ea"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-number-value\u2460\u2460"},{"id":"ref-for-number-value\u2460\u2461"},{"id":"ref-for-number-value\u2460\u2462"},{"id":"ref-for-number-value\u2460\u2463"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-number-value\u2460\u2464"},{"id":"ref-for-number-value\u2460\u2465"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-number-value\u2460\u2466"},{"id":"ref-for-number-value\u2460\u2467"},{"id":"ref-for-number-value\u2460\u2468"},{"id":"ref-for-number-value\u2461\u24ea"},{"id":"ref-for-number-value\u2461\u2460"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-number-value\u2461\u2461"},{"id":"ref-for-number-value\u2461\u2462"},{"id":"ref-for-number-value\u2461\u2463"},{"id":"ref-for-number-value\u2461\u2464"},{"id":"ref-for-number-value\u2461\u2465"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-number-value\u2461\u2466"},{"id":"ref-for-number-value\u2461\u2467"},{"id":"ref-for-number-value\u2461\u2468"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-number-value\u2462\u24ea"}],"title":"14.2. \nResolving Lab and LCH values"},{"refs":[{"id":"ref-for-number-value\u2462\u2460"}],"title":"14.3. \nResolving Oklab and Oklch values"},{"refs":[{"id":"ref-for-number-value\u2462\u2461"}],"title":"14.4. \nResolving values of the color() function"},{"refs":[{"id":"ref-for-number-value\u2462\u2462"},{"id":"ref-for-number-value\u2462\u2463"},{"id":"ref-for-number-value\u2462\u2464"}],"title":"15.1. \nSerializing alpha values"},{"refs":[{"id":"ref-for-number-value\u2462\u2465"},{"id":"ref-for-number-value\u2462\u2466"},{"id":"ref-for-number-value\u2462\u2467"}],"title":"15.2.2. CSS serialization of sRGB values"},{"refs":[{"id":"ref-for-number-value\u2462\u2468"}],"title":"15.3. \nSerializing Lab and LCH values"},{"refs":[{"id":"ref-for-number-value\u2463\u24ea"}],"title":"15.4. \nSerializing Oklab and Oklch values"},{"refs":[{"id":"ref-for-number-value\u2463\u2460"}],"title":"15.5. \nSerializing values of the color() function"},{"refs":[{"id":"ref-for-number-value\u2463\u2461"},{"id":"ref-for-number-value\u2463\u2462"},{"id":"ref-for-number-value\u2463\u2463"}],"title":"\nChanges from Colors 3"}],"url":"https://drafts.csswg.org/css-values-4/#number-value"}, "17fc5603": {"dfnID":"17fc5603","dfnText":"canonical unit","external":true,"refSections":[{"refs":[{"id":"ref-for-canonical-unit"}],"title":"4.3. \nRepresenting Cylindrical-coordinate Hues: the <hue> syntax"}],"url":"https://drafts.csswg.org/css-values-4/#canonical-unit"}, "1cf918c1": {"dfnID":"1cf918c1","dfnText":"specified value","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-value"}],"title":"14. \nResolving <color> Values"}],"url":"https://drafts.csswg.org/css-cascade-5/#specified-value"}, "1fb62f09": {"dfnID":"1fb62f09","dfnText":"media feature","external":true,"refSections":[{"refs":[{"id":"ref-for-media-feature"}],"title":"6.2. \nSystem Colors"}],"url":"https://drafts.csswg.org/mediaqueries-5/#media-feature"}, "252034b5": {"dfnID":"252034b5","dfnText":"relative color","external":true,"refSections":[{"refs":[{"id":"ref-for-relative-color"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"https://drafts.csswg.org/css-color-5/#relative-color"}, "27d9b7ea": {"dfnID":"27d9b7ea","dfnText":"element","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-element"}],"title":"4.5. \nParsing a <color> Value"}],"url":"https://dom.spec.whatwg.org/#concept-element"}, "29da74f9": {"dfnID":"29da74f9","dfnText":"border-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-color"}],"title":"3.2. \nForeground Color: the color property"},{"refs":[{"id":"ref-for-propdef-border-color\u2460"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-borders-4/#propdef-border-color"}, "2c3918d9": {"dfnID":"2c3918d9","dfnText":"supports(conditionText)","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-css-supports-conditiontext"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-conditional-3/#dom-css-supports-conditiontext"}, "3559c926": {"dfnID":"3559c926","dfnText":"<angle>","external":true,"refSections":[{"refs":[{"id":"ref-for-angle-value"}],"title":"4.3. \nRepresenting Cylindrical-coordinate Hues: the <hue> syntax"},{"refs":[{"id":"ref-for-angle-value\u2460"}],"title":"\nChanges from Colors 3"}],"url":"https://drafts.csswg.org/css-values-4/#angle-value"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.1. \nValue Definitions"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "4c5eb577": {"dfnID":"4c5eb577","dfnText":"transition","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-transition"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"https://drafts.csswg.org/css-transitions-1/#propdef-transition"}, "4fe61159": {"dfnID":"4fe61159","dfnText":"resolved value","external":true,"refSections":[{"refs":[{"id":"ref-for-resolved-value"}],"title":"14. \nResolving <color> Values"}],"url":"https://drafts.csswg.org/cssom-1/#resolved-value"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"},{"id":"ref-for-mult-opt\u2460"},{"id":"ref-for-mult-opt\u2461"},{"id":"ref-for-mult-opt\u2462"},{"id":"ref-for-mult-opt\u2463"},{"id":"ref-for-mult-opt\u2464"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-mult-opt\u2465"},{"id":"ref-for-mult-opt\u2466"},{"id":"ref-for-mult-opt\u2467"},{"id":"ref-for-mult-opt\u2468"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-mult-opt\u2460\u24ea"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-mult-opt\u2460\u2460"},{"id":"ref-for-mult-opt\u2460\u2461"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-mult-opt\u2460\u2462"},{"id":"ref-for-mult-opt\u2460\u2463"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-mult-opt\u2460\u2464"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-mult-opt\u2460\u2465"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "559a90f4": {"dfnID":"559a90f4","dfnText":"NaN","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-calc-nan"}],"title":"14.1. \nResolving sRGB values"}],"url":"https://drafts.csswg.org/css-values-4/#valdef-calc-nan"}, "584e9c31": {"dfnID":"584e9c31","dfnText":"calc()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-calc"},{"id":"ref-for-funcdef-calc\u2460"}],"title":"14.1. \nResolving sRGB values"}],"url":"https://drafts.csswg.org/css-values-4/#funcdef-calc"}, "64e35b5b": {"dfnID":"64e35b5b","dfnText":"border-right-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-color"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-borders-4/#propdef-border-right-color"}, "68487d22": {"dfnID":"68487d22","dfnText":"#","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-comma"},{"id":"ref-for-mult-comma\u2460"},{"id":"ref-for-mult-comma\u2461"},{"id":"ref-for-mult-comma\u2462"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"}],"url":"https://drafts.csswg.org/css-values-4/#mult-comma"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"3.3. \nTransparency: the opacity property"},{"refs":[{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"},{"id":"ref-for-comb-one\u2465"},{"id":"ref-for-comb-one\u2466"},{"id":"ref-for-comb-one\u2467"},{"id":"ref-for-comb-one\u2468"},{"id":"ref-for-comb-one\u2460\u24ea"},{"id":"ref-for-comb-one\u2460\u2460"},{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"},{"id":"ref-for-comb-one\u2460\u2463"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-comb-one\u2460\u2464"}],"title":"4.2. \nRepresenting Transparency in Colors: the <alpha-value> syntax"},{"refs":[{"id":"ref-for-comb-one\u2460\u2465"}],"title":"4.3. \nRepresenting Cylindrical-coordinate Hues: the <hue> syntax"},{"refs":[{"id":"ref-for-comb-one\u2460\u2466"},{"id":"ref-for-comb-one\u2460\u2467"},{"id":"ref-for-comb-one\u2460\u2468"},{"id":"ref-for-comb-one\u2461\u24ea"},{"id":"ref-for-comb-one\u2461\u2460"},{"id":"ref-for-comb-one\u2461\u2461"},{"id":"ref-for-comb-one\u2461\u2462"},{"id":"ref-for-comb-one\u2461\u2463"},{"id":"ref-for-comb-one\u2461\u2464"},{"id":"ref-for-comb-one\u2461\u2465"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-comb-one\u2461\u2466"},{"id":"ref-for-comb-one\u2461\u2467"},{"id":"ref-for-comb-one\u2461\u2468"},{"id":"ref-for-comb-one\u2462\u24ea"},{"id":"ref-for-comb-one\u2462\u2460"},{"id":"ref-for-comb-one\u2462\u2461"},{"id":"ref-for-comb-one\u2462\u2462"},{"id":"ref-for-comb-one\u2462\u2463"},{"id":"ref-for-comb-one\u2462\u2464"},{"id":"ref-for-comb-one\u2462\u2465"},{"id":"ref-for-comb-one\u2462\u2466"},{"id":"ref-for-comb-one\u2462\u2467"},{"id":"ref-for-comb-one\u2462\u2468"},{"id":"ref-for-comb-one\u2463\u24ea"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-comb-one\u2463\u2460"},{"id":"ref-for-comb-one\u2463\u2461"},{"id":"ref-for-comb-one\u2463\u2462"},{"id":"ref-for-comb-one\u2463\u2463"},{"id":"ref-for-comb-one\u2463\u2464"},{"id":"ref-for-comb-one\u2463\u2465"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-comb-one\u2463\u2466"},{"id":"ref-for-comb-one\u2463\u2467"},{"id":"ref-for-comb-one\u2463\u2468"},{"id":"ref-for-comb-one\u2464\u24ea"},{"id":"ref-for-comb-one\u2464\u2460"},{"id":"ref-for-comb-one\u2464\u2461"},{"id":"ref-for-comb-one\u2464\u2462"},{"id":"ref-for-comb-one\u2464\u2463"},{"id":"ref-for-comb-one\u2464\u2464"},{"id":"ref-for-comb-one\u2464\u2465"},{"id":"ref-for-comb-one\u2464\u2466"},{"id":"ref-for-comb-one\u2464\u2467"},{"id":"ref-for-comb-one\u2464\u2468"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-comb-one\u2465\u24ea"},{"id":"ref-for-comb-one\u2465\u2460"},{"id":"ref-for-comb-one\u2465\u2461"},{"id":"ref-for-comb-one\u2465\u2462"},{"id":"ref-for-comb-one\u2465\u2463"},{"id":"ref-for-comb-one\u2465\u2464"},{"id":"ref-for-comb-one\u2465\u2465"},{"id":"ref-for-comb-one\u2465\u2466"},{"id":"ref-for-comb-one\u2465\u2467"},{"id":"ref-for-comb-one\u2465\u2468"},{"id":"ref-for-comb-one\u2466\u24ea"},{"id":"ref-for-comb-one\u2466\u2460"},{"id":"ref-for-comb-one\u2466\u2461"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-comb-one\u2466\u2462"},{"id":"ref-for-comb-one\u2466\u2463"},{"id":"ref-for-comb-one\u2466\u2464"},{"id":"ref-for-comb-one\u2466\u2465"},{"id":"ref-for-comb-one\u2466\u2466"},{"id":"ref-for-comb-one\u2466\u2467"},{"id":"ref-for-comb-one\u2466\u2468"},{"id":"ref-for-comb-one\u2467\u24ea"},{"id":"ref-for-comb-one\u2467\u2460"},{"id":"ref-for-comb-one\u2467\u2461"},{"id":"ref-for-comb-one\u2467\u2462"},{"id":"ref-for-comb-one\u2467\u2463"},{"id":"ref-for-comb-one\u2467\u2464"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-comb-one\u2467\u2465"},{"id":"ref-for-comb-one\u2467\u2466"},{"id":"ref-for-comb-one\u2467\u2467"},{"id":"ref-for-comb-one\u2467\u2468"},{"id":"ref-for-comb-one\u2468\u24ea"},{"id":"ref-for-comb-one\u2468\u2460"},{"id":"ref-for-comb-one\u2468\u2461"},{"id":"ref-for-comb-one\u2468\u2462"},{"id":"ref-for-comb-one\u2468\u2463"},{"id":"ref-for-comb-one\u2468\u2464"},{"id":"ref-for-comb-one\u2468\u2465"},{"id":"ref-for-comb-one\u2468\u2466"},{"id":"ref-for-comb-one\u2468\u2467"},{"id":"ref-for-comb-one\u2468\u2468"},{"id":"ref-for-comb-one\u2460\u24ea\u24ea"},{"id":"ref-for-comb-one\u2460\u24ea\u2460"},{"id":"ref-for-comb-one\u2460\u24ea\u2461"},{"id":"ref-for-comb-one\u2460\u24ea\u2462"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "70c9f859": {"dfnID":"70c9f859","dfnText":"<integer>","external":true,"refSections":[{"refs":[{"id":"ref-for-integer-value"},{"id":"ref-for-integer-value\u2460"}],"title":"15.2.2. CSS serialization of sRGB values"},{"refs":[{"id":"ref-for-integer-value\u2461"}],"title":"\nChanges from Colors 3"}],"url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "76c4403d": {"dfnID":"76c4403d","dfnText":"parse","external":true,"refSections":[{"refs":[{"id":"ref-for-css-parse-something-according-to-a-css-grammar"}],"title":"4.5. \nParsing a <color> Value"}],"url":"https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar"}, "7bb914ec": {"dfnID":"7bb914ec","dfnText":"border-bottom-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-color"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-borders-4/#propdef-border-bottom-color"}, "7c8e67c1": {"dfnID":"7c8e67c1","dfnText":"declared value","external":true,"refSections":[{"refs":[{"id":"ref-for-declared-value"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-declared-value\u2460"},{"id":"ref-for-declared-value\u2461"}],"title":"15.2. \nSerializing sRGB values"}],"url":"https://drafts.csswg.org/css-cascade-5/#declared-value"}, "8025f703": {"dfnID":"8025f703","dfnText":"text-emphasis-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-emphasis-color"}],"title":"3.2. \nForeground Color: the color property"},{"refs":[{"id":"ref-for-propdef-text-emphasis-color\u2460"}],"title":"6.4. \nThe currentcolor keyword"}],"url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-emphasis-color"}, "80a98d6e": {"dfnID":"80a98d6e","dfnText":"mark","external":true,"refSections":[{"refs":[{"id":"ref-for-the-mark-element"},{"id":"ref-for-the-mark-element\u2460"}],"title":"6.2. \nSystem Colors"}],"url":"https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element"}, "8ca32f09": {"dfnID":"8ca32f09","dfnText":"functional notation","external":true,"refSections":[{"refs":[{"id":"ref-for-functional-notation"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-functional-notation\u2460"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-values-4/#functional-notation"}, "9213678e": {"dfnID":"9213678e","dfnText":"<ident>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-ident"},{"id":"ref-for-typedef-ident\u2460"}],"title":"6.1. \nNamed Colors"},{"refs":[{"id":"ref-for-typedef-ident\u2461"},{"id":"ref-for-typedef-ident\u2462"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-typedef-ident\u2463"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"https://drafts.csswg.org/css-values-4/#typedef-ident"}, "92700be8": {"dfnID":"92700be8","dfnText":"<number-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-number-token"},{"id":"ref-for-typedef-number-token\u2460"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-syntax-3/#typedef-number-token"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"3.3. \nTransparency: the opacity property"},{"refs":[{"id":"ref-for-computed-value\u2460"}],"title":"14. \nResolving <color> Values"},{"refs":[{"id":"ref-for-computed-value\u2461"}],"title":"15.3. \nSerializing Lab and LCH values"},{"refs":[{"id":"ref-for-computed-value\u2462"}],"title":"15.4. \nSerializing Oklab and Oklch values"},{"refs":[{"id":"ref-for-computed-value\u2463"}],"title":"15.5. \nSerializing values of the color() function"},{"refs":[{"id":"ref-for-computed-value\u2464"}],"title":"15.6. \nSerializing other colors"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9ea6bed2": {"dfnID":"9ea6bed2","dfnText":"initial value","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-value"}],"title":"4.5. \nParsing a <color> Value"}],"url":"https://drafts.csswg.org/css-cascade-5/#initial-value"}, "9f184b64": {"dfnID":"9f184b64","dfnText":"filter","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-filter"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"https://drafts.fxtf.org/filter-effects-1/#propdef-filter"}, "9f9120ff": {"dfnID":"9f9120ff","dfnText":",","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-comma"},{"id":"ref-for-comb-comma\u2460"},{"id":"ref-for-comb-comma\u2461"},{"id":"ref-for-comb-comma\u2462"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-comb-comma\u2463"},{"id":"ref-for-comb-comma\u2464"},{"id":"ref-for-comb-comma\u2465"},{"id":"ref-for-comb-comma\u2466"},{"id":"ref-for-comb-comma\u2467"},{"id":"ref-for-comb-comma\u2468"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"}],"url":"https://drafts.csswg.org/css-values-4/#comb-comma"}, "a4eb3c57": {"dfnID":"a4eb3c57","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"}],"title":"3.2. \nForeground Color: the color property"},{"refs":[{"id":"ref-for-used-value\u2460"}],"title":"6.4. \nThe currentcolor keyword"},{"refs":[{"id":"ref-for-used-value\u2461"},{"id":"ref-for-used-value\u2462"}],"title":"14. \nResolving <color> Values"}],"url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "a63375cb": {"dfnID":"a63375cb","dfnText":"<dimension-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-dimension-token"},{"id":"ref-for-typedef-dimension-token\u2460"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token"}, "abb10c72": {"dfnID":"abb10c72","dfnText":"forced colors mode","external":true,"refSections":[{"refs":[{"id":"ref-for-forced-colors-mode"}],"title":"6.2. \nSystem Colors"}],"url":"https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode"}, "absolute-color": {"dfnID":"absolute-color","dfnText":"absolute color","external":false,"refSections":[{"refs":[{"id":"ref-for-absolute-color"}],"title":"4.1.1. \nModern (Space-separated) Color Function Syntax"}],"url":"#absolute-color"}, "additive-color-space": {"dfnID":"additive-color-space","dfnText":"additive color space","external":false,"refSections":[],"url":"#additive-color-space"}, "alpha-channel": {"dfnID":"alpha-channel","dfnText":"alpha component","external":false,"refSections":[{"refs":[{"id":"ref-for-alpha-channel"},{"id":"ref-for-alpha-channel\u2460"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-alpha-channel\u2461"},{"id":"ref-for-alpha-channel\u2462"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"}],"url":"#alpha-channel"}, "analogous-components": {"dfnID":"analogous-components","dfnText":"analogous components","external":false,"refSections":[{"refs":[{"id":"ref-for-analogous-components"}],"title":"12. \nColor Interpolation"},{"refs":[{"id":"ref-for-analogous-components\u2460"}],"title":"12.2. \nInterpolating with Missing Components"}],"url":"#analogous-components"}, "b0d8ebd9": {"dfnID":"b0d8ebd9","dfnText":"{A}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num"},{"id":"ref-for-mult-num\u2460"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-mult-num\u2461"},{"id":"ref-for-mult-num\u2462"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"https://drafts.csswg.org/css-values-4/#mult-num"}, "c1ebc639": {"dfnID":"c1ebc639","dfnText":"@supports","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-supports"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports"}, "c82d6e13": {"dfnID":"c82d6e13","dfnText":"z-index","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-z-index"}],"title":"3.3. \nTransparency: the opacity property"}],"url":"https://drafts.csswg.org/css2/#propdef-z-index"}, "c8dc22e7": {"dfnID":"c8dc22e7","dfnText":"keyword","external":true,"refSections":[{"refs":[{"id":"ref-for-css-keyword"}],"title":"6.2. \nSystem Colors"}],"url":"https://drafts.csswg.org/css-values-4/#css-keyword"}, "calibrated": {"dfnID":"calibrated","dfnText":"calibrated","external":false,"refSections":[{"refs":[{"id":"ref-for-calibrated"}],"title":"2. Color Terminology"}],"url":"#calibrated"}, "can-be-displayed": {"dfnID":"can-be-displayed","dfnText":"can be displayed","external":false,"refSections":[{"refs":[{"id":"ref-for-can-be-displayed"}],"title":"11. \nConverting Colors"}],"url":"#can-be-displayed"}, "cant-be-displayed": {"dfnID":"cant-be-displayed","dfnText":"can\u2019t be displayed","external":false,"refSections":[{"refs":[{"id":"ref-for-cant-be-displayed"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#cant-be-displayed"}, "carried-forward": {"dfnID":"carried-forward","dfnText":"carried forward","external":false,"refSections":[{"refs":[{"id":"ref-for-carried-forward"}],"title":"12. \nColor Interpolation"}],"url":"#carried-forward"}, "cfdf030c": {"dfnID":"cfdf030c","dfnText":"color-mix()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-color-mix"}],"title":"4.4. \n\u201cMissing\u201d Color Components and the none Keyword"},{"refs":[{"id":"ref-for-funcdef-color-mix\u2460"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-funcdef-color-mix\u2461"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-color-5/#funcdef-color-mix"}, "characterized": {"dfnID":"characterized","dfnText":"characterized","external":false,"refSections":[],"url":"#characterized"}, "chromatic-adaptation-transform": {"dfnID":"chromatic-adaptation-transform","dfnText":"chromatic adaptation transform","external":false,"refSections":[{"refs":[{"id":"ref-for-chromatic-adaptation-transform"}],"title":"11. \nConverting Colors"}],"url":"#chromatic-adaptation-transform"}, "chromaticity": {"dfnID":"chromaticity","dfnText":"chromaticity","external":false,"refSections":[],"url":"#chromaticity"}, "color": {"dfnID":"color","dfnText":"color","external":false,"refSections":[],"url":"#color"}, "color-functions": {"dfnID":"color-functions","dfnText":"color functions","external":false,"refSections":[{"refs":[{"id":"ref-for-color-functions"},{"id":"ref-for-color-functions\u2460"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-color-functions\u2461"},{"id":"ref-for-color-functions\u2462"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-color-functions\u2463"}],"title":"4.1.2. \nLegacy (Comma-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-color-functions\u2464"},{"id":"ref-for-color-functions\u2465"},{"id":"ref-for-color-functions\u2466"}],"title":"5. \nsRGB Colors"}],"url":"#color-functions"}, "color-interpolation-method": {"dfnID":"color-interpolation-method","dfnText":"<color-interpolation-method>","external":false,"refSections":[{"refs":[{"id":"ref-for-color-interpolation-method"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-color-interpolation-method\u2460"}],"title":"12.4. \nHue Interpolation"}],"url":"#color-interpolation-method"}, "color-serialization-html-compatible-serialization-is-requested": {"dfnID":"color-serialization-html-compatible-serialization-is-requested","dfnText":"HTML-compatible serialization is requested","external":false,"refSections":[],"url":"#color-serialization-html-compatible-serialization-is-requested"}, "color-space": {"dfnID":"color-space","dfnText":"color space","external":false,"refSections":[{"refs":[{"id":"ref-for-color-space"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-color-space\u2460"},{"id":"ref-for-color-space\u2461"}],"title":"2. Color Terminology"},{"refs":[{"id":"ref-for-color-space\u2462"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-color-space\u2463"}],"title":"5. \nsRGB Colors"},{"refs":[{"id":"ref-for-color-space\u2464"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-color-space\u2465"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-color-space\u2466"},{"id":"ref-for-color-space\u2467"},{"id":"ref-for-color-space\u2468"},{"id":"ref-for-color-space\u2460\u24ea"}],"title":"14.4. \nResolving values of the color() function"}],"url":"#color-space"}, "computed-color": {"dfnID":"computed-color","dfnText":"computed colors","external":false,"refSections":[],"url":"#computed-color"}, "css-gamut-map": {"dfnID":"css-gamut-map","dfnText":"CSS gamut map","external":false,"refSections":[],"url":"#css-gamut-map"}, "css-gamut-mapped": {"dfnID":"css-gamut-mapped","dfnText":"css gamut mapped","external":false,"refSections":[{"refs":[{"id":"ref-for-css-gamut-mapped"}],"title":"2. Color Terminology"},{"refs":[{"id":"ref-for-css-gamut-mapped\u2460"},{"id":"ref-for-css-gamut-mapped\u2461"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-css-gamut-mapped\u2462"}],"title":"11. \nConverting Colors"}],"url":"#css-gamut-mapped"}, "css-gamut-mapping-algorithm": {"dfnID":"css-gamut-mapping-algorithm","dfnText":"CSS gamut mapping algorithm","external":false,"refSections":[],"url":"#css-gamut-mapping-algorithm"}, "css-system-colors": {"dfnID":"css-system-colors","dfnText":"6.2. \nSystem Colors","external":false,"refSections":[{"refs":[{"id":"ref-for-css-system-colors"}],"title":"4.5. \nParsing a <color> Value"},{"refs":[{"id":"ref-for-css-system-colors"}],"title":"6.2. \nSystem Colors"},{"refs":[{"id":"ref-for-css-system-colors\u2460"},{"id":"ref-for-css-system-colors\u2461"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-css-system-colors\u2462"}],"title":"14.5. Resolving other colors"},{"refs":[{"id":"ref-for-css-system-colors\u2463"},{"id":"ref-for-css-system-colors\u2464"}],"title":"15.2. \nSerializing sRGB values"},{"refs":[{"id":"ref-for-css-system-colors\u2465"},{"id":"ref-for-css-system-colors\u2466"}],"title":"\nAppendix A: Deprecated CSS System Colors"},{"refs":[{"id":"ref-for-css-system-colors"}],"title":"21. Accessibility Considerations"}],"url":"#css-system-colors"}, "cylindrical-polar-color": {"dfnID":"cylindrical-polar-color","dfnText":"cylindrical polar color","external":false,"refSections":[{"refs":[{"id":"ref-for-cylindrical-polar-color"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-cylindrical-polar-color\u2460"},{"id":"ref-for-cylindrical-polar-color\u2461"},{"id":"ref-for-cylindrical-polar-color\u2462"}],"title":"11. \nConverting Colors"},{"refs":[{"id":"ref-for-cylindrical-polar-color\u2463"}],"title":"12.3. \nInterpolating with Alpha"}],"url":"#cylindrical-polar-color"}, "d309d3f4": {"dfnID":"d309d3f4","dfnText":"inherited value","external":true,"refSections":[{"refs":[{"id":"ref-for-inherited-value"}],"title":"14.5. Resolving other colors"}],"url":"https://drafts.csswg.org/css-cascade-5/#inherited-value"}, "d332e4ec": {"dfnID":"d332e4ec","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-z-index-auto"}],"title":"3.3. \nTransparency: the opacity property"}],"url":"https://drafts.csswg.org/css2/#valdef-z-index-auto"}, "d50-whitepoint": {"dfnID":"d50-whitepoint","dfnText":"D50","external":false,"refSections":[{"refs":[{"id":"ref-for-d50-whitepoint"}],"title":"9.1. CIE Lab and LCH"},{"refs":[{"id":"ref-for-d50-whitepoint\u2460"},{"id":"ref-for-d50-whitepoint\u2461"}],"title":"10.6. \nThe Predefined ProPhoto RGB Color Space: the prophoto-rgb keyword"},{"refs":[{"id":"ref-for-d50-whitepoint\u2462"}],"title":"10.8. \nThe Predefined CIE XYZ Color Spaces: the xyz-d50, xyz-d65, and xyz keywords"},{"refs":[{"id":"ref-for-d50-whitepoint\u2463"},{"id":"ref-for-d50-whitepoint\u2464"},{"id":"ref-for-d50-whitepoint\u2465"}],"title":"10.9. \nConverting Predefined Color Spaces to Lab or Oklab"},{"refs":[{"id":"ref-for-d50-whitepoint\u2466"},{"id":"ref-for-d50-whitepoint\u2467"}],"title":"10.10. \nConverting Lab or Oklab to Predefined RGB Color Spaces"},{"refs":[{"id":"ref-for-d50-whitepoint\u2468"}],"title":"Changes since\nWorking Draft of\n5 November 2019"}],"url":"#d50-whitepoint"}, "d65-whitepoint": {"dfnID":"d65-whitepoint","dfnText":"D65","external":false,"refSections":[{"refs":[{"id":"ref-for-d65-whitepoint"}],"title":"2. Color Terminology"},{"refs":[{"id":"ref-for-d65-whitepoint\u2460"}],"title":"9.2. Oklab and Oklch"},{"refs":[{"id":"ref-for-d65-whitepoint\u2461"},{"id":"ref-for-d65-whitepoint\u2462"}],"title":"10.2. \nThe Predefined sRGB Color Space: the sRGB keyword"},{"refs":[{"id":"ref-for-d65-whitepoint\u2463"},{"id":"ref-for-d65-whitepoint\u2464"}],"title":"10.3. \nThe Predefined Linear-light sRGB Color Space: the srgb-linear keyword"},{"refs":[{"id":"ref-for-d65-whitepoint\u2465"},{"id":"ref-for-d65-whitepoint\u2466"}],"title":"10.4. \nThe Predefined Display P3 Color Space: the display-p3 keyword"},{"refs":[{"id":"ref-for-d65-whitepoint\u2467"}],"title":"10.5. \nThe Predefined A98 RGB Color Space: the a98-rgb keyword"},{"refs":[{"id":"ref-for-d65-whitepoint\u2468"}],"title":"10.7. \nThe Predefined ITU-R BT.2020-2 Color Space: the rec2020 keyword"},{"refs":[{"id":"ref-for-d65-whitepoint\u2460\u24ea"}],"title":"10.8. \nThe Predefined CIE XYZ Color Spaces: the xyz-d50, xyz-d65, and xyz keywords"},{"refs":[{"id":"ref-for-d65-whitepoint\u2460\u2460"},{"id":"ref-for-d65-whitepoint\u2460\u2461"}],"title":"10.9. \nConverting Predefined Color Spaces to Lab or Oklab"},{"refs":[{"id":"ref-for-d65-whitepoint\u2460\u2462"},{"id":"ref-for-d65-whitepoint\u2460\u2463"}],"title":"10.10. \nConverting Lab or Oklab to Predefined RGB Color Spaces"}],"url":"#d65-whitepoint"}, "d839a2a3": {"dfnID":"d839a2a3","dfnText":"infinity","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-calc-infinity"}],"title":"14.1. \nResolving sRGB values"}],"url":"https://drafts.csswg.org/css-values-4/#valdef-calc-infinity"}, "decreasing": {"dfnID":"decreasing","dfnText":"decreasing","external":false,"refSections":[],"url":"#decreasing"}, "eda608e1": {"dfnID":"eda608e1","dfnText":"animation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"https://drafts.csswg.org/css-animations-1/#propdef-animation"}, "efdded2e": {"dfnID":"efdded2e","dfnText":"stacking context","external":true,"refSections":[{"refs":[{"id":"ref-for-stacking-context"}],"title":"3.3. \nTransparency: the opacity property"}],"url":"https://drafts.csswg.org/css2/#stacking-context"}, "f1095b0d": {"dfnID":"f1095b0d","dfnText":"<gradient>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-gradient"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"https://drafts.csswg.org/css-images-4/#typedef-gradient"}, "f5eca8c9": {"dfnID":"f5eca8c9","dfnText":"background","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background"}, "fd11cdcd": {"dfnID":"fd11cdcd","dfnText":"quirks mode","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document-quirks"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"https://dom.spec.whatwg.org/#concept-document-quirks"}, "funcdef-color": {"dfnID":"funcdef-color","dfnText":"color()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-color"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-color\u2460"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-color\u2461"},{"id":"ref-for-funcdef-color\u2462"},{"id":"ref-for-funcdef-color\u2463"},{"id":"ref-for-funcdef-color\u2464"},{"id":"ref-for-funcdef-color\u2465"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-funcdef-color\u2466"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-funcdef-color\u2467"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-funcdef-color\u2468"}],"title":"14.4. \nResolving values of the color() function"},{"refs":[{"id":"ref-for-funcdef-color\u2460\u24ea"},{"id":"ref-for-funcdef-color\u2460\u2460"},{"id":"ref-for-funcdef-color\u2460\u2461"}],"title":"15.5. \nSerializing values of the color() function"},{"refs":[{"id":"ref-for-funcdef-color\u2460\u2462"},{"id":"ref-for-funcdef-color\u2460\u2463"},{"id":"ref-for-funcdef-color\u2460\u2464"},{"id":"ref-for-funcdef-color\u2460\u2465"},{"id":"ref-for-funcdef-color\u2460\u2466"},{"id":"ref-for-funcdef-color\u2460\u2467"}],"title":"Changes since the\n\tWorking Draft of 12 November 2020\n"},{"refs":[{"id":"ref-for-funcdef-color\u2460\u2468"},{"id":"ref-for-funcdef-color\u2461\u24ea"}],"title":"Changes since\nWorking Draft of\n5 November 2019"}],"url":"#funcdef-color"}, "funcdef-hsl": {"dfnID":"funcdef-hsl","dfnText":"hsl()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-hsl"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-hsl\u2460"},{"id":"ref-for-funcdef-hsl\u2461"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-hsl\u2462"},{"id":"ref-for-funcdef-hsl\u2463"}],"title":"4.1.2. \nLegacy (Comma-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-funcdef-hsl\u2464"}],"title":"4.4. \n\u201cMissing\u201d Color Components and the none Keyword"},{"refs":[{"id":"ref-for-funcdef-hsl\u2465"}],"title":"4.4.1. \n\u201cPowerless\u201d Color Components"},{"refs":[{"id":"ref-for-funcdef-hsl\u2466"}],"title":"5. \nsRGB Colors"},{"refs":[{"id":"ref-for-funcdef-hsl\u2467"},{"id":"ref-for-funcdef-hsl\u2468"},{"id":"ref-for-funcdef-hsl\u2460\u24ea"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-funcdef-hsl\u2460\u2460"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-funcdef-hsl\u2460\u2461"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-funcdef-hsl\u2460\u2462"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-funcdef-hsl\u2460\u2463"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-funcdef-hsl\u2460\u2464"}],"title":"15.2. \nSerializing sRGB values"},{"refs":[{"id":"ref-for-funcdef-hsl\u2460\u2465"}],"title":"15.5. \nSerializing values of the color() function"},{"refs":[{"id":"ref-for-funcdef-hsl\u2460\u2466"},{"id":"ref-for-funcdef-hsl\u2460\u2467"},{"id":"ref-for-funcdef-hsl\u2460\u2468"}],"title":"\nChanges from Colors 3"}],"url":"#funcdef-hsl"}, "funcdef-hsla": {"dfnID":"funcdef-hsla","dfnText":"hsla()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-hsla"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-hsla\u2460"},{"id":"ref-for-funcdef-hsla\u2461"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-hsla\u2462"},{"id":"ref-for-funcdef-hsla\u2463"}],"title":"4.1.2. \nLegacy (Comma-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-funcdef-hsla\u2464"}],"title":"5. \nsRGB Colors"},{"refs":[{"id":"ref-for-funcdef-hsla\u2465"},{"id":"ref-for-funcdef-hsla\u2466"},{"id":"ref-for-funcdef-hsla\u2467"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-funcdef-hsla\u2468"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-funcdef-hsla\u2460\u24ea"}],"title":"15.2. \nSerializing sRGB values"},{"refs":[{"id":"ref-for-funcdef-hsla\u2460\u2460"},{"id":"ref-for-funcdef-hsla\u2460\u2461"},{"id":"ref-for-funcdef-hsla\u2460\u2462"}],"title":"\nChanges from Colors 3"}],"url":"#funcdef-hsla"}, "funcdef-hwb": {"dfnID":"funcdef-hwb","dfnText":"hwb()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-hwb"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-hwb\u2460"},{"id":"ref-for-funcdef-hwb\u2461"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-hwb\u2462"}],"title":"5. \nsRGB Colors"},{"refs":[{"id":"ref-for-funcdef-hwb\u2463"},{"id":"ref-for-funcdef-hwb\u2464"},{"id":"ref-for-funcdef-hwb\u2465"},{"id":"ref-for-funcdef-hwb\u2466"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-funcdef-hwb\u2467"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-funcdef-hwb\u2468"}],"title":"15.2. \nSerializing sRGB values"},{"refs":[{"id":"ref-for-funcdef-hwb\u2460\u24ea"}],"title":"Changes since the\n\tWorking Draft of 15 December 2021\n"},{"refs":[{"id":"ref-for-funcdef-hwb\u2460\u2460"}],"title":"\nChanges from Colors 3"}],"url":"#funcdef-hwb"}, "funcdef-lab": {"dfnID":"funcdef-lab","dfnText":"lab()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-lab"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-lab\u2460"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-lab\u2461"},{"id":"ref-for-funcdef-lab\u2462"},{"id":"ref-for-funcdef-lab\u2463"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-funcdef-lab\u2464"}],"title":"14.2. \nResolving Lab and LCH values"},{"refs":[{"id":"ref-for-funcdef-lab\u2465"},{"id":"ref-for-funcdef-lab\u2466"},{"id":"ref-for-funcdef-lab\u2467"}],"title":"15.3. \nSerializing Lab and LCH values"},{"refs":[{"id":"ref-for-funcdef-lab\u2468"}],"title":"Changes since the\n\tWorking Draft of 12 November 2020\n"},{"refs":[{"id":"ref-for-funcdef-lab\u2460\u24ea"}],"title":"\nChanges from Colors 3"}],"url":"#funcdef-lab"}, "funcdef-lch": {"dfnID":"funcdef-lch","dfnText":"lch()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-lch"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-lch\u2460"},{"id":"ref-for-funcdef-lch\u2461"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-lch\u2462"}],"title":"4.4.1. \n\u201cPowerless\u201d Color Components"},{"refs":[{"id":"ref-for-funcdef-lch\u2463"},{"id":"ref-for-funcdef-lch\u2464"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-funcdef-lch\u2465"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-funcdef-lch\u2466"}],"title":"14.2. \nResolving Lab and LCH values"},{"refs":[{"id":"ref-for-funcdef-lch\u2467"},{"id":"ref-for-funcdef-lch\u2468"}],"title":"15.3. \nSerializing Lab and LCH values"},{"refs":[{"id":"ref-for-funcdef-lch\u2460\u24ea"}],"title":"Changes since the\n\tWorking Draft of 12 November 2020\n"},{"refs":[{"id":"ref-for-funcdef-lch\u2460\u2460"}],"title":"\nChanges from Colors 3"}],"url":"#funcdef-lch"}, "funcdef-oklab": {"dfnID":"funcdef-oklab","dfnText":"oklab()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-oklab"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-oklab\u2460"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-oklab\u2461"},{"id":"ref-for-funcdef-oklab\u2462"},{"id":"ref-for-funcdef-oklab\u2463"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-funcdef-oklab\u2464"}],"title":"14.3. \nResolving Oklab and Oklch values"},{"refs":[{"id":"ref-for-funcdef-oklab\u2465"},{"id":"ref-for-funcdef-oklab\u2466"},{"id":"ref-for-funcdef-oklab\u2467"}],"title":"15.4. \nSerializing Oklab and Oklch values"},{"refs":[{"id":"ref-for-funcdef-oklab\u2468"}],"title":"\nChanges from Colors 3"}],"url":"#funcdef-oklab"}, "funcdef-oklch": {"dfnID":"funcdef-oklch","dfnText":"oklch()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-oklch"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-oklch\u2460"},{"id":"ref-for-funcdef-oklch\u2461"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-oklch\u2462"},{"id":"ref-for-funcdef-oklch\u2463"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-funcdef-oklch\u2464"}],"title":"14.3. \nResolving Oklab and Oklch values"},{"refs":[{"id":"ref-for-funcdef-oklch\u2465"},{"id":"ref-for-funcdef-oklch\u2466"}],"title":"15.4. \nSerializing Oklab and Oklch values"},{"refs":[{"id":"ref-for-funcdef-oklch\u2467"}],"title":"\nChanges from Colors 3"}],"url":"#funcdef-oklch"}, "funcdef-rgb": {"dfnID":"funcdef-rgb","dfnText":"rgb()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-rgb"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-rgb\u2460"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-rgb\u2461"}],"title":"4.1.2. \nLegacy (Comma-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-funcdef-rgb\u2462"}],"title":"5. \nsRGB Colors"},{"refs":[{"id":"ref-for-funcdef-rgb\u2463"},{"id":"ref-for-funcdef-rgb\u2464"},{"id":"ref-for-funcdef-rgb\u2465"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-funcdef-rgb\u2466"}],"title":"5.2. \nThe RGB Hexadecimal Notations: #RRGGBB"},{"refs":[{"id":"ref-for-funcdef-rgb\u2467"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-funcdef-rgb\u2468"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-funcdef-rgb\u2460\u24ea"}],"title":"10.2. \nThe Predefined sRGB Color Space: the sRGB keyword"},{"refs":[{"id":"ref-for-funcdef-rgb\u2460\u2460"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-funcdef-rgb\u2460\u2461"}],"title":"15.2. \nSerializing sRGB values"},{"refs":[{"id":"ref-for-funcdef-rgb\u2460\u2462"},{"id":"ref-for-funcdef-rgb\u2460\u2463"},{"id":"ref-for-funcdef-rgb\u2460\u2464"}],"title":"15.2.2. CSS serialization of sRGB values"},{"refs":[{"id":"ref-for-funcdef-rgb\u2460\u2465"}],"title":"15.5. \nSerializing values of the color() function"},{"refs":[{"id":"ref-for-funcdef-rgb\u2460\u2466"},{"id":"ref-for-funcdef-rgb\u2460\u2467"},{"id":"ref-for-funcdef-rgb\u2460\u2468"}],"title":"\nChanges from Colors 3"}],"url":"#funcdef-rgb"}, "funcdef-rgba": {"dfnID":"funcdef-rgba","dfnText":"rgba()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-rgba"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-funcdef-rgba\u2460"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-funcdef-rgba\u2461"}],"title":"4.1.2. \nLegacy (Comma-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-funcdef-rgba\u2462"}],"title":"5. \nsRGB Colors"},{"refs":[{"id":"ref-for-funcdef-rgba\u2463"},{"id":"ref-for-funcdef-rgba\u2464"},{"id":"ref-for-funcdef-rgba\u2465"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-funcdef-rgba\u2466"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-funcdef-rgba\u2467"}],"title":"15.2. \nSerializing sRGB values"},{"refs":[{"id":"ref-for-funcdef-rgba\u2468"},{"id":"ref-for-funcdef-rgba\u2460\u24ea"},{"id":"ref-for-funcdef-rgba\u2460\u2460"}],"title":"15.2.2. CSS serialization of sRGB values"},{"refs":[{"id":"ref-for-funcdef-rgba\u2460\u2461"},{"id":"ref-for-funcdef-rgba\u2460\u2462"},{"id":"ref-for-funcdef-rgba\u2460\u2463"}],"title":"\nChanges from Colors 3"}],"url":"#funcdef-rgba"}, "gamut": {"dfnID":"gamut","dfnText":"gamut","external":false,"refSections":[],"url":"#gamut"}, "hex-color": {"dfnID":"hex-color","dfnText":"hex color notation","external":false,"refSections":[{"refs":[{"id":"ref-for-hex-color"},{"id":"ref-for-hex-color\u2460"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-hex-color\u2461"}],"title":"5. \nsRGB Colors"},{"refs":[{"id":"ref-for-hex-color\u2462"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-hex-color\u2463"}],"title":"15.2. \nSerializing sRGB values"},{"refs":[{"id":"ref-for-hex-color\u2464"}],"title":"15.2.1. HTML-compatible serialization of sRGB values"}],"url":"#hex-color"}, "host-syntax": {"dfnID":"host-syntax","dfnText":"host syntax","external":false,"refSections":[],"url":"#host-syntax"}, "in-gamut": {"dfnID":"in-gamut","dfnText":"in-gamut","external":false,"refSections":[],"url":"#in-gamut"}, "increasing": {"dfnID":"increasing","dfnText":"increasing","external":false,"refSections":[],"url":"#increasing"}, "interpolation-color-space": {"dfnID":"interpolation-color-space","dfnText":"interpolation color space","external":false,"refSections":[{"refs":[{"id":"ref-for-interpolation-color-space"},{"id":"ref-for-interpolation-color-space\u2460"},{"id":"ref-for-interpolation-color-space\u2461"},{"id":"ref-for-interpolation-color-space\u2462"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-interpolation-color-space\u2463"},{"id":"ref-for-interpolation-color-space\u2464"}],"title":"12.2. \nInterpolating with Missing Components"}],"url":"#interpolation-color-space"}, "invalid-color": {"dfnID":"invalid-color","dfnText":"invalid color","external":false,"refSections":[{"refs":[{"id":"ref-for-invalid-color"}],"title":"2. Color Terminology"},{"refs":[{"id":"ref-for-invalid-color\u2460"},{"id":"ref-for-invalid-color\u2461"},{"id":"ref-for-invalid-color\u2462"},{"id":"ref-for-invalid-color\u2463"},{"id":"ref-for-invalid-color\u2464"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#invalid-color"}, "legacy-color-syntax": {"dfnID":"legacy-color-syntax","dfnText":"legacy color syntax","external":false,"refSections":[{"refs":[{"id":"ref-for-legacy-color-syntax"}],"title":"4.1.2. \nLegacy (Comma-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-legacy-color-syntax\u2460"},{"id":"ref-for-legacy-color-syntax\u2461"}],"title":"4.4. \n\u201cMissing\u201d Color Components and the none Keyword"},{"refs":[{"id":"ref-for-legacy-color-syntax\u2462"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-legacy-color-syntax\u2463"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-legacy-color-syntax\u2464"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-legacy-color-syntax\u2465"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-legacy-color-syntax\u2466"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-legacy-color-syntax\u2467"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#legacy-color-syntax"}, "longer": {"dfnID":"longer","dfnText":"longer","external":false,"refSections":[],"url":"#longer"}, "luminance": {"dfnID":"luminance","dfnText":"luminance","external":false,"refSections":[{"refs":[{"id":"ref-for-luminance"}],"title":"9.1. CIE Lab and LCH"},{"refs":[{"id":"ref-for-luminance\u2460"}],"title":"10.8. \nThe Predefined CIE XYZ Color Spaces: the xyz-d50, xyz-d65, and xyz keywords"}],"url":"#luminance"}, "minde": {"dfnID":"minde","dfnText":"MINDE","external":false,"refSections":[],"url":"#minde"}, "missing-color-component": {"dfnID":"missing-color-component","dfnText":"missing color components","external":false,"refSections":[{"refs":[{"id":"ref-for-missing-color-component"}],"title":"4.1.1. \nModern (Space-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-missing-color-component\u2460"},{"id":"ref-for-missing-color-component\u2461"},{"id":"ref-for-missing-color-component\u2462"},{"id":"ref-for-missing-color-component\u2463"}],"title":"4.4. \n\u201cMissing\u201d Color Components and the none Keyword"},{"refs":[{"id":"ref-for-missing-color-component\u2464"}],"title":"4.4.1. \n\u201cPowerless\u201d Color Components"},{"refs":[{"id":"ref-for-missing-color-component\u2465"}],"title":"9.5. \nConverting Lab or Oklab colors to LCH or Oklch colors"},{"refs":[{"id":"ref-for-missing-color-component\u2466"},{"id":"ref-for-missing-color-component\u2467"}],"title":"11. \nConverting Colors"},{"refs":[{"id":"ref-for-missing-color-component\u2468"}],"title":"12. \nColor Interpolation"},{"refs":[{"id":"ref-for-missing-color-component\u2460\u24ea"},{"id":"ref-for-missing-color-component\u2460\u2460"},{"id":"ref-for-missing-color-component\u2460\u2461"},{"id":"ref-for-missing-color-component\u2460\u2462"},{"id":"ref-for-missing-color-component\u2460\u2463"},{"id":"ref-for-missing-color-component\u2460\u2464"},{"id":"ref-for-missing-color-component\u2460\u2465"},{"id":"ref-for-missing-color-component\u2460\u2466"},{"id":"ref-for-missing-color-component\u2460\u2467"}],"title":"12.2. \nInterpolating with Missing Components"},{"refs":[{"id":"ref-for-missing-color-component\u2460\u2468"}],"title":"12.4. \nHue Interpolation"},{"refs":[{"id":"ref-for-missing-color-component\u2461\u24ea"}],"title":"15. \nSerializing <color> Values"},{"refs":[{"id":"ref-for-missing-color-component\u2461\u2460"}],"title":"15.2. \nSerializing sRGB values"}],"url":"#missing-color-component"}, "modern-color-syntax": {"dfnID":"modern-color-syntax","dfnText":"modern color syntax","external":false,"refSections":[],"url":"#modern-color-syntax"}, "named-color": {"dfnID":"named-color","dfnText":"named colors","external":false,"refSections":[{"refs":[{"id":"ref-for-named-color"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-named-color\u2460"}],"title":"5. \nsRGB Colors"},{"refs":[{"id":"ref-for-named-color\u2461"},{"id":"ref-for-named-color\u2462"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-named-color\u2463"},{"id":"ref-for-named-color\u2464"}],"title":"15.2. \nSerializing sRGB values"}],"url":"#named-color"}, "opaque-black": {"dfnID":"opaque-black","dfnText":"opaque black","external":false,"refSections":[{"refs":[{"id":"ref-for-opaque-black"},{"id":"ref-for-opaque-black\u2460"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#opaque-black"}, "out-of-gamut": {"dfnID":"out-of-gamut","dfnText":"out of gamut","external":false,"refSections":[{"refs":[{"id":"ref-for-out-of-gamut"}],"title":"2. Color Terminology"},{"refs":[{"id":"ref-for-out-of-gamut\u2460"},{"id":"ref-for-out-of-gamut\u2461"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#out-of-gamut"}, "parse-a-css-color-value": {"dfnID":"parse-a-css-color-value","dfnText":"parse a CSS <color> value","external":false,"refSections":[],"url":"#parse-a-css-color-value"}, "powerless-color-component": {"dfnID":"powerless-color-component","dfnText":"powerless color component","external":false,"refSections":[{"refs":[{"id":"ref-for-powerless-color-component"},{"id":"ref-for-powerless-color-component\u2460"}],"title":"4.3. \nRepresenting Cylindrical-coordinate Hues: the <hue> syntax"},{"refs":[{"id":"ref-for-powerless-color-component\u2461"},{"id":"ref-for-powerless-color-component\u2462"},{"id":"ref-for-powerless-color-component\u2463"},{"id":"ref-for-powerless-color-component\u2464"},{"id":"ref-for-powerless-color-component\u2465"},{"id":"ref-for-powerless-color-component\u2466"}],"title":"4.4.1. \n\u201cPowerless\u201d Color Components"},{"refs":[{"id":"ref-for-powerless-color-component\u2467"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-powerless-color-component\u2468"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-powerless-color-component\u2460\u24ea"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-powerless-color-component\u2460\u2460"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-powerless-color-component\u2460\u2461"}],"title":"9.5. \nConverting Lab or Oklab colors to LCH or Oklch colors"},{"refs":[{"id":"ref-for-powerless-color-component\u2460\u2462"}],"title":"12. \nColor Interpolation"},{"refs":[{"id":"ref-for-powerless-color-component\u2460\u2463"}],"title":"12.2. \nInterpolating with Missing Components"},{"refs":[{"id":"ref-for-powerless-color-component\u2460\u2464"}],"title":"12.4. \nHue Interpolation"}],"url":"#powerless-color-component"}, "premultiplied": {"dfnID":"premultiplied","dfnText":"premultiplied","external":false,"refSections":[{"refs":[{"id":"ref-for-premultiplied"},{"id":"ref-for-premultiplied\u2460"}],"title":"12. \nColor Interpolation"},{"refs":[{"id":"ref-for-premultiplied\u2461"}],"title":"12.2. \nInterpolating with Missing Components"}],"url":"#premultiplied"}, "propdef-color": {"dfnID":"propdef-color","dfnText":"color","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-color"}],"title":"3.2. \nForeground Color: the color property"},{"refs":[{"id":"ref-for-propdef-color\u2460"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-propdef-color\u2461"},{"id":"ref-for-propdef-color\u2462"}],"title":"6.4. \nThe currentcolor keyword"},{"refs":[{"id":"ref-for-propdef-color\u2463"},{"id":"ref-for-propdef-color\u2464"},{"id":"ref-for-propdef-color\u2465"},{"id":"ref-for-propdef-color\u2466"}],"title":"14.5. Resolving other colors"},{"refs":[{"id":"ref-for-propdef-color\u2467"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"#propdef-color"}, "propdef-opacity": {"dfnID":"propdef-opacity","dfnText":"opacity","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-opacity"},{"id":"ref-for-propdef-opacity\u2460"},{"id":"ref-for-propdef-opacity\u2461"},{"id":"ref-for-propdef-opacity\u2462"},{"id":"ref-for-propdef-opacity\u2463"},{"id":"ref-for-propdef-opacity\u2464"},{"id":"ref-for-propdef-opacity\u2465"}],"title":"3.3. \nTransparency: the opacity property"}],"url":"#propdef-opacity"}, "rectangular-orthogonal-color": {"dfnID":"rectangular-orthogonal-color","dfnText":"rectangular orthogonal color","external":false,"refSections":[{"refs":[{"id":"ref-for-rectangular-orthogonal-color"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-rectangular-orthogonal-color\u2460"},{"id":"ref-for-rectangular-orthogonal-color\u2461"}],"title":"11. \nConverting Colors"},{"refs":[{"id":"ref-for-rectangular-orthogonal-color\u2462"}],"title":"12.3. \nInterpolating with Alpha"}],"url":"#rectangular-orthogonal-color"}, "sRGB-linear-space": {"dfnID":"sRGB-linear-space","dfnText":"sRGB-linear","external":false,"refSections":[],"url":"#sRGB-linear-space"}, "sRGB-space": {"dfnID":"sRGB-space","dfnText":"sRGB","external":false,"refSections":[{"refs":[{"id":"ref-for-sRGB-space"}],"title":"5. \nsRGB Colors"}],"url":"#sRGB-space"}, "shorter": {"dfnID":"shorter","dfnText":"shorter","external":false,"refSections":[],"url":"#shorter"}, "system-color-pairings": {"dfnID":"system-color-pairings","dfnText":"system color pairings","external":false,"refSections":[],"url":"#system-color-pairings"}, "tagged-image": {"dfnID":"tagged-image","dfnText":"tagged image","external":false,"refSections":[],"url":"#tagged-image"}, "transparent-black": {"dfnID":"transparent-black","dfnText":"transparent black","external":false,"refSections":[{"refs":[{"id":"ref-for-transparent-black"}],"title":"6.3. \nThe transparent keyword"},{"refs":[{"id":"ref-for-transparent-black\u2460"}],"title":"14.5. Resolving other colors"}],"url":"#transparent-black"}, "typedef-color": {"dfnID":"typedef-color","dfnText":"<color>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-color\u2460"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-typedef-color\u2461"},{"id":"ref-for-typedef-color\u2462"},{"id":"ref-for-typedef-color\u2463"},{"id":"ref-for-typedef-color\u2464"}],"title":"3.2. \nForeground Color: the color property"},{"refs":[{"id":"ref-for-typedef-color\u2465"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-typedef-color\u2466"},{"id":"ref-for-typedef-color\u2467"},{"id":"ref-for-typedef-color\u2468"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-typedef-color\u2460\u24ea"},{"id":"ref-for-typedef-color\u2460\u2460"},{"id":"ref-for-typedef-color\u2460\u2461"},{"id":"ref-for-typedef-color\u2460\u2462"},{"id":"ref-for-typedef-color\u2460\u2463"}],"title":"4.5. \nParsing a <color> Value"},{"refs":[{"id":"ref-for-typedef-color\u2460\u2464"}],"title":"6. \nColor Keywords"},{"refs":[{"id":"ref-for-typedef-color\u2460\u2465"}],"title":"6.1. \nNamed Colors"},{"refs":[{"id":"ref-for-typedef-color\u2460\u2466"}],"title":"6.4. \nThe currentcolor keyword"},{"refs":[{"id":"ref-for-typedef-color\u2460\u2467"}],"title":"12. \nColor Interpolation"},{"refs":[{"id":"ref-for-typedef-color\u2460\u2468"},{"id":"ref-for-typedef-color\u2461\u24ea"}],"title":"14. \nResolving <color> Values"},{"refs":[{"id":"ref-for-typedef-color\u2461\u2460"},{"id":"ref-for-typedef-color\u2461\u2461"}],"title":"15. \nSerializing <color> Values"},{"refs":[{"id":"ref-for-typedef-color\u2461\u2462"}],"title":"15.1. \nSerializing alpha values"},{"refs":[{"id":"ref-for-typedef-color\u2461\u2463"}],"title":"15.2.1. HTML-compatible serialization of sRGB values"},{"refs":[{"id":"ref-for-typedef-color\u2461\u2464"},{"id":"ref-for-typedef-color\u2461\u2465"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"},{"refs":[{"id":"ref-for-typedef-color\u2461\u2466"}],"title":"\nChanges from Colors 3"}],"url":"#typedef-color"}, "typedef-color-alpha-value": {"dfnID":"typedef-color-alpha-value","dfnText":"<alpha-value>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-color-alpha-value"},{"id":"ref-for-typedef-color-alpha-value\u2460"}],"title":"4.2. \nRepresenting Transparency in Colors: the <alpha-value> syntax"},{"refs":[{"id":"ref-for-typedef-color-alpha-value\u2461"},{"id":"ref-for-typedef-color-alpha-value\u2462"},{"id":"ref-for-typedef-color-alpha-value\u2463"},{"id":"ref-for-typedef-color-alpha-value\u2464"},{"id":"ref-for-typedef-color-alpha-value\u2465"},{"id":"ref-for-typedef-color-alpha-value\u2466"},{"id":"ref-for-typedef-color-alpha-value\u2467"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"},{"refs":[{"id":"ref-for-typedef-color-alpha-value\u2468"},{"id":"ref-for-typedef-color-alpha-value\u2460\u24ea"},{"id":"ref-for-typedef-color-alpha-value\u2460\u2460"},{"id":"ref-for-typedef-color-alpha-value\u2460\u2461"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-typedef-color-alpha-value\u2460\u2462"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-typedef-color-alpha-value\u2460\u2463"},{"id":"ref-for-typedef-color-alpha-value\u2460\u2464"},{"id":"ref-for-typedef-color-alpha-value\u2460\u2465"},{"id":"ref-for-typedef-color-alpha-value\u2460\u2466"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-typedef-color-alpha-value\u2460\u2467"},{"id":"ref-for-typedef-color-alpha-value\u2460\u2468"},{"id":"ref-for-typedef-color-alpha-value\u2461\u24ea"},{"id":"ref-for-typedef-color-alpha-value\u2461\u2460"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-typedef-color-alpha-value\u2461\u2461"},{"id":"ref-for-typedef-color-alpha-value\u2461\u2462"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-typedef-color-alpha-value\u2461\u2463"},{"id":"ref-for-typedef-color-alpha-value\u2461\u2464"}],"title":"15.1. \nSerializing alpha values"},{"refs":[{"id":"ref-for-typedef-color-alpha-value\u2461\u2465"}],"title":"\nChanges from Colors 3"}],"url":"#typedef-color-alpha-value"}, "typedef-color-base": {"dfnID":"typedef-color-base","dfnText":"<color-base>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-color-base"}],"title":"4.1. The <color> syntax"}],"url":"#typedef-color-base"}, "typedef-color-function": {"dfnID":"typedef-color-function","dfnText":"<color-function>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-color-function"}],"title":"4.1. The <color> syntax"}],"url":"#typedef-color-function"}, "typedef-color-space": {"dfnID":"typedef-color-space","dfnText":"<color-space>","external":false,"refSections":[],"url":"#typedef-color-space"}, "typedef-colorspace-params": {"dfnID":"typedef-colorspace-params","dfnText":"<colorspace-params>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-colorspace-params"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#typedef-colorspace-params"}, "typedef-deprecated-color": {"dfnID":"typedef-deprecated-color","dfnText":"<deprecated-color>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-deprecated-color"},{"id":"ref-for-typedef-deprecated-color\u2460"}],"title":"14.5. Resolving other colors"},{"refs":[{"id":"ref-for-typedef-deprecated-color\u2461"}],"title":"\nAppendix A: Deprecated CSS System Colors"}],"url":"#typedef-deprecated-color"}, "typedef-hex-color": {"dfnID":"typedef-hex-color","dfnText":"<hex-color>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-hex-color"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-typedef-hex-color\u2460"},{"id":"ref-for-typedef-hex-color\u2461"},{"id":"ref-for-typedef-hex-color\u2462"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"#typedef-hex-color"}, "typedef-hue": {"dfnID":"typedef-hue","dfnText":"<hue>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-hue"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-typedef-hue\u2460"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-typedef-hue\u2461"},{"id":"ref-for-typedef-hue\u2462"}],"title":"4.3. \nRepresenting Cylindrical-coordinate Hues: the <hue> syntax"},{"refs":[{"id":"ref-for-typedef-hue\u2463"},{"id":"ref-for-typedef-hue\u2464"},{"id":"ref-for-typedef-hue\u2465"},{"id":"ref-for-typedef-hue\u2466"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"},{"refs":[{"id":"ref-for-typedef-hue\u2467"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-typedef-hue\u2468"},{"id":"ref-for-typedef-hue\u2460\u24ea"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-typedef-hue\u2460\u2460"},{"id":"ref-for-typedef-hue\u2460\u2461"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"}],"url":"#typedef-hue"}, "typedef-hue-interpolation-method": {"dfnID":"typedef-hue-interpolation-method","dfnText":"<hue-interpolation-method>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-hue-interpolation-method"}],"title":"12. \nColor Interpolation"},{"refs":[{"id":"ref-for-typedef-hue-interpolation-method\u2460"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-typedef-hue-interpolation-method\u2461"}],"title":"12.4. \nHue Interpolation"}],"url":"#typedef-hue-interpolation-method"}, "typedef-legacy-hsl-syntax": {"dfnID":"typedef-legacy-hsl-syntax","dfnText":"<legacy-hsl-syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-legacy-hsl-syntax"},{"id":"ref-for-typedef-legacy-hsl-syntax\u2460"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"}],"url":"#typedef-legacy-hsl-syntax"}, "typedef-legacy-hsla-syntax": {"dfnID":"typedef-legacy-hsla-syntax","dfnText":"<legacy-hsla-syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-legacy-hsla-syntax"},{"id":"ref-for-typedef-legacy-hsla-syntax\u2460"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"}],"url":"#typedef-legacy-hsla-syntax"}, "typedef-legacy-rgb-syntax": {"dfnID":"typedef-legacy-rgb-syntax","dfnText":"<legacy-rgb-syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-legacy-rgb-syntax"},{"id":"ref-for-typedef-legacy-rgb-syntax\u2460"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"}],"url":"#typedef-legacy-rgb-syntax"}, "typedef-legacy-rgba-syntax": {"dfnID":"typedef-legacy-rgba-syntax","dfnText":"<legacy-rgba-syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-legacy-rgba-syntax"},{"id":"ref-for-typedef-legacy-rgba-syntax\u2460"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"}],"url":"#typedef-legacy-rgba-syntax"}, "typedef-modern-hsl-syntax": {"dfnID":"typedef-modern-hsl-syntax","dfnText":"<modern-hsl-syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-modern-hsl-syntax"},{"id":"ref-for-typedef-modern-hsl-syntax\u2460"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"}],"url":"#typedef-modern-hsl-syntax"}, "typedef-modern-hsla-syntax": {"dfnID":"typedef-modern-hsla-syntax","dfnText":"<modern-hsla-syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-modern-hsla-syntax"},{"id":"ref-for-typedef-modern-hsla-syntax\u2460"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"}],"url":"#typedef-modern-hsla-syntax"}, "typedef-modern-rgb-syntax": {"dfnID":"typedef-modern-rgb-syntax","dfnText":"<modern-rgb-syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-modern-rgb-syntax"},{"id":"ref-for-typedef-modern-rgb-syntax\u2460"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"}],"url":"#typedef-modern-rgb-syntax"}, "typedef-modern-rgba-syntax": {"dfnID":"typedef-modern-rgba-syntax","dfnText":"<modern-rgba-syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-modern-rgba-syntax"},{"id":"ref-for-typedef-modern-rgba-syntax\u2460"}],"title":"5.1. \nThe RGB functions: rgb() and rgba()"}],"url":"#typedef-modern-rgba-syntax"}, "typedef-named-color": {"dfnID":"typedef-named-color","dfnText":"<named-color>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-named-color"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-typedef-named-color\u2460"}],"title":"6.3. \nThe transparent keyword"},{"refs":[{"id":"ref-for-typedef-named-color\u2461"}],"title":"6.4. \nThe currentcolor keyword"}],"url":"#typedef-named-color"}, "typedef-opacity-opacity-value": {"dfnID":"typedef-opacity-opacity-value","dfnText":"<opacity-value>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-opacity-opacity-value"},{"id":"ref-for-typedef-opacity-opacity-value\u2460"},{"id":"ref-for-typedef-opacity-opacity-value\u2461"},{"id":"ref-for-typedef-opacity-opacity-value\u2462"}],"title":"3.3. \nTransparency: the opacity property"}],"url":"#typedef-opacity-opacity-value"}, "typedef-polar-color-space": {"dfnID":"typedef-polar-color-space","dfnText":"<polar-color-space>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-polar-color-space"},{"id":"ref-for-typedef-polar-color-space\u2460"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"#typedef-polar-color-space"}, "typedef-predefined-rgb": {"dfnID":"typedef-predefined-rgb","dfnText":"<predefined-rgb>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-predefined-rgb"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#typedef-predefined-rgb"}, "typedef-predefined-rgb-params": {"dfnID":"typedef-predefined-rgb-params","dfnText":"<predefined-rgb-params>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-predefined-rgb-params"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#typedef-predefined-rgb-params"}, "typedef-quirky-color": {"dfnID":"typedef-quirky-color","dfnText":"<quirky-color>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-quirky-color"},{"id":"ref-for-typedef-quirky-color\u2460"},{"id":"ref-for-typedef-quirky-color\u2461"}],"title":"\nAppendix B: Deprecated Quirky Hex Colors"}],"url":"#typedef-quirky-color"}, "typedef-rectangular-color-space": {"dfnID":"typedef-rectangular-color-space","dfnText":"<rectangular-color-space>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-rectangular-color-space"},{"id":"ref-for-typedef-rectangular-color-space\u2460"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"#typedef-rectangular-color-space"}, "typedef-system-color": {"dfnID":"typedef-system-color","dfnText":"<system-color>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-system-color"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-typedef-system-color\u2460"},{"id":"ref-for-typedef-system-color\u2461"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-typedef-system-color\u2462"},{"id":"ref-for-typedef-system-color\u2463"},{"id":"ref-for-typedef-system-color\u2464"},{"id":"ref-for-typedef-system-color\u2465"},{"id":"ref-for-typedef-system-color\u2466"},{"id":"ref-for-typedef-system-color\u2467"},{"id":"ref-for-typedef-system-color\u2468"}],"title":"6.2. \nSystem Colors"},{"refs":[{"id":"ref-for-typedef-system-color\u2460\u24ea"}],"title":"14.5. Resolving other colors"}],"url":"#typedef-system-color"}, "typedef-xyz-params": {"dfnID":"typedef-xyz-params","dfnText":"<xyz-params>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-xyz-params"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#typedef-xyz-params"}, "typedef-xyz-space": {"dfnID":"typedef-xyz-space","dfnText":"<xyz-space>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-xyz-space"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#typedef-xyz-space"}, "untagged-image": {"dfnID":"untagged-image","dfnText":"untagged image","external":false,"refSections":[{"refs":[{"id":"ref-for-untagged-image"}],"title":"3.4. Color Space of Tagged Images"},{"refs":[{"id":"ref-for-untagged-image\u2460"}],"title":"3.5. \nColor Spaces of Untagged Colors"}],"url":"#untagged-image"}, "untagged-video": {"dfnID":"untagged-video","dfnText":"untagged video","external":false,"refSections":[],"url":"#untagged-video"}, "used-color": {"dfnID":"used-color","dfnText":"used colors","external":false,"refSections":[{"refs":[{"id":"ref-for-used-color"}],"title":"4.5. \nParsing a <color> Value"}],"url":"#used-color"}, "valdef-color-a98-rgb": {"dfnID":"valdef-color-a98-rgb","dfnText":"a98-rgb","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-a98-rgb"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-valdef-color-a98-rgb\u2460"},{"id":"ref-for-valdef-color-a98-rgb\u2461"}],"title":"10.5. \nThe Predefined A98 RGB Color Space: the a98-rgb keyword"},{"refs":[{"id":"ref-for-valdef-color-a98-rgb\u2462"}],"title":"10.9. \nConverting Predefined Color Spaces to Lab or Oklab"},{"refs":[{"id":"ref-for-valdef-color-a98-rgb\u2463"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-valdef-color-a98-rgb\u2464"}],"title":"15.5. \nSerializing values of the color() function"}],"url":"#valdef-color-a98-rgb"}, "valdef-color-accentcolor": {"dfnID":"valdef-color-accentcolor","dfnText":"AccentColor","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-accentcolor"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-accentcolor"}, "valdef-color-accentcolortext": {"dfnID":"valdef-color-accentcolortext","dfnText":"AccentColorText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-accentcolortext"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-accentcolortext"}, "valdef-color-activeborder": {"dfnID":"valdef-color-activeborder","dfnText":"ActiveBorder","external":false,"refSections":[],"url":"#valdef-color-activeborder"}, "valdef-color-activecaption": {"dfnID":"valdef-color-activecaption","dfnText":"ActiveCaption","external":false,"refSections":[],"url":"#valdef-color-activecaption"}, "valdef-color-activetext": {"dfnID":"valdef-color-activetext","dfnText":"ActiveText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-activetext"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-activetext"}, "valdef-color-aliceblue": {"dfnID":"valdef-color-aliceblue","dfnText":"aliceblue","external":false,"refSections":[],"url":"#valdef-color-aliceblue"}, "valdef-color-antiquewhite": {"dfnID":"valdef-color-antiquewhite","dfnText":"antiquewhite","external":false,"refSections":[],"url":"#valdef-color-antiquewhite"}, "valdef-color-appworkspace": {"dfnID":"valdef-color-appworkspace","dfnText":"AppWorkspace","external":false,"refSections":[],"url":"#valdef-color-appworkspace"}, "valdef-color-aqua": {"dfnID":"valdef-color-aqua","dfnText":"aqua","external":false,"refSections":[],"url":"#valdef-color-aqua"}, "valdef-color-aquamarine": {"dfnID":"valdef-color-aquamarine","dfnText":"aquamarine","external":false,"refSections":[],"url":"#valdef-color-aquamarine"}, "valdef-color-azure": {"dfnID":"valdef-color-azure","dfnText":"azure","external":false,"refSections":[],"url":"#valdef-color-azure"}, "valdef-color-background": {"dfnID":"valdef-color-background","dfnText":"Background","external":false,"refSections":[],"url":"#valdef-color-background"}, "valdef-color-beige": {"dfnID":"valdef-color-beige","dfnText":"beige","external":false,"refSections":[],"url":"#valdef-color-beige"}, "valdef-color-bisque": {"dfnID":"valdef-color-bisque","dfnText":"bisque","external":false,"refSections":[],"url":"#valdef-color-bisque"}, "valdef-color-black": {"dfnID":"valdef-color-black","dfnText":"black","external":false,"refSections":[],"url":"#valdef-color-black"}, "valdef-color-blanchedalmond": {"dfnID":"valdef-color-blanchedalmond","dfnText":"blanchedalmond","external":false,"refSections":[],"url":"#valdef-color-blanchedalmond"}, "valdef-color-blue": {"dfnID":"valdef-color-blue","dfnText":"blue","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-blue"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"}],"url":"#valdef-color-blue"}, "valdef-color-blueviolet": {"dfnID":"valdef-color-blueviolet","dfnText":"blueviolet","external":false,"refSections":[],"url":"#valdef-color-blueviolet"}, "valdef-color-brown": {"dfnID":"valdef-color-brown","dfnText":"brown","external":false,"refSections":[],"url":"#valdef-color-brown"}, "valdef-color-burlywood": {"dfnID":"valdef-color-burlywood","dfnText":"burlywood","external":false,"refSections":[],"url":"#valdef-color-burlywood"}, "valdef-color-buttonborder": {"dfnID":"valdef-color-buttonborder","dfnText":"ButtonBorder","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-buttonborder"},{"id":"ref-for-valdef-color-buttonborder\u2460"}],"title":"6.2. \nSystem Colors"},{"refs":[{"id":"ref-for-valdef-color-buttonborder\u2461"},{"id":"ref-for-valdef-color-buttonborder\u2462"},{"id":"ref-for-valdef-color-buttonborder\u2463"},{"id":"ref-for-valdef-color-buttonborder\u2464"},{"id":"ref-for-valdef-color-buttonborder\u2465"},{"id":"ref-for-valdef-color-buttonborder\u2466"},{"id":"ref-for-valdef-color-buttonborder\u2467"}],"title":"\nAppendix A: Deprecated CSS System Colors"}],"url":"#valdef-color-buttonborder"}, "valdef-color-buttonface": {"dfnID":"valdef-color-buttonface","dfnText":"ButtonFace","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-buttonface"},{"id":"ref-for-valdef-color-buttonface\u2460"}],"title":"6.2. \nSystem Colors"},{"refs":[{"id":"ref-for-valdef-color-buttonface\u2461"},{"id":"ref-for-valdef-color-buttonface\u2462"},{"id":"ref-for-valdef-color-buttonface\u2463"}],"title":"\nAppendix A: Deprecated CSS System Colors"}],"url":"#valdef-color-buttonface"}, "valdef-color-buttonhighlight": {"dfnID":"valdef-color-buttonhighlight","dfnText":"ButtonHighlight","external":false,"refSections":[],"url":"#valdef-color-buttonhighlight"}, "valdef-color-buttonshadow": {"dfnID":"valdef-color-buttonshadow","dfnText":"ButtonShadow","external":false,"refSections":[],"url":"#valdef-color-buttonshadow"}, "valdef-color-buttontext": {"dfnID":"valdef-color-buttontext","dfnText":"ButtonText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-buttontext"},{"id":"ref-for-valdef-color-buttontext\u2460"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-buttontext"}, "valdef-color-cadetblue": {"dfnID":"valdef-color-cadetblue","dfnText":"cadetblue","external":false,"refSections":[],"url":"#valdef-color-cadetblue"}, "valdef-color-canvas": {"dfnID":"valdef-color-canvas","dfnText":"Canvas","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-canvas"},{"id":"ref-for-valdef-color-canvas\u2460"},{"id":"ref-for-valdef-color-canvas\u2461"},{"id":"ref-for-valdef-color-canvas\u2462"},{"id":"ref-for-valdef-color-canvas\u2463"}],"title":"6.2. \nSystem Colors"},{"refs":[{"id":"ref-for-valdef-color-canvas\u2464"},{"id":"ref-for-valdef-color-canvas\u2465"},{"id":"ref-for-valdef-color-canvas\u2466"},{"id":"ref-for-valdef-color-canvas\u2467"},{"id":"ref-for-valdef-color-canvas\u2468"},{"id":"ref-for-valdef-color-canvas\u2460\u24ea"},{"id":"ref-for-valdef-color-canvas\u2460\u2460"},{"id":"ref-for-valdef-color-canvas\u2460\u2461"}],"title":"\nAppendix A: Deprecated CSS System Colors"}],"url":"#valdef-color-canvas"}, "valdef-color-canvastext": {"dfnID":"valdef-color-canvastext","dfnText":"CanvasText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-canvastext"}],"title":"6.2. \nSystem Colors"},{"refs":[{"id":"ref-for-valdef-color-canvastext\u2460"},{"id":"ref-for-valdef-color-canvastext\u2461"},{"id":"ref-for-valdef-color-canvastext\u2462"},{"id":"ref-for-valdef-color-canvastext\u2463"}],"title":"\nAppendix A: Deprecated CSS System Colors"}],"url":"#valdef-color-canvastext"}, "valdef-color-captiontext": {"dfnID":"valdef-color-captiontext","dfnText":"CaptionText","external":false,"refSections":[],"url":"#valdef-color-captiontext"}, "valdef-color-chartreuse": {"dfnID":"valdef-color-chartreuse","dfnText":"chartreuse","external":false,"refSections":[],"url":"#valdef-color-chartreuse"}, "valdef-color-chocolate": {"dfnID":"valdef-color-chocolate","dfnText":"chocolate","external":false,"refSections":[],"url":"#valdef-color-chocolate"}, "valdef-color-coral": {"dfnID":"valdef-color-coral","dfnText":"coral","external":false,"refSections":[],"url":"#valdef-color-coral"}, "valdef-color-cornflowerblue": {"dfnID":"valdef-color-cornflowerblue","dfnText":"cornflowerblue","external":false,"refSections":[],"url":"#valdef-color-cornflowerblue"}, "valdef-color-cornsilk": {"dfnID":"valdef-color-cornsilk","dfnText":"cornsilk","external":false,"refSections":[],"url":"#valdef-color-cornsilk"}, "valdef-color-crimson": {"dfnID":"valdef-color-crimson","dfnText":"crimson","external":false,"refSections":[],"url":"#valdef-color-crimson"}, "valdef-color-currentcolor": {"dfnID":"valdef-color-currentcolor","dfnText":"currentcolor","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-currentcolor"}],"title":"3.2. \nForeground Color: the color property"},{"refs":[{"id":"ref-for-valdef-color-currentcolor\u2460"}],"title":"4. \nRepresenting Colors: the <color> type"},{"refs":[{"id":"ref-for-valdef-color-currentcolor\u2461"}],"title":"4.1. The <color> syntax"},{"refs":[{"id":"ref-for-valdef-color-currentcolor\u2462"}],"title":"4.5. \nParsing a <color> Value"},{"refs":[{"id":"ref-for-valdef-color-currentcolor\u2463"}],"title":"6.1. \nNamed Colors"},{"refs":[{"id":"ref-for-valdef-color-currentcolor\u2464"},{"id":"ref-for-valdef-color-currentcolor\u2465"},{"id":"ref-for-valdef-color-currentcolor\u2466"},{"id":"ref-for-valdef-color-currentcolor\u2467"},{"id":"ref-for-valdef-color-currentcolor\u2468"}],"title":"6.4. \nThe currentcolor keyword"},{"refs":[{"id":"ref-for-valdef-color-currentcolor\u2460\u24ea"}],"title":"12. \nColor Interpolation"},{"refs":[{"id":"ref-for-valdef-color-currentcolor\u2460\u2460"},{"id":"ref-for-valdef-color-currentcolor\u2460\u2461"}],"title":"14.5. Resolving other colors"},{"refs":[{"id":"ref-for-valdef-color-currentcolor\u2460\u2462"},{"id":"ref-for-valdef-color-currentcolor\u2460\u2463"}],"title":"15.6. \nSerializing other colors"}],"url":"#valdef-color-currentcolor"}, "valdef-color-cyan": {"dfnID":"valdef-color-cyan","dfnText":"cyan","external":false,"refSections":[],"url":"#valdef-color-cyan"}, "valdef-color-darkblue": {"dfnID":"valdef-color-darkblue","dfnText":"darkblue","external":false,"refSections":[],"url":"#valdef-color-darkblue"}, "valdef-color-darkcyan": {"dfnID":"valdef-color-darkcyan","dfnText":"darkcyan","external":false,"refSections":[],"url":"#valdef-color-darkcyan"}, "valdef-color-darkgoldenrod": {"dfnID":"valdef-color-darkgoldenrod","dfnText":"darkgoldenrod","external":false,"refSections":[],"url":"#valdef-color-darkgoldenrod"}, "valdef-color-darkgray": {"dfnID":"valdef-color-darkgray","dfnText":"darkgray","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-darkgray"}],"title":"6.1. \nNamed Colors"}],"url":"#valdef-color-darkgray"}, "valdef-color-darkgreen": {"dfnID":"valdef-color-darkgreen","dfnText":"darkgreen","external":false,"refSections":[],"url":"#valdef-color-darkgreen"}, "valdef-color-darkgrey": {"dfnID":"valdef-color-darkgrey","dfnText":"darkgrey","external":false,"refSections":[],"url":"#valdef-color-darkgrey"}, "valdef-color-darkkhaki": {"dfnID":"valdef-color-darkkhaki","dfnText":"darkkhaki","external":false,"refSections":[],"url":"#valdef-color-darkkhaki"}, "valdef-color-darkmagenta": {"dfnID":"valdef-color-darkmagenta","dfnText":"darkmagenta","external":false,"refSections":[],"url":"#valdef-color-darkmagenta"}, "valdef-color-darkolivegreen": {"dfnID":"valdef-color-darkolivegreen","dfnText":"darkolivegreen","external":false,"refSections":[],"url":"#valdef-color-darkolivegreen"}, "valdef-color-darkorange": {"dfnID":"valdef-color-darkorange","dfnText":"darkorange","external":false,"refSections":[],"url":"#valdef-color-darkorange"}, "valdef-color-darkorchid": {"dfnID":"valdef-color-darkorchid","dfnText":"darkorchid","external":false,"refSections":[],"url":"#valdef-color-darkorchid"}, "valdef-color-darkred": {"dfnID":"valdef-color-darkred","dfnText":"darkred","external":false,"refSections":[],"url":"#valdef-color-darkred"}, "valdef-color-darksalmon": {"dfnID":"valdef-color-darksalmon","dfnText":"darksalmon","external":false,"refSections":[],"url":"#valdef-color-darksalmon"}, "valdef-color-darkseagreen": {"dfnID":"valdef-color-darkseagreen","dfnText":"darkseagreen","external":false,"refSections":[],"url":"#valdef-color-darkseagreen"}, "valdef-color-darkslateblue": {"dfnID":"valdef-color-darkslateblue","dfnText":"darkslateblue","external":false,"refSections":[],"url":"#valdef-color-darkslateblue"}, "valdef-color-darkslategray": {"dfnID":"valdef-color-darkslategray","dfnText":"darkslategray","external":false,"refSections":[],"url":"#valdef-color-darkslategray"}, "valdef-color-darkslategrey": {"dfnID":"valdef-color-darkslategrey","dfnText":"darkslategrey","external":false,"refSections":[],"url":"#valdef-color-darkslategrey"}, "valdef-color-darkturquoise": {"dfnID":"valdef-color-darkturquoise","dfnText":"darkturquoise","external":false,"refSections":[],"url":"#valdef-color-darkturquoise"}, "valdef-color-darkviolet": {"dfnID":"valdef-color-darkviolet","dfnText":"darkviolet","external":false,"refSections":[],"url":"#valdef-color-darkviolet"}, "valdef-color-deeppink": {"dfnID":"valdef-color-deeppink","dfnText":"deeppink","external":false,"refSections":[],"url":"#valdef-color-deeppink"}, "valdef-color-deepskyblue": {"dfnID":"valdef-color-deepskyblue","dfnText":"deepskyblue","external":false,"refSections":[],"url":"#valdef-color-deepskyblue"}, "valdef-color-dimgray": {"dfnID":"valdef-color-dimgray","dfnText":"dimgray","external":false,"refSections":[],"url":"#valdef-color-dimgray"}, "valdef-color-dimgrey": {"dfnID":"valdef-color-dimgrey","dfnText":"dimgrey","external":false,"refSections":[],"url":"#valdef-color-dimgrey"}, "valdef-color-display-p3": {"dfnID":"valdef-color-display-p3","dfnText":"display-p3","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-display-p3"}],"title":"2. Color Terminology"},{"refs":[{"id":"ref-for-valdef-color-display-p3\u2460"}],"title":"10. \nPredefined Color Spaces"},{"refs":[{"id":"ref-for-valdef-color-display-p3\u2461"},{"id":"ref-for-valdef-color-display-p3\u2462"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-valdef-color-display-p3\u2463"},{"id":"ref-for-valdef-color-display-p3\u2464"}],"title":"10.4. \nThe Predefined Display P3 Color Space: the display-p3 keyword"},{"refs":[{"id":"ref-for-valdef-color-display-p3\u2465"}],"title":"10.9. \nConverting Predefined Color Spaces to Lab or Oklab"},{"refs":[{"id":"ref-for-valdef-color-display-p3\u2466"}],"title":"10.10. \nConverting Lab or Oklab to Predefined RGB Color Spaces"},{"refs":[{"id":"ref-for-valdef-color-display-p3\u2467"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-valdef-color-display-p3\u2468"}],"title":"15.5. \nSerializing values of the color() function"}],"url":"#valdef-color-display-p3"}, "valdef-color-dodgerblue": {"dfnID":"valdef-color-dodgerblue","dfnText":"dodgerblue","external":false,"refSections":[],"url":"#valdef-color-dodgerblue"}, "valdef-color-field": {"dfnID":"valdef-color-field","dfnText":"Field","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-field"},{"id":"ref-for-valdef-color-field\u2460"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-field"}, "valdef-color-fieldtext": {"dfnID":"valdef-color-fieldtext","dfnText":"FieldText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-fieldtext"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-fieldtext"}, "valdef-color-firebrick": {"dfnID":"valdef-color-firebrick","dfnText":"firebrick","external":false,"refSections":[],"url":"#valdef-color-firebrick"}, "valdef-color-floralwhite": {"dfnID":"valdef-color-floralwhite","dfnText":"floralwhite","external":false,"refSections":[],"url":"#valdef-color-floralwhite"}, "valdef-color-forestgreen": {"dfnID":"valdef-color-forestgreen","dfnText":"forestgreen","external":false,"refSections":[],"url":"#valdef-color-forestgreen"}, "valdef-color-fuchsia": {"dfnID":"valdef-color-fuchsia","dfnText":"fuchsia","external":false,"refSections":[],"url":"#valdef-color-fuchsia"}, "valdef-color-gainsboro": {"dfnID":"valdef-color-gainsboro","dfnText":"gainsboro","external":false,"refSections":[],"url":"#valdef-color-gainsboro"}, "valdef-color-ghostwhite": {"dfnID":"valdef-color-ghostwhite","dfnText":"ghostwhite","external":false,"refSections":[],"url":"#valdef-color-ghostwhite"}, "valdef-color-gold": {"dfnID":"valdef-color-gold","dfnText":"gold","external":false,"refSections":[],"url":"#valdef-color-gold"}, "valdef-color-goldenrod": {"dfnID":"valdef-color-goldenrod","dfnText":"goldenrod","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-goldenrod"}],"title":"15.2.2. CSS serialization of sRGB values"}],"url":"#valdef-color-goldenrod"}, "valdef-color-gray": {"dfnID":"valdef-color-gray","dfnText":"gray","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-gray"}],"title":"6.1. \nNamed Colors"}],"url":"#valdef-color-gray"}, "valdef-color-graytext": {"dfnID":"valdef-color-graytext","dfnText":"GrayText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-graytext"}],"title":"6.2. \nSystem Colors"},{"refs":[{"id":"ref-for-valdef-color-graytext\u2460"}],"title":"\nAppendix A: Deprecated CSS System Colors"}],"url":"#valdef-color-graytext"}, "valdef-color-green": {"dfnID":"valdef-color-green","dfnText":"green","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-green"}],"title":"4.4. \n\u201cMissing\u201d Color Components and the none Keyword"}],"url":"#valdef-color-green"}, "valdef-color-greenyellow": {"dfnID":"valdef-color-greenyellow","dfnText":"greenyellow","external":false,"refSections":[],"url":"#valdef-color-greenyellow"}, "valdef-color-grey": {"dfnID":"valdef-color-grey","dfnText":"grey","external":false,"refSections":[],"url":"#valdef-color-grey"}, "valdef-color-highlight": {"dfnID":"valdef-color-highlight","dfnText":"Highlight","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-highlight"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-highlight"}, "valdef-color-highlighttext": {"dfnID":"valdef-color-highlighttext","dfnText":"HighlightText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-highlighttext"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-highlighttext"}, "valdef-color-honeydew": {"dfnID":"valdef-color-honeydew","dfnText":"honeydew","external":false,"refSections":[],"url":"#valdef-color-honeydew"}, "valdef-color-hotpink": {"dfnID":"valdef-color-hotpink","dfnText":"hotpink","external":false,"refSections":[],"url":"#valdef-color-hotpink"}, "valdef-color-inactiveborder": {"dfnID":"valdef-color-inactiveborder","dfnText":"InactiveBorder","external":false,"refSections":[],"url":"#valdef-color-inactiveborder"}, "valdef-color-inactivecaption": {"dfnID":"valdef-color-inactivecaption","dfnText":"InactiveCaption","external":false,"refSections":[],"url":"#valdef-color-inactivecaption"}, "valdef-color-inactivecaptiontext": {"dfnID":"valdef-color-inactivecaptiontext","dfnText":"InactiveCaptionText","external":false,"refSections":[],"url":"#valdef-color-inactivecaptiontext"}, "valdef-color-indianred": {"dfnID":"valdef-color-indianred","dfnText":"indianred","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-indianred"}],"title":"6.1. \nNamed Colors"}],"url":"#valdef-color-indianred"}, "valdef-color-indigo": {"dfnID":"valdef-color-indigo","dfnText":"indigo","external":false,"refSections":[],"url":"#valdef-color-indigo"}, "valdef-color-infobackground": {"dfnID":"valdef-color-infobackground","dfnText":"InfoBackground","external":false,"refSections":[],"url":"#valdef-color-infobackground"}, "valdef-color-infotext": {"dfnID":"valdef-color-infotext","dfnText":"InfoText","external":false,"refSections":[],"url":"#valdef-color-infotext"}, "valdef-color-ivory": {"dfnID":"valdef-color-ivory","dfnText":"ivory","external":false,"refSections":[],"url":"#valdef-color-ivory"}, "valdef-color-khaki": {"dfnID":"valdef-color-khaki","dfnText":"khaki","external":false,"refSections":[],"url":"#valdef-color-khaki"}, "valdef-color-lavender": {"dfnID":"valdef-color-lavender","dfnText":"lavender","external":false,"refSections":[],"url":"#valdef-color-lavender"}, "valdef-color-lavenderblush": {"dfnID":"valdef-color-lavenderblush","dfnText":"lavenderblush","external":false,"refSections":[],"url":"#valdef-color-lavenderblush"}, "valdef-color-lawngreen": {"dfnID":"valdef-color-lawngreen","dfnText":"lawngreen","external":false,"refSections":[],"url":"#valdef-color-lawngreen"}, "valdef-color-lemonchiffon": {"dfnID":"valdef-color-lemonchiffon","dfnText":"lemonchiffon","external":false,"refSections":[],"url":"#valdef-color-lemonchiffon"}, "valdef-color-lightblue": {"dfnID":"valdef-color-lightblue","dfnText":"lightblue","external":false,"refSections":[],"url":"#valdef-color-lightblue"}, "valdef-color-lightcoral": {"dfnID":"valdef-color-lightcoral","dfnText":"lightcoral","external":false,"refSections":[],"url":"#valdef-color-lightcoral"}, "valdef-color-lightcyan": {"dfnID":"valdef-color-lightcyan","dfnText":"lightcyan","external":false,"refSections":[],"url":"#valdef-color-lightcyan"}, "valdef-color-lightgoldenrodyellow": {"dfnID":"valdef-color-lightgoldenrodyellow","dfnText":"lightgoldenrodyellow","external":false,"refSections":[],"url":"#valdef-color-lightgoldenrodyellow"}, "valdef-color-lightgray": {"dfnID":"valdef-color-lightgray","dfnText":"lightgray","external":false,"refSections":[],"url":"#valdef-color-lightgray"}, "valdef-color-lightgreen": {"dfnID":"valdef-color-lightgreen","dfnText":"lightgreen","external":false,"refSections":[],"url":"#valdef-color-lightgreen"}, "valdef-color-lightgrey": {"dfnID":"valdef-color-lightgrey","dfnText":"lightgrey","external":false,"refSections":[],"url":"#valdef-color-lightgrey"}, "valdef-color-lightpink": {"dfnID":"valdef-color-lightpink","dfnText":"lightpink","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-lightpink"}],"title":"6.1. \nNamed Colors"}],"url":"#valdef-color-lightpink"}, "valdef-color-lightsalmon": {"dfnID":"valdef-color-lightsalmon","dfnText":"lightsalmon","external":false,"refSections":[],"url":"#valdef-color-lightsalmon"}, "valdef-color-lightseagreen": {"dfnID":"valdef-color-lightseagreen","dfnText":"lightseagreen","external":false,"refSections":[],"url":"#valdef-color-lightseagreen"}, "valdef-color-lightskyblue": {"dfnID":"valdef-color-lightskyblue","dfnText":"lightskyblue","external":false,"refSections":[],"url":"#valdef-color-lightskyblue"}, "valdef-color-lightslategray": {"dfnID":"valdef-color-lightslategray","dfnText":"lightslategray","external":false,"refSections":[],"url":"#valdef-color-lightslategray"}, "valdef-color-lightslategrey": {"dfnID":"valdef-color-lightslategrey","dfnText":"lightslategrey","external":false,"refSections":[],"url":"#valdef-color-lightslategrey"}, "valdef-color-lightsteelblue": {"dfnID":"valdef-color-lightsteelblue","dfnText":"lightsteelblue","external":false,"refSections":[],"url":"#valdef-color-lightsteelblue"}, "valdef-color-lightyellow": {"dfnID":"valdef-color-lightyellow","dfnText":"lightyellow","external":false,"refSections":[],"url":"#valdef-color-lightyellow"}, "valdef-color-lime": {"dfnID":"valdef-color-lime","dfnText":"lime","external":false,"refSections":[],"url":"#valdef-color-lime"}, "valdef-color-limegreen": {"dfnID":"valdef-color-limegreen","dfnText":"limegreen","external":false,"refSections":[],"url":"#valdef-color-limegreen"}, "valdef-color-linen": {"dfnID":"valdef-color-linen","dfnText":"linen","external":false,"refSections":[],"url":"#valdef-color-linen"}, "valdef-color-linktext": {"dfnID":"valdef-color-linktext","dfnText":"LinkText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-linktext"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-linktext"}, "valdef-color-magenta": {"dfnID":"valdef-color-magenta","dfnText":"magenta","external":false,"refSections":[],"url":"#valdef-color-magenta"}, "valdef-color-mark": {"dfnID":"valdef-color-mark","dfnText":"Mark","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-mark"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-mark"}, "valdef-color-marktext": {"dfnID":"valdef-color-marktext","dfnText":"MarkText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-marktext"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-marktext"}, "valdef-color-maroon": {"dfnID":"valdef-color-maroon","dfnText":"maroon","external":false,"refSections":[],"url":"#valdef-color-maroon"}, "valdef-color-mediumaquamarine": {"dfnID":"valdef-color-mediumaquamarine","dfnText":"mediumaquamarine","external":false,"refSections":[],"url":"#valdef-color-mediumaquamarine"}, "valdef-color-mediumblue": {"dfnID":"valdef-color-mediumblue","dfnText":"mediumblue","external":false,"refSections":[],"url":"#valdef-color-mediumblue"}, "valdef-color-mediumorchid": {"dfnID":"valdef-color-mediumorchid","dfnText":"mediumorchid","external":false,"refSections":[],"url":"#valdef-color-mediumorchid"}, "valdef-color-mediumpurple": {"dfnID":"valdef-color-mediumpurple","dfnText":"mediumpurple","external":false,"refSections":[],"url":"#valdef-color-mediumpurple"}, "valdef-color-mediumseagreen": {"dfnID":"valdef-color-mediumseagreen","dfnText":"mediumseagreen","external":false,"refSections":[],"url":"#valdef-color-mediumseagreen"}, "valdef-color-mediumslateblue": {"dfnID":"valdef-color-mediumslateblue","dfnText":"mediumslateblue","external":false,"refSections":[],"url":"#valdef-color-mediumslateblue"}, "valdef-color-mediumspringgreen": {"dfnID":"valdef-color-mediumspringgreen","dfnText":"mediumspringgreen","external":false,"refSections":[],"url":"#valdef-color-mediumspringgreen"}, "valdef-color-mediumturquoise": {"dfnID":"valdef-color-mediumturquoise","dfnText":"mediumturquoise","external":false,"refSections":[],"url":"#valdef-color-mediumturquoise"}, "valdef-color-mediumvioletred": {"dfnID":"valdef-color-mediumvioletred","dfnText":"mediumvioletred","external":false,"refSections":[],"url":"#valdef-color-mediumvioletred"}, "valdef-color-menu": {"dfnID":"valdef-color-menu","dfnText":"Menu","external":false,"refSections":[],"url":"#valdef-color-menu"}, "valdef-color-menutext": {"dfnID":"valdef-color-menutext","dfnText":"MenuText","external":false,"refSections":[],"url":"#valdef-color-menutext"}, "valdef-color-midnightblue": {"dfnID":"valdef-color-midnightblue","dfnText":"midnightblue","external":false,"refSections":[],"url":"#valdef-color-midnightblue"}, "valdef-color-mintcream": {"dfnID":"valdef-color-mintcream","dfnText":"mintcream","external":false,"refSections":[],"url":"#valdef-color-mintcream"}, "valdef-color-mistyrose": {"dfnID":"valdef-color-mistyrose","dfnText":"mistyrose","external":false,"refSections":[],"url":"#valdef-color-mistyrose"}, "valdef-color-moccasin": {"dfnID":"valdef-color-moccasin","dfnText":"moccasin","external":false,"refSections":[],"url":"#valdef-color-moccasin"}, "valdef-color-navajowhite": {"dfnID":"valdef-color-navajowhite","dfnText":"navajowhite","external":false,"refSections":[],"url":"#valdef-color-navajowhite"}, "valdef-color-navy": {"dfnID":"valdef-color-navy","dfnText":"navy","external":false,"refSections":[],"url":"#valdef-color-navy"}, "valdef-color-none": {"dfnID":"valdef-color-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-none"}],"title":"4.1.1. \nModern (Space-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-valdef-color-none\u2460"}],"title":"4.1.2. \nLegacy (Comma-separated) Color Function Syntax"},{"refs":[{"id":"ref-for-valdef-color-none\u2461"},{"id":"ref-for-valdef-color-none\u2462"},{"id":"ref-for-valdef-color-none\u2463"}],"title":"4.4. \n\u201cMissing\u201d Color Components and the none Keyword"},{"refs":[{"id":"ref-for-valdef-color-none\u2464"},{"id":"ref-for-valdef-color-none\u2465"},{"id":"ref-for-valdef-color-none\u2466"},{"id":"ref-for-valdef-color-none\u2467"},{"id":"ref-for-valdef-color-none\u2468"},{"id":"ref-for-valdef-color-none\u2460\u24ea"}],"title":"12.3. \nInterpolating with Alpha"},{"refs":[{"id":"ref-for-valdef-color-none\u2460\u2460"}],"title":"15. \nSerializing <color> Values"},{"refs":[{"id":"ref-for-valdef-color-none\u2460\u2461"}],"title":"15.2.1. HTML-compatible serialization of sRGB values"},{"refs":[{"id":"ref-for-valdef-color-none\u2460\u2462"}],"title":"Changes since the\n\tWorking Draft of 28 April 2022\n"},{"refs":[{"id":"ref-for-valdef-color-none\u2460\u2463"},{"id":"ref-for-valdef-color-none\u2460\u2464"},{"id":"ref-for-valdef-color-none\u2460\u2465"}],"title":"Changes since the\n\tWorking Draft of 15 December 2021\n"},{"refs":[{"id":"ref-for-valdef-color-none\u2460\u2466"}],"title":"Changes since the\n\tWorking Draft of 1 June 2021\n"},{"refs":[{"id":"ref-for-valdef-color-none\u2460\u2467"}],"title":"\nChanges from Colors 3"}],"url":"#valdef-color-none"}, "valdef-color-oldlace": {"dfnID":"valdef-color-oldlace","dfnText":"oldlace","external":false,"refSections":[],"url":"#valdef-color-oldlace"}, "valdef-color-olive": {"dfnID":"valdef-color-olive","dfnText":"olive","external":false,"refSections":[],"url":"#valdef-color-olive"}, "valdef-color-olivedrab": {"dfnID":"valdef-color-olivedrab","dfnText":"olivedrab","external":false,"refSections":[],"url":"#valdef-color-olivedrab"}, "valdef-color-orange": {"dfnID":"valdef-color-orange","dfnText":"orange","external":false,"refSections":[],"url":"#valdef-color-orange"}, "valdef-color-orangered": {"dfnID":"valdef-color-orangered","dfnText":"orangered","external":false,"refSections":[],"url":"#valdef-color-orangered"}, "valdef-color-orchid": {"dfnID":"valdef-color-orchid","dfnText":"orchid","external":false,"refSections":[],"url":"#valdef-color-orchid"}, "valdef-color-palegoldenrod": {"dfnID":"valdef-color-palegoldenrod","dfnText":"palegoldenrod","external":false,"refSections":[],"url":"#valdef-color-palegoldenrod"}, "valdef-color-palegreen": {"dfnID":"valdef-color-palegreen","dfnText":"palegreen","external":false,"refSections":[],"url":"#valdef-color-palegreen"}, "valdef-color-paleturquoise": {"dfnID":"valdef-color-paleturquoise","dfnText":"paleturquoise","external":false,"refSections":[],"url":"#valdef-color-paleturquoise"}, "valdef-color-palevioletred": {"dfnID":"valdef-color-palevioletred","dfnText":"palevioletred","external":false,"refSections":[],"url":"#valdef-color-palevioletred"}, "valdef-color-papayawhip": {"dfnID":"valdef-color-papayawhip","dfnText":"papayawhip","external":false,"refSections":[],"url":"#valdef-color-papayawhip"}, "valdef-color-peachpuff": {"dfnID":"valdef-color-peachpuff","dfnText":"peachpuff","external":false,"refSections":[],"url":"#valdef-color-peachpuff"}, "valdef-color-peru": {"dfnID":"valdef-color-peru","dfnText":"peru","external":false,"refSections":[],"url":"#valdef-color-peru"}, "valdef-color-pink": {"dfnID":"valdef-color-pink","dfnText":"pink","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-pink"}],"title":"6.1. \nNamed Colors"}],"url":"#valdef-color-pink"}, "valdef-color-plum": {"dfnID":"valdef-color-plum","dfnText":"plum","external":false,"refSections":[],"url":"#valdef-color-plum"}, "valdef-color-powderblue": {"dfnID":"valdef-color-powderblue","dfnText":"powderblue","external":false,"refSections":[],"url":"#valdef-color-powderblue"}, "valdef-color-prophoto-rgb": {"dfnID":"valdef-color-prophoto-rgb","dfnText":"prophoto-rgb","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-prophoto-rgb"}],"title":"10. \nPredefined Color Spaces"},{"refs":[{"id":"ref-for-valdef-color-prophoto-rgb\u2460"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-valdef-color-prophoto-rgb\u2461"},{"id":"ref-for-valdef-color-prophoto-rgb\u2462"},{"id":"ref-for-valdef-color-prophoto-rgb\u2463"}],"title":"10.6. \nThe Predefined ProPhoto RGB Color Space: the prophoto-rgb keyword"},{"refs":[{"id":"ref-for-valdef-color-prophoto-rgb\u2464"},{"id":"ref-for-valdef-color-prophoto-rgb\u2465"},{"id":"ref-for-valdef-color-prophoto-rgb\u2466"}],"title":"10.9. \nConverting Predefined Color Spaces to Lab or Oklab"},{"refs":[{"id":"ref-for-valdef-color-prophoto-rgb\u2467"},{"id":"ref-for-valdef-color-prophoto-rgb\u2468"},{"id":"ref-for-valdef-color-prophoto-rgb\u2460\u24ea"}],"title":"10.10. \nConverting Lab or Oklab to Predefined RGB Color Spaces"},{"refs":[{"id":"ref-for-valdef-color-prophoto-rgb\u2460\u2460"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-valdef-color-prophoto-rgb\u2460\u2461"}],"title":"15.3. \nSerializing Lab and LCH values"},{"refs":[{"id":"ref-for-valdef-color-prophoto-rgb\u2460\u2462"}],"title":"15.4. \nSerializing Oklab and Oklch values"},{"refs":[{"id":"ref-for-valdef-color-prophoto-rgb\u2460\u2463"}],"title":"15.5. \nSerializing values of the color() function"}],"url":"#valdef-color-prophoto-rgb"}, "valdef-color-purple": {"dfnID":"valdef-color-purple","dfnText":"purple","external":false,"refSections":[],"url":"#valdef-color-purple"}, "valdef-color-rebeccapurple": {"dfnID":"valdef-color-rebeccapurple","dfnText":"rebeccapurple","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-rebeccapurple"}],"title":"\nChanges from Colors 3"}],"url":"#valdef-color-rebeccapurple"}, "valdef-color-rec2020": {"dfnID":"valdef-color-rec2020","dfnText":"rec2020","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-rec2020"}],"title":"10. \nPredefined Color Spaces"},{"refs":[{"id":"ref-for-valdef-color-rec2020\u2460"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-valdef-color-rec2020\u2461"},{"id":"ref-for-valdef-color-rec2020\u2462"}],"title":"10.7. \nThe Predefined ITU-R BT.2020-2 Color Space: the rec2020 keyword"},{"refs":[{"id":"ref-for-valdef-color-rec2020\u2463"}],"title":"10.9. \nConverting Predefined Color Spaces to Lab or Oklab"},{"refs":[{"id":"ref-for-valdef-color-rec2020\u2464"}],"title":"10.10. \nConverting Lab or Oklab to Predefined RGB Color Spaces"},{"refs":[{"id":"ref-for-valdef-color-rec2020\u2465"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-valdef-color-rec2020\u2466"}],"title":"15.5. \nSerializing values of the color() function"}],"url":"#valdef-color-rec2020"}, "valdef-color-red": {"dfnID":"valdef-color-red","dfnText":"red","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-red"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"}],"url":"#valdef-color-red"}, "valdef-color-rosybrown": {"dfnID":"valdef-color-rosybrown","dfnText":"rosybrown","external":false,"refSections":[],"url":"#valdef-color-rosybrown"}, "valdef-color-royalblue": {"dfnID":"valdef-color-royalblue","dfnText":"royalblue","external":false,"refSections":[],"url":"#valdef-color-royalblue"}, "valdef-color-saddlebrown": {"dfnID":"valdef-color-saddlebrown","dfnText":"saddlebrown","external":false,"refSections":[],"url":"#valdef-color-saddlebrown"}, "valdef-color-salmon": {"dfnID":"valdef-color-salmon","dfnText":"salmon","external":false,"refSections":[],"url":"#valdef-color-salmon"}, "valdef-color-sandybrown": {"dfnID":"valdef-color-sandybrown","dfnText":"sandybrown","external":false,"refSections":[],"url":"#valdef-color-sandybrown"}, "valdef-color-scrollbar": {"dfnID":"valdef-color-scrollbar","dfnText":"Scrollbar","external":false,"refSections":[],"url":"#valdef-color-scrollbar"}, "valdef-color-seagreen": {"dfnID":"valdef-color-seagreen","dfnText":"seagreen","external":false,"refSections":[],"url":"#valdef-color-seagreen"}, "valdef-color-seashell": {"dfnID":"valdef-color-seashell","dfnText":"seashell","external":false,"refSections":[],"url":"#valdef-color-seashell"}, "valdef-color-selecteditem": {"dfnID":"valdef-color-selecteditem","dfnText":"SelectedItem","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-selecteditem"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-selecteditem"}, "valdef-color-selecteditemtext": {"dfnID":"valdef-color-selecteditemtext","dfnText":"SelectedItemText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-selecteditemtext"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-selecteditemtext"}, "valdef-color-sienna": {"dfnID":"valdef-color-sienna","dfnText":"sienna","external":false,"refSections":[],"url":"#valdef-color-sienna"}, "valdef-color-silver": {"dfnID":"valdef-color-silver","dfnText":"silver","external":false,"refSections":[],"url":"#valdef-color-silver"}, "valdef-color-skyblue": {"dfnID":"valdef-color-skyblue","dfnText":"skyblue","external":false,"refSections":[],"url":"#valdef-color-skyblue"}, "valdef-color-slateblue": {"dfnID":"valdef-color-slateblue","dfnText":"slateblue","external":false,"refSections":[],"url":"#valdef-color-slateblue"}, "valdef-color-slategray": {"dfnID":"valdef-color-slategray","dfnText":"slategray","external":false,"refSections":[],"url":"#valdef-color-slategray"}, "valdef-color-slategrey": {"dfnID":"valdef-color-slategrey","dfnText":"slategrey","external":false,"refSections":[],"url":"#valdef-color-slategrey"}, "valdef-color-snow": {"dfnID":"valdef-color-snow","dfnText":"snow","external":false,"refSections":[],"url":"#valdef-color-snow"}, "valdef-color-springgreen": {"dfnID":"valdef-color-springgreen","dfnText":"springgreen","external":false,"refSections":[],"url":"#valdef-color-springgreen"}, "valdef-color-srgb": {"dfnID":"valdef-color-srgb","dfnText":"srgb","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-srgb"}],"title":"2. Color Terminology"},{"refs":[{"id":"ref-for-valdef-color-srgb\u2460"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-valdef-color-srgb\u2461"},{"id":"ref-for-valdef-color-srgb\u2462"}],"title":"10.2. \nThe Predefined sRGB Color Space: the sRGB keyword"},{"refs":[{"id":"ref-for-valdef-color-srgb\u2463"},{"id":"ref-for-valdef-color-srgb\u2464"}],"title":"10.3. \nThe Predefined Linear-light sRGB Color Space: the srgb-linear keyword"},{"refs":[{"id":"ref-for-valdef-color-srgb\u2465"}],"title":"10.9. \nConverting Predefined Color Spaces to Lab or Oklab"},{"refs":[{"id":"ref-for-valdef-color-srgb\u2466"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-valdef-color-srgb\u2467"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-valdef-color-srgb\u2468"}],"title":"15.5. \nSerializing values of the color() function"}],"url":"#valdef-color-srgb"}, "valdef-color-srgb-linear": {"dfnID":"valdef-color-srgb-linear","dfnText":"srgb-linear","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-srgb-linear"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-valdef-color-srgb-linear\u2460"},{"id":"ref-for-valdef-color-srgb-linear\u2461"},{"id":"ref-for-valdef-color-srgb-linear\u2462"}],"title":"10.3. \nThe Predefined Linear-light sRGB Color Space: the srgb-linear keyword"},{"refs":[{"id":"ref-for-valdef-color-srgb-linear\u2463"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-valdef-color-srgb-linear\u2464"}],"title":"14.1. \nResolving sRGB values"},{"refs":[{"id":"ref-for-valdef-color-srgb-linear\u2465"}],"title":"15.5. \nSerializing values of the color() function"}],"url":"#valdef-color-srgb-linear"}, "valdef-color-steelblue": {"dfnID":"valdef-color-steelblue","dfnText":"steelblue","external":false,"refSections":[],"url":"#valdef-color-steelblue"}, "valdef-color-tan": {"dfnID":"valdef-color-tan","dfnText":"tan","external":false,"refSections":[],"url":"#valdef-color-tan"}, "valdef-color-teal": {"dfnID":"valdef-color-teal","dfnText":"teal","external":false,"refSections":[],"url":"#valdef-color-teal"}, "valdef-color-thistle": {"dfnID":"valdef-color-thistle","dfnText":"thistle","external":false,"refSections":[],"url":"#valdef-color-thistle"}, "valdef-color-threeddarkshadow": {"dfnID":"valdef-color-threeddarkshadow","dfnText":"ThreeDDarkShadow","external":false,"refSections":[],"url":"#valdef-color-threeddarkshadow"}, "valdef-color-threedface": {"dfnID":"valdef-color-threedface","dfnText":"ThreeDFace","external":false,"refSections":[],"url":"#valdef-color-threedface"}, "valdef-color-threedhighlight": {"dfnID":"valdef-color-threedhighlight","dfnText":"ThreeDHighlight","external":false,"refSections":[],"url":"#valdef-color-threedhighlight"}, "valdef-color-threedlightshadow": {"dfnID":"valdef-color-threedlightshadow","dfnText":"ThreeDLightShadow","external":false,"refSections":[],"url":"#valdef-color-threedlightshadow"}, "valdef-color-threedshadow": {"dfnID":"valdef-color-threedshadow","dfnText":"ThreeDShadow","external":false,"refSections":[],"url":"#valdef-color-threedshadow"}, "valdef-color-tomato": {"dfnID":"valdef-color-tomato","dfnText":"tomato","external":false,"refSections":[],"url":"#valdef-color-tomato"}, "valdef-color-transparent": {"dfnID":"valdef-color-transparent","dfnText":"transparent","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-transparent"}],"title":"5. \nsRGB Colors"},{"refs":[{"id":"ref-for-valdef-color-transparent\u2460"}],"title":"6.1. \nNamed Colors"},{"refs":[{"id":"ref-for-valdef-color-transparent\u2461"}],"title":"6.3. \nThe transparent keyword"},{"refs":[{"id":"ref-for-valdef-color-transparent\u2462"},{"id":"ref-for-valdef-color-transparent\u2463"}],"title":"14.5. Resolving other colors"},{"refs":[{"id":"ref-for-valdef-color-transparent\u2464"},{"id":"ref-for-valdef-color-transparent\u2465"},{"id":"ref-for-valdef-color-transparent\u2466"},{"id":"ref-for-valdef-color-transparent\u2467"}],"title":"15.2. \nSerializing sRGB values"}],"url":"#valdef-color-transparent"}, "valdef-color-turquoise": {"dfnID":"valdef-color-turquoise","dfnText":"turquoise","external":false,"refSections":[],"url":"#valdef-color-turquoise"}, "valdef-color-violet": {"dfnID":"valdef-color-violet","dfnText":"violet","external":false,"refSections":[],"url":"#valdef-color-violet"}, "valdef-color-visitedtext": {"dfnID":"valdef-color-visitedtext","dfnText":"VisitedText","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-visitedtext"}],"title":"6.2. \nSystem Colors"}],"url":"#valdef-color-visitedtext"}, "valdef-color-wheat": {"dfnID":"valdef-color-wheat","dfnText":"wheat","external":false,"refSections":[],"url":"#valdef-color-wheat"}, "valdef-color-white": {"dfnID":"valdef-color-white","dfnText":"white","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-white"},{"id":"ref-for-valdef-color-white\u2460"},{"id":"ref-for-valdef-color-white\u2461"}],"title":"4.4. \n\u201cMissing\u201d Color Components and the none Keyword"}],"url":"#valdef-color-white"}, "valdef-color-whitesmoke": {"dfnID":"valdef-color-whitesmoke","dfnText":"whitesmoke","external":false,"refSections":[],"url":"#valdef-color-whitesmoke"}, "valdef-color-window": {"dfnID":"valdef-color-window","dfnText":"Window","external":false,"refSections":[],"url":"#valdef-color-window"}, "valdef-color-windowframe": {"dfnID":"valdef-color-windowframe","dfnText":"WindowFrame","external":false,"refSections":[],"url":"#valdef-color-windowframe"}, "valdef-color-windowtext": {"dfnID":"valdef-color-windowtext","dfnText":"WindowText","external":false,"refSections":[],"url":"#valdef-color-windowtext"}, "valdef-color-xyz": {"dfnID":"valdef-color-xyz","dfnText":"xyz","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-xyz"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-valdef-color-xyz\u2460"},{"id":"ref-for-valdef-color-xyz\u2461"},{"id":"ref-for-valdef-color-xyz\u2462"}],"title":"10.8. \nThe Predefined CIE XYZ Color Spaces: the xyz-d50, xyz-d65, and xyz keywords"},{"refs":[{"id":"ref-for-valdef-color-xyz\u2463"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-valdef-color-xyz\u2464"}],"title":"14.4. \nResolving values of the color() function"},{"refs":[{"id":"ref-for-valdef-color-xyz\u2465"}],"title":"15.5. \nSerializing values of the color() function"}],"url":"#valdef-color-xyz"}, "valdef-color-xyz-d50": {"dfnID":"valdef-color-xyz-d50","dfnText":"xyz-d50","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-xyz-d50"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-valdef-color-xyz-d50\u2460"},{"id":"ref-for-valdef-color-xyz-d50\u2461"}],"title":"10.8. \nThe Predefined CIE XYZ Color Spaces: the xyz-d50, xyz-d65, and xyz keywords"},{"refs":[{"id":"ref-for-valdef-color-xyz-d50\u2462"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-valdef-color-xyz-d50\u2463"}],"title":"15.5. \nSerializing values of the color() function"}],"url":"#valdef-color-xyz-d50"}, "valdef-color-xyz-d65": {"dfnID":"valdef-color-xyz-d65","dfnText":"xyz-d65","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-xyz-d65"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"},{"refs":[{"id":"ref-for-valdef-color-xyz-d65\u2460"},{"id":"ref-for-valdef-color-xyz-d65\u2461"}],"title":"10.8. \nThe Predefined CIE XYZ Color Spaces: the xyz-d50, xyz-d65, and xyz keywords"},{"refs":[{"id":"ref-for-valdef-color-xyz-d65\u2462"}],"title":"12.1. \nColor Space for Interpolation"},{"refs":[{"id":"ref-for-valdef-color-xyz-d65\u2463"},{"id":"ref-for-valdef-color-xyz-d65\u2464"}],"title":"14.4. \nResolving values of the color() function"},{"refs":[{"id":"ref-for-valdef-color-xyz-d65\u2465"}],"title":"15.5. \nSerializing values of the color() function"}],"url":"#valdef-color-xyz-d65"}, "valdef-color-yellow": {"dfnID":"valdef-color-yellow","dfnText":"yellow","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-color-yellow"}],"title":"7. \nHSL Colors: hsl() and hsla() functions"}],"url":"#valdef-color-yellow"}, "valdef-color-yellowgreen": {"dfnID":"valdef-color-yellowgreen","dfnText":"yellowgreen","external":false,"refSections":[],"url":"#valdef-color-yellowgreen"}, "valdef-hsl-hsl": {"dfnID":"valdef-hsl-hsl","dfnText":"HSL","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-hsl-hsl"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-valdef-hsl-hsl\u2460"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"#valdef-hsl-hsl"}, "valdef-hwb-hwb": {"dfnID":"valdef-hwb-hwb","dfnText":"HWB","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-hwb-hwb"}],"title":"8. \nHWB Colors: hwb() function"},{"refs":[{"id":"ref-for-valdef-hwb-hwb\u2460"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"#valdef-hwb-hwb"}, "valdef-lab-lab": {"dfnID":"valdef-lab-lab","dfnText":"Lab","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-lab-lab"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-valdef-lab-lab\u2460"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"#valdef-lab-lab"}, "valdef-lch-lch": {"dfnID":"valdef-lch-lch","dfnText":"LCH","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-lch-lch"}],"title":"9.3. \nSpecifying Lab and LCH: the lab() and lch() functional notations"},{"refs":[{"id":"ref-for-valdef-lch-lch\u2460"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"#valdef-lch-lch"}, "valdef-oklab-oklab": {"dfnID":"valdef-oklab-oklab","dfnText":"Oklab","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-oklab-oklab"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-valdef-oklab-oklab\u2460"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"#valdef-oklab-oklab"}, "valdef-oklch-oklch": {"dfnID":"valdef-oklch-oklch","dfnText":"Oklch","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-oklch-oklch"}],"title":"9.4. \n\tSpecifying Oklab and Oklch: the oklab() and oklch() functional notations"},{"refs":[{"id":"ref-for-valdef-oklch-oklch\u2460"}],"title":"12.1. \nColor Space for Interpolation"}],"url":"#valdef-oklch-oklch"}, "valid-color": {"dfnID":"valid-color","dfnText":"valid color","external":false,"refSections":[{"refs":[{"id":"ref-for-valid-color"},{"id":"ref-for-valid-color\u2460"},{"id":"ref-for-valid-color\u2461"}],"title":"2. Color Terminology"},{"refs":[{"id":"ref-for-valid-color\u2462"},{"id":"ref-for-valid-color\u2463"}],"title":"10.1. \nSpecifying Predefined Colors: the color() function"}],"url":"#valid-color"}, "white-point": {"dfnID":"white-point","dfnText":"white point","external":false,"refSections":[{"refs":[{"id":"ref-for-white-point"},{"id":"ref-for-white-point\u2460"}],"title":"2. Color Terminology"}],"url":"#white-point"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "#typedef-color": "Expands to: <alpha-value> | accentcolor | accentcolortext | activeborder | activecaption | activetext | aliceblue | antiquewhite | appworkspace | aqua | aquamarine | azure | background | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | buttonborder | buttonface | buttonhighlight | buttonshadow | buttontext | cadetblue | canvas | canvastext | captiontext | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | field | fieldtext | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | graytext | green | greenyellow | grey | highlight | highlighttext | honeydew | hotpink | inactiveborder | inactivecaption | inactivecaptiontext | indianred | indigo | infobackground | infotext | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | linktext | magenta | mark | marktext | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | menu | menutext | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | scrollbar | seagreen | seashell | selecteditem | selecteditemtext | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | threeddarkshadow | threedface | threedhighlight | threedlightshadow | threedshadow | tomato | transparent | turquoise | violet | visitedtext | wheat | white | whitesmoke | window | windowframe | windowtext | yellow | yellowgreen", "#typedef-deprecated-color": "Expands to: activeborder | activecaption | appworkspace | background | buttonhighlight | buttonshadow | captiontext | inactiveborder | inactivecaption | inactivecaptiontext | infobackground | infotext | menu | menutext | scrollbar | threeddarkshadow | threedface | threedhighlight | threedlightshadow | threedshadow | window | windowframe | windowtext", "#typedef-named-color": "Expands to: aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen", "#typedef-system-color": "Expands to: accentcolor | accentcolortext | activetext | buttonborder | buttonface | buttontext | canvas | canvastext | field | fieldtext | graytext | highlight | highlighttext | linktext | mark | marktext | selecteditem | selecteditemtext | visitedtext", "https://drafts.csswg.org/css-values-4/#angle-value": "Expands to: deg | grad | rad | turn", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#absolute-color": {"displayText":"absolute color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"absolute color","type":"dfn","url":"#absolute-color"}, "#alpha-channel": {"displayText":"alpha component","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"alpha component","type":"dfn","url":"#alpha-channel"}, "#analogous-components": {"displayText":"analogous components","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"analogous components","type":"dfn","url":"#analogous-components"}, "#calibrated": {"displayText":"calibrated","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"calibrated","type":"dfn","url":"#calibrated"}, "#can-be-displayed": {"displayText":"can be displayed","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"can be displayed","type":"dfn","url":"#can-be-displayed"}, "#cant-be-displayed": {"displayText":"can't be displayed","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"can't be displayed","type":"dfn","url":"#cant-be-displayed"}, "#carried-forward": {"displayText":"carried forward","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"carried forward","type":"dfn","url":"#carried-forward"}, "#chromatic-adaptation-transform": {"displayText":"chromatic adaptation transform","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"chromatic adaptation transform","type":"dfn","url":"#chromatic-adaptation-transform"}, "#color-functions": {"displayText":"color functions","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"color functions","type":"dfn","url":"#color-functions"}, "#color-interpolation-method": {"displayText":"<color-interpolation-method>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<color-interpolation-method>","type":"type","url":"#color-interpolation-method"}, "#color-space": {"displayText":"color space","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"color space","type":"dfn","url":"#color-space"}, "#css-gamut-mapped": {"displayText":"css gamut mapped","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"css gamut mapped","type":"dfn","url":"#css-gamut-mapped"}, "#css-system-colors": {"displayText":"system colors","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"system colors","type":"dfn","url":"#css-system-colors"}, "#cylindrical-polar-color": {"displayText":"cylindrical polar color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"cylindrical polar color","type":"dfn","url":"#cylindrical-polar-color"}, "#d50-whitepoint": {"displayText":"d50","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"d50","type":"dfn","url":"#d50-whitepoint"}, "#d65-whitepoint": {"displayText":"d65","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"d65","type":"dfn","url":"#d65-whitepoint"}, "#funcdef-color": {"displayText":"color()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"color()","type":"function","url":"#funcdef-color"}, "#funcdef-hsl": {"displayText":"hsl()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"hsl()","type":"function","url":"#funcdef-hsl"}, "#funcdef-hsla": {"displayText":"hsla()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"hsla()","type":"function","url":"#funcdef-hsla"}, "#funcdef-hwb": {"displayText":"hwb()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"hwb()","type":"function","url":"#funcdef-hwb"}, "#funcdef-lab": {"displayText":"lab()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"lab()","type":"function","url":"#funcdef-lab"}, "#funcdef-lch": {"displayText":"lch()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"lch()","type":"function","url":"#funcdef-lch"}, "#funcdef-oklab": {"displayText":"oklab()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"oklab()","type":"function","url":"#funcdef-oklab"}, "#funcdef-oklch": {"displayText":"oklch()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"oklch()","type":"function","url":"#funcdef-oklch"}, "#funcdef-rgb": {"displayText":"rgb()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"rgb()","type":"function","url":"#funcdef-rgb"}, "#funcdef-rgba": {"displayText":"rgba()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"rgba()","type":"function","url":"#funcdef-rgba"}, "#hex-color": {"displayText":"hex color notation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"hex color notation","type":"dfn","url":"#hex-color"}, "#interpolation-color-space": {"displayText":"interpolation color space","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"interpolation color space","type":"dfn","url":"#interpolation-color-space"}, "#invalid-color": {"displayText":"invalid color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"invalid color","type":"dfn","url":"#invalid-color"}, "#legacy-color-syntax": {"displayText":"legacy color syntax","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"legacy color syntax","type":"dfn","url":"#legacy-color-syntax"}, "#luminance": {"displayText":"luminance","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"luminance","type":"dfn","url":"#luminance"}, "#missing-color-component": {"displayText":"missing component","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"missing component","type":"dfn","url":"#missing-color-component"}, "#named-color": {"displayText":"named color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"named color","type":"dfn","url":"#named-color"}, "#opaque-black": {"displayText":"opaque black","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"opaque black","type":"dfn","url":"#opaque-black"}, "#out-of-gamut": {"displayText":"out of gamut","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"out of gamut","type":"dfn","url":"#out-of-gamut"}, "#powerless-color-component": {"displayText":"powerless","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"powerless","type":"dfn","url":"#powerless-color-component"}, "#premultiplied": {"displayText":"premultiplied","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"premultiplied","type":"dfn","url":"#premultiplied"}, "#propdef-color": {"displayText":"color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"color","type":"property","url":"#propdef-color"}, "#propdef-opacity": {"displayText":"opacity","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"opacity","type":"property","url":"#propdef-opacity"}, "#rectangular-orthogonal-color": {"displayText":"rectangular orthogonal color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"rectangular orthogonal color","type":"dfn","url":"#rectangular-orthogonal-color"}, "#sRGB-space": {"displayText":"srgb","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"srgb","type":"dfn","url":"#sRGB-space"}, "#transparent-black": {"displayText":"transparent black","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"transparent black","type":"dfn","url":"#transparent-black"}, "#typedef-color": {"displayText":"<color>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<color>","type":"type","url":"#typedef-color"}, "#typedef-color-alpha-value": {"displayText":"<alpha-value>","export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<alpha-value>","type":"type","url":"#typedef-color-alpha-value"}, "#typedef-color-base": {"displayText":"<color-base>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<color-base>","type":"type","url":"#typedef-color-base"}, "#typedef-color-function": {"displayText":"<color-function>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<color-function>","type":"type","url":"#typedef-color-function"}, "#typedef-colorspace-params": {"displayText":"<colorspace-params>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<colorspace-params>","type":"type","url":"#typedef-colorspace-params"}, "#typedef-deprecated-color": {"displayText":"<deprecated-color>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<deprecated-color>","type":"type","url":"#typedef-deprecated-color"}, "#typedef-hex-color": {"displayText":"<hex-color>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<hex-color>","type":"type","url":"#typedef-hex-color"}, "#typedef-hue": {"displayText":"<hue>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<hue>","type":"type","url":"#typedef-hue"}, "#typedef-hue-interpolation-method": {"displayText":"<hue-interpolation-method>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<hue-interpolation-method>","type":"type","url":"#typedef-hue-interpolation-method"}, "#typedef-legacy-hsl-syntax": {"displayText":"<legacy-hsl-syntax>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<legacy-hsl-syntax>","type":"type","url":"#typedef-legacy-hsl-syntax"}, "#typedef-legacy-hsla-syntax": {"displayText":"<legacy-hsla-syntax>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<legacy-hsla-syntax>","type":"type","url":"#typedef-legacy-hsla-syntax"}, "#typedef-legacy-rgb-syntax": {"displayText":"<legacy-rgb-syntax>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<legacy-rgb-syntax>","type":"type","url":"#typedef-legacy-rgb-syntax"}, "#typedef-legacy-rgba-syntax": {"displayText":"<legacy-rgba-syntax>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<legacy-rgba-syntax>","type":"type","url":"#typedef-legacy-rgba-syntax"}, "#typedef-modern-hsl-syntax": {"displayText":"<modern-hsl-syntax>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<modern-hsl-syntax>","type":"type","url":"#typedef-modern-hsl-syntax"}, "#typedef-modern-hsla-syntax": {"displayText":"<modern-hsla-syntax>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<modern-hsla-syntax>","type":"type","url":"#typedef-modern-hsla-syntax"}, "#typedef-modern-rgb-syntax": {"displayText":"<modern-rgb-syntax>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<modern-rgb-syntax>","type":"type","url":"#typedef-modern-rgb-syntax"}, "#typedef-modern-rgba-syntax": {"displayText":"<modern-rgba-syntax>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<modern-rgba-syntax>","type":"type","url":"#typedef-modern-rgba-syntax"}, "#typedef-named-color": {"displayText":"<named-color>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<named-color>","type":"type","url":"#typedef-named-color"}, "#typedef-opacity-opacity-value": {"displayText":"<opacity-value>","export":true,"for_":["opacity"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<opacity-value>","type":"type","url":"#typedef-opacity-opacity-value"}, "#typedef-polar-color-space": {"displayText":"<polar-color-space>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<polar-color-space>","type":"type","url":"#typedef-polar-color-space"}, "#typedef-predefined-rgb": {"displayText":"<predefined-rgb>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<predefined-rgb>","type":"type","url":"#typedef-predefined-rgb"}, "#typedef-predefined-rgb-params": {"displayText":"<predefined-rgb-params>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<predefined-rgb-params>","type":"type","url":"#typedef-predefined-rgb-params"}, "#typedef-quirky-color": {"displayText":"<quirky-color>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<quirky-color>","type":"type","url":"#typedef-quirky-color"}, "#typedef-rectangular-color-space": {"displayText":"<rectangular-color-space>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<rectangular-color-space>","type":"type","url":"#typedef-rectangular-color-space"}, "#typedef-system-color": {"displayText":"<system-color>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<system-color>","type":"type","url":"#typedef-system-color"}, "#typedef-xyz-params": {"displayText":"<xyz-params>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<xyz-params>","type":"type","url":"#typedef-xyz-params"}, "#typedef-xyz-space": {"displayText":"<xyz-space>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"<xyz-space>","type":"type","url":"#typedef-xyz-space"}, "#untagged-image": {"displayText":"untagged image","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"untagged image","type":"dfn","url":"#untagged-image"}, "#used-color": {"displayText":"used color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"used color","type":"dfn","url":"#used-color"}, "#valdef-color-a98-rgb": {"displayText":"a98-rgb","export":true,"for_":["color()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"a98-rgb","type":"value","url":"#valdef-color-a98-rgb"}, "#valdef-color-accentcolor": {"displayText":"accentcolor","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"accentcolor","type":"value","url":"#valdef-color-accentcolor"}, "#valdef-color-accentcolortext": {"displayText":"accentcolortext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"accentcolortext","type":"value","url":"#valdef-color-accentcolortext"}, "#valdef-color-activetext": {"displayText":"activetext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"activetext","type":"value","url":"#valdef-color-activetext"}, "#valdef-color-blue": {"displayText":"blue","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"blue","type":"value","url":"#valdef-color-blue"}, "#valdef-color-buttonborder": {"displayText":"buttonborder","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"buttonborder","type":"value","url":"#valdef-color-buttonborder"}, "#valdef-color-buttonface": {"displayText":"buttonface","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"buttonface","type":"value","url":"#valdef-color-buttonface"}, "#valdef-color-buttontext": {"displayText":"buttontext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"buttontext","type":"value","url":"#valdef-color-buttontext"}, "#valdef-color-canvas": {"displayText":"canvas","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"canvas","type":"value","url":"#valdef-color-canvas"}, "#valdef-color-canvastext": {"displayText":"canvastext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"canvastext","type":"value","url":"#valdef-color-canvastext"}, "#valdef-color-currentcolor": {"displayText":"currentcolor","export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"currentcolor","type":"value","url":"#valdef-color-currentcolor"}, "#valdef-color-darkgray": {"displayText":"darkgray","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"darkgray","type":"value","url":"#valdef-color-darkgray"}, "#valdef-color-display-p3": {"displayText":"display-p3","export":true,"for_":["color()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"display-p3","type":"value","url":"#valdef-color-display-p3"}, "#valdef-color-field": {"displayText":"field","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"field","type":"value","url":"#valdef-color-field"}, "#valdef-color-fieldtext": {"displayText":"fieldtext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"fieldtext","type":"value","url":"#valdef-color-fieldtext"}, "#valdef-color-goldenrod": {"displayText":"goldenrod","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"goldenrod","type":"value","url":"#valdef-color-goldenrod"}, "#valdef-color-gray": {"displayText":"gray","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"gray","type":"value","url":"#valdef-color-gray"}, "#valdef-color-graytext": {"displayText":"graytext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"graytext","type":"value","url":"#valdef-color-graytext"}, "#valdef-color-green": {"displayText":"green","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"green","type":"value","url":"#valdef-color-green"}, "#valdef-color-highlight": {"displayText":"highlight","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"highlight","type":"value","url":"#valdef-color-highlight"}, "#valdef-color-highlighttext": {"displayText":"highlighttext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"highlighttext","type":"value","url":"#valdef-color-highlighttext"}, "#valdef-color-indianred": {"displayText":"indianred","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"indianred","type":"value","url":"#valdef-color-indianred"}, "#valdef-color-lightpink": {"displayText":"lightpink","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"lightpink","type":"value","url":"#valdef-color-lightpink"}, "#valdef-color-linktext": {"displayText":"linktext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"linktext","type":"value","url":"#valdef-color-linktext"}, "#valdef-color-mark": {"displayText":"mark","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"mark","type":"value","url":"#valdef-color-mark"}, "#valdef-color-marktext": {"displayText":"marktext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"marktext","type":"value","url":"#valdef-color-marktext"}, "#valdef-color-none": {"displayText":"none","export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"none","type":"value","url":"#valdef-color-none"}, "#valdef-color-pink": {"displayText":"pink","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"pink","type":"value","url":"#valdef-color-pink"}, "#valdef-color-prophoto-rgb": {"displayText":"prophoto-rgb","export":true,"for_":["color()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"prophoto-rgb","type":"value","url":"#valdef-color-prophoto-rgb"}, "#valdef-color-rebeccapurple": {"displayText":"rebeccapurple","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"rebeccapurple","type":"value","url":"#valdef-color-rebeccapurple"}, "#valdef-color-rec2020": {"displayText":"rec2020","export":true,"for_":["color()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"rec2020","type":"value","url":"#valdef-color-rec2020"}, "#valdef-color-red": {"displayText":"red","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"red","type":"value","url":"#valdef-color-red"}, "#valdef-color-selecteditem": {"displayText":"selecteditem","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"selecteditem","type":"value","url":"#valdef-color-selecteditem"}, "#valdef-color-selecteditemtext": {"displayText":"selecteditemtext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"selecteditemtext","type":"value","url":"#valdef-color-selecteditemtext"}, "#valdef-color-srgb": {"displayText":"srgb","export":true,"for_":["color()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"srgb","type":"value","url":"#valdef-color-srgb"}, "#valdef-color-srgb-linear": {"displayText":"srgb-linear","export":true,"for_":["color()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"srgb-linear","type":"value","url":"#valdef-color-srgb-linear"}, "#valdef-color-transparent": {"displayText":"transparent","export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"transparent","type":"value","url":"#valdef-color-transparent"}, "#valdef-color-visitedtext": {"displayText":"visitedtext","export":true,"for_":["<color>","<system-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"visitedtext","type":"value","url":"#valdef-color-visitedtext"}, "#valdef-color-white": {"displayText":"white","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"white","type":"value","url":"#valdef-color-white"}, "#valdef-color-xyz": {"displayText":"xyz","export":true,"for_":["color()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"xyz","type":"value","url":"#valdef-color-xyz"}, "#valdef-color-xyz-d50": {"displayText":"xyz-d50","export":true,"for_":["color()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"xyz-d50","type":"value","url":"#valdef-color-xyz-d50"}, "#valdef-color-xyz-d65": {"displayText":"xyz-d65","export":true,"for_":["color()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"xyz-d65","type":"value","url":"#valdef-color-xyz-d65"}, "#valdef-color-yellow": {"displayText":"yellow","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"yellow","type":"value","url":"#valdef-color-yellow"}, "#valdef-hsl-hsl": {"displayText":"hsl","export":true,"for_":["hsl()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"hsl","type":"value","url":"#valdef-hsl-hsl"}, "#valdef-hwb-hwb": {"displayText":"hwb","export":true,"for_":["hwb()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"hwb","type":"value","url":"#valdef-hwb-hwb"}, "#valdef-lab-lab": {"displayText":"lab","export":true,"for_":["lab()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"lab","type":"value","url":"#valdef-lab-lab"}, "#valdef-lch-lch": {"displayText":"lch","export":true,"for_":["lch()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"lch","type":"value","url":"#valdef-lch-lch"}, "#valdef-oklab-oklab": {"displayText":"oklab","export":true,"for_":["oklab()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"oklab","type":"value","url":"#valdef-oklab-oklab"}, "#valdef-oklch-oklch": {"displayText":"oklch","export":true,"for_":["oklch()"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"oklch","type":"value","url":"#valdef-oklch-oklch"}, "#valid-color": {"displayText":"valid color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"valid color","type":"dfn","url":"#valid-color"}, "#white-point": {"displayText":"white point","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"local","text":"white point","type":"dfn","url":"#white-point"}, "https://dom.spec.whatwg.org/#concept-document-quirks": {"displayText":"quirks mode","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"quirks mode","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-document-quirks"}, "https://dom.spec.whatwg.org/#concept-element": {"displayText":"element","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"element","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-element"}, "https://drafts.csswg.org/css-animations-1/#propdef-animation": {"displayText":"animation","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"current","text":"animation","type":"property","url":"https://drafts.csswg.org/css-animations-1/#propdef-animation"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background": {"displayText":"background","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color": {"displayText":"background-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color"}, "https://drafts.csswg.org/css-borders-4/#propdef-border-bottom-color": {"displayText":"border-bottom-color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-borders","spec":"css-borders-4","status":"current","text":"border-bottom-color","type":"property","url":"https://drafts.csswg.org/css-borders-4/#propdef-border-bottom-color"}, "https://drafts.csswg.org/css-borders-4/#propdef-border-color": {"displayText":"border-color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-borders","spec":"css-borders-4","status":"current","text":"border-color","type":"property","url":"https://drafts.csswg.org/css-borders-4/#propdef-border-color"}, "https://drafts.csswg.org/css-borders-4/#propdef-border-left-color": {"displayText":"border-left-color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-borders","spec":"css-borders-4","status":"current","text":"border-left-color","type":"property","url":"https://drafts.csswg.org/css-borders-4/#propdef-border-left-color"}, "https://drafts.csswg.org/css-borders-4/#propdef-border-right-color": {"displayText":"border-right-color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-borders","spec":"css-borders-4","status":"current","text":"border-right-color","type":"property","url":"https://drafts.csswg.org/css-borders-4/#propdef-border-right-color"}, "https://drafts.csswg.org/css-borders-4/#propdef-border-top-color": {"displayText":"border-top-color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-borders","spec":"css-borders-4","status":"current","text":"border-top-color","type":"property","url":"https://drafts.csswg.org/css-borders-4/#propdef-border-top-color"}, "https://drafts.csswg.org/css-cascade-5/#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"computed value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "https://drafts.csswg.org/css-cascade-5/#declared-value": {"displayText":"declared value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"declared value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#declared-value"}, "https://drafts.csswg.org/css-cascade-5/#inherited-value": {"displayText":"inherited value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"inherited value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#inherited-value"}, "https://drafts.csswg.org/css-cascade-5/#initial-value": {"displayText":"initial value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"initial value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#initial-value"}, "https://drafts.csswg.org/css-cascade-5/#specified-value": {"displayText":"specified value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"specified value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#specified-value"}, "https://drafts.csswg.org/css-cascade-5/#used-value": {"displayText":"used value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"used value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#used-value"}, "https://drafts.csswg.org/css-color-5/#funcdef-color-mix": {"displayText":"color-mix()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"current","text":"color-mix()","type":"function","url":"https://drafts.csswg.org/css-color-5/#funcdef-color-mix"}, "https://drafts.csswg.org/css-color-5/#relative-color": {"displayText":"relative color","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"current","text":"relative color","type":"dfn","url":"https://drafts.csswg.org/css-color-5/#relative-color"}, "https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode": {"displayText":"forced colors mode","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-color-adjust","spec":"css-color-adjust-1","status":"current","text":"forced colors mode","type":"dfn","url":"https://drafts.csswg.org/css-color-adjust-1/#forced-colors-mode"}, "https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports": {"displayText":"@supports","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"current","text":"@supports","type":"at-rule","url":"https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports"}, "https://drafts.csswg.org/css-conditional-3/#dom-css-supports-conditiontext": {"displayText":"supports(conditionText)","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"current","text":"supports(conditionText)","type":"method","url":"https://drafts.csswg.org/css-conditional-3/#dom-css-supports-conditiontext"}, "https://drafts.csswg.org/css-images-4/#typedef-gradient": {"displayText":"<gradient>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-images","spec":"css-images-4","status":"current","text":"<gradient>","type":"type","url":"https://drafts.csswg.org/css-images-4/#typedef-gradient"}, "https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar": {"displayText":"parse","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"parse","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar"}, "https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token": {"displayText":"<dimension-token>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"<dimension-token>","type":"type","url":"https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token"}, "https://drafts.csswg.org/css-syntax-3/#typedef-hash-token": {"displayText":"<hash-token>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"<hash-token>","type":"type","url":"https://drafts.csswg.org/css-syntax-3/#typedef-hash-token"}, "https://drafts.csswg.org/css-syntax-3/#typedef-ident-token": {"displayText":"<ident-token>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"<ident-token>","type":"type","url":"https://drafts.csswg.org/css-syntax-3/#typedef-ident-token"}, "https://drafts.csswg.org/css-syntax-3/#typedef-number-token": {"displayText":"<number-token>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"<number-token>","type":"type","url":"https://drafts.csswg.org/css-syntax-3/#typedef-number-token"}, "https://drafts.csswg.org/css-text-decor-4/#propdef-text-emphasis-color": {"displayText":"text-emphasis-color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-4","status":"current","text":"text-emphasis-color","type":"property","url":"https://drafts.csswg.org/css-text-decor-4/#propdef-text-emphasis-color"}, "https://drafts.csswg.org/css-transitions-1/#propdef-transition": {"displayText":"transition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transitions","spec":"css-transitions-1","status":"current","text":"transition","type":"property","url":"https://drafts.csswg.org/css-transitions-1/#propdef-transition"}, "https://drafts.csswg.org/css-values-4/#angle-value": {"displayText":"<angle>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<angle>","type":"type","url":"https://drafts.csswg.org/css-values-4/#angle-value"}, "https://drafts.csswg.org/css-values-4/#canonical-unit": {"displayText":"canonical unit","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"canonical unit","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#canonical-unit"}, "https://drafts.csswg.org/css-values-4/#comb-comma": {"displayText":",","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":",","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-comma"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-keyword": {"displayText":"keyword","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"keyword","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-keyword"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-values-4/#funcdef-calc": {"displayText":"calc()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"calc()","type":"function","url":"https://drafts.csswg.org/css-values-4/#funcdef-calc"}, "https://drafts.csswg.org/css-values-4/#functional-notation": {"displayText":"functional notation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"functional notation","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#functional-notation"}, "https://drafts.csswg.org/css-values-4/#integer-value": {"displayText":"<integer>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<integer>","type":"type","url":"https://drafts.csswg.org/css-values-4/#integer-value"}, "https://drafts.csswg.org/css-values-4/#mult-comma": {"displayText":"#","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"#","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-comma"}, "https://drafts.csswg.org/css-values-4/#mult-num": {"displayText":"{A}","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"{a}","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-num"}, "https://drafts.csswg.org/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"?","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "https://drafts.csswg.org/css-values-4/#number-value": {"displayText":"<number>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<number>","type":"type","url":"https://drafts.csswg.org/css-values-4/#number-value"}, "https://drafts.csswg.org/css-values-4/#percentage-value": {"displayText":"<percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<percentage>","type":"type","url":"https://drafts.csswg.org/css-values-4/#percentage-value"}, "https://drafts.csswg.org/css-values-4/#typedef-ident": {"displayText":"<ident>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<ident>","type":"type","url":"https://drafts.csswg.org/css-values-4/#typedef-ident"}, "https://drafts.csswg.org/css-values-4/#valdef-calc-infinity": {"displayText":"infinity","export":true,"for_":["calc()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"infinity","type":"value","url":"https://drafts.csswg.org/css-values-4/#valdef-calc-infinity"}, "https://drafts.csswg.org/css-values-4/#valdef-calc-nan": {"displayText":"NaN","export":true,"for_":["calc()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"nan","type":"value","url":"https://drafts.csswg.org/css-values-4/#valdef-calc-nan"}, "https://drafts.csswg.org/css2/#propdef-z-index": {"displayText":"z-index","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"z-index","type":"property","url":"https://drafts.csswg.org/css2/#propdef-z-index"}, "https://drafts.csswg.org/css2/#stacking-context": {"displayText":"stacking context","export":false,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"stacking context","type":"dfn","url":"https://drafts.csswg.org/css2/#stacking-context"}, "https://drafts.csswg.org/css2/#valdef-z-index-auto": {"displayText":"auto","export":true,"for_":["z-index"],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css2/#valdef-z-index-auto"}, "https://drafts.csswg.org/cssom-1/#resolved-value": {"displayText":"resolved value","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"resolved value","type":"dfn","url":"https://drafts.csswg.org/cssom-1/#resolved-value"}, "https://drafts.csswg.org/mediaqueries-5/#media-feature": {"displayText":"media feature","export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"current","text":"media feature","type":"dfn","url":"https://drafts.csswg.org/mediaqueries-5/#media-feature"}, "https://drafts.fxtf.org/filter-effects-1/#propdef-filter": {"displayText":"filter","export":true,"for_":[],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"current","text":"filter","type":"property","url":"https://drafts.fxtf.org/filter-effects-1/#propdef-filter"}, "https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element": {"displayText":"mark","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"mark","type":"element","url":"https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element"}, "https://infra.spec.whatwg.org/#string": {"displayText":"string","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"string","type":"dfn","url":"https://infra.spec.whatwg.org/#string"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script> <script>/* Boilerplate: script-var-click-highlighting */ "use strict"; { /* Color-choosing design: * Colors are ordered by goodness. * On clicking a var, give it the earliest color with the lowest usage in the algorithm. * On re-clicking, re-use the var's most recent color if that's not currently being used elsewhere. */ const COLOR_COUNT = 7; document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = findAlgoContainer(v); // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const varName = nameFromVar(v); if(!v.hasAttribute("data-var-color")) { const newColor = chooseHighlightColor(algoContainer, v); for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.setAttribute("data-var-color", newColor); el.setAttribute("data-var-last-color", newColor); } } } else { for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.removeAttribute("data-var-color"); } } } } function findAlgoContainer(el) { while(el != document.body) { if(el.hasAttribute("data-algorithm")) return el; el = el.parentNode; } return null; } function nameFromVar(el) { return el.textContent.replace(/(\s|\xa0)+/g, " ").trim(); } function colorCountsFromContainer(container) { const namesFromColor = Array.from({length:COLOR_COUNT}, x=>new Set()); for(let v of container.querySelectorAll("var[data-var-color]")) { let color = +v.getAttribute("data-var-color"); namesFromColor[color].add(nameFromVar(v)); } return namesFromColor.map(x=>x.size); } function leastUsedColor(colors) { // Find the earliest color with the lowest count. let minCount = Infinity; let minColor = null; for(var i = 0; i < colors.length; i++) { if(colors[i] < minCount) { minColor = i; minCount = colors[i]; } } return minColor; } function chooseHighlightColor(container, v) { const colorCounts = colorCountsFromContainer(container); if(v.hasAttribute("data-var-last-color")) { let color = +v.getAttribute("data-var-last-color"); if(colorCounts[color] == 0) return color; } return leastUsedColor(colorCounts); } } </script> <script>/* Boilerplate: script-wpt */ "use strict"; { let wptData = { "paths": ["/css/css-color/","/css/css-images/","/css/css-transitions/","/html/canvas/","/png/"], }; document.addEventListener("DOMContentLoaded", async ()=>{ if(wptData.paths.length == 0) return; const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge"; const runs = await (await fetch(runsUrl)).json(); let testResults = []; for(const pathPrefix of wptData.paths) { const pathResults = await (await fetch("https://wpt.fyi/api/search", { method:"POST", headers:{ "Content-Type":"application/json", }, body: JSON.stringify({ "run_ids": runs.map(x=>x.id), "query": {"path": pathPrefix}, }) })).json(); testResults = testResults.concat(pathResults.results); } const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0})); const resultsFromPath = new Map(testResults.map(result=>{ const testPath = result.test; const passes = result.legacy_status.map(x=>[x.passes, x.total]); return [testPath, passes]; })); const seenTests = new Set(); document.querySelectorAll(".wpt-name").forEach(nameEl=>{ const passData = resultsFromPath.get("/" + nameEl.getAttribute("title")); if(!passData) { console.log("Couldn't find test in results:", nameEl); return } const numTests = passData[0][1]; if(numTests > 1) { nameEl.insertAdjacentElement("beforeend", mk.small({}, ` (${numTests} tests)`)); } if(passData == undefined) return; const resultsEl = mk.span({"class":"wpt-results"}, ...passData.map((p,i) => mk.span( { "title": `${browsers[i].name} ${p[0]}/${p[1]}`, "class": "wpt-result", "style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`, })), ); nameEl.insertAdjacentElement("afterend", resultsEl); // Only update the summary pass/total count if we haven't seen this // test before, to support authors listing the same test multiple times // in a spec. if (!seenTests.has(nameEl.getAttribute("title"))) { seenTests.add(nameEl.getAttribute("title")); passData.forEach((p,i) => { browsers[i].passes += p[0]; browsers[i].total += p[1]; }); } }); const overview = document.querySelector(".wpt-overview"); if(overview) { overview.appendChild(mk.ul({}, ...browsers.map(formatWptResult))); document.head.appendChild(mk.style({}, `.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;} .wpt-overview li { padding: .25em 1em; color: black; text-align: center; } .wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; } .wpt-overview .browser { font-weight: bold; } .wpt-overview .passes-none { background: #e57373; } .wpt-overview .passes-hardly { background: #ffb74d; } .wpt-overview .passes-a-few { background: #ffd54f; } .wpt-overview .passes-half { background: #fff176; } .wpt-overview .passes-lots { background: #dce775; } .wpt-overview .passes-most { background: #aed581; } .wpt-overview .passes-all { background: #81c784; }`)); } }); function formatWptResult({name, version, passes, total}) { const passRate = passes/total; let passClass = ""; if(passRate == 0) passClass = "passes-none"; else if(passRate < .2) passClass = "passes-hardly"; else if(passRate < .4) passClass = "passes-a-few"; else if(passRate < .6) passClass = "passes-half"; else if(passRate < .8) passClass = "passes-lots"; else if(passRate < 1) passClass = "passes-most"; else passClass = "passes-all"; name = name[0].toUpperCase() + name.slice(1); const shortVersion = /^\d+/.exec(version); const icon = [] if(name == "Chrome") icon.push(mk.img({alt:"", src:"https://wpt.fyi/static/chrome_64x64.png"})); if(name == "Edge") icon.push(mk.img({alt:"", src:"https://wpt.fyi/static/edge_64x64.png"})); if(name == "Safari") icon.push(mk.img({alt:"", src:"https://wpt.fyi/static/safari_64x64.png"})); if(name == "Firefox") icon.push(mk.img({alt:"", src:"https://wpt.fyi/static/firefox_64x64.png"})); return mk.li({"class":passClass}, mk.nobr({'class':'browser'}, ...icon, ` ${name} ${shortVersion}`), mk.br(), mk.nobr({'class':'pass-rate'}, `${passes}/${total}`) ); } } </script>