{"id":157857,"date":"2022-01-19T08:37:21","date_gmt":"2022-01-19T13:37:21","guid":{"rendered":"https:\/\/1stwebdesigner.com\/?p=157857"},"modified":"2022-12-14T14:05:23","modified_gmt":"2022-12-14T19:05:23","slug":"how-to-use-different-css-color-values-rgb-keywords-hsl","status":"publish","type":"post","link":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/","title":{"rendered":"How to Use Different CSS Color Values (RGB, Keywords, HSL)"},"content":{"rendered":"<p><em>This article was originally posted at <a href=\"https:\/\/christinatruong.medium.com\/how-to-use-different-css-color-values-rgb-keywords-hsl-a6b09dc1061\" target=\"_blank\" rel=\"noopener\">https:\/\/christinatruong.medium.com\/how-to-use-different-css-color-values-rgb-keywords-hsl-a6b09dc1061<\/a>\u00a0and was kindly shared by Christina Truong. Check out more of her work at\u00a0<a href=\"https:\/\/christinatruong.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/christinatruong.com<\/a>.<\/em><\/p>\n<p>One of the properties that are used quite often in CSS is <a href=\"https:\/\/webdeveloper.com\/reference\/color\/\" target=\"_blank\" rel=\"noopener\"><code>color<\/code><\/a>. It can be used with many different types of values such as RGB, HSL and keywords.<\/p>\n<p><em>Prefer to watch a video? This article is a companion piece to my <a href=\"https:\/\/www.youtube.com\/c\/hichristina\" target=\"_blank\" rel=\"noopener\">Decoded by Christina<\/a> series on YouTube. Or refer to the <a href=\"https:\/\/codepen.io\/christinatruong\/pen\/porWdPv\" target=\"_blank\" rel=\"noopener\">Codepen snippet<\/a> to follow along with the examples.<\/em><\/p>\n<p><iframe loading=\"lazy\" title=\"How to use CSS color values (RGB, keywords, HSL)\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/yj051hVhTAo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<div class=\"elements-freelance ipa\">\n<h2 style=\"margin-bottom: 5px;\">UNLIMITED DOWNLOADS: 500,000+ WordPress &amp; Design Assets<\/h2>\n<p>Sign up for Envato Elements and get unlimited downloads starting at only $16.50 per month!<br \/>\n<a href=\"https:\/\/1.envato.market\/XDBQg\" target=\"blank\" rel=\"nofollow noopener noreferrer\"><br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-153949\" src=\"\/\/a.impactradius-go.com\/display-ad-file\/432829:categoryads-wordpress-generic.png?v=61655790\" alt=\"\" width=\"834\" height=\"auto\" \/><\/a><br \/>\n<a href=\"https:\/\/1.envato.market\/XDBQg\" target=\"blank\" rel=\"nofollow noopener noreferrer\"><br \/>\n<button style=\"background-color: #f93d66; border: none; border-radius: 6px; font-weight: 600; color: #ffffff; text-align: center; font-size: 14px; width: 200px; cursor: pointer; padding: 14px 19px 14px 19px;\" type=\"button\">DOWNLOAD NOW<\/button><\/a><img loading=\"lazy\" decoding=\"async\" style=\"position: absolute; visibility: hidden;\" src=\"\/\/1.envato.market\/i\/20877\/432829\/4662?subId1=wordpress-ipa-091620\" width=\"0\" height=\"0\" border=\"0\" \/>\n<\/div>\n\n<h2>RGB color values<\/h2>\n<p>RGB values are defined according to its red, green, and blue components. There are two types of RGB values: hexadecimal and functional.<\/p>\n<h3>Hexadecimal RGB values<\/h3>\n<p><strong>Hexadecimal<\/strong> RGB values, or hex for short, begin with a number sign followed by six characters, using a combination of numbers from 0\u20139 and the letters A-F. The first two values represent the red component, followed by the green and blue component values. <code>0<\/code> represents black, <code>F<\/code> represents white. All other colors are a combination of the numbers and letters.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ncolor: #rrggbb;\r\ncolor: #000000; \/* black *\/\r\ncolor: #ffffff; \/* white *\/\r\ncolor: #ff0000; \/* red *\/\r\ncolor: #00ff00; \/* green *\/\r\ncolor: #0000ff; \/* blue *\/\r\n<\/pre>\n<p>The letters in the hexadecimal notation are case-insensitive so whether you use all lowercase, uppercase or both, they will be read as the same color by the browser.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ncolor: #ffffff;\r\ncolor: #FFFFFF;\r\ncolor: #FFFfff;\r\n<\/pre>\n<p>The hex value can also be abbreviated if the RGB pairs are the same letters or numbers. For example, <code>#f00<\/code> is the same color as <code>#ff0000<\/code> and <code>#000000<\/code> is the same as <code>#000<\/code>.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ncolor: #f00;    \/* shorthand *\/\r\ncolor: #ff0000; \/* longhand *\/\r\n\r\ncolor: #000;    \/* shorthand *\/\r\ncolor: #000000; \/* longhand *\/\r\n<\/pre>\n<h3>Functional rgb() values<\/h3>\n<p>The functional <code>rgb()<\/code> value is defined by using 3 comma-separated numbers between a set of parentheses. The numbers range from 0 to 255 or a percentage between 0-100% to represent the red, green and blue color channels.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ncolor: rgb(0, 0, 0);          \/* black *\/\r\ncolor: rgb(0%, 0%, 0%);       \/* black *\/\r\n\r\ncolor: rgb(255, 255, 255);    \/* white *\/\r\ncolor: rgb(100%, 100%, 100%); \/* white *\/\r\n\r\ncolor: rgb(0, 128, 0);        \/* green *\/\r\ncolor: rgb(0%, 50%, 0%);      \/* green *\/\r\n<\/pre>\n<p>The spaces between the commas are not a requirement but can be added for readability.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ncolor: rgb(0, 0, 0);\r\ncolor: rgb(0,0,0);\r\n<\/pre>\n<p>An optional alpha channel can also be added by using the <code>rgba()<\/code> function instead. This fourth value is defined with a number between 0 and 1, or a percentage between 0 to 100% to change the opacity level and add transparency to the color.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ncolor: rgba(r, g, b, a);\r\ncolor: rgba(0, 0, 0, 0);     \/* black with 0% opacity *\/\r\ncolor: rgba(0, 0, 0, 0.5);   \/* black with 50% opacity *\/\r\ncolor: rgba(0, 0, 0, 1);     \/* black with 100% opacity *\/\r\n<\/pre>\n<h3>Keyword color values<\/h3>\n<p>Another color value type are keywords which are predefined values and include most basic colors like red, black, or yellow. But there are also other keywords that may not immediately come to mind such as <code>lavenderblush<\/code> or <code>skyblue<\/code>.<\/p>\n<p>So how do we know which keywords are valid?<\/p>\n<p>One place to find all the keyword values is in the <a href=\"https:\/\/www.w3.org\/TR\/css-color-3\/#svg-color\" target=\"_blank\" rel=\"noopener\">official W3C documentation<\/a>, which is the organization is responsible for developing the web standards. But it\u2019s pretty barebones in terms of visuals so I usually go to another website I\u2019ve mentioned before in other posts: <a href=\"http:\/\/colours.neilorangepeel.com\/\" target=\"_blank\" rel=\"noopener\">colours.neilorangepeel.com<\/a>. You can sort by different color categories and see their corresponding rgb values.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ncolor: red;\r\ncolor: #FF0000;\r\ncolor: rgb(255,0,0);\r\n\r\ncolor: lime;\r\ncolor: #00FF00;\r\ncolor: rgb(0,255,0);\r\n\r\ncolor: blue;\r\ncolor: #0000FF;\r\ncolor: rgb(0,0,255);\r\n<\/pre>\n<p>All keywords have a corresponding RGB value but there are a finite number of keywords. So using RGB values will provide a wider range of color options.<\/p>\n<h3>HSL color values<\/h3>\n<p>Another functional color value is <code>hsl()<\/code> which defines a color by its hue, saturation, and lightness.<\/p>\n<p>The <strong>hue<\/strong> is specified as an angle within the color wheel, relative to red. So that means the color red is equal to 0\u00b0 or 360\u00b0 while all the other colors are spread around the circle\/color wheel. For example, green equals 120\u00b0, blue equals 240\u00b0 and so on.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-157860\" src=\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl-1024x576.jpeg\" alt=\"CSS color values (hue)\" width=\"1024\" height=\"576\" srcset=\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl-1024x576.jpeg 1024w, https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl-570x321.jpeg 570w, https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl-768x432.jpeg 768w, https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl-1536x864.jpeg 1536w, https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><strong>Saturation<\/strong> and <strong>lightness<\/strong> are represented by the second and third value and are defined using percentages.<\/p>\n<ul>\n<li>100% is full saturation, and 0% is a shade of gray<\/li>\n<li>100% lightness is white, 0% lightness is black<\/li>\n<\/ul>\n<p>The hue can be defined with or without the degree unit but the saturation and lightness is defined with a percentage.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nhsl(270, 60%, 70%)\r\nhsl(270deg, 60%, 70%)\r\n<\/pre>\n<p>An optional alpha channel component can also be added using the <code>hsla()<\/code> function to add a fourth value, represented as a number between 0 and 1 or a percentage. 1 or 100% is full opacity.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nhsla(270, 60%, 50%, .15)\r\nhsla(270, 60%, 50%, 15%)\r\n<\/pre>\n<h3>Resources<\/h3>\n<p>These different types of color values can be found in image or graphics editing software like Photoshop and Illustrator or with online platforms like <a href=\"http:\/\/canva.com\/\" target=\"_blank\" rel=\"noopener\">Canva<\/a>.<\/p>\n<p>There are also online tools such as <a href=\"https:\/\/css-tricks.com\/examples\/HSLaExplorer\/\" target=\"_blank\" rel=\"noopener\">CSS Tricks HSLa Explorer<\/a> and <a href=\"http:\/\/coolors.co\/\" target=\"_blank\" rel=\"noopener\">coolors.co<\/a> for inspiration and to generate color palettes. <a href=\"http:\/\/randoma11y.com\/\" target=\"_blank\" rel=\"noopener\">randoma11y.com<\/a> is another great resource for creating high contrast color combinations for those with color blindness.<\/p>\n<p>In case you missed it, the links to the Codepen examples used in this tutorial can be found <a href=\"https:\/\/codepen.io\/christinatruong\/pen\/porWdPv\" target=\"_blank\" rel=\"noopener\">here<\/a>. To see a more detailed breakdown of the techniques mentioned in the article, check out <a href=\"https:\/\/youtu.be\/yj051hVhTAo\" target=\"_blank\" rel=\"noopener\">the corresponding video<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the properties that are used quite often in CSS is color. It can be used with many different types of values such as RGB, HSL and keywords.<\/p>\n","protected":false},"author":521,"featured_media":157860,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3337],"tags":[3326,3314,9973],"class_list":["post-157857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn","tag-color","tag-css","tag-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use Different CSS Color Values (RGB, Keywords, HSL) - 1WD<\/title>\n<meta name=\"description\" content=\"One of the properties that are used quite often in CSS is color. It can be used with different types of values such as RGB, HSL and keywords.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Different CSS Color Values (RGB, Keywords, HSL) - 1WD\" \/>\n<meta property=\"og:description\" content=\"One of the properties that are used quite often in CSS is color. It can be used with different types of values such as RGB, HSL and keywords.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/\" \/>\n<meta property=\"og:site_name\" content=\"1stWebDesigner\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/1stwebdesigner\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-19T13:37:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-14T19:05:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Truong\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@1stwebdesigner\" \/>\n<meta name=\"twitter:site\" content=\"@1stwebdesigner\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Truong\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/\"},\"author\":{\"name\":\"Christina Truong\",\"@id\":\"https:\/\/1stwebdesigner.com\/#\/schema\/person\/145faab94ad4bbc528f8d94553dd4e1b\"},\"headline\":\"How to Use Different CSS Color Values (RGB, Keywords, HSL)\",\"datePublished\":\"2022-01-19T13:37:21+00:00\",\"dateModified\":\"2022-12-14T19:05:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/\"},\"wordCount\":844,\"publisher\":{\"@id\":\"https:\/\/1stwebdesigner.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg\",\"keywords\":[\"Color\",\"CSS\",\"web design\"],\"articleSection\":[\"Learn\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/\",\"url\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/\",\"name\":\"How to Use Different CSS Color Values (RGB, Keywords, HSL) - 1WD\",\"isPartOf\":{\"@id\":\"https:\/\/1stwebdesigner.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg\",\"datePublished\":\"2022-01-19T13:37:21+00:00\",\"dateModified\":\"2022-12-14T19:05:23+00:00\",\"description\":\"One of the properties that are used quite often in CSS is color. It can be used with different types of values such as RGB, HSL and keywords.\",\"breadcrumb\":{\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#primaryimage\",\"url\":\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg\",\"contentUrl\":\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg\",\"width\":1920,\"height\":1080,\"caption\":\"CSS color values (hue)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/1stwebdesigner.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use Different CSS Color Values (RGB, Keywords, HSL)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/1stwebdesigner.com\/#website\",\"url\":\"https:\/\/1stwebdesigner.com\/\",\"name\":\"1stWebDesigner\",\"description\":\"Helping You Build a Better Web\",\"publisher\":{\"@id\":\"https:\/\/1stwebdesigner.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/1stwebdesigner.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/1stwebdesigner.com\/#organization\",\"name\":\"1stWebDesigner\",\"url\":\"https:\/\/1stwebdesigner.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/1stwebdesigner.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2015\/12\/1wd.jpg\",\"contentUrl\":\"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2015\/12\/1wd.jpg\",\"width\":80,\"height\":80,\"caption\":\"1stWebDesigner\"},\"image\":{\"@id\":\"https:\/\/1stwebdesigner.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/1stwebdesigner\/\",\"https:\/\/x.com\/1stwebdesigner\",\"https:\/\/www.linkedin.com\/company\/1stwebdesigner\",\"https:\/\/pinterest.com\/1stwebdesigner\/\",\"https:\/\/www.youtube.com\/user\/1stwebdesigner\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/1stwebdesigner.com\/#\/schema\/person\/145faab94ad4bbc528f8d94553dd4e1b\",\"name\":\"Christina Truong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/1stwebdesigner.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d4f97378b57ee4425abcd9fb9021eeca2ebfe496b22803dbaa636b375489aa9d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d4f97378b57ee4425abcd9fb9021eeca2ebfe496b22803dbaa636b375489aa9d?s=96&d=mm&r=g\",\"caption\":\"Christina Truong\"},\"sameAs\":[\"http:\/\/christina.fyi\/\"],\"url\":\"https:\/\/1stwebdesigner.com\/author\/cristina-truong-1wd\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Different CSS Color Values (RGB, Keywords, HSL) - 1WD","description":"One of the properties that are used quite often in CSS is color. It can be used with different types of values such as RGB, HSL and keywords.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Different CSS Color Values (RGB, Keywords, HSL) - 1WD","og_description":"One of the properties that are used quite often in CSS is color. It can be used with different types of values such as RGB, HSL and keywords.","og_url":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/","og_site_name":"1stWebDesigner","article_publisher":"https:\/\/www.facebook.com\/1stwebdesigner\/","article_published_time":"2022-01-19T13:37:21+00:00","article_modified_time":"2022-12-14T19:05:23+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg","type":"image\/jpeg"}],"author":"Christina Truong","twitter_card":"summary_large_image","twitter_creator":"@1stwebdesigner","twitter_site":"@1stwebdesigner","twitter_misc":{"Written by":"Christina Truong","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#article","isPartOf":{"@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/"},"author":{"name":"Christina Truong","@id":"https:\/\/1stwebdesigner.com\/#\/schema\/person\/145faab94ad4bbc528f8d94553dd4e1b"},"headline":"How to Use Different CSS Color Values (RGB, Keywords, HSL)","datePublished":"2022-01-19T13:37:21+00:00","dateModified":"2022-12-14T19:05:23+00:00","mainEntityOfPage":{"@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/"},"wordCount":844,"publisher":{"@id":"https:\/\/1stwebdesigner.com\/#organization"},"image":{"@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#primaryimage"},"thumbnailUrl":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg","keywords":["Color","CSS","web design"],"articleSection":["Learn"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/","url":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/","name":"How to Use Different CSS Color Values (RGB, Keywords, HSL) - 1WD","isPartOf":{"@id":"https:\/\/1stwebdesigner.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#primaryimage"},"image":{"@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#primaryimage"},"thumbnailUrl":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg","datePublished":"2022-01-19T13:37:21+00:00","dateModified":"2022-12-14T19:05:23+00:00","description":"One of the properties that are used quite often in CSS is color. It can be used with different types of values such as RGB, HSL and keywords.","breadcrumb":{"@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#primaryimage","url":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg","contentUrl":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2022\/01\/hue-hsl.jpeg","width":1920,"height":1080,"caption":"CSS color values (hue)"},{"@type":"BreadcrumbList","@id":"https:\/\/1stwebdesigner.com\/how-to-use-different-css-color-values-rgb-keywords-hsl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/1stwebdesigner.com\/"},{"@type":"ListItem","position":2,"name":"How to Use Different CSS Color Values (RGB, Keywords, HSL)"}]},{"@type":"WebSite","@id":"https:\/\/1stwebdesigner.com\/#website","url":"https:\/\/1stwebdesigner.com\/","name":"1stWebDesigner","description":"Helping You Build a Better Web","publisher":{"@id":"https:\/\/1stwebdesigner.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/1stwebdesigner.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/1stwebdesigner.com\/#organization","name":"1stWebDesigner","url":"https:\/\/1stwebdesigner.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/1stwebdesigner.com\/#\/schema\/logo\/image\/","url":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2015\/12\/1wd.jpg","contentUrl":"https:\/\/1stwebdesigner.com\/wp-content\/uploads\/2015\/12\/1wd.jpg","width":80,"height":80,"caption":"1stWebDesigner"},"image":{"@id":"https:\/\/1stwebdesigner.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/1stwebdesigner\/","https:\/\/x.com\/1stwebdesigner","https:\/\/www.linkedin.com\/company\/1stwebdesigner","https:\/\/pinterest.com\/1stwebdesigner\/","https:\/\/www.youtube.com\/user\/1stwebdesigner"]},{"@type":"Person","@id":"https:\/\/1stwebdesigner.com\/#\/schema\/person\/145faab94ad4bbc528f8d94553dd4e1b","name":"Christina Truong","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/1stwebdesigner.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d4f97378b57ee4425abcd9fb9021eeca2ebfe496b22803dbaa636b375489aa9d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d4f97378b57ee4425abcd9fb9021eeca2ebfe496b22803dbaa636b375489aa9d?s=96&d=mm&r=g","caption":"Christina Truong"},"sameAs":["http:\/\/christina.fyi\/"],"url":"https:\/\/1stwebdesigner.com\/author\/cristina-truong-1wd\/"}]}},"_links":{"self":[{"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/posts\/157857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/users\/521"}],"replies":[{"embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/comments?post=157857"}],"version-history":[{"count":10,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/posts\/157857\/revisions"}],"predecessor-version":[{"id":158570,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/posts\/157857\/revisions\/158570"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/media\/157860"}],"wp:attachment":[{"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/media?parent=157857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/categories?post=157857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/1stwebdesigner.com\/wp-json\/wp\/v2\/tags?post=157857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}