diff --git a/guide/english/css/colors/index.md b/guide/english/css/colors/index.md index 8759795334..dc13cd4fb8 100644 --- a/guide/english/css/colors/index.md +++ b/guide/english/css/colors/index.md @@ -52,10 +52,11 @@ Hex codes are expressed in this format: #000000, which would be the color black These three pairs each express a value for the amount of red, green and blue in a particular color. Taking the hexcode color #AA11BB, AA is the amount of red, 11 the amount of green, and BB the amount of blue. 0 is the lowest value of a color while f is the highest value. Hex codes are case insensitive, meaning that #FFFFFF and #ffffff would be the same color: white. +It is also possible to use a three-digit notation as a short version, for example #ABC is equal to #AABBCC. -Additionally, there are 16,777,216 possible color combinations using hexcode. +Additionally, there are 16,777,216 possible color combinations using hexcode. A shorthand form also exists. The shorthand #ABC is equivalent to #AABBCC. In this form, 4096 colours are available. -A shorthand form also exists. The shorthand #ABC is equivalent to #AABBCC. In this form, 4096 colours are available. +Furthermore, some browser versions (see [compatibility](https://caniuse.com/#feat=css-rrggbbaa)) support hexcodes with 8 digits, where the last two digits describe the opacity level (00 - fully transparent, FF - fully opaque), equivalent to the alpha channel of rgba(). ### Opacity @@ -106,8 +107,9 @@ Above shows paragraphs styled bright orange and 20% transparent, h2 elements sal To get custom colors to use in CSS, you might find a color picker helpful. Some text editors have built-in color pickers, like Visual Studio Code. If you search "color picker" on Google or DuckDuckGo, you will get a color picker that you can use. Google Chrome and Firefox also have color picker add-ons that you can install. Adobe Color CC not only helps you pick a color, but will also help you pick out a color scheme for your web page! It's a good idea to check that you have enough contrast between your text and background colors by using a tool like WebAIM's Color Contrast Checker. #### More Information: -Adobe Color CC
-ColorPick Eyedropper on Chrome Web Store
-ColorZilla add-on for Firefox
-Explore different Hex colors
-WebAIM Color Contrast Checker +- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) +- [Adobe Color CC](https://color.adobe.com/) +- [ColorPick Eyedropper on Chrome Web Store](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en) +- [ColorZilla add-on for Firefox](https://addons.mozilla.org/en-US/firefox/addon/colorzilla/) +- [Explore different Hex colors](https://www.colorhexa.com/) +- [WebAIM Color Contrast Checker](https://webaim.org/resources/contrastchecker/)