Coding for Beginners: CSS Basics #54— Using Color on the Web—The Hexadecimal Color System

YouTube Excerpt: Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/webaccesspro The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: https://www.youtube.com/channel/UCS72xfaLBhyZQ054ZN1TwsA?sub_confirmation=1 ------ With the hexadecimal or hex color system, a hex color is defined as a six-digit combination of numbers and letters. Each set of two digits represents a mix of red, green, and blue. It is a shorthand method of writing out an RGB color mix. RR represents red, GG represents green, and BB represents blue. RR, GG, and BB are hexadecimal integers between 00 and FF that indicate the intensity of the color. This is why #FF0000 is red because the red is set at its highest intensity (FF) but the green and the blue are at the lowest intensity (00). Similarly #FFFF00 would be yellow because both red and green are at their highest intensity and we know that the combination of red and green produces yellow in the RGB color system. Mathematically, we are taking the RGB value and dividing it by 16. The hexadecimal numeral system is a positional numeral system that represents numbers using a radix or base of 16. There are 16 distinct symbols: the numbers 0 to 9 represent the values 0 to 9 while the letters A to F represent the values 10 to 15. In this system we deal with integers. So the fractions are converted to represent an integer. So how is the RGB color converted into a hex color. So if we take the color orange as an example which has an RGB value of 255 for red, 165 for green, and 0 for blue: 255 divided by 16 = 15.94 First digit is 15 or F 0.94 multiplied by 16 = 15.04 Second digit is 15 or F So the two digit code for red is FF 165 divided by 16 = 10.31 First digit is 10 or A 0.31 multiplied by 16 = 4.96 Second digit is 5 So the two digit code for green is A5 0 divided by 16 = 0.0 First digit is 0 0 multiplied by 16 is 0 Second digit is 0 So the two digit code for blue is 00 So the rgb mix for orange that is (255, 165, 0); translates to the hex color of #FFA500; Here are the same seventeen colors in the background-color property using hexadecimal color instead: background-color: #00FFFF; (aqua) background-color: #000000; (black) background-color: #0000FF; (blue) background-color: #FF00FF; (fuchsia) background-color: #808080; (gray) background-color: #008000; (green) background-color: #00FF00; (lime) background-color: #800000; (maroon) background-color: #000080; (navy) background-color: #808000; (olive) background-color: #FFA500; (orange) background-color: #800080; (purple) background-color: #FF0000; (red) background-color: #C0C0C0; (silver) background-color: #008080; (teal) background-color: #FFFFFF; (white) background-color: #FFFF00; (yellow) And just like the previous examples, the display doesn't change. We are presenting the same colors with three different color systems. #HTML #CSS #coding #web #accessibility #hexcolor #hexadecimalcolor #hexadecimalcolorsystem #hexcolorsystem #hexcolormodel #colorcodes #hexcolorcode #hexcode #webseries #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse

Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial:...

Read Full Article 🔍

Curious about Coding For Beginners: CSS Basics #54— Using Color On The Web—The Hexadecimal Color System's Color? Explore detailed estimates, salary breakdowns, and financial insights that reveal the full picture of their profile.

Source ID: 2OY2pizDpnE

Category: color style guide