{"id":3008,"date":"2016-09-19T08:23:52","date_gmt":"2016-09-19T13:23:52","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1936"},"modified":"2016-09-19T08:23:52","modified_gmt":"2016-09-19T13:23:52","slug":"color-values-how-to-define-a-color-in-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/color-values-how-to-define-a-color-in-css\/","title":{"rendered":"Color Values: How to Define a Color in CSS"},"content":{"rendered":"

There are many different scenarios in which you’d have to define a color in your CSS — this\u00a0probably most commonly happens with the color or background-color property, but it’s certainly used with others as well.\u00a0Defining your color values is the easy part, but deciding\u00a0how<\/em> to do so can sometimes be tricky, because there are so many different ways to define a color value using CSS. Here are all your options:<\/p>\n

Predefined Name Values<\/strong><\/p>\n

Most people don’t use predefined name values to define color in their CSS because there are only about 140 predefined colors in the CSS lexicon — hardly enough to be creative in your designs.<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. h1{<\/span><\/div><\/li>\n
  2. color<\/span>:<\/span> green<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    HEX Color Values<\/strong><\/p>\n

    This one’s probably the most common of them all. It’s six (sometimes three, if all the characters are the same) characters (digits or letters) preceded by a # symbol, and is supported by all major browsers.<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. h1{<\/span><\/div><\/li>\n
    2. color<\/span>:<\/span> #00ff00<\/span>;<\/span> \/* green *\/<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      RGB\/RGBA Color Values<\/b><\/p>\n

      RGB colors are defined by the amounts of intensity of red, green, and blue in the color. The syntax is like this: rgb(red, green, blue). So each parameter within the parenthesis represents the intensity of each particular color.<\/p>\n

      RGBA is the same as rgb, except with an added “a” parameter, which stands for alpha. Alpha represents the opacity of a color, and can be a number value from 0-1. So if .5 is used as the “a” parameter, the color itself will be only partially opaque. This is used often when trying to make the background color of a particular object slightly transparent so the user can see behind it.<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. h1{<\/span><\/div><\/li>\n
      2. color<\/span>:<\/span>rgb<\/span>(<\/span>0<\/span>,<\/span> 255<\/span>,<\/span> 0<\/span>)<\/span>;<\/span> \/* green *\/<\/span><\/div><\/li>\n
      3. }<\/span><\/div><\/li>\n
      4.  <\/div><\/li>\n
      5. h2{<\/span><\/div><\/li>\n
      6. color<\/span>:<\/span>rgba(<\/span>0<\/span>,<\/span> 255<\/span>,<\/span> 0<\/span>,<\/span> 1<\/span>)<\/span>;<\/span> \/* green *\/<\/span><\/div><\/li>\n
      7. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        HSL\/HSLA Colors<\/strong><\/p>\n

        HSL colors are defined by the amounts of hue, saturation, and lightness in a color. The syntax, much like RGB, is hsl(hue, saturation, lightness). Also like RGB, there is also an option to include an alpha value, which serves the save purpose as the alpha value does for rgba. The syntax for that is: hsla(hue, saturation, lightness, alpha).<\/p>\n

        \r\n\r\n\t\t
        \r\n\r\n\t\t
        \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
        css<\/div>\r\n\r\n\t\t\r\n\t\t
        \r\n\r\n\t<\/div>\r\n\t\r\n\t
        \r\n\t\t
        1. h1{<\/span><\/div><\/li>\n
        2. color<\/span>:<\/span> hsl(<\/span>120<\/span>,<\/span> 100%<\/span>,<\/span> 50%<\/span>)<\/span>;<\/span> \/* green *\/<\/span><\/div><\/li>\n
        3. }<\/span><\/div><\/li>\n
        4.  <\/div><\/li>\n
        5. h2{<\/span><\/div><\/li>\n
        6. color<\/span>:<\/span> hsla(<\/span>120<\/span>,<\/span> 100%<\/span>,<\/span> 50%<\/span>,<\/span> 1<\/span>)<\/span>;<\/span> \/* green *\/<\/span><\/div><\/li>\n
        7. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

          Share and Enjoy !<\/h3>
          0<\/span><\/span>Shares<\/small><\/div>
          <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

          There are many different scenarios in which you’d have to define a color in your CSS — this\u00a0probably most commonly happens with the color or background-color property, but it’s certainly used with others as well.\u00a0Defining your color values is the […]<\/p>\n

          Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173,174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3008"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3008"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3008\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}