{"id":94582,"date":"2025-03-02T10:01:16","date_gmt":"2025-03-02T08:01:16","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=94582"},"modified":"2025-11-30T09:33:57","modified_gmt":"2025-11-30T07:33:57","slug":"text-color-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/text-color-css\/","title":{"rendered":"How To Change Text Color In CSS &amp; HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"94582\" class=\"elementor elementor-94582\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-639d699c e-flex e-con-boxed e-con e-parent\" data-id=\"639d699c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef2fdfa elementor-widget elementor-widget-text-editor\" data-id=\"ef2fdfa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here&#8217;s how it looks in basic CSS code:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-262f1a6 elementor-widget elementor-widget-code-highlight\" data-id=\"262f1a6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {  \/* Targets all paragraph elements *\/\r\n  color: red; \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71a4d49f elementor-widget elementor-widget-text-editor\" data-id=\"71a4d49f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In this example, all paragraph text within your HTML would be changed to red.\u00a0 Of course, red is just the beginning! There are a multitude of ways to express color values in <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"24261\">CSS<\/a>, providing you with a vast palette with which to experiment.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Color Values: Your Textual Rainbow\u00a0<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Color Names\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS offers a collection of basic color names for the most common colors. Think &#8220;red,&#8221; &#8220;blue,&#8221; &#8220;yellow,&#8221; &#8220;green,&#8221; and so on.\u00a0 These are straightforward to remember, making them an excellent starting point for beginners. Here&#8217;s an example:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e4b17d elementor-widget elementor-widget-code-highlight\" data-id=\"5e4b17d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 { \r\n  color: orange; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e5c9e5 elementor-widget elementor-widget-text-editor\" data-id=\"6e5c9e5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The main advantage of color names is their simplicity. However, you&#8217;re limited to a relatively small set of colors, which may only sometimes match your precise design vision.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Hexadecimal Color Codes\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Hexadecimal color codes, starting with a &#8220;#&#8221;, provide a vastly expanded color palette.\u00a0 They consist of six characters representing the Red, Green, and Blue (RGB) components of a color. For example, #FF0000 is pure red, while #008000 is a deep green.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab9a954 elementor-widget elementor-widget-code-highlight\" data-id=\"ab9a954\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np { \r\n  color: #F26522; \/* A warm orange tone *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d94393 elementor-widget elementor-widget-text-editor\" data-id=\"7d94393\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Hex codes grant you precision and millions of color possibilities.\u00a0 Many design tools and <a href=\"https:\/\/elementor.com\/blog\/no-code-website-builder\/\"  data-wpil-monitor-id=\"10312\">websites offer color pickers that output hex codes<\/a>, making it easy to find the exact shade you want.\u00a0 The only slight downside is that they can be less intuitive to read at first glance compared to color names.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">RGB and RGBA Colors<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">RGB offers yet another way to define colors based on their Red, Green, and Blue components.\u00a0 Within the rgb() function, you specify the intensity of each component on a scale of 0 to 255. For instance, rgb(255, 0, 0) produces the same pure red as #FF0000.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9234c6b elementor-widget elementor-widget-code-highlight\" data-id=\"9234c6b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh2 {\r\n  color: rgb(128, 0, 128); \/* A rich purple *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17e2f36 elementor-widget elementor-widget-text-editor\" data-id=\"17e2f36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The true power of RGB comes with the addition of an alpha channel, giving you RGBA. This &#8216;A&#8217; stands for &#8220;alpha&#8221; and controls transparency. RGBA values are expressed as rgba(R, G, B, A), where the alpha value ranges from 0 (fully transparent) to 1 (fully opaque). Here&#8217;s how to create a semi-transparent text overlay:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6bdc5c elementor-widget elementor-widget-code-highlight\" data-id=\"c6bdc5c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.overlay-text {\r\n   color: rgba(0, 0, 0, 0.6); \/* Black text with 60% opacity *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90baaa4 elementor-widget elementor-widget-text-editor\" data-id=\"90baaa4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">RGBA is ideal for layering text over <a href=\"https:\/\/elementor.com\/blog\/css-background-image\/\"  data-wpil-monitor-id=\"10313\">images or backgrounds<\/a>, giving you fine-grained control over how much the underlying elements show through.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">HSL and HSLA Colors<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">HSL (Hue, Saturation, Lightness) is a color model that aligns more closely with the way humans perceive color. It&#8217;s expressed as hsl(H, S, L):<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hue<\/b><span style=\"font-weight: 400;\"> is the type of color on a 360-degree color wheel (0 is red, 120 is green, 240 is blue, etc.).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Saturation:<\/b><span style=\"font-weight: 400;\"> The intensity of the color (0% is gray, 100% is full color)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lightness:<\/b><span style=\"font-weight: 400;\"> How bright or dark the color is (0% is black, 100% is white)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">HSLA simply adds an alpha channel for transparency, just like RGBA.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81e8390 elementor-widget elementor-widget-code-highlight\" data-id=\"81e8390\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np { \r\n  color: hsl(30, 100%, 50%); \/* A vibrant orange *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2def1d6 elementor-widget elementor-widget-text-editor\" data-id=\"2def1d6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">HSL can sometimes be more intuitive for beginners to grasp. It allows you to think in terms of color types and vibrancy rather than mixing individual red, green, and blue components.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Methods for Changing Text Color<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are three primary methods to change <a href=\"https:\/\/elementor.com\/blog\/how-to-center-text-in-css\/\"  data-wpil-monitor-id=\"10314\">text color using CSS<\/a>. Each technique offers different levels of control and specificity, allowing you to target the elements you want to style precisely.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Inline Styles\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/add-css-to-html\/\"  data-wpil-monitor-id=\"10315\">Inline styles are applied directly within an HTML<\/a> element&#8217;s opening tag using the style attribute. Let&#8217;s change the color of a specific paragraph:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d224de elementor-widget elementor-widget-code-highlight\" data-id=\"6d224de\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-markup line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-markup\">\n\t\t\t\t\t<xmp>HTML\r\n<p style=\"color: blue;\">This paragraph will have blue text.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77333ba elementor-widget elementor-widget-text-editor\" data-id=\"77333ba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Inline styles are handy for quick, one-off changes to individual elements.\u00a0 However, they have some drawbacks:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Clutter:<\/b><span style=\"font-weight: 400;\"> They make your HTML harder to read and maintain.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Specificity:<\/b><span style=\"font-weight: 400;\"> Inline styles will override other, more general CSS rules, sometimes leading to unexpected styling issues.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Therefore, it&#8217;s usually best to use inline styles sparingly and only when absolutely necessary.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Internal Stylesheets\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Internal stylesheets use &lt;style&gt; tags placed within the &lt;head&gt; section of your HTML document. This allows you to define styles for specific HTML elements:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-484c07c elementor-widget elementor-widget-code-highlight\" data-id=\"484c07c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<head>\r\n  <style>\r\n    h1 { \r\n      color: #009933; \/* A dark green *\/\r\n    }\r\n\r\n    p {\r\n      color: #333333; \/* A dark gray *\/\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9262856 elementor-widget elementor-widget-text-editor\" data-id=\"9262856\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Internal stylesheets are excellent for styling an entire webpage. They offer these advantages:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Centralization:<\/b><span style=\"font-weight: 400;\"> Keeps your styling rules in one place within the HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Specificity:<\/b><span style=\"font-weight: 400;\"> Internal styles take precedence over most browser default styles but are less specific than inline styles.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">External Stylesheets\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">External stylesheets are the recommended approach for managing your website&#8217;s CSS. You create a separate .css file and <a href=\"https:\/\/elementor.com\/blog\/html-links\/\"  data-wpil-monitor-id=\"10316\">link it to your HTML<\/a> document using the &lt;link&gt; tag within the &lt;head&gt; section:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16b3bed elementor-widget elementor-widget-code-highlight\" data-id=\"16b3bed\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-markup line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-markup\">\n\t\t\t\t\t<xmp>HTML\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"styles.css\"> \r\n<\/head>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-deb161a elementor-widget elementor-widget-text-editor\" data-id=\"deb161a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>styles.css:<\/b><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe5a131 elementor-widget elementor-widget-code-highlight\" data-id=\"fe5a131\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  color: #222222; \/* Sets default text color for the page *\/\r\n}\r\n\r\nh1 {\r\n  color: #CD5C5C; \/* Indian red for headings *\/\r\n}  \r\n\r\na { \r\n  color: #0000EE; \/* Standard blue for links *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52364e2 elementor-widget elementor-widget-text-editor\" data-id=\"52364e2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">External stylesheets provide several key benefits:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Maintainability:<\/b><span style=\"font-weight: 400;\"> Separating CSS from <a href=\"https:\/\/elementor.com\/blog\/how-to-add-space-in-html\/\"  data-wpil-monitor-id=\"10317\">HTML keeps your code<\/a> organized and easier to update.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Reusability:<\/b><span style=\"font-weight: 400;\"> A single stylesheet can be applied to multiple HTML pages, ensuring a consistent look across your website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Preprocessors:<\/b><span style=\"font-weight: 400;\"> You can use advanced CSS preprocessors like Sass or Less to streamline your stylesheet <a href=\"https:\/\/elementor.com\/blog\/ssl\/\"  data-wpil-monitor-id=\"10318\">development<\/a> (we&#8217;ll touch on this in a future article!).<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">CSS Specificity and Inheritance\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Understanding CSS specificity and inheritance is important to avoid unexpected text color changes. Specificity refers to how CSS determines which rule takes precedence when multiple conflicting styles for an element exist. Generally, more specific selectors (like IDs) will override less specific ones (like HTML tags).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Inheritance means that some <a href=\"https:\/\/elementor.com\/blog\/how-to-underline-text-in-css\/\"  data-wpil-monitor-id=\"10319\">CSS properties<\/a>, like color, are passed down from parent elements to their child elements. This means if you set a text color on the &lt;body&gt; tag, all text within the page will inherit that color unless overridden by more specific styles.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Targeting Specific Elements\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">CSS gives you fine-grained control over which text elements to style. Let&#8217;s look at the most common targeting methods:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">HTML Tags<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The simplest way is to target generic HTML tags. This will apply your color change to all elements of that type within your page:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a11bf53 elementor-widget elementor-widget-code-highlight\" data-id=\"a11bf53\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {  \r\n  color: #9932CC; \/* Dark orchid for paragraphs *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b201c80 e-flex e-con-boxed e-con e-parent\" data-id=\"b201c80\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e8bae9 elementor-widget elementor-widget-text-editor\" data-id=\"3e8bae9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Classes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Classes provide a more flexible way to apply text color styles. You define a class in your CSS and then add the class attribute to the HTML elements you want to target:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ff1af3 elementor-widget elementor-widget-code-highlight\" data-id=\"7ff1af3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.highlight { \r\n  color: #FFD700; \/* A vibrant gold *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e99b2b elementor-widget elementor-widget-code-highlight\" data-id=\"2e99b2b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<p class=\"highlight\">This text will be highlighted in gold.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27dbeb3 elementor-widget elementor-widget-text-editor\" data-id=\"27dbeb3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Classes are excellent because:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Reusability:<\/b><span style=\"font-weight: 400;\"> You can apply the same class to multiple elements, ensuring consistent styling.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Organization:<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/class-in-css\/\"  data-wpil-monitor-id=\"10320\">Classes help structure your CSS<\/a> and make it easier to understand.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">IDs\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">IDs are unique identifiers for specific HTML elements and use the id attribute.\u00a0 Use IDs sparingly, as they have a very high specificity that can override other styles.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61483bd elementor-widget elementor-widget-code-highlight\" data-id=\"61483bd\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n#important-message { \r\n  color: red; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c50f2bf elementor-widget elementor-widget-code-highlight\" data-id=\"c50f2bf\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<p id=\"important-message\">This message will have red text.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e95a21 elementor-widget elementor-widget-text-editor\" data-id=\"6e95a21\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">IDs are primarily useful for styling single, distinct elements and often find use in JavaScript interactions.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Changing Text Color on User Interactions<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Hover Effects\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The :hover pseudo-class adds a special touch to your website, letting you change text color when a user hovers their mouse over an element.\u00a0 This is a common technique for highlighting <a href=\"https:\/\/elementor.com\/blog\/elementor-323-ajax-search-floating-buttons-link-in-bio\/\"  data-wpil-monitor-id=\"10334\">links or buttons<\/a>:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2072c38 elementor-widget elementor-widget-code-highlight\" data-id=\"2072c38\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\na:hover { \r\n  color: #EE82EE; \/* A playful violet for link hover *\/\r\n}\r\n\r\n.button:hover {\r\n    color: white; \/* White text on button hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b65521 elementor-widget elementor-widget-text-editor\" data-id=\"1b65521\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Hover effects provide visual feedback, indicating to the user that an element is interactive.\u00a0 They <a href=\"https:\/\/elementor.com\/blog\/image-optimizer-case-study-spread\/\"  data-wpil-monitor-id=\"10335\">enhance navigation and can make your website<\/a> feel more engaging.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Other States\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS offers additional pseudo-classes to style text based on different interaction states:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:active: When an element is being clicked or tapped.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:visited: For <a href=\"https:\/\/elementor.com\/blog\/html-images\/\"  data-wpil-monitor-id=\"10321\">styling links<\/a>, the user has already visited.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:focus: When an element (like a form field) has keyboard focus.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let&#8217;s make visited links a less saturated color:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe69509 elementor-widget elementor-widget-code-highlight\" data-id=\"fe69509\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\na:visited {\r\n color:  #800080; \/* A muted purple for visited links *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b340d6a elementor-widget elementor-widget-text-editor\" data-id=\"b340d6a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">These pseudo-classes give you even more control over how your text responds to user actions, further <a href=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\"  data-wpil-monitor-id=\"10322\">improving the user experience<\/a>.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Accessibility and Color Contrast\u00a0<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">The Importance of Sufficient Contrast<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Choosing text and <a href=\"https:\/\/elementor.com\/blog\/how-to-change-background-color-in-html\/\"  data-wpil-monitor-id=\"10323\">background colors<\/a> with sufficient contrast is essential to make your website readable for everyone, including users with visual impairments.\u00a0 The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure your content is legible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Poor color contrast can make text difficult or even impossible to read, leading to frustration and exclusion for some users.\u00a0 By prioritizing contrast, you create a more welcoming and inclusive online experience.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Color Blindness Simulators<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Color blindness affects a significant portion of the population.\u00a0 Color blindness simulators are valuable tools that help you visualize how your website appears to people with different types of color vision deficiencies. Several browser extensions and online tools exist for this purpose, and <a href=\"https:\/\/elementor.com\/blog\/explore-elementor-pro-display-conditions\/\"  data-wpil-monitor-id=\"10336\">Elementor also features<\/a> a built-in color blindness simulator.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Empathy plays a key role in <a href=\"https:\/\/elementor.com\/blog\/web-safe-fonts\/\"  data-wpil-monitor-id=\"10337\">accessible design<\/a>. Putting yourself in the shoes of users with differing abilities fosters a deeper understanding of their needs.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Resources and Tools<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let&#8217;s look at some helpful resources to ensure your color choices are accessible:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contrast Checkers:<\/b><span style=\"font-weight: 400;\"> Several online tools (like WebAIM&#8217;s Color Contrast Checker: <\/span><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">https:\/\/webaim.org\/resources\/contrastchecker\/<\/span><\/a><span style=\"font-weight: 400;\">) allow you to input your text and background colors and will indicate whether they meet WCAG contrast requirements.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Accessible Color Palette Generators:<\/b><span style=\"font-weight: 400;\"> Websites like Who Can Use: <a href=\"https:\/\/venngage.com\/tools\/accessible-color-palette-generator\">https:\/\/venngage.com\/tools\/accessible-color-palette-generator<\/a> help you build color palettes that prioritize accessibility from the start.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Best Practices for Text Color Choices<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Readability is Key<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your text color choices should never sacrifice readability. While a vibrant <a href=\"https:\/\/elementor.com\/blog\/complementary-color-schemes\/\"  data-wpil-monitor-id=\"10324\">color scheme<\/a> might be appealing, it&#8217;s only useful if your users can read the content. Here&#8217;s what to keep in mind:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Background Matters:<\/b><span style=\"font-weight: 400;\"> Text color needs to stand out clearly against the background color. Always use a contrast checker to verify this.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Strong Contrast:<\/b><span style=\"font-weight: 400;\"> Aim for high-contrast combinations, especially for essential text like body copy and navigation labels.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Branding and Color Psychology<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Colors have the power to evoke emotions and <a href=\"https:\/\/elementor.com\/blog\/introducing-new-ecommerce-design-capabilities\/\"  data-wpil-monitor-id=\"10325\">strongly influence how your brand<\/a> is perceived.\u00a0 Let&#8217;s consider how to align your text colors with your website&#8217;s purpose:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Brand Palette:<\/b><span style=\"font-weight: 400;\"> Incorporate your existing brand colors into your text styling to promote brand recognition and a cohesive look.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Emotion:<\/b><span style=\"font-weight: 400;\"> Understand the psychology of color. Warm colors (reds, oranges, yellows) convey energy and excitement, while cooler colors (blues, greens, purples) tend to be more calming.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Hierarchy and Emphasis<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Use color to create a clear visual hierarchy on your pages.\u00a0 This helps guide the user&#8217;s eye and signals the importance of different text elements:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Headings:<\/b><span style=\"font-weight: 400;\"> Headings often work well with bolder or darker colors to stand out from the body text.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Calls to Action:<\/b><span style=\"font-weight: 400;\"> Make buttons and other important links pop with contrasting colors that attract attention.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Subtlety:<\/b><span style=\"font-weight: 400;\"> Use less saturated <a href=\"https:\/\/elementor.com\/blog\/introducing-enhanced-import-export-rearrange-global-fonts-colors\/\"  data-wpil-monitor-id=\"10326\">colors or smaller font sizes for less important<\/a> text elements<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Don&#8217;t Overdo It<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A little color goes a long way!\u00a0 Here&#8217;s why simplicity is often best:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Overwhelming:<\/b><span style=\"font-weight: 400;\"> Too many colors can make your website busy and difficult to read.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consistency:<\/b><span style=\"font-weight: 400;\"> A limited, well-chosen color palette creates a more harmonious and polished look.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Elementor: Styling Text Intuitively<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Introducing the Elementor Visual Editor<\/span><\/h3>\n<p><iframe title=\"Elementor - The Leading Platform for Web Creators\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/le72grP_Q6k?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><\/p>\n<p><span style=\"font-weight: 400;\">Elementor&#8217;s core strength lies in its drag-and-drop visual editor. This editor gives you real-time control over your <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\"  data-wpil-monitor-id=\"10327\">website&#8217;s design<\/a>, including text color, without writing a single line of CSS (unless you want to). This approach empowers those without coding experience to create beautiful, color-rich websites.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Text Color Controls in Elementor Widgets<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Nearly all <a href=\"https:\/\/elementor.com\/blog\/new-nested-elements-tabs-custom-units\/\"  data-wpil-monitor-id=\"10328\">Elementor widgets<\/a> that contain text (headings, paragraphs, buttons, etc.) feature intuitive color picker controls within their styling options. Let&#8217;s illustrate this:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Select a Widget:<\/b><span style=\"font-weight: 400;\"> Choose any text-based widget on your page.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Styling Tab:<\/b><span style=\"font-weight: 400;\"> Navigate to the widget&#8217;s &#8220;Style&#8221; tab in the Elementor editing panel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Color Picker:<\/b><span style=\"font-weight: 400;\"> Locate the &#8220;Text Color&#8221; option and click on it to reveal a user-friendly color picker.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Choose Freely:<\/b><span style=\"font-weight: 400;\"> You can select from a color palette, enter hex codes, or use the eyedropper tool to <a href=\"https:\/\/elementor.com\/blog\/types-of-domains\/\"  data-wpil-monitor-id=\"10338\">match existing colors on your website perfectly<\/a>.<\/span><\/li>\n<\/ol>\n<p><iframe title=\"Introducing Elementor AI Copilot\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/rWB2moi4XMw?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><\/p>\n<p><span style=\"font-weight: 400;\">This streamlined workflow drastically speeds up your text color experimentation and implementation.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Global Style Settings<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/elementor-ai-copilot-global-styling-and-image-editing-improvements\/\"  data-wpil-monitor-id=\"10339\">Elementor offers global style<\/a> settings that let you define default colors for headings, body text, links, and more.\u00a0 This has several benefits:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consistency:<\/b><span style=\"font-weight: 400;\"> Maintain a cohesive look across your entire website with ease.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Time-Saver:<\/b><span style=\"font-weight: 400;\"> Change site-wide colors with a few clicks instead of editing individual widgets.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Custom CSS Capabilities<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">While Elementor&#8217;s visual tools are incredibly powerful, you may want to fine-tune them with custom CSS. <a href=\"https:\/\/elementor.com\/blog\/new-loop-carousel-copy-paste-between-websites-and-more\/\"  data-wpil-monitor-id=\"10340\">Elementor allows you to add custom<\/a> CSS code directly to widgets, pages, or site-wide, giving you that extra level of control when needed.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Bonus: Advanced Techniques &amp; Tools\u00a0<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Color Gradients<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS gradients let you create smooth transitions between multiple colors within your text.\u00a0 This can produce eye-catching and memorable effects:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8f05d4 elementor-widget elementor-widget-code-highlight\" data-id=\"f8f05d4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 {\r\n  background: linear-gradient(to right, #FF0000, #FFA500, #FFFF00); \r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43f3c71 elementor-widget elementor-widget-text-editor\" data-id=\"43f3c71\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">To ensure color gradients display within your text, as in the example above, you&#8217;ll often need specific -webkit- prefixes for compatibility across different browsers.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Gradients offer a unique opportunity to add depth and visual interest to headings or call-to-action elements.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Text Shadows and Text Strokes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let&#8217;s add some dimension to your text:<\/span><\/p>\n<p><b>Text Shadows (<\/b><span style=\"font-weight: 400;\">text-shadow<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Create subtle shadow effects behind your text, improving readability against certain backgrounds or adding a touch of style.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b65ee4 elementor-widget elementor-widget-code-highlight\" data-id=\"4b65ee4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {\r\n  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-023fb5b elementor-widget elementor-widget-text-editor\" data-id=\"023fb5b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Text Strokes (<\/b><span style=\"font-weight: 400;\">-webkit-text-stroke<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Add outlines to your text for increased emphasis or a bolder aesthetic.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1294d6a elementor-widget elementor-widget-code-highlight\" data-id=\"1294d6a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh2 {\r\n  -webkit-text-stroke: 1px black; \r\n  color: white; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee23aa4 elementor-widget elementor-widget-text-editor\" data-id=\"ee23aa4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Use text shadows and strokes judiciously.\u00a0 Subtlety is often best, but <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"How to Make Text Bold in HTML &#038; CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"24262\">bold<\/a> effects can shine in specific use cases like large, decorative titles.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Color Functions (if space allows)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS provides functions like lighten(), darken(), saturate(), and others to manipulate colors on the fly.\u00a0 These are especially handy within preprocessors like Sass to dynamically calculate color variations based on your color theme.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6ecdf6 elementor-widget elementor-widget-code-highlight\" data-id=\"b6ecdf6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n\/* Example using the lighten() function *\/\r\nbutton:hover {\r\n    background-color: lighten(#006400, 10%); \/* Lightens the green by 10% on hover *\/\r\n }\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca62649 elementor-widget elementor-widget-text-editor\" data-id=\"ca62649\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>140 Color Names and hex value Supported by All Browsers:<\/h2>\n\n<table border=\"1\" style=\"width:100%\">\n    <tr>\n        <th>Name<\/th>\n        <th>CSS Value<\/th>\n        <th>Live Demo<\/th>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">AliceBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">#F0F8FF<\/a><\/td>\n        <td style=\"background-color:#F0F8FF;\" id=\"demo1\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">AntiqueWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">#FAEBD7<\/a><\/td>\n        <td style=\"background-color:#FAEBD7;\" id=\"demo2\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Aqua<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo3\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">Aquamarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">#7FFFD4<\/a><\/td>\n        <td style=\"background-color:#7FFFD4;\" id=\"demo4\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">Azure<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">#F0FFFF<\/a><\/td>\n        <td style=\"background-color:#F0FFFF;\" id=\"demo5\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">Beige<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">#F5F5DC<\/a><\/td>\n        <td style=\"background-color:#F5F5DC;\" id=\"demo6\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">Bisque<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">#FFE4C4<\/a><\/td>\n        <td style=\"background-color:#FFE4C4;\" id=\"demo7\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">Black<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">#000000<\/a><\/td>\n        <td style=\"background-color:#000000;\" id=\"demo8\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">BlanchedAlmond<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">#FFEBCD<\/a><\/td>\n        <td style=\"background-color:#FFEBCD;\" id=\"demo9\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">Blue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">#0000FF<\/a><\/td>\n        <td style=\"background-color:#0000FF;\" id=\"demo10\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">BlueViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">#8A2BE2<\/a><\/td>\n        <td style=\"background-color:#8A2BE2;\" id=\"demo11\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">Brown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">#A52A2A<\/a><\/td>\n        <td style=\"background-color:#A52A2A;\" id=\"demo12\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">BurlyWood<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">#DEB887<\/a><\/td>\n        <td style=\"background-color:#DEB887;\" id=\"demo13\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">CadetBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">#5F9EA0<\/a><\/td>\n        <td style=\"background-color:#5F9EA0;\" id=\"demo14\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">Chartreuse<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">#7FFF00<\/a><\/td>\n        <td style=\"background-color:#7FFF00;\" id=\"demo15\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">Chocolate<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">#D2691E<\/a><\/td>\n        <td style=\"background-color:#D2691E;\" id=\"demo16\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">Coral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">#FF7F50<\/a><\/td>\n        <td style=\"background-color:#FF7F50;\" id=\"demo17\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">CornflowerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">#6495ED<\/a><\/td>\n        <td style=\"background-color:#6495ED;\" id=\"demo18\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">Cornsilk<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">#FFF8DC<\/a><\/td>\n        <td style=\"background-color:#FFF8DC;\" id=\"demo19\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">Crimson<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">#DC143C<\/a><\/td>\n        <td style=\"background-color:#DC143C;\" id=\"demo20\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Cyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo21\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">DarkBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">#00008B<\/a><\/td>\n        <td style=\"background-color:#00008B;\" id=\"demo22\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">DarkCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">#008B8B<\/a><\/td>\n        <td style=\"background-color:#008B8B;\" id=\"demo23\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">DarkGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">#B8860B<\/a><\/td>\n        <td style=\"background-color:#B8860B;\" id=\"demo24\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo25\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo26\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">DarkGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">#006400<\/a><\/td>\n        <td style=\"background-color:#006400;\" id=\"demo27\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">DarkKhaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">#BDB76B<\/a><\/td>\n        <td style=\"background-color:#BDB76B;\" id=\"demo28\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">DarkMagenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">#8B008B<\/a><\/td>\n        <td style=\"background-color:#8B008B;\" id=\"demo29\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">DarkOliveGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">#556B2F<\/a><\/td>\n        <td style=\"background-color:#556B2F;\" id=\"demo30\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">DarkOrange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">#FF8C00<\/a><\/td>\n        <td style=\"background-color:#FF8C00;\" id=\"demo31\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">DarkOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">#9932CC<\/a><\/td>\n        <td style=\"background-color:#9932CC;\" id=\"demo32\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">DarkRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">#8B0000<\/a><\/td>\n        <td style=\"background-color:#8B0000;\" id=\"demo33\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">DarkSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">#E9967A<\/a><\/td>\n        <td style=\"background-color:#E9967A;\" id=\"demo34\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">DarkSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">#8FBC8F<\/a><\/td>\n        <td style=\"background-color:#8FBC8F;\" id=\"demo35\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">DarkSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">#483D8B<\/a><\/td>\n        <td style=\"background-color:#483D8B;\" id=\"demo36\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo37\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo38\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">DarkTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">#00CED1<\/a><\/td>\n        <td style=\"background-color:#00CED1;\" id=\"demo39\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">DarkViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">#9400D3<\/a><\/td>\n        <td style=\"background-color:#9400D3;\" id=\"demo40\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">DeepPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">#FF1493<\/a><\/td>\n        <td style=\"background-color:#FF1493;\" id=\"demo41\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">DeepSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">#00BFFF<\/a><\/td>\n        <td style=\"background-color:#00BFFF;\" id=\"demo42\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo43\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo44\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">DodgerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">#1E90FF<\/a><\/td>\n        <td style=\"background-color:#1E90FF;\" id=\"demo45\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">FireBrick<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">#B22222<\/a><\/td>\n        <td style=\"background-color:#B22222;\" id=\"demo46\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">FloralWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">#FFFAF0<\/a><\/td>\n        <td style=\"background-color:#FFFAF0;\" id=\"demo47\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">ForestGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">#228B22<\/a><\/td>\n        <td style=\"background-color:#228B22;\" id=\"demo48\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Fuchsia<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo49\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">Gainsboro<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">#DCDCDC<\/a><\/td>\n        <td style=\"background-color:#DCDCDC;\" id=\"demo50\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">GhostWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">#F8F8FF<\/a><\/td>\n        <td style=\"background-color:#F8F8FF;\" id=\"demo51\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">Gold<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">#FFD700<\/a><\/td>\n        <td style=\"background-color:#FFD700;\" id=\"demo52\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">GoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">#DAA520<\/a><\/td>\n        <td style=\"background-color:#DAA520;\" id=\"demo53\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Gray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo54\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Grey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo55\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">Green<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">#008000<\/a><\/td>\n        <td style=\"background-color:#008000;\" id=\"demo56\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">GreenYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">#ADFF2F<\/a><\/td>\n        <td style=\"background-color:#ADFF2F;\" id=\"demo57\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">HoneyDew<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">#F0FFF0<\/a><\/td>\n        <td style=\"background-color:#F0FFF0;\" id=\"demo58\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">HotPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">#FF69B4<\/a><\/td>\n        <td style=\"background-color:#FF69B4;\" id=\"demo59\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">IndianRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">#CD5C5C<\/a><\/td>\n        <td style=\"background-color:#CD5C5C;\" id=\"demo60\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">Indigo<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">#4B0082<\/a><\/td>\n        <td style=\"background-color:#4B0082;\" id=\"demo61\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">Ivory<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">#FFFFF0<\/a><\/td>\n        <td style=\"background-color:#FFFFF0;\" id=\"demo62\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">Khaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">#F0E68C<\/a><\/td>\n        <td style=\"background-color:#F0E68C;\" id=\"demo63\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">Lavender<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">#E6E6FA<\/a><\/td>\n        <td style=\"background-color:#E6E6FA;\" id=\"demo64\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">LavenderBlush<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">#FFF0F5<\/a><\/td>\n        <td style=\"background-color:#FFF0F5;\" id=\"demo65\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">LawnGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">#7CFC00<\/a><\/td>\n        <td style=\"background-color:#7CFC00;\" id=\"demo66\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">LemonChiffon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">#FFFACD<\/a><\/td>\n        <td style=\"background-color:#FFFACD;\" id=\"demo67\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">LightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">#ADD8E6<\/a><\/td>\n        <td style=\"background-color:#ADD8E6;\" id=\"demo68\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">LightCoral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">#F08080<\/a><\/td>\n        <td style=\"background-color:#F08080;\" id=\"demo69\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">LightCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">#E0FFFF<\/a><\/td>\n        <td style=\"background-color:#E0FFFF;\" id=\"demo70\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">LightGoldenRodYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">#FAFAD2<\/a><\/td>\n        <td style=\"background-color:#FAFAD2;\" id=\"demo71\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo72\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo73\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">LightGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">#90EE90<\/a><\/td>\n        <td style=\"background-color:#90EE90;\" id=\"demo74\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">LightPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">#FFB6C1<\/a><\/td>\n        <td style=\"background-color:#FFB6C1;\" id=\"demo75\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">LightSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">#FFA07A<\/a><\/td>\n        <td style=\"background-color:#FFA07A;\" id=\"demo76\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">LightSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">#20B2AA<\/a><\/td>\n        <td style=\"background-color:#20B2AA;\" id=\"demo77\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">LightSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">#87CEFA<\/a><\/td>\n        <td style=\"background-color:#87CEFA;\" id=\"demo78\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo79\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo80\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">LightSteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">#B0C4DE<\/a><\/td>\n        <td style=\"background-color:#B0C4DE;\" id=\"demo81\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">LightYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">#FFFFE0<\/a><\/td>\n        <td style=\"background-color:#FFFFE0;\" id=\"demo82\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">Lime<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">#00FF00<\/a><\/td>\n        <td style=\"background-color:#00FF00;\" id=\"demo83\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">LimeGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">#32CD32<\/a><\/td>\n        <td style=\"background-color:#32CD32;\" id=\"demo84\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">Linen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">#FAF0E6<\/a><\/td>\n        <td style=\"background-color:#FAF0E6;\" id=\"demo85\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Magenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo86\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">Maroon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">#800000<\/a><\/td>\n        <td style=\"background-color:#800000;\" id=\"demo87\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">MediumAquaMarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">#66CDAA<\/a><\/td>\n        <td style=\"background-color:#66CDAA;\" id=\"demo88\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">MediumBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">#0000CD<\/a><\/td>\n        <td style=\"background-color:#0000CD;\" id=\"demo89\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">MediumOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">#BA55D3<\/a><\/td>\n        <td style=\"background-color:#BA55D3;\" id=\"demo90\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">MediumPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">#9370DB<\/a><\/td>\n        <td style=\"background-color:#9370DB;\" id=\"demo91\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">MediumSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">#3CB371<\/a><\/td>\n        <td style=\"background-color:#3CB371;\" id=\"demo92\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">MediumSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">#7B68EE<\/a><\/td>\n        <td style=\"background-color:#7B68EE;\" id=\"demo93\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">MediumSpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">#00FA9A<\/a><\/td>\n        <td style=\"background-color:#00FA9A;\" id=\"demo94\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">MediumTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">#48D1CC<\/a><\/td>\n        <td style=\"background-color:#48D1CC;\" id=\"demo95\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">MediumVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">#C71585<\/a><\/td>\n        <td style=\"background-color:#C71585;\" id=\"demo96\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">MidnightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">#191970<\/a><\/td>\n        <td style=\"background-color:#191970;\" id=\"demo97\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">MintCream<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">#F5FFFA<\/a><\/td>\n        <td style=\"background-color:#F5FFFA;\" id=\"demo98\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">MistyRose<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">#FFE4E1<\/a><\/td>\n        <td style=\"background-color:#FFE4E1;\" id=\"demo99\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">Moccasin<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">#FFE4B5<\/a><\/td>\n        <td style=\"background-color:#FFE4B5;\" id=\"demo100\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">NavajoWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">#FFDEAD<\/a><\/td>\n        <td style=\"background-color:#FFDEAD;\" id=\"demo101\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">Navy<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">#000080<\/a><\/td>\n        <td style=\"background-color:#000080;\" id=\"demo102\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">OldLace<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">#FDF5E6<\/a><\/td>\n        <td style=\"background-color:#FDF5E6;\" id=\"demo103\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">Olive<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">#808000<\/a><\/td>\n        <td style=\"background-color:#808000;\" id=\"demo104\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">OliveDrab<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">#6B8E23<\/a><\/td>\n        <td style=\"background-color:#6B8E23;\" id=\"demo105\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">Orange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">#FFA500<\/a><\/td>\n        <td style=\"background-color:#FFA500;\" id=\"demo106\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">OrangeRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">#FF4500<\/a><\/td>\n        <td style=\"background-color:#FF4500;\" id=\"demo107\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">Orchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">#DA70D6<\/a><\/td>\n        <td style=\"background-color:#DA70D6;\" id=\"demo108\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">PaleGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">#EEE8AA<\/a><\/td>\n        <td style=\"background-color:#EEE8AA;\" id=\"demo109\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">PaleGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">#98FB98<\/a><\/td>\n        <td style=\"background-color:#98FB98;\" id=\"demo110\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">PaleTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">#AFEEEE<\/a><\/td>\n        <td style=\"background-color:#AFEEEE;\" id=\"demo111\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">PaleVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">#DB7093<\/a><\/td>\n        <td style=\"background-color:#DB7093;\" id=\"demo112\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">PapayaWhip<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">#FFEFD5<\/a><\/td>\n        <td style=\"background-color:#FFEFD5;\" id=\"demo113\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">PeachPuff<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">#FFDAB9<\/a><\/td>\n        <td style=\"background-color:#FFDAB9;\" id=\"demo114\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">Peru<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">#CD853F<\/a><\/td>\n        <td style=\"background-color:#CD853F;\" id=\"demo115\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">Pink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">#FFC0CB<\/a><\/td>\n        <td style=\"background-color:#FFC0CB;\" id=\"demo116\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">Plum<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">#DDA0DD<\/a><\/td>\n        <td style=\"background-color:#DDA0DD;\" id=\"demo117\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">PowderBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">#B0E0E6<\/a><\/td>\n        <td style=\"background-color:#B0E0E6;\" id=\"demo118\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">Purple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">#800080<\/a><\/td>\n        <td style=\"background-color:#800080;\" id=\"demo119\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">RebeccaPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">#663399<\/a><\/td>\n        <td style=\"background-color:#663399;\" id=\"demo120\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">Red<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">#FF0000<\/a><\/td>\n        <td style=\"background-color:#FF0000;\" id=\"demo121\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">RosyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">#BC8F8F<\/a><\/td>\n        <td style=\"background-color:#BC8F8F;\" id=\"demo122\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">RoyalBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">#4169E1<\/a><\/td>\n        <td style=\"background-color:#4169E1;\" id=\"demo123\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">SaddleBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">#8B4513<\/a><\/td>\n        <td style=\"background-color:#8B4513;\" id=\"demo124\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">Salmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">#FA8072<\/a><\/td>\n        <td style=\"background-color:#FA8072;\" id=\"demo125\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">SandyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">#F4A460<\/a><\/td>\n        <td style=\"background-color:#F4A460;\" id=\"demo126\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">SeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">#2E8B57<\/a><\/td>\n        <td style=\"background-color:#2E8B57;\" id=\"demo127\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">SeaShell<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">#FFF5EE<\/a><\/td>\n        <td style=\"background-color:#FFF5EE;\" id=\"demo128\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">Sienna<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">#A0522D<\/a><\/td>\n        <td style=\"background-color:#A0522D;\" id=\"demo129\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">Silver<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">#C0C0C0<\/a><\/td>\n        <td style=\"background-color:#C0C0C0;\" id=\"demo130\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">SkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">#87CEEB<\/a><\/td>\n        <td style=\"background-color:#87CEEB;\" id=\"demo131\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">SlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">#6A5ACD<\/a><\/td>\n        <td style=\"background-color:#6A5ACD;\" id=\"demo132\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo133\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo134\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">Snow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">#FFFAFA<\/a><\/td>\n        <td style=\"background-color:#FFFAFA;\" id=\"demo135\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">SpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">#00FF7F<\/a><\/td>\n        <td style=\"background-color:#00FF7F;\" id=\"demo136\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">SteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">#4682B4<\/a><\/td>\n        <td style=\"background-color:#4682B4;\" id=\"demo137\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">Tan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">#D2B48C<\/a><\/td>\n        <td style=\"background-color:#D2B48C;\" id=\"demo138\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">Teal<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">#008080<\/a><\/td>\n        <td style=\"background-color:#008080;\" id=\"demo139\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">Thistle<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">#D8BFD8<\/a><\/td>\n        <td style=\"background-color:#D8BFD8;\" id=\"demo140\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">Tomato<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">#FF6347<\/a><\/td>\n        <td style=\"background-color:#FF6347;\" id=\"demo141\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">Turquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">#40E0D0<\/a><\/td>\n        <td style=\"background-color:#40E0D0;\" id=\"demo142\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">Violet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">#EE82EE<\/a><\/td>\n        <td style=\"background-color:#EE82EE;\" id=\"demo143\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">Wheat<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">#F5DEB3<\/a><\/td>\n        <td style=\"background-color:#F5DEB3;\" id=\"demo144\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">White<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">#FFFFFF<\/a><\/td>\n        <td style=\"background-color:#FFFFFF;\" id=\"demo145\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">WhiteSmoke<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">#F5F5F5<\/a><\/td>\n        <td style=\"background-color:#F5F5F5;\" id=\"demo146\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">Yellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">#FFFF00<\/a><\/td>\n        <td style=\"background-color:#FFFF00;\" id=\"demo147\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">YellowGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">#9ACD32<\/a><\/td>\n        <td style=\"background-color:#9ACD32;\" id=\"demo148\"><\/td>\n    <\/tr>\n<\/table>\n\n<script>\nfunction changeColor(color) {\n    var demoCells = document.querySelectorAll('td[id^=\"demo\"]');\n    demoCells.forEach(function(cell) {\n        cell.style.backgroundColor = color;\n    });\n}\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bdfac3d elementor-widget elementor-widget-text-editor\" data-id=\"bdfac3d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Conclusion\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Throughout this guide, we&#8217;ve explored the world of text <a href=\"https:\/\/elementor.com\/blog\/colors-in-css\/\"  data-wpil-monitor-id=\"10329\">color in CSS<\/a>. You&#8217;ve learned the fundamentals of the color property, different ways to express color <a href=\"https:\/\/elementor.com\/blog\/my-website-worth\/\"  data-wpil-monitor-id=\"10341\">values and methods for targeting specific elements within your website<\/a>. We touched on accessibility, best practices, and even a sprinkle of <a href=\"https:\/\/elementor.com\/blog\/use-chatgpt\/\"  data-wpil-monitor-id=\"10342\">advanced techniques<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Remember, color is a potent tool in your <a href=\"https:\/\/elementor.com\/blog\/best-portfolio-website-builders\/\"  data-wpil-monitor-id=\"10330\">web design<\/a> arsenal.\u00a0 Use it strategically to:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Enhance readability<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Guide the user&#8217;s eye<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Evoke emotions and align with your brand<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/web-design-portfolio-examples\/\"  data-wpil-monitor-id=\"10331\">Create a visually captivating and memorable website<\/a><\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">If you&#8217;re looking to streamline the process of adding and styling text color, consider a powerful <a href=\"https:\/\/elementor.com\/blog\/best-free-website-builders\/\"  data-wpil-monitor-id=\"10332\">website builder<\/a> like Elementor. Its intuitive visual interface and integration with optimized <a href=\"https:\/\/elementor.com\/blog\/best-web-hosting-for-small-business\/\"  data-wpil-monitor-id=\"10333\">hosting<\/a> can empower you to create beautiful, color-rich websites without needing extensive coding knowledge.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>At the heart of CSS text color manipulation lies the color property. This seemingly simple property is your key to unlocking the entire color spectrum for your website&#8217;s text. It works by directly assigning a desired color value to a specific text element. <\/p>\n","protected":false},"author":2024234,"featured_media":45581,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[512],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-94582","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Change Text Color In CSS &amp; HTML<\/title>\n<meta name=\"description\" content=\"At the heart of CSS text color manipulation lies the color property. This seemingly simple property is your key to unlocking the entire color spectrum for your website&#039;s text. It works by directly assigning a desired color value to a specific text element.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/text-color-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Change Text Color In CSS &amp; HTML\" \/>\n<meta property=\"og:description\" content=\"At the heart of CSS text color manipulation lies the color property. This seemingly simple property is your key to unlocking the entire color spectrum for your website&#039;s text. It works by directly assigning a desired color value to a specific text element.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/text-color-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-02T08:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-30T07:33:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\"},\"headline\":\"How To Change Text Color In CSS &amp; HTML\",\"datePublished\":\"2025-03-02T08:01:16+00:00\",\"dateModified\":\"2025-11-30T07:33:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/\"},\"wordCount\":2628,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Resources\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/\",\"name\":\"How To Change Text Color In CSS &amp; HTML\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-02T08:01:16+00:00\",\"dateModified\":\"2025-11-30T07:33:57+00:00\",\"description\":\"At the heart of CSS text color manipulation lies the color property. This seemingly simple property is your key to unlocking the entire color spectrum for your website's text. It works by directly assigning a desired color value to a specific text element.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/text-color-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/category\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Change Text Color In CSS &amp; HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/elemntor\\\/\",\"https:\\\/\\\/x.com\\\/elemntor\",\"https:\\\/\\\/www.instagram.com\\\/elementor\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/#\\\/schema\\\/person\\\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \\\/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/author\\\/itamarha\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/itamar-haim-8149b85b\\\/\"],\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/author\\\/itamarha\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Change Text Color In CSS &amp; HTML","description":"At the heart of CSS text color manipulation lies the color property. This seemingly simple property is your key to unlocking the entire color spectrum for your website's text. It works by directly assigning a desired color value to a specific text element.","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:\/\/elementor.com\/blog\/text-color-css\/","og_locale":"en_US","og_type":"article","og_title":"How To Change Text Color In CSS &amp; HTML","og_description":"At the heart of CSS text color manipulation lies the color property. This seemingly simple property is your key to unlocking the entire color spectrum for your website's text. It works by directly assigning a desired color value to a specific text element.","og_url":"https:\/\/elementor.com\/blog\/text-color-css\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-02T08:01:16+00:00","article_modified_time":"2025-11-30T07:33:57+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Itamar Haim","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/text-color-css\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/text-color-css\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"How To Change Text Color In CSS &amp; HTML","datePublished":"2025-03-02T08:01:16+00:00","dateModified":"2025-11-30T07:33:57+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/text-color-css\/"},"wordCount":2628,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/text-color-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Resources"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/text-color-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/text-color-css\/","url":"https:\/\/elementor.com\/blog\/text-color-css\/","name":"How To Change Text Color In CSS &amp; HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/text-color-css\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/text-color-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-02T08:01:16+00:00","dateModified":"2025-11-30T07:33:57+00:00","description":"At the heart of CSS text color manipulation lies the color property. This seemingly simple property is your key to unlocking the entire color spectrum for your website's text. It works by directly assigning a desired color value to a specific text element.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/text-color-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/text-color-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/text-color-css\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/text-color-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/elementor.com\/blog\/category\/resources\/"},{"@type":"ListItem","position":3,"name":"How To Change Text Color In CSS &amp; HTML"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/94582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=94582"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/94582\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/45581"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=94582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=94582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=94582"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=94582"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=94582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}