{"id":6034,"date":"2024-04-14T19:53:21","date_gmt":"2024-04-14T11:53:21","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6034"},"modified":"2024-04-14T19:53:21","modified_gmt":"2024-04-14T11:53:21","slug":"color-shades-hex-rgba-color-labels","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/color-shades-hex-rgba-color-labels\/","title":{"rendered":"Color shades (hex, rgba, color labels)"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Occasionally, employing a color selector may suffice in selecting a hue to operate with. However, for precision, a more specific approach is required.<\/p>\n<p>Web colors are portrayed in three typical methods:<\/p>\n<ul role=\"list\">\n<li>Color labels<\/li>\n<li>Hexadecimal codes<\/li>\n<li>RGBA<\/li>\n<\/ul>\n<h2><strong>Color labels<\/strong><\/h2>\n<p><a href=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp\" target=\"_blank\" rel=\"noopener\">HTML color labels<\/a> are the familiar color labels for 140 hues supported by up-to-date browsers.<\/p>\n<p>It&#8217;s simpler to recollect and utilize &#8220;Violet&#8221; instead of #0000FF. However, most of these labels are relatively random like LawnGreen, PeachPuff, BlanchedAlmond, etc.<\/p>\n<figure class=\"w-richtext-align-center w-richtext-figure-type-video\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/220295502\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>Moreover, HTML color label lists do not encompass the full range of potential web colors. Hence, for a broader selection of hues, considering other formats is advisable.<\/p>\n<figure class=\"w-richtext-align-center w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b80e6890be4bf26993b_5e61323a6f0e685ede92d08b_593946765c387903ef75d1f2_02-252520web252520colors.png\" alt=\"Web colors\" title=\"64b94b80e6890be4bf26993b_5e61323a6f0e685ede92d08b_593946765c387903ef75d1f2_02-252520web252520colors\"><\/div><figcaption>Web Colors<\/figcaption><\/figure>\n<h2><strong>Hexadecimal codes<\/strong><\/h2>\n<p><strong>Hexadecimal codes<\/strong> typically consist of six-character codes corresponding to precise color outputs.<\/p>\n<figure class=\"w-richtext-align-center w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b80e6890be4bf26993f_5e613239d21513b0efbb20f4_593946a7eb546f4fe3153b64_03-252520hex252520color.png\" alt=\"Hexadecimal colors\" title=\"64b94b80e6890be4bf26993f_5e613239d21513b0efbb20f4_593946a7eb546f4fe3153b64_03-252520hex252520color\"><\/div><figcaption>Hexadecimal colors<\/figcaption><\/figure>\n<p>They are also referred to as <strong>hex triplets<\/strong> since they consist of three groups of two digits: red, green, and blue\u2014identical to the three colors composing each pixel on a display.<\/p>\n<p>Augmenting a specific color&#8217;s value increases the prominence of that hue in the result. Manipulating red, green, and blue allows for a vast array of possible hues.<\/p>\n<figure class=\"w-richtext-align-center w-richtext-figure-type-video\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/220296510\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h4><strong>Hex<\/strong><\/h4>\n<p>Individual color values are represented in the hexadecimal numbering system. This system covers digits from 0 to 9, then incorporates the letters <strong>a<\/strong> through <strong>f<\/strong> before transitioning to 10.<\/p>\n<figure class=\"w-richtext-align-center w-richtext-figure-type-video\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/220296646\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h4><strong>Abbreviated hex<\/strong><\/h4>\n<p>Abbreviated hex signifies the reduction of a 6-digit hexadecimal to a 3-digit format.<\/p>\n<p>If a hue&#8217;s color values have repeating digits in all three sets, like AA-BB-CC or 44-11-EE, the second digit for each color can be omitted, simplifying it to ABC or 41E.<\/p>\n<p>For instance, white is #FFFFFF and can be abbreviated as #FFF.<\/p>\n<figure class=\"w-richtext-align-center w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b80e6890be4bf269937_5e613239d21513148ebb20f5_59394714996a5403c5bd312c_06252520-252520shorthand252520hex.png\" title=\"64b94b80e6890be4bf269937_5e613239d21513148ebb20f5_59394714996a5403c5bd312c_06252520-252520shorthand252520hex\"><\/div><figcaption>\u200dAbbreviated hex<\/figcaption><\/figure>\n<h2><strong>RGBA<\/strong><\/h2>\n<p>Conversely, RGBA values are displayed using the base-10 numbering system.<\/p>\n<p>RGBA utilizes values from 0 to 255 to identify each color: red, green, and blue\u2014an inclusive spectrum of red, starting from zero.<\/p>\n<p>The &#8216;A&#8217; denotes Alpha transparency. Consequently, with RGBA, the transparency level can be controlled from completely transparent (0) to entirely opaque (1). Lower alpha values imply increased transparency, while higher alpha values indicate heightened opacity.<\/p>\n<figure class=\"w-richtext-align-center w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b80e6890be4bf269933_5e613239dcb1b6e2eae3e1f5_59394737acbaea4fd061f9b3_07252520-252520rgba.png\" alt=\"RGBA\" title=\"64b94b80e6890be4bf269933_5e613239dcb1b6e2eae3e1f5_59394737acbaea4fd061f9b3_07252520-252520rgba\"><\/div>\n<\/figure>\n<p>The <a href=\"https:\/\/help.webflow.com\/article\/color-picker\"><strong>color picker<\/strong><\/a> and <strong>the eyedropper tool<\/strong> are additional options for visually selecting your color.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"An overview of the 3 common ways colors are represented on the web: Color names, Hex codes, and RGBA.","protected":false},"author":2,"featured_media":6035,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-6034","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6034"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6034\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6035"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}