Cascading Style Sheets/Color

Colors can be specified for various objects. These include text ("color: white"), background ("background-color: white"), and borders ("border-color: gray"). An example CSS rule that sets all h1 elements to have white text on a red background: h1 { color: white; background-color: red; } Methods of specification of colors, an overview: English name, such as color: white The CSS color name transparent creates a completely transparent color = rgba(0, 0, 0, 0) Hexadecimal RGB value, such as color: #ff0000 Soft colours in hexadecimal RGB value like color: #f00 Decimal RGB value, such as color: rgb(255, 0, 0) Decimal RGBA value, such as color: rgba(255, 0, 0, 0.2) HSL value, such as color: hsl(120, 100%, 50%) HSLA value, such as color: hsla(0, 100%, 50%, 0.5) Specification of colors is detailed in the following sections. If you set any colors in your web page, you should set both the background and text color for the body element of the page. Imagine if you set the text color to black and did not set the background color. A user has their preferred colors set to yellow text on a black background, a fairly common combination for users with low vision. The page is rendered with your black text on their black background and is unusable. color values syntax Formal syntax <color> = <absolute-color-base> | currentcolor | <system-color> <absolute-color-base> = <hex-color> | <absolute-color-function> | <named-color> | transparent <absolute-color-function> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <oklab()> | <oklch()> | <color()> <rgb()> = <legacy-rgb-syntax> | <modern-rgb-syntax> <rgba()> = <legacy-rgba-syntax> | <modern-rgba-syntax> <hsl()> = <legacy-hsl-syntax> | <modern-hsl-syntax> <hsla()> = <legacy-hsla-syntax> | <modern-hsla-syntax> <hwb()> = hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <lab()> = lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <lch()> = lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? ) <oklab()> = oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <oklch()> = oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? ) <color()> = color( <colorspace-params> [ / [ <alpha-value> | none ] ]? ) <legacy-rgb-syntax> = rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? ) <modern-rgb-syntax> = rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) <legacy-rgba-syntax> = rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ) <modern-rgba-syntax> = rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) <legacy-hsl-syntax> = hsl( <hue> , <percentage> , <percentage> , <alpha-value>? ) <modern-hsl-syntax> = hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <legacy-hsla-syntax> = hsla( <hue> , <percentage> , <percentage> , <alpha-value>? ) <modern-hsla-syntax> = hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? ) <hue> = <number> | <angle> <alpha-value> = <number> | <percentage> <colorspace-params> = <predefined-rgb-params> | <xyz-params> <predefined-rgb-params> = <predefined-rgb> [ <number> | <percentage> | none ]{3} <xyz-params> = <xyz-space> [ <number> | <percentage> | none ]{3} <predefined-rgb> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 <xyz-space> = xyz | xyz-d50 | xyz-d65 Examples: /* Keyword values */ color: currentcolor; /* <named-color> values */ color: red; color: orange; color: tan; color: rebeccapurple; /* <hex-color> values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* <rgb()> values */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34 12 64 / 60%); color: rgba(34.6 12 64 / 30%); /* <hsl()> values */ color: hsl(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 0.6); color: hsl(30 100% 50% / 0.6); color: hsla(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); color: hsla(30.2 100% 50% / 60%); /* <hwb()> values */ color: hwb(90 10% 10%); color: hwb(90 10% 10% / 0.5); color: hwb(90deg 10% 10%); color: hwb(1.5708rad 60% 0%); color: hwb(0.25turn 0% 40% / 50%); /* Global values */ color: inherit; color: initial; color: revert; color: revert-layer; color: unset; /* Named colors */ rebeccapurple aliceblue /* RGB Hexadecimal */ #f09 #ff0099 /* RGB (Red, Green, Blue) */ rgb(255 0 153) rgb(255 0 153 / 80%) /* HSL (Hue, Saturation, Lightness) */ hsl(150 30% 60%) hsl(150 30% 60% / 0.8) /* HWB (Hue, Whiteness, Blackness) */ hwb(12 50% 0%) hwb(194 0% 0% / 0.5) /* LAB (Lightness, A-axis, B-axis) */ lab(50% 40 59.5) lab(50% 40 59.5 / 0.5) /* LCH (Lightness, Chroma, Hue) */ lch(52.2% 72.2 50) lch(52.2% 72.2 50 / 0.5) /* Oklab (Lightness, A-axis, B-axis) */ oklab(59% 0.1 0.1) oklab(59% 0.1 0.1 / 0.5) /* Oklch (Lightness, Chroma, Hue) */ oklch(60% 0.15 50) oklch(60% 0.15 50 / 0.5) /* light-dark */ light-dark(white, black) light-dark(rgb(255 255 255), rgb(0 0 0)) Using English names Initially, the following 16 values were defined to make a consistent experience across browsers and displays in the early days of the Web: aquablack blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow CSS does not define the exact shade that should be used for the named colours. Use RGB-values if the exact shade is important. This list has been expanded to 140 total colors that are named and can be used in CSS when defining a color: AliceBlueAntiqueWhite Aquamarine Azure Beige Bisque BlanchedAlmond BlueViolet Brown Burlywood CadetBlue Chartreuse Chocolate Coral CornflowerBlue Cornsilk Crimson Cyan DarkBlue DarkCyan DarkGoldenrod DarkGray DarkGreen DarkKhaki DarkMagenta DarkOliveGreen DarkOrange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DodgerBlue Firebrick FloralWhite ForestGreen Gainsboro GhostWhite Gold Goldenrod GreenYellow Honeydew HotPink IndianRed Indigo Ivory Khaki Lavender LavenderBlush LawnGreen LemonChiffon LightBlue LightCoral LightCyan LightGoldenrodYellow LightGray yellow LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSteelBlue LightYellow LimeGreen Linen Magenta MediumAquamarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed MidnightBlue MintCream MistyRose Moccasin NavajoWhite OldLace OliveDrab Orange OrangeRed Orchid PaleGoldenrod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Pink Plum PowderBlue RosyBrown RoyalBlue SaddleBrown Salmon SandyBrown SeaGreen Seashell Sienna SkyBlue SlateBlue SlateGray Snow SpringGreen SteelBlue Tan Thistle Tomato Turquoise Violet Wheat WhiteSmoke YellowGreen Lastly, one color was added to CSS 4.1: RebeccaPurple Note that all instances of "gray" can also be spelled "grey". Hexadecimal RGB value Hex Bin Dec 0 0000 0 1 0001 1 2 0010 2 3 0011 3 4 0100 4 5 0101 5 6 0110 6 7 0111 7 8 1000 8 9 1001 9 A 1010 10 B 1011 11 C 1100 12 D 1101 13 E 1110 14 F 1111 15 The mixture ratio of a color to be displayed is specified in hexadecimal notation. That is, they are written in base-16 as opposed to the more familiar base 10. A reference table is included, courtesy Wikipedia. The two first hexadecimal digits specify the amount of red in the colorhttp://www.w3schools.com/cssref/css_colors.asp CSS colors, the third and fourth specify the amount of green and the last two figures specify the amount of blue. h1 { color: #ff0000; } /* All h1 headings are printed in bright red. */ A short-hand notation is permitted: #rgb is equivalent to #rrggbb, e.g. #3cf is equivalent to #33ccff. Note that the range of values possible is hexadecimal 00 (= decimal 0) to hexadecimal ff (= decimal 255). This is the same range that is available using the RGB notation from the next section. In newer browsers (Chrome 62+, Edge 79+, Firefox 49+, Opera 49+, Safari 10+), 4- and 8-digit HEX notations are permitted, i.e. #rgba and #rrggbbaa respectively, with the last one or two digits denoting the alpha (opacity) amount. RGB value RGB is a abbreviation for red, green and blue – the three colors that are mixed to create all the other colors on a computer screen. The basic syntax is rgb(red-value, green-value, blue-value). The different values can be set using two different approaches. A number from 0 to 255 h1 { color: rgb(255, 0, 0); } /* All h1 headings are printed in bright red. */ A decimal figure from 0% to 100% h1 { color: rgb(100%, 0, 0); } /* All h1 headings are printed in bright red. */ Modern (css-color-4) rgb and rgba syntax rgb() = [ <legacy-rgb-syntax> | <modern-rgb-syntax> ] rgba() = [ <legacy-rgba-syntax> | <modern-rgba-syntax> ] <legacy-rgb-syntax> = rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? ) <legacy-rgba-syntax> = rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ) <modern-rgb-syntax> = rgb( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? ) <modern-rgba-syntax> = rgba( [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? ) Percentages Allowed for r, g and b Percent reference range: For r, g and b: 0% = 0.0, 100% = 255.0 For alpha: 0% = 0.0, 100% = 1.0 RGBA value RGBA is RGB with an added alpha channel as its 4th argument. The alpha channel is a value between 0 (fully transparent) and 1 (opaque). RGBA is part of CSS3. div { background-color: rgba(255, 0, 0, 0.5); } /* All divs are in bright red with 50% opacity. */ background-color: rgba(255, 0, 0, 0); background-color: rgba(255, 0, 0, 0.1); background-color: rgba(255, 0, 0, 0.2); background-color: rgba(255, 0, 0, 0.3); background-color: rgba(255, 0, 0, 0.4); background-color: rgba(255, 0, 0, 0.5); background-color: rgba(255, 0, 0, 0.6); background-color: rgba(255, 0, 0, 0.7); background-color: rgba(255, 0, 0, 0.8); background-color: rgba(255, 0, 0, 0.9); background-color: rgba(255, 0, 0, 1); Please note that MediaWiki blocks the use of the background-image property, so you must copy the code used below to a file or your snippet editor to see the full effect. <div style="background: url('http://upload.wikimedia.org/wikipedia/commons/1/1f/Wallpaper.FALA-S.gif');"> <div style="background-color: rgba(255, 0, 0, 0); padding: .25em;">background-color: rgba(255, 0, 0, 0);</div> <div style="background-color: rgba(255, 0, 0, 0.1); padding: .25em;">background-color: rgba(255, 0, 0, 0.1);</div> <div style="background-color: rgba(255, 0, 0, 0.2); padding: .25em;">background-color: rgba(255, 0, 0, 0.2);</div> <div style="background-color: rgba(255, 0, 0, 0.3); padding: .25em;">background-color: rgba(255, 0, 0, 0.3);</div> <div style="background-color: rgba(255, 0, 0, 0.4); padding: .25em;">background-color: rgba(255, 0, 0, 0.4);</div> <div style="background-color: rgba(255, 0, 0, 0.5); padding: .25em;">background-color: rgba(255, 0, 0, 0.5);</div> <div style="background-color: rgba(255, 0, 0, 0.6); padding: .25em;">background-color: rgba(255, 0, 0, 0.6);</div> <div style="background-color: rgba(255, 0, 0, 0.7); padding: .25em;">background-color: rgba(255, 0, 0, 0.7);</div> <div style="background-color: rgba(255, 0, 0, 0.8); padding: .25em;">background-color: rgba(255, 0, 0, 0.8);</div> <div style="background-color: rgba(255, 0, 0, 0.9); padding: .25em;">background-color: rgba(255, 0, 0, 0.9);</div> <div style="background-color: rgba(255, 0, 0, 1); padding: .25em;">background-color: rgba(255, 0, 0, 1);</div> </div> Here is the example again, with a silver background: background-color: rgba(255, 0, 0, 0); background-color: rgba(255, 0, 0, 0.1); background-color: rgba(255, 0, 0, 0.2); background-color: rgba(255, 0, 0, 0.3); background-color: rgba(255, 0, 0, 0.4); background-color: rgba(255, 0, 0, 0.5); background-color: rgba(255, 0, 0, 0.6); background-color: rgba(255, 0, 0, 0.7); background-color: rgba(255, 0, 0, 0.8); background-color: rgba(255, 0, 0, 0.9); background-color: rgba(255, 0, 0, 1);, which is the: rgb(255, 0, 0) HSL value HSL stands for hue, saturation and lightness. It is the color value system used by many cathode-ray tube devices. HSL is part of CSS3. hsl(color-angle, saturation%, lightness%); div.red { background-color: hsl(0, 100%, 50%); } /* red in HSL */ div.green { background-color: hsl(120, 100%, 50%); } /* green in HSL */ div.blue { background-color: hsl(240, 100%, 50%); } /* blue in HSL */ Red: Green: Blue: Hue Range: 0-360 degrees. Measured in degrees. 0 degrees = red 60 degrees = yellow 120 degrees = green 180 degrees = cyan 240 degrees = blue 300 degrees = magenta +Hue comparison at 100% saturation and 50% lightnessHueColorHueColorHueColor0120240101302502014026030150270401602805017029060180300701903108020032090210330100220340110230350 Saturation Measured as percentage in a range of 0%-100%. The higher, the more saturated. 0% is pure monochrome gray. Lightness Measured as percentage in a range of 0%-100%. The higher, the lighter. 0% is black, and 100% is white. + Saturation (left to right) vs lightness (top to bottom) at 330 degrees hue % 0 10 20 30 40 50 60 70 80 90 100 0 10 20 30 40 50 60 70 80 90 100 HSLA value HSLA is the HSL color with an alpha channel. Like RGBA, the 4th argument is a value between 0 and 1. HSLA is part of CSS3. div.red { background-color: hsla(0, 100%, 50%, 0.5); } /* red in HSL with 50% opacity*/ div { background-color: hsla(0, 100%, 50%, 0.5); } /* All divs are in bright red with 50% opacity. */ background:rgba(255,255,255,0.9); background-color: rgba(1, 1, 1, 0.1); background-color: hsla(0, 100%, 50%, 0.2); background-color: hsla(0, 100%, 50%, 0.3); background-color: hsla(0, 100%, 50%, 0.4); background-color: hsla(0, 100%, 50%, 0.5); background-color: hsla(0, 100%, 50%, 0.6); background-color: hsla(0, 100%, 50%, 0.7); background-color: hsla(0, 100%, 50%, 0.8); background-color: hsla(0, 100%, 50%, 0.9); background-color: hsla(0, 100%, 50%, 1); Please note that MediaWiki blocks the use of the background-image property, so you must copy the code used below a file or your snippet editor to see the full effect. <div style="background: url('http://upload.wikimedia.org/wikipedia/commons/1/1f/Wallpaper.FALA-S.gif');"> <div style="background-color: hsla(0, 100%, 50%, 0); padding: .25em;">background-color: hsla(0, 100%, 50%, 0);</div> <div style="background-color: hsla(0, 100%, 50%, 0.1); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.1);</div> <div style="background-color: hsla(0, 100%, 50%, 0.2); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.2);</div> <div style="background-color: hsla(0, 100%, 50%, 0.3); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.3);</div> <div style="background-color: hsla(0, 100%, 50%, 0.4); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.4);</div> <div style="background-color: hsla(0, 100%, 50%, 0.5); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.5);</div> <div style="background-color: hsla(0, 100%, 50%, 0.6); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.6);</div> <div style="background-color: hsla(0, 100%, 50%, 0.7); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.7);</div> <div style="background-color: hsla(0, 100%, 50%, 0.8); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.8);</div> <div style="background-color: hsla(0, 100%, 50%, 0.9); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.9);</div> <div style="background-color: hsla(0, 100%, 50%, 1); padding: .25em;">background-color: hsla(0, 100%, 50%, 1);</div> </div> Here is the example again, with a silver background: background-color: hsla(0, 100%, 50%, 0); background-color: hsla(0, 100%, 50%, 0.1); background-color: hsla(0, 100%, 50%, 0.2); background-color: hsla(0, 100%, 50%, 0.3); background-color: hsla(0, 100%, 50%, 0.4); background-color: hsla(0, 100%, 50%, 0.5); background-color: hsla(0, 100%, 50%, 0.6); background-color: hsla(0, 100%, 50%, 0.7); background-color: hsla(0, 100%, 50%, 0.8); background-color: hsla(0, 100%, 50%, 0.9); background-color: hsla(0, 100%, 50%, 1);, which is the: hsl(0, 100%, 50%) HWB value section Chrome 101 and newer > section Firefox 96 and newer > section Edge 101 and newer > section Safari 15 and newer > section Opera 87 and newer > HWB is a fairly new color standard, introduced in browsers in 2022 (Chrome and Edge versions 101, Firefox 96, Opera 87 and Safari 15). /* These examples all specify varying shades of a lime green. */ hwb(90 10% 10%) hwb(90 10% 10%) hwb(90 50% 10%) hwb(90deg 10% 10%) hwb(1.5708rad 60% 0%) hwb(.25turn 0% 40%) /* Same lime green but with an alpha value */ hwb(90 10% 10% / 0.5) hwb(90 10% 10% / 50%) Hue Range: 0-360 degrees. Measured in degrees. 0 degrees = red 60 degrees = yellow 120 degrees = green 180 degrees = cyan 240 degrees = blue 300 degrees = magenta +Hue comparison at 0% whiteness and 0% blacknessHueColorHueColorHueColor0120240101302502014026030150270401602805017029060180300701903108020032090210330100220340110230350 Whiteness Measured in percentage from 0% to 100%. 100% means pure white. Blackness Measured in percentage from 0% to 100%. 100% means pure black. Combining whiteness and blackness If the whiteness and blackness are below 100% combined, the colors are desaturated. If both values are over 100% combined, they are automatically converted to 100% combined values. For example, if HWB value is hwb(45, 90%, 60%), which both values total 150%, they are converted to 100% (hwb(45, 60%, 40%)). + Whiteness (left to right) vs blackness (top to bottom) at 330 degrees hue % 0 10 20 30 40 50 60 70 80 90 100 0 10 20 30 40 50 60 70 80 90 100 New color functions LAB value section Chrome 111 and newer > section Firefox 113 and newer > section Edge 111 and newer > section Safari 15 and newer > section Opera 97 and newer > Introduced in browsers in 2023 (Chrome/Edge 111, Firefox 113, Opera 97 and Safari 15), LAB values represent the range of colors that human sees. Syntax: lab(l a b) Luminosity - brightness of color - 0% to 100%. Higher is lighter. A-axis - any value. Higher is more pink, lower is more green. B-axis - any value. Higher is more yellow, lower is more blue. A and B can be any value, but in practice it cannot exceed ±150. + Comparison of A-axis (top to bottom) and B-axis (left to right) at 60% luminosity -120 -100 -80 -60 -40 -20 0 20 40 60 80 100 120 120 100 80 60 40 20 0 -20 -40 -60 -80 -100 -120 LCH value section Chrome 111 and newer > section Firefox 113 and newer > section Edge 111 and newer > section Safari 15 and newer > section Opera 97 and newer > Introduced in browsers in 2023 (Chrome/Edge 111, Firefox 113, Opera 97 and Safari 15), LCH values represent the range of colors that human sees. Syntax: lch(l c h) Luminosity - brightness of color - 0% to 100%. Higher is lighter. Chroma - any positive value. This indicates the saturation of colors. Higher is more saturated. Hue - hue of color - values from 0 to 360. Chroma can be any value, but in practice it cannot exceed 200. + Luminosity (left to right) vs chroma (top to bottom) at 160 degrees hue % 0 10 20 30 40 50 60 70 80 90 100 0 10 20 30 40 50 60 70 80 90 100 + Luminosity (left to right) vs chroma (left to right) vs hue (top to bottom) L (%) 10 20 30 40 50 60 70 80 90 C 20 20 40 20 40 20 40 60 20 40 60 20 40 60 80 20 40 60 80 20 40 60 20 40 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150 160 170 180 190 200 210 220 230 240 250 260 270 280 290 300 310 320 330 340 350 HSL vs LCH HSL values were available for browsers in the late 2000s and early 2010s. However, there are a couple of problems with HSL values. hsl(60, 100%, 50%) appears much lighter than hsl(240, 100%, 50%), despite having the same lightness. + Effect on perceived lightness on colors at 100% saturation and 50% lightness Hue Color Perceived lightness 0 Second darkest 60 Lightest of all six 120 Lightest of primary colors; third lightest 180 Second lightest 240 Darkest of all six 300 Third darkest, darkest of two primary colors combined This is text with HSL hue of 60 degrees and 50% lightness. It is unreadable, but is readable in dark mode. This is text with HSL hue of 240 degrees and the same lightness as yellow. It is readable, but is unreadable in dark mode. Another problem in HSL involves sometimes when we increase hue by 10 the difference is substantial, other times it isn't. + Effect on perceived color at different hues From hue To hue Perceived difference 50 60 Very noticeable 240 250 Not very noticeable Another problem is with saturation. If you increase saturation on lighter hues (eg. yellow or blue), the color turns lighter. LCH is designed to fix the problems caused by HSL. This is text with LCH hue of 90 degrees and 50% luminosity. It is readable. This is text with LCH hue of 290 degrees and 50% luminosity. It is also readable. Inherent problems with LAB/LCH Consider the following colors of LCH at 290 degrees hue and 40% luminosity: Chroma LCH HSL equ 0 10 20 30 40 50 60 70 80 90 100 As you can see, at lower chroma values, the hue is more of a purple color, but as you increase, this turns blue. HSL doesn't have this problem. OKLAB value section Chrome 111 and newer > section Firefox 113 and newer > section Edge 111 and newer > section Safari 15 and newer > section Opera 97 and newer > Introduced in browsers in 2023 (Chrome/Edge 111, Firefox 113, Opera 97 and Safari 15), OKLAB values represent the range of colors that human sees. It fixes the inherent problems caused by normal LAB. Syntax: oklab(l a b) Luminosity - brightness of color - 0% to 100%. Higher is lighter. A-axis - any value. Higher is more pink, lower is more green. B-axis - any value. Higher is more yellow, lower is more blue. A and B can be any value, but in practice it cannot exceed ±0.6. + Comparison of A-axis (top to bottom) and B-axis (left to right) at 60% luminosity -0.5 -0.4 -0.3 -0.2 -0.1 0 0.1 0.2 0.3 0.4 0.5 0.5 0.4 0.3 0.2 0.1 0 -0.1 -0.2 -0.3 -0.4 -0.5 OKLCH value section Chrome 111 and newer > section Firefox 113 and newer > section Edge 111 and newer > section Safari 15 and newer > section Opera 97 and newer > Introduced in browsers in 2023 (Chrome/Edge 111, Firefox 113, Opera 97 and Safari 15), LCH values represent the range of colors that human sees. It fixes the inherent problems caused by normal LCH. Syntax: oklch(l c h) Luminosity - brightness of color - 0% to 100%. Higher is lighter. Chroma - any positive value. This indicates the saturation of colors. Higher is more saturated. Hue - hue of color - values from 0 to 360. Chroma can be any value, but in practice it cannot exceed 0.7. + Luminosity (left to right) vs chroma (top to bottom) at 160 degrees hue % 0 10 20 30 40 50 60 70 80 90 100 0 0.05 0.1 0.15 0.2 0.25 0.3 0.35 0.4 + Luminosity (left to right) vs chroma (left to right) vs hue (top to bottom) L (%) 10 20 30 40 50 60 70 80 90 C .1 .1 .2 .1 .2 .1 .2 .3 .1 .2 .3 .1 .2 .3 .4 .1 .2 .3 .4 .1 .2 .3 .1 .2 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150 160 170 180 190 200 210 220 230 240 250 260 270 280 290 300 310 320 330 340 350 Relative colors Cascading Style Sheets/Color/Relative colors Another way to define colors is by using relative colors. It is a powerful tool to create palettes. It is introduced in Chrome/Edge 119, Safari 16.4, Firefox 128 and Opera 106. gamut css Color Display Quality: the color-gamut featureW3C: Media Queries Level 4. Value: srgb | p3 | rec2020 Considerations Not all colors are readable by everyone. yellow This yellow text only has a contrast ratio of 1.07 to 1, which is practically hard to read as it doesn't meet WCAG AA standards, blue while this blue text has a contrast ratio of 8.59:1, which meets WCAG AAA standards. Also, some colors like red red and green green can look identical in some people with color blindness. Contrast ratio WCAG WCAG defines two standards: AA: 3:1 for text 14pt+ bold or 18pt+ normal, 4.5:1 for others AAA: 4.5:1 for text 14pt+ bold or 18pt+ normal, 7:1 for others The formula of the WCAG contrast ratio against two colors is , where . Table of minimum contrast ratio of colors Hue On/involving black background/text On/involving white background/text AA for larger text (3:1) AAA for larger text; AA (4.5:1) AAA for normal text (7:1) AA for larger text (3:1) AAA for larger text; AA (4.5:1) AAA for normal text (7:1) 0° (Red) #b70000 #eb0000#eb0000 #ff5e5e #ff5d5d #ee0000#ee0000 #b60000 #b70000 #eb0000#eb0000 #ff5e5e #ff5d5d #ee0000#ee0000 #b60000 60° (Yellow) #5d5d00 #797900#797900 #9b9b00 #9a9a00 #7a7a00#7a7a00 #5c5c00 #5d5d00 #797900#797900 #9b9b00 #9a9a00 #7a7a00#7a7a00 #5c5c00 120° (Green) #006900 #008800#008800 #00ae00 #00ad00 #008a00#008a00 #006800 #006900 #008800#008800 #00ae00 #00ad00 #008a00#008a00 #006800 180° (Cyan) #006464 #008282#008282 #00a6a6 #00a5a5 #008484#008484 #006363 #006464 #008282#008282 #00a6a6 #00a5a5 #008484#008484 #006363 240° (Blue) #3131ff #5e5eff#5e5eff #8888ff #8787ff #6161ff#6161ff #3030ff #3131ff #5e5eff#5e5eff #8888ff #8787ff #6161ff#6161ff #3030ff 300° (Magenta) #a000a0 #ce00ce#ce00ce #ff29ff #ff28ff #d100d1#d100d1 #9f009f #a000a0 #ce00ce#ce00ce #ff29ff #ff28ff #d100d1#d100d1 #9f009f — (Gray) #5a5a5a #757575#757575 #959595 #949494 #767676#767676 #595959 #5a5a5a #757575#757575 #959595 #949494 #767676#767676 #595959 However, there are a few problems with WCAG contrast ratio. especially around dark colors. Even with same WCAG contrast ratio, this do not reliably determine the readability of the text as perceived contrast ratios can be unpredictable. For example, black text on #eb0000 is more difficult to read than white text on #ee0000, despite meeting WCAG AA (all font sizes) and AAA (larger font sizes) standards. APCA APCA, also known as Accessible Perceptual Contrast Algorithm, is designed to solve the problems WCAG has faced. While black text on #eb0000 and white text on #ee0000 have the same WCAG contrast ratio, the former has less perceived contrast ratio at Lc of 35.3 (vs -73.9). Dark text on light background gives positive values, while light text on dark background gives negative values. Values ranges from Lc of -108 to 106. References de:Websiteentwicklung: CSS: Farben es:Lenguaje_HTML/Estilos_CSS fr:Le langage CSS/Valeurs et unités nl:Cascading Style Sheets/Kleur