{"id":358,"date":"2022-05-23T20:42:05","date_gmt":"2022-05-23T20:42:05","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=358"},"modified":"2023-03-27T13:38:43","modified_gmt":"2023-03-27T13:38:43","slug":"css-colors","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-colors\/","title":{"rendered":"CSS Colors"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>Color in CSS<\/strong><\/p>\n\n\n\n<p>Many times, we need to give some colors to some elements, like while changing the color of some text, or some background color, or while specifying the color of shadow, etc.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS Colors | Lecture 17 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/kUbFY8p7_Fk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>So, we can do it in some different ways as well. One standard way that we have been practicing, is just using a standard color name, like black, blue, white, red, pink, etc. There are 140 standard color names supported in CSS. Let&#8217;s<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"315\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color.jpg\" alt=\"\" class=\"wp-image-1349\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color.jpg 504w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-300x188.jpg 300w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/figure>\n<\/div>\n\n\n<p>have an example for this way(you know though, but still) &#8211;<\/p>\n\n\n\n<p>well, if you try to follow along, and open this file in the browser, you can see that the paragraph text is there in red color. Have a look at the output &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"430\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-1.jpg\" alt=\"\" class=\"wp-image-1350\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-1-300x126.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-1-768x323.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>If not the names of the colors, you can use the other ways as well, like putting the hex code of the corresponding color. You don&#8217;t have to remember the hex code of every color, but you can remember some really simple and useful color codes, like #000000 is for black, and the #ffffff is for white.<\/p>\n\n\n\n<p>In the above example, we have chosen red color for the paragraph text. The hex code for the red color is #ff0000. Have a look at the same code from above, but this time, we are just using the hex code instead of the color name. Basically, with hex codes, we can represent over 16 million colors.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"638\" height=\"360\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-2.jpg\" alt=\"\" class=\"wp-image-1351\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-2.jpg 638w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-2-300x169.jpg 300w\" sizes=\"auto, (max-width: 638px) 100vw, 638px\" \/><\/figure>\n<\/div>\n\n\n<p>If you try to make that change in the previously discussed code, you can again find that paragraph in red color.<\/p>\n\n\n\n<p>Yet, we have another way, through which, we can set the color. We can do it through the RGB values. The RGB means Red, Green, and blue. Here, we are going to set the parameters like the red value, green value, and blue value. So, it is like RGB(red, green, blue). Each parameter we have here does define the intensity of the respective colors.<\/p>\n\n\n\n<p>So, if we define something like this \u2013 RGB(255, 0, 0), this means that the color now would be red, since red has complete intensity, and others have zero intensity. Doing RGB(0, 0, 0) means that the color would be black. Let&#8217;s have a look at the code below for implementation of the same &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"356\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-3.jpg\" alt=\"\" class=\"wp-image-1352\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-3.jpg 630w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/05\/color-3-300x170.jpg 300w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/figure>\n<\/div>\n\n\n<p>If you have a look at the output, you can see that the color of the text in the paragraph changes. So, you can use different ways to add colors. Wherever you need to add some color, like in the background color as well, or wherever you need to specify some color, you can use those different ways, like using the name of the color, or using the hex code of the color, or using the RGB values for the color, etc.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Color in CSS Many times, we need to give some colors to some elements, like while changing the color of some text, or some background color, or while specifying the color of shadow, etc. So, we can do it in some different ways as well. One standard way that we have been practicing, is just [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,182,13],"class_list":{"0":"post-358","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-colors","9":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":4,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/358\/revisions"}],"predecessor-version":[{"id":5624,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/358\/revisions\/5624"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}