One place for hosting & domains

      Values

      How To Use Color Values with CSS


      The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.

      Introduction

      Color is a useful part of design and development when creating websites. It helps set a mood and communicate an aesthetic. Color also helps readers scan and identify content quickly.

      With CSS, there are four ways to generate colors, and each has its own unique strength. This tutorial will show you how to use color keywords, hexadecimal color values, the rgb() color format, and lastly the hsl() color format. You will use all four approaches with the same set of HTML to experience how each color format works with the same content. Throughout the tutorial, you will use the color, border, and background-color properties to apply these color formats to the HTML.

      Prerequisites

      Setting Up the Example HTML and CSS

      In this section, you will set up the HTML base for all the visual styles you will write throughout the tutorial. You will also create your styles.css file and add styles that set the layout of the content.

      Start by opening index.html in your text editor. Then, add the following HTML to the file:

      index.html

      <!doctype html>
      <html>
          <head>
          </head>
          <body>
          </body>
      </html>
      

      Next, go to the <head> tag and add a <meta> tag to define the character set for the HTML file, then the title of the page, the <meta> tag defining how mobile devices should render the page, and finally the <link> element that loads the CSS file you will make later.

      These additions are highlighted in the following code block:

      index.html

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8" />
          <title>Colors With CSS</title>
          <meta name="viewport" content="width=device-width" />
          <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
          </body>
      </html>
      

      After adding the <head> content, next move to the <body> element, where content will be added from the Wikipedia article on color. Add the highlighted section from this code block to your index.html file in your text editor:

      index.html

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>Colors With CSS</title>
              <meta name="viewport" content="width=device-width" />
              <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
              <article>
                  <header>
                      <h1>About Color</h1>
                  </header>
                  <p>Color is the characteristic of visual perception described through color categories, with names such as red, orange, yellow, green, blue, or purple. This perception of color derives from the stimulation of photoreceptor cells by electromagnetic radiation. Color categories and physical specifications of color are associated with objects through the wavelengths of the light that is reflected from them and their intensities. This reflection is governed by the object's physical properties such as light absorption, emission spectra, etc.</p>
                  <hr />
                  <p>By defining a color space, colors can be identified numerically by coordinates, which in 1931 were also named in global agreement with internationally agreed color names like mentioned above (red, orange, etc.) by the International Commission on Illumination. The RGB color space for instance is a color space corresponding to human trichromacy and to the three cone cell types that respond to three bands of light: long wavelengths, peaking near 564–580 nm (red); medium-wavelength, peaking near 534–545 nm (green); and short-wavelength light, near 420–440 nm (blue). There may also be more than three color dimensions in other color spaces, such as in the CMYK color model, wherein one of the dimensions relates to a color's colorfulness.</p>
                  <footer>
                      Adapted from Wikipedia’s article on <a href="https://en.wikipedia.org/wiki/Color">Color</a>
                  </footer>
              </article>
          </body>
      </html>
      

      The contents are in an <article> tag to define a designated area known as a landmark, which is a part of your design that you are drawing attention to. This element can have its own <header> and <footer> tags. The <header> contains an <h1> tag with the content title, and the <footer> element contains content for citing the source. Between the two <p> tags of the primary content is an <hr /> tag, which is a self-closing tag that creates a horizontal rule line. As a piece of content, the horizontal rule can be used to break up content or to indicate a shift in the content.

      That completes the work needed for index.html. Save your changes to the file, then open index.html in your web browser. The webpage will appear like the following image:

      Black text with large, bold title text and two paragraphs with a rule line between the paragraphs, all in a serif font.

      Now you will begin working on the base styles needed for this tutorial. Create a file called styles.css and open it in your text editor.

      To begin, create a body type selector and add font-famiy: sans-serif to use the browser’s default sans serif font. Then add a line-height: 1.5 to give a default line spacing between text of one and half the font-size:

      styles.css

      body {
          font-family: sans-serif;
          line-height: 1.5;
      }
      

      Next, add styles for the <article> element by creating a type selector for it with a margin, padding, width, and max-width, along with a box-sizing: border-box to redefine the Box Model for the <article>. This will make sure the padding value is not added to the full width of the container.

      Add the highlighted sections of the following code block for the values for each of the properties:

      styles.css

      ...
      article {
          margin: 2rem auto;
          padding: 2rem;
          width: 90%;
          max-width: 40rem;
          box-sizing: border-box;
      }
      

      First, the margin with a value of 2rem auto will center the article container on the page. The padding of 2rem will give ample space around the container as you add color properties later in the tutorial. The width allows the container to be fluid in width as screen size changes, until it reaches the max-width value of 40rem (which is equivalent to 640px).

      Next, write an h1 type selector and give the element a font-size of 2rem. Then, add a margin of 0 0 1rem to remove the default margin-top and provide a new value for the margin-bottom. Lastly, center the text by adding a text-align: center; to the selector block:

      styles.css

      ...
      h1 {
          font-size: 2rem;
          margin: 0 0 1rem;
          text-align: center;
      }
      

      Next, you will apply some base styles to the <hr> element. The browser defaults for the <hr> element create a box with no height, full width, and a border. Although this container is self-closing and does not contain content, it can accept a lot of styles.

      Start by giving it a height value of 0.25rem. Then, add a margin property of 2rem auto to create space above and below the <hr> and to center the element. Add a width: 90%; with a max-width: 18rem; so the <hr> element is always smaller than the article container and never larger than 18rem. Finally, use the border-radius property to round the ends of the <hr> element with a value of 0.5rem:

      styles.css

      ...
      hr {
          height: 0.25rem;
          margin: 2rem auto;
          width: 90%;
          max-width: 18rem;
          border-radius: 0.5rem;
      }
      

      Finally, create a footer selector block and add a margin-top property with a value of 2rem, followed by a font-size of 0.875rem:

      styles.css

      ...
      footer {
          margin-top: 2rem;
          font-size: 0.875rem;
      }
      

      Save your changes to styles.css. Then, return to index.html in your web browser and reload the page. The content is now ready to have colors applied to the base styles. The following image shows how it will render in your browser.

      Black text with large, bold title text and two paragraphs, with a narrow rounded rule line between the paragraphs, all in a sans serif font.

      In this section, you set up your HTML in the index.html file and created the base styles in the styles.css file. The next section will introduce you to color keywords, which you will use to apply colors to the content.

      Applying Colors With Keyword Values

      Starting off with colors on the web, it is helpful to work with the predefined color keywords. In this section, you will use some of the color keywords to apply color to the content of your HTML.

      There are well over one hundred color keyword values that have been added to the list over time. The World Wide Web Consortium has an exhaustive list of color keyword values on their Wiki. Color keyword values are useful for throwing together a quick design or identifying and debugging CSS problems, such as by setting the color property to magenta so the element stands out against a muted color palette. The keywords cover all hues with variations of shades and tints of each, including grays.

      Begin by going to the article type selector and adding background-color, border, and color properties. For the background-color, use the faint light brown seashell keyword. Give the border a thickness of 0.25rem, a solid style, and for the color use the sandybrown keyword. Lastly, for the color property use the maroon keyword:

      styles.css

      ...
      article {
          margin: 2rem auto;
          padding: 2rem;
          width: 90%;
          max-width: 40rem;
          box-sizing: border-box;
          background-color: seashell;
          border: 0.25rem solid sandybrown;
          color: maroon;
      }
      ...
      

      Save your changes to styles.css and return to you browser to refresh the index.html page. The page will now have a visually defined article area with a light brown background color and a slightly darker brown thick border. The text content will be a dark red, and may appear more as a dark brown in the context of the other brown colors. The following image shows how the page will appear in your browser:

      Brown text in a sans serif font, with a lighter tan background and border.

      Next, return to styles.css in your text editor. Go to the h1 selector and add a color property. Using a complementary color of brown hues, add the teal keyword for the color property value:

      styles.css

      ...
      h1 {
          font-size: 2rem;
          margin: 0 0 1rem;
          text-align: center;
          color: teal;
      }
      ...
      

      Now, carrying on with the concept of complementary colors, go to the hr element and add a border property of 0.25rem solid teal. After that, add a background-color property with the keyword darkturquoise as the value:

      styles.css

      ...
      hr {
          height: 0.25rem;
          margin: 2rem auto;
          width: 90%;
          max-width: 18rem;
          border-radius: 0.5rem;
          border: 0.25rem solid teal;
          background-color: darkturquoise;
      }
      ...
      

      Save these changes to your styles.css file and refresh index.html in your browser. The <hr> element between the two paragraphs will have a thick teal border with a lighter teal color inside, as shown in the following image:

      Brown text in a sans serif font, with a lighter tan background and a border with a title text in teal and a rule line between paragraphs.

      Next, return to your text editor and go to the footer selector in your styles.css file. Here, add a color property and use chocolate as the value:

      styles.css

      ...
      footer {
          margin-top: 2rem;
          font-size: 0.875rem;
          color: chocolate;
      }
      

      Save your changes to styles.css in your text editor, then return to your browser and refresh index.html. Your browser will render chocolate as a lighter brown hue than maroon, but not as light at the saddlebrown border:

      Sans serif text in a light brown color with a link in blue with an underline.

      Before returning to your code editor, take note of the color of the link in the <footer> element. It is using the default browser color for a link, which is blue, unless you have visited the link, in which case the color is purple. There is a special value for color you will now use called inherit, which instead of defining a specific color uses the color of its parent container, in this case the <footer>.

      To use the inherit value on a color property, return to styles.css in your text editor, and after the closing tag for your footer selector, add a new combinator of footer a to scope the styles to <a> elements inside of <footer> elements. Then, add a color property with a value of inherit, so the <a> will inherit the color value set on the footer, as shown in the highlighted section of the following code block:

      styles.css

      ...
      footer a {
          color: inherit;
      }
      

      Save your changes to the styles.css file and refresh index.html in your web browser. The <a> is now the same color as the other footer text and retains the underline, which distinguishes the text as a link. The following image shows how this will appear in your browser:

      Sans serif text in a light brown color with a link underlined.

      Note: The inherit value only works on colors that can accept the foreground color value, such as border-color and color. Other properties, such as background-color or box-shadow, can access the defined color value with a special value called currentColor. It works the same way as inherit, but for instances where inherit is not a valid value.

      You used color keywords in this section to set several colors of varying contrasts to the content. You also used the inherit value to reuse a color value without explicitly defining a value. In the next section, you will use the hexadecimal color code system to adjust the colors of the content.

      Applying Colors With Hexadecimal

      The hexadecimal, or hex, color value is the most common method of applying colors to elements on the web. In this section, you will use hex colors to redefine and adjust the visual style of the content.

      It is important to have an understanding of what the hexadecimal system is and how it works. Hexadecimal is a base 16 valuation system that uses 0-9 as their numerical values and the letters a-f as values ranging from 10-15. The hex values are used to control each of the primary colors (red, green, and blue) in intensity from 0, represented as 00, up to 255, represented as ff. The hex value follows a # to indicate that the color type is a hex color code, then two digits for each color channel, starting with red, then green, then blue.

      Hexadecimal color codes can be written in two ways. The first is the long form, which is more common and more detailed, containing six digits, two for each color channel. An example of this is yellow created with #ffff00. The second way of writing a hex color code is a short form, which can be written with only three digits that the browser will interpret as a doubling of each single value. In the short form, yellow can be created with #ff0. The short form hex color value allows for a quicker, but more limited palette if used exclusively.

      To begin using hex color codes, open up styles.css in your text editor and go the article element selector. For the background-color property value, use #f0f0f0, which is a very light gray. Next, for the border properties color value, use the short form hex code of #ccc, which is a middle gray. Finally, for the main text color properties, use the dark gray short form hex code #444:

      styles.css

      ...
      article {
          ...
          background-color: #f0f0f0;
          border: 0.25rem solid #ccc;
          color: #444;
      }
      ...
      

      Note: When working with text content, it is important to maintain a good color contrast between a background-color and the text color value. This helps the readability of the text for a broad range of readers and website users. To learn more about the importance of accessible color contrast ratios, watch this Designing with Accessible Color Contrast on the Web video series. Also, this contrast calculator provided by WebAIM is a great tool to test if your colors provide enough contrast to make text readable for an inclusive audience.

      Next, you will set the h1 color value to a dark red. Go to the h1 selector in your styles.css file and update the color property to have a value of #900, which turns on the red channel to about the midpoint and leaves the green and blue channels off:

      styles.css

      ...
      h1 {
          ...
          color: #900;
      }
      ...
      

      Carrying on with the red values, update the hr color properties to match the h1 element. Set the border property color to #bd0000, which requires the long form hex code, since the color is a value between #b00 and #a00. Then, set the background-color to a full red value with #f00. This is the hex value equivalent of the red keyword:

      styles.css

      ...
      hr {
          ...
          border: .25rem solid #bd0000;
          background-color: #f00;
      }
      ...
      

      Lastly, to carry on with the footer text being a lighter version of the main text, go to the footer property and change the color property to be a middle gray of #888:

      styles.css

      ...
      footer {
          ...
          color: #888;
      }
      ...
      

      Save your changes to styles.css and return to your browser to refresh index.html and review your changes. As is shown in the following image, the article container is now comprised of several gray colors with the heading and rule line variations of red:

      Dark gray text in a sans serif font with a lighter gray background and border. The title text is red and there is a rule line between paragraphs that is two shades of red.

      In this section, you used several hexadecimal color code values to define colors throughout the styles.css styles document. In the next section, you will translate these hexadecimal values to a more legible numeric value with the rgb() color code.

      Applying Colors With rgb()

      Where the hexadecimal color values are defined with a limited number of alphanumeric values, rgb() uses numeric only values ranging from 0 to 255 for each primary color channel. Using only numerical values for these allows for a much quicker comprehension of the colors created by the rgb() format than by the hexadecimal.

      Like the hexadecimal format and the structure of the rgb() format indicate, the colors are represented within the parenthesis as the red channel value, green channel value, and then blue channel value. A black color formatted in rgb() is rgb(0, 0, 0), while a white is formatted as rgb(255, 255, 255). This also means a full red color is rgb(255, 0, 0), while a full green is rgb(0, 255, 0), and so on.

      To begin refactoring your code to use rgb() values instead of hexadecimal values, it can be helpful to use a HEX to RGB converter, such as this HEX to RGB converter embedded in the Duck Duck Go search engine. Using a mathematical approach, the numerical value can be decoded using the hexadecimal value for each channel. In the case of a hex code for the red channel being fe, this means that the f indicates 15 iterations of 16 counts from 0-15, making the f equal to 16×15, or 240. The e of the hexadecimal fe is equal to 14 in the base-16 sequence. Add these two values together and the red channel for the rgb() value is 254.

      This chart will help you identify the values of each hexadecimal value to convert them to their numerical value needed for rgb(). The first row is the value for the first character in the hexadecimal sequence, which is the hex value multiplied by 16. The second row is the value for the second character in a hexadecimal sequence, which is the hex value multiplied by 1:

      Calculation 0 1 2 3 4 5 6 7 8 9 a b c d e f
      First Hex Digit x*16 0 16 32 48 64 80 96 112 128 144 160 176 192 208 224 240
      Second Hex Digit x*1 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

      Open your styles.css file and go to the article selector block in your text editor. Identify the background-color property with the value of #f0f0f0. Using either a conversion tool or the mathematical formula with the chart previous, this will come to be rgb(240, 240, 240), since the f in the sequence is in the second position and is equal to 240. Adding these two values together is 240:

      styles.css

      ...
      article {
          ...
          background-color: rgb(240,240,240);
          border: 0.25rem solid #ccc;
          color: #444;
      }
      ...
      

      Next, for both the border and color values since these are written as the short form, it’s helpful to expand these out to the long form when converting to rgb(). The #ccc short form becomes #cccccc in the long form. That creates a formula of (12 * 16) + 12, which results in 204. Applying that value to each channel, #ccc becomes rgb(204, 204, 204). After applying this new value, as shown in the following highlighted section, the same approach can be applied to the color value of #444, which becomes rgb(68, 68, 68):

      styles.css

      ...
      article {
          ...
          background-color: rgb(240,240,240);
          border: 0.25rem solid rgb(204, 204, 204);
          color: rgb(68, 68, 68);
      }
      

      Next, move on to the h1 and hr color properties. For all three of these properties, the colors only use the red channel, meaning the rgb() will be 0 for the green and blue channels:

      styles.css

      ...
      h1 {
          ...
          color: rgb(153, 0, 0);
      }
      
      hr {
          ...
          border: 2px solid rgb(189, 0, 0);
          background-color: rgb(255, 0, 0);
      }
      ...
      

      For the h1 color property, the #900 short form is expanded to #990000, and using the chart the 99 sequence can be calculated as (16 * 9) + 9, which equals 153 for a result of rgb(153, 0, 0). Following the same formula for the hr properties, the bd in the border hex value becomes 189. The f in the short form background-color property value is expanded to ff with a result of 255, which is the highest value of a color in both rgb() and hexadecimal color formats.

      Continuing to work in your text editor in the styles.css file, identify the footer selector and update the gray used on the color property. Since the value is the short form #888, it can be expanded to #888888, and using the chart and formula, the final value becomes rgb(136, 136, 136):

      styles.css

      ...
      footer {
          ...
          color: rgb(136, 136, 136);
      }
      ...
      

      Save your changes to the styles.css file then reload the index.html file in your web browser. There will be no difference from the previous step with the hexadecimal values as these rgb() values are equivalent.

      The hexadecimal and the rgb() formats equate to the same numerical value, but the rgb() format is more human readable, giving it an advantage over the former format. This allows developers to make informed changes faster and to adjust the intensity of a channel to produce a color, such as adding more red to make a color feel warmer.

      To demonstrate this, add 5 to the value of the red channel for each of the gray colors in the article and footer selectors. For the article properties, change the background-color red channel to 245, the border red channel to 209, and the color property red channel to 73. Then, change the footer selector’s color property red channel to 141. These changes are shown in the following code block:

      styles.css

      ...
      article {
          ...
          background-color: rgb(245,240,240);
          border: 0.25rem solid rgb(209, 204, 204);
          color: rgb(73, 68, 68);
      }
      ...
      footer {
          ...
          color: rgb(141, 136, 136);
      }
      ...
      

      Save your changes to styles.css, return to your browser, and refresh index.html. The gray colors will become a warmer tint as they have more red than green or blue. The following image shows a comparison between the cooler and warmer gray:

      Comparison of two styles. The left image has dark gray text in a sans serif font with a lighter gray background and border with a title text in red and a rule line between paragraphs. The right image has the same composition, with the grays in a slighting warmer variant.

      In this section, you learned about the rgb() color format and how to convert hexadecimal color values into numerical values, which can be easier to work with. You also added a bit more to the red channel of a rgb() color format to create a warmer variety of gray colors. In the next section, you will use the hsl() color format, which stands for hue, saturation, and lightness.

      Applying Colors With hsl()

      Where the hexadecimal and rgb() color formats have a closer connection to the combined values of the primary colors, hsl() uses a color from the color wheel with saturation and lightness levels and to generate a final color.

      Like the rgb() format, the hsl() format consists of three values in a comma-separated sequence. The first value is the hue, which is a degree marker on the color wheel. The second value is saturation, which is a percentage value where 100% means full color and 0% means no color, which results in white, black, or gray depending on the value of the final number in the sequence. Lightness is a percentage value that ranges from white at 100% to black at 0%.

      The color circle starts at 0 degrees, which is red, and goes around the rainbow to orange, yellow, green, blue, purple, and back to red as the circle completes at 360 degrees. This degree value is the first value of the sequence and can be represented by a number alone or using any of the angle units. The saturation and lightness are both percentage values and require the percent sign to be present, even if the value is 0.

      The biggest advantage to using the hsl() format is that colors can be more cohesive and complementary when there are similar values. For example, a monochromatic color scheme can be quickly put together by deciding a hue value and a saturation percentage, then setting all the other colors as variations of lightness. Likewise, colors with a similar saturation level will appear better matched despite the difference in hue or lightness levels.

      Converting from hexadecimal or rgb() to an hsl() formatted color is not as straightforward. A color conversion tool can help change values from hexadecimal to hsl().

      To begin working with the hsl() color format, open styles.css in your text editor and go to the article and footer selectors. Returning to the gray values from earlier in this tutorial, you can set the hue and lightness values to be 0 and 0%, respectively. Since these are grayscale, only lightness values need to be adjusted:

      styles.css

      ...
      article {
          ...
          background-color: hsl(0, 0%, 94%);
          border: 0.25rem solid hsl(0, 0%, 80%);
          color: hsl(0, 0%, 27%);
      }
      ...
      footer {
          ...
          color: hsl(0, 0%, 45%);
      }
      ...
      

      The background-color is a very light gray, and so it is closer to 100% at 94%. The border value of the article is a bit darker, but still a light gray with a lightness value at 80%. Next, the color value of the article comes in at a much darker 27%. Lastly, the color for the footer text uses a lightness value of 45%, giving a lighter but still readable gray for the citation reference text. Using only the lightness value, a monochromatic gray palette comes together quickly.

      Next, move down to the h1 and hr selector blocks. A similar setup will occur as with the article color properties: the hue and saturation values will remain unchanged for the next three properties. The hue value is set to 0 and the saturation is set to 100%, giving a full saturation red. Lightness will once again differentiate these red values:

      styles.css

      ...
      h1 {
          ...
          color: hsl(0, 100%, 25%);
      }
      
      hr {
          ...
          border: 2px solid hsl(0, 100%, 35%);
          background-color: hsl(0, 100%, 50%);
      }
      ...
      

      The h1 color gets a dark red by having a lightness value of 25%. While the hr will have a darker red border with a 35% lightness value, the background-color gets a pure red by having a lightness value of 50%. As the value goes up from 50%, a red becomes pink until it is white, and lower than 50% a red becomes more maroon until it is black.

      Save your changes to styles.css, return to your browser, and refresh index.html to find how your styles appear when written in the hsl() color format. The following image shows how this will appear:

      Dark gray text in a sans serif font with a lighter gray background and border with a title text in red and a rule line between paragraphs that is two shades of red.

      Now, return to your text editor and go to the article and footer selectors in your styles.css file. You will now adjust only the hue and saturation values, but leave the lightness value as is. Set the hue value to 200 on all four color properties across the two selectors. Then, for the color properties on the article selector, set the saturation value to 50%. Finally, set the saturation level for the footer color property to 100%. Reference the highlighted portions of the following code block for how these color values will appear:

      styles.css

      ...
      article {
          ...
          background-color: hsl(200, 50%, 94%);
          border: 0.25rem solid hsl(200, 50%, 80%);
          color: hsl(200, 50%, 27%);
      }
      ...
      footer {
          ...
          color: hsl(200, 100%, 45%);
      }
      ...
      

      Save your changes to the styles.css file and reload index.html in your web browser. As in the following image, the gray color is now a cyan color of varying lightness and saturation. The article colors are more muted due to the 50% saturation, while the footer color is much more vibrant with the 100% saturation.

      Dark blue text in a sans serif font with a lighter blue background and border, with a title text in red and a rule line between paragraphs that is two shades of red.

      One of the greatest advantages of working with the hsl() color format is creating complementary color palettes. A complementary color is always on the opposite side of the color circle. Red’s complementary color is green. With red at the 0 degree mark in the hue value, its complement is at the 180 degree mark. In the case of the article and footer colors having a hue value of 200, subtracting 180 will give a complementary hue value of 20, an orange color.

      Go to the h1 and hr selectors in the styles.css file in your text editor. For the hue values on each of the color properties, change the hue from 0 to 20 to set the colors from red to the complementary color of orange:

      styles.css

      ...
      h1 {
          ...
          color: hsl(20, 100%, 25%);
      }
      
      hr {
          ...
          border: 2px solid hsl(20, 100%, 35%);
          background-color: hsl(20, 100%, 50%);
      }
      ...
      

      Save your changes to styles.css and return to your web browser to refresh index.html. With a few modifications to the hue values, a pleasant color palette has come together. The following image shows how this will appear in your browser:

      Dark blue text in a sans serif font with a lighter blue background and border, with a title text in a dark orange and a rule line between paragraphs that is two shades of orange.

      In this section, you used the hsl() color format to create colors using the color theory aspects of hue, saturation, and lightness. You also were able to create a complementary color palette using a formula to get the opposite color on the color circle.

      Conclusion

      In this tutorial, you used the four methods of defining color on websites with CSS. The keyword color values allow for quick access to predefined colors as outlined by the CSS specifications. Hexadecimal colors are the most common and widely used format that hold a lot of information in a small number of characters. The rgb() color formation converts the values of the hexadecimal value to a more comprehensive format using numeric values in a comma-separated list. Lastly, the hsl() color format allows for the concepts of color theory to be applied to web site development by using the hues of the color circle, saturation, and lightness to create distinctive and complementary color palettes. All four of these formats can be used together on a single website, each playing to their own strength.

      If you would like to read more CSS tutorials, try out the other tutorials in the How To Style HTML with CSS series.



      Source link

      How To Declare Values For Multiple Properties In a CSS Rule



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will learn how to declare values for multiple properties in a CSS rule. Declaring multiple properties in a single rule allows you to apply many style instructions—such as size, color, and alignment—to an element all at once. We’ll also explore creating a variety of CSS rules that allow us to apply different styles to different pieces of content in a single HTML document.

      Prerequisites

      To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

      Creating a CSS Rule With Multiple Declarations

      To add more than one declaration to a CSS rule, try modifying your <h1> rule in your styles.css file (or adding the entire code snippet if you haven’t been following the tutorial series) so that it includes the additional highlighted declarations:

      h1 {
        color: blue;
        font-size: 100px;
        font-family: Courier;
        text-align: center;
      }
      

      Save the file and reload your HTML document in your browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser). Your text should now be located in the center of the page, have a size of 100 pixels, and render with the Courier font:

      Styled header text

      In the next section, we’ll add more CSS rules to extend the styling possibilities for the webpage’s content.

      Creating Multiple CSS Rules To Style HTML Content

      In this section we’ll add some more text to the index.html file using an HTML <p> element. We’ll experiment with modifying its properties using a new CSS ruleset that only applies to <p> tags.

      In the index.html file, add a line containing <p>Some paragraph text</p> below the existing <h1>A sample title<h1> line that you added in the How To Understand and Create CSS Rules tutorial:

      index.html

      <h1>A sample title</h1>
      <p>Some paragraph text</p>
      

      Save the index.html file and reload it in the browser window to check how the file is displayed. Your browser should render a blue heading that says “A sample title” and an unstyled paragraph below it that says “Some paragraph text” like the following example:

      Webpage output with a blue `<h1>` heading and an unstyled `<p>` element

      Next, let’s add a CSS rule to style the <p> element. Return to your styles.css file and add the following ruleset at the bottom of the file:

      styles.css

      . . .
      p {
        color: green;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
      }
      

      Save the file and reload it in the browser window to check how the file is displayed. Your <p> text should now have the style you declared in the CSS rule you just created:

      Webpage output with styled `<p>` text

      Now that you have CSS rules for the <h1> and <p> elements, any text you mark up with these tags in your HTML document will take on the style rules that you declared for these elements in your styles.css file.

      Further Practice

      If you want to continue experimenting with CSS rules, try creating CSS rulesets for different HTML text elements—such as <h2>, <h3>, and <h4>—and using them to modify text in your index.html file. If you’re stuck, you can copy the CSS rules in the following example and add them to your styles.css file:

      styles.css

      . . .
      h2 {
        color: red;
        font-size: 40px;
      }
      
      h3 {
        color: purple;
        font-size: 50px;
      }
      
      h4 {
        color: green;
        font-size: 60px;
      }
      

      Save your file and then add the following HTML content to your index.html file:

      index.html

      <h2> This is red text with a size of 40 pixels. </h2>
      <h3> This is purple text with a size of 50 pixels. </h3>
      <h4> This is green text with a size 60 pixels. </h4>
      

      Save the file and load index.html in your browser. You should receive the following results:

      Webpage content styled with multiple CSS rules

      Conclusion

      In this tutorial you experimented with specifying values for multiple properties using CSS. You also created multiple CSS rules for styling text content in an HTML document. You will expand upon both these skills when you begin building the demonstration website later on in the tutorial series. In the next tutorial, you will begin exploring how to style images with CSS.



      Source link

      CSS Hex Code Colors with Alpha Values


      In CSS, there are several formats for colors that can be used. Common ones include RGB, RGBA, hex codes, and HSL. Here we’ll review hex (hexadecimal) color codes and specifically look at changing the transparency of the color by introducing an alpha value too.

      What Is a Hexadecimal Number?

      Before we get to the CSS-specific tips, let’s first review what a hexadecimal value means.

      The word “hexadecimal” refers to a numerical value that uses 16 as a base instead of 10. Using a base of 10 is what most people are used to; after 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 comes 10. In others words, a single digit only has 10 possible values (0 to 9), and after that it must increase to two digits (10).

      A hexadecimal value can have 16 values for each digit in a number:

      0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
      

      In effect, it means numbers with multiple digits have many more possible combinations. A two digit value in base 10 can have 100 possible combinations (00, 01, 02… 66, 67, 68… 98, 99).

      However, using a two-digit hexadecimal value has many more possible combinations. Since each digit can have 16 possible values, the total possible combinations for a two-digit number is 16 x 16 or 256 possible values.

      For example, these are all valid hexadecimal values:

      00, 01, 1D, 9D, F5, 99, E4, CC
      

      We’ll leave it at that for the math portion. Let’s move on to the CSS.

      Using Hexadecimal Values in CSS

      When styling an element in CSS, we’ll often need to update the colors related to it. That could include font color, background-color, border-color, etc.

      To create custom colors, we can use combinations of the hexadecimal numbers described above to create hex codes, which represent specific colors.

      CSS hex codes are not case-sensitive, so you can use upper- or lowercase values. Often there will be a preference in a codebase for consistency.

      But First, Named Colors in CSS

      The simplest way to set the color is to just use named colors. Named colors in CSS are valid color names that can be used directly in your CSS styles. For example, if we wanted our header text to be red, we could literally just write red like so:

      h1 {
          color: red;
      }
      

      There are about 140 named colors in CSS (like red, blue, lavender, etc.) that can be used to avoid figuring out things like the hex codes.

      So, why use hex codes? Simply, there are many more options if you want to really customize your app’s color palette! Plus, you can change the transparency more easily.

      Hex (Hexadecimal) Codes in CSS with No Alpha Value

      The format of the CSS hex code is #RRGGBB. The letters refer to red (RR), green (GG), and blue (BB) so you can think of the 6-character value as being three two-digit hexadecimal numbers; one for each of the three colors.

      Don’t forget: in CSS, you need to use the pound/hash symbol (#) before your hex code for it to be valid.

      Now that we know our format (#RRGGBB), let’s look at some examples of CSS colors in their hexadecimal format.

      Each color you pick will be a combination of a red, green, and blue value. The lowest value (00) will be the darkest version of the color (closest to black), and the highest value (FF) will be closest to white. If we want to only have one of those colors represented in our hex code, we can set the other ones to the lowest value (00).

      Let’s say we wanted the brightest red with no green or blue in it. We can set our red (RR) value to the highest possible value (FF). Since we don’t want any green or blue in it, we can set the green (GG) and blue (BB) values each to 00 (the lowest value).

      h1 {
          color: #FF0000; // bright red
      }
      

      This will look like:

      Since hexadecimal numbers are in base 16, the lowest value for a two-digit number is 00 and highest value is FF. The lowest value will have the most black in it.

      Similarly, we could say we want no color, which in this case would make the color black.

      h1 {
          color: #000000; // black
      }
      

      If we put all the colors at their highest value, we get white.

      h1 {
          color: #FFFFFF; // white
      }
      

      From there, any other combination will give you an entire spectrum of color options.

      Don’t worry about learning how to pick the hexadecimal values yourself. There are tons of resources for picking colors that will do the hexadecimal conversion for you!

      Adding an Alpha Value to Your Hex Codes

      Now that we know what hex codes are, let’s look at changing the transparency of our colors.

      Let’s say we want a blue color that is fairly transparent. We can first select our color of blue:

      h1 {
          color: #0080FF; // cornflower blue
      }
      

      This color will look like this:

      Now, let’s say we want our text to be semi-transparent, we can change the transparency by adding two more numbers to our hexadecimal value (also known as the alpha value).

      h1 {
          color: #0080FF80; // transparent blue
      }
      

      Now our color will look like this:

      Wait, what?

      So, what’s going on here? Let’s break it down.

      Using an alpha value to update a color’s transparency will change the hex code format from #RRGGBB to #RRGGBBAA (red, green, blue, alpha). The first six values (the red, green, and blue ones) stay the exact same. The only difference is the last two values (the AA).

      The AA value in #RRGGBBAA can range from the lowest value possible (00) to the highest value possible (FF). The lowest will make the color fully transparent, which means you won’t see it anymore. The highest value will make it completely opaque, which is the default for hex codes anyway.

      Partially transparent: #0634a477

      Fully Opaque: #0634a4ff

      The alpha value in the hexadecimal format can be a little confusing because it’s hard to conceptualize what a base 16 value for transparency will actually look like. However, the benefit is if you’re already using hex codes in your codebase, now you can update them to change the transparency too! No color format changes required.

      Comparing Hex Code+Alpha Format to RGBA

      If you’ve had to set the transparency of a color before, you may know there are a few different options. The RGBA color format, for example, is one option instead of hex codes with an alpha value. The RGBA format looks like this:

      h1 {
          color: rgba(256, 0, 0, 0.5); // transparent red
      }
      

      Each color value (red, green, blue) in the RGBA (Red, Green, Blue, Alpha) format can range from 0 to 256. Unlike hex codes, though, only base 10 numbers are valid (0, 1, 2…255, 256). For the alpha value, any number from 0 to 1 is valid. Think of it as a transparency percentage: 0.5 is 50% transparent, 0.75 is 75% transparent, etc. The closer the number is to 1, the more opaque the color will be.

      If number 256 looks familiar here, remember there are 256 valid values for each two-digit hexadecimal number (16 x 16). The RGBA format also accepts 256 valid numbers (plus 0) for each of the red, green, and blue values. That makes hex codes and RGB/RGBA values easily convertible!

      Color formats can already be confusing enough before adding the alpha value too. One quick tip for seeing your colors in different formats is with the Chrome DevTools.

      Once your DevTools panel is open, look for the color your checking in the styles section. Once you find it, you can click the box to the left of the color to play around with it directly. You can also hold SHIFT and click on the box to toggle through your various format options with the values correctly converted.

      using the Chrome DevTools to play with CSS colors

      (The example above is inspecting a Google search result page.)

      CSS Color Resources

      Here’s a great tool for converting colors to all the different formats. If you’re curious what the hex codes for CSS named colors are, check them out here.

      Browser Compatibility

      The browser support for #RRGGBBAA hex codes is great. IE doesn’t support it but otherwise you should be covered. Check Can I Use for details if you’re curious.



      Source link