{"id":126830,"date":"2025-03-02T10:01:16","date_gmt":"2025-03-02T08:01:16","guid":{"rendered":"https:\/\/elementor.com\/blog\/como-cambiar-el-color-del-texto-en-css-html\/"},"modified":"2025-12-14T11:42:49","modified_gmt":"2025-12-14T09:42:49","slug":"como-cambiar-el-color-del-texto-en-css-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/","title":{"rendered":"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"126830\" class=\"elementor elementor-126830 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>As\u00ed es como se ve en el c\u00f3digo CSS b\u00e1sico:<\/p>\n\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;\">En este ejemplo, todo el texto de los p\u00e1rrafos dentro de su HTML se cambiar\u00eda a rojo. Por supuesto, \u00a1el rojo es solo el comienzo! Existen m\u00faltiples formas de expresar valores de color en <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=\"29306\">CSS<\/a>, proporcion\u00e1ndole una vasta paleta con la cual experimentar.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Valores de Color: Su Arco\u00edris Textual <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Nombres de Colores <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS ofrece una colecci\u00f3n de nombres de colores b\u00e1sicos para los colores m\u00e1s comunes. Piense en \u201crojo,\u201d \u201cazul,\u201d \u201camarillo,\u201d \u201cverde,\u201d y as\u00ed sucesivamente. Estos son sencillos de recordar, lo que los convierte en un excelente punto de partida para principiantes. He aqu\u00ed un ejemplo:<\/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;\">La principal ventaja de los nombres de colores es su simplicidad. Sin embargo, est\u00e1 limitado a un conjunto relativamente peque\u00f1o de colores, que puede no siempre coincidir con su visi\u00f3n de dise\u00f1o precisa.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">C\u00f3digos de Color Hexadecimal <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Los c\u00f3digos de color hexadecimal, que comienzan con un \u201c#\u201d, proporcionan una paleta de colores vastamente expandida. Consisten en seis caracteres que representan los componentes Rojo, Verde y Azul (RGB) de un color. Por ejemplo, #FF0000 es rojo puro, mientras que #008000 es un verde profundo.<\/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;\">Los c\u00f3digos hexadecimales le otorgan precisi\u00f3n y millones de posibilidades de color. Muchas herramientas de dise\u00f1o y <a href=\"https:\/\/elementor.com\/blog\/es\/los-7-mejores-creadores-de-sitios-web-sin-codigo-en-year\/\" data-wpil-monitor-id=\"10312\">sitios web ofrecen selectores de color que producen c\u00f3digos hexadecimales<\/a>, facilitando encontrar el tono exacto que desea. El \u00fanico ligero inconveniente es que pueden ser menos intuitivos de leer a primera vista en comparaci\u00f3n con los nombres de colores.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Colores RGB y RGBA<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">RGB ofrece otra forma de definir colores basada en sus componentes Rojo, Verde y Azul. Dentro de la funci\u00f3n rgb(), se especifica la intensidad de cada componente en una escala de 0 a 255. Por ejemplo, rgb(255, 0, 0) produce el mismo rojo puro que #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;\">El verdadero poder de RGB viene con la adici\u00f3n de un canal alfa, d\u00e1ndole RGBA. Esta \u201cA\u201d significa \u201calfa\u201d y controla la transparencia. Los valores RGBA se expresan como rgba(R, G, B, A), donde el valor alfa var\u00eda de 0 (completamente transparente) a 1 (completamente opaco). He aqu\u00ed c\u00f3mo crear una superposici\u00f3n de texto semitransparente:<\/span><\/p>\n\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 es ideal para superponer texto sobre <a href=\"https:\/\/elementor.com\/blog\/es\/propiedad-css-background-image-como-incluir-una-imagen-de-fondo-css\/\" data-wpil-monitor-id=\"10313\">im\u00e1genes o fondos<\/a>, otorg\u00e1ndole un control preciso sobre cu\u00e1nto se muestran los elementos subyacentes.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Colores HSL y HSLA<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">HSL (Tono, Saturaci\u00f3n, Luminosidad) es un modelo de color que se alinea m\u00e1s estrechamente con la forma en que los humanos perciben el color. Se expresa como hsl(H, S, L):<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tono<\/b><span style=\"font-weight: 400;\"> es el tipo de color en una rueda de color de 360 grados (0 es rojo, 120 es verde, 240 es azul, etc.).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Saturaci\u00f3n:<\/b><span style=\"font-weight: 400;\"> La intensidad del color (0% es gris, 100% es color completo)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Luminosidad:<\/b><span style=\"font-weight: 400;\"> Qu\u00e9 tan brillante u oscuro es el color (0% es negro, 100% es blanco)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">HSLA simplemente agrega un canal alfa para la transparencia, al igual que 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 puede ser a veces m\u00e1s intuitivo de comprender para los principiantes. Le permite pensar en t\u00e9rminos de tipos de color y vivacidad en lugar de mezclar componentes individuales de rojo, verde y azul.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">M\u00e9todos para Cambiar el Color del Texto<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Existen tres m\u00e9todos principales para cambiar <a href=\"https:\/\/elementor.com\/blog\/es\/como-centrar-texto-en-css-alineacion-de-texto-en-css-y-html\/\" data-wpil-monitor-id=\"10314\">el color del texto utilizando CSS<\/a>. Cada t\u00e9cnica ofrece diferentes niveles de control y especificidad, permiti\u00e9ndole dirigirse con precisi\u00f3n a los elementos que desea estilizar.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Estilos en L\u00ednea <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Los <a href=\"https:\/\/elementor.com\/blog\/es\/como-agregar-css-a-html-css-en-linea-interno-y-externo\/\" data-wpil-monitor-id=\"10315\">estilos en l\u00ednea se aplican directamente dentro de la etiqueta de apertura de un elemento HTML<\/a> utilizando el atributo style. Cambiemos el color de un p\u00e1rrafo espec\u00edfico:<\/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;\">Los estilos en l\u00ednea son \u00fatiles para cambios r\u00e1pidos y \u00fanicos en elementos individuales. Sin embargo, tienen algunas desventajas:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Desorden:<\/b><span style=\"font-weight: 400;\"> Hacen que su HTML sea m\u00e1s dif\u00edcil de leer y mantener.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Especificidad:<\/b><span style=\"font-weight: 400;\"> Los estilos en l\u00ednea anular\u00e1n otras reglas CSS m\u00e1s generales, a veces llevando a problemas de estilo inesperados.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Por consiguiente, es generalmente recomendable utilizar estilos en l\u00ednea con moderaci\u00f3n y \u00fanicamente cuando sea absolutamente imprescindible.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Hojas de estilo internas  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Las hojas de estilo internas emplean etiquetas &lt;style&gt; ubicadas dentro de la secci\u00f3n &lt;head&gt; de su documento HTML. Esto permite definir estilos para elementos HTML espec\u00edficos:<\/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;\">Las hojas de estilo internas son excelentes para estilizar una p\u00e1gina web completa. Ofrecen las siguientes ventajas:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Centralizaci\u00f3n:<\/b><span style=\"font-weight: 400;\"> Mantiene sus reglas de estilo en un solo lugar dentro del HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Especificidad:<\/b><span style=\"font-weight: 400;\"> Los estilos internos tienen prioridad sobre la mayor\u00eda de los estilos predeterminados del navegador, pero son menos espec\u00edficos que los estilos en l\u00ednea.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Hojas de estilo externas  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Las hojas de estilo externas son el enfoque recomendado para gestionar el CSS de su sitio web. Se crea un archivo .css separado y <a href=\"https:\/\/elementor.com\/blog\/es\/enlaces-html-hipervinculos-sintaxis-codigo-atributos-ejemplos\/\" data-wpil-monitor-id=\"10316\">se vincula a su documento HTML<\/a> utilizando la etiqueta &lt;link&gt; dentro de la secci\u00f3n &lt;head&gt;:<\/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>\n\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;\">Las hojas de estilo externas proporcionan varios beneficios clave:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Mantenibilidad:<\/b><span style=\"font-weight: 400;\"> Separar el CSS del <a href=\"https:\/\/elementor.com\/blog\/es\/como-agregar-espacio-en-html-codigos-consejos-guia-definitiva\/\" data-wpil-monitor-id=\"10317\">HTML mantiene su c\u00f3digo<\/a> organizado y m\u00e1s f\u00e1cil de actualizar.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Reutilizaci\u00f3n:<\/b><span style=\"font-weight: 400;\"> Una \u00fanica hoja de estilo puede aplicarse a m\u00faltiples p\u00e1ginas HTML, garantizando una apariencia consistente en todo su sitio web.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Preprocesadores:<\/b><span style=\"font-weight: 400;\"> Puede utilizar preprocesadores CSS avanzados como Sass o Less para optimizar el <a href=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/09\/SSL.png\" data-wpil-monitor-id=\"10318\">desarrollo<\/a> de su hoja de estilo (\u00a1abordaremos esto en un art\u00edculo futuro!).<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Especificidad y herencia en CSS  <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Comprender la especificidad y la herencia en CSS es importante para evitar cambios inesperados en el color del texto. La especificidad se refiere a c\u00f3mo CSS determina qu\u00e9 regla tiene prioridad cuando existen m\u00faltiples estilos conflictivos para un elemento. En general, los selectores m\u00e1s espec\u00edficos (como los ID) anular\u00e1n a los menos espec\u00edficos (como las etiquetas HTML).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">La herencia significa que algunas <a href=\"https:\/\/elementor.com\/blog\/es\/como-subrayar-texto-en-css-propiedad-text-decoration-de-css\/\" data-wpil-monitor-id=\"10319\">propiedades CSS<\/a>, como el color, se transmiten de los elementos padres a sus elementos hijos. Esto significa que si establece un color de texto en la etiqueta &lt;body&gt;, todo el texto dentro de la p\u00e1gina heredar\u00e1 ese color a menos que sea anulado por estilos m\u00e1s espec\u00edficos.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Focalizaci\u00f3n de elementos espec\u00edficos  <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">CSS le proporciona un control preciso sobre qu\u00e9 elementos de texto estilizar. Examinemos los m\u00e9todos de focalizaci\u00f3n m\u00e1s comunes:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Etiquetas HTML<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La forma m\u00e1s simple es dirigirse a etiquetas HTML gen\u00e9ricas. Esto aplicar\u00e1 su cambio de color a todos los elementos de ese tipo dentro de su p\u00e1gina:<\/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;\">Clases<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Las clases proporcionan una forma m\u00e1s flexible de aplicar estilos de color de texto. Se define una clase en su CSS y luego se a\u00f1ade el atributo de clase a los elementos HTML que desea focalizar:<\/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;\">Las clases son excelentes porque:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Reutilizaci\u00f3n:<\/b><span style=\"font-weight: 400;\"> Puede aplicar la misma clase a m\u00faltiples elementos, garantizando un estilo consistente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Organizaci\u00f3n:<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/es\/clases-css-selectores-estilizacion-consejos-trucos-mas\/\" data-wpil-monitor-id=\"10320\">Las clases ayudan a estructurar su CSS<\/a> y lo hacen m\u00e1s f\u00e1cil de entender.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">IDs  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Los IDs son identificadores \u00fanicos para elementos HTML espec\u00edficos y utilizan el atributo id. Utilice los IDs con moderaci\u00f3n, ya que tienen una especificidad muy alta que puede anular otros estilos.<\/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;\">Los IDs son principalmente \u00fatiles para estilizar elementos \u00fanicos y distintos, y a menudo se utilizan en interacciones de JavaScript.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Cambio del color del texto en interacciones del usuario<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Efectos de hover  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La pseudo-clase :hover a\u00f1ade un toque especial a su sitio web, permiti\u00e9ndole cambiar el color del texto cuando un usuario pasa el cursor sobre un elemento. Esta es una t\u00e9cnica com\u00fan para resaltar <a href=\"https:\/\/elementor.com\/blog\/es\/presentando-elementor-3-23-resultados-en-vivo-botones-flotantes-enlace-en-bio-mas\/\" data-wpil-monitor-id=\"10334\">enlaces o botones<\/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;\">Los efectos de hover proporcionan retroalimentaci\u00f3n visual, indicando al usuario que un elemento es interactivo. <a href=\"https:\/\/elementor.com\/blog\/es\/mejorando-el-rendimiento-del-sitio-web-en-spread-agency-con-el-optimizador-de-imagenes-de-elementor\/\" data-wpil-monitor-id=\"10335\">Mejoran la navegaci\u00f3n y pueden hacer que su sitio web<\/a> se sienta m\u00e1s atractivo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Otros estados  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS ofrece pseudo-clases adicionales para estilizar el texto bas\u00e1ndose en diferentes estados de interacci\u00f3n:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:active: Cuando se est\u00e1 haciendo clic o tocando un elemento.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:visited: Para <a href=\"https:\/\/elementor.com\/blog\/es\/imagenes-html-codigo-tamano-enlaces-estilo-consejos-de-seo\/\" data-wpil-monitor-id=\"10321\">estilizar enlaces<\/a> que el usuario ya ha visitado.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:focus: Cuando un elemento (como un campo de formulario) tiene el foco del teclado.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Hagamos que los enlaces visitados tengan un color menos saturado:<\/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;\">Estas pseudo-clases le brindan a\u00fan m\u00e1s control sobre c\u00f3mo responde su texto a las acciones del usuario, <a href=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\" data-wpil-monitor-id=\"10322\">mejorando a\u00fan m\u00e1s la experiencia del usuario<\/a>.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Accesibilidad y contraste de color  <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">La importancia de un contraste suficiente<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Elegir colores de texto y <a href=\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-de-fondo-en-html\/\" data-wpil-monitor-id=\"10323\">fondo<\/a> con suficiente contraste es esencial para hacer que su sitio web sea legible para todos, incluyendo usuarios con discapacidades visuales. Las Pautas de Accesibilidad para el Contenido Web (WCAG, por sus siglas en ingl\u00e9s) definen ratios m\u00ednimos de contraste para garantizar que su contenido sea legible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Un contraste de color deficiente puede hacer que el texto sea dif\u00edcil o incluso imposible de leer, lo que conduce a la frustraci\u00f3n y exclusi\u00f3n de algunos usuarios. Al priorizar el contraste, usted crea una experiencia en l\u00ednea m\u00e1s acogedora e inclusiva.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Simuladores de Daltonismo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">El daltonismo afecta a una porci\u00f3n significativa de la poblaci\u00f3n. Los simuladores de daltonismo son herramientas valiosas que le ayudan a visualizar c\u00f3mo aparece su sitio web para personas con diferentes tipos de deficiencias en la visi\u00f3n del color. Existen varias extensiones de navegador y herramientas en l\u00ednea para este prop\u00f3sito, y <a href=\"https:\/\/elementor.com\/blog\/es\/explora-elementor-pro-condiciones-de-visualizacion-permisos-de-rol-en-el-gestor-de-elementos-y-mas\/\" data-wpil-monitor-id=\"10336\">Elementor tambi\u00e9n incluye<\/a> un simulador de daltonismo integrado.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">La empat\u00eda juega un papel clave en el <a href=\"https:\/\/elementor.com\/blog\/es\/31-mejores-fuentes-seguras-para-la-web-para-un-diseno-accesible\/\" data-wpil-monitor-id=\"10337\">dise\u00f1o accesible<\/a>. Ponerse en el lugar de los usuarios con capacidades diferentes fomenta una comprensi\u00f3n m\u00e1s profunda de sus necesidades.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Recursos y Herramientas<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Examinemos algunos recursos \u00fatiles para garantizar que sus elecciones de color sean accesibles:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verificadores de Contraste:<\/b><span style=\"font-weight: 400;\"> Varias herramientas en l\u00ednea (como el Verificador de Contraste de Color de WebAIM: <\/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;\">) le permiten ingresar sus colores de texto y fondo e indicar\u00e1n si cumplen con los requisitos de contraste de WCAG.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Generadores de Paletas de Colores Accesibles:<\/b><span style=\"font-weight: 400;\"> Sitios web como Who Can Use: <a href=\"https:\/\/venngage.com\/tools\/accessible-color-palette-generator\">https:\/\/venngage.com\/tools\/accessible-color-palette-generator<\/a> le ayudan a construir paletas de colores que priorizan la accesibilidad desde el inicio.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Mejores Pr\u00e1cticas para la Elecci\u00f3n de Colores de Texto<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">La Legibilidad es Clave<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Sus elecciones de color de texto nunca deben sacrificar la legibilidad. Aunque un <a href=\"https:\/\/elementor.com\/blog\/es\/esquemas-de-colores-complementarios-en-diseno-web-una-guia-exhaustiva\/\" data-wpil-monitor-id=\"10324\">esquema de color<\/a> vibrante pueda ser atractivo, solo es \u00fatil si sus usuarios pueden leer el contenido. Tenga en cuenta lo siguiente:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>El Fondo Importa:<\/b><span style=\"font-weight: 400;\"> El color del texto debe destacarse claramente contra el color de fondo. Utilice siempre un verificador de contraste para confirmarlo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contraste Fuerte:<\/b><span style=\"font-weight: 400;\"> Apunte a combinaciones de alto contraste, especialmente para texto esencial como el cuerpo del texto y las etiquetas de navegaci\u00f3n.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Marca y Psicolog\u00eda del Color<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Los colores tienen el poder de evocar emociones e <a href=\"https:\/\/elementor.com\/blog\/introducing-new-ecommerce-design-capabilities\/\" data-wpil-monitor-id=\"10325\">influir fuertemente en c\u00f3mo se percibe su marca<\/a>. Consideremos c\u00f3mo alinear sus colores de texto con el prop\u00f3sito de su sitio web:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Paleta de Marca:<\/b><span style=\"font-weight: 400;\"> Incorpore sus colores de marca existentes en el estilo de su texto para promover el reconocimiento de marca y una apariencia cohesiva.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Emoci\u00f3n:<\/b><span style=\"font-weight: 400;\"> Comprenda la psicolog\u00eda del color. Los colores c\u00e1lidos (rojos, naranjas, amarillos) transmiten energ\u00eda y emoci\u00f3n, mientras que los colores fr\u00edos (azules, verdes, morados) tienden a ser m\u00e1s calmantes.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Jerarqu\u00eda y \u00c9nfasis<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Utilice el color para crear una jerarqu\u00eda visual clara en sus p\u00e1ginas. Esto ayuda a guiar el ojo del usuario y se\u00f1ala la importancia de diferentes elementos de texto:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Encabezados:<\/b><span style=\"font-weight: 400;\"> Los encabezados a menudo funcionan bien con colores m\u00e1s audaces o oscuros para destacarse del texto del cuerpo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Llamadas a la Acci\u00f3n:<\/b><span style=\"font-weight: 400;\"> Haga que los botones y otros enlaces importantes resalten con colores contrastantes que atraigan la atenci\u00f3n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sutileza:<\/b><span style=\"font-weight: 400;\"> Utilice colores menos saturados <a href=\"https:\/\/elementor.com\/blog\/es\/mas-de-elementor-3-6-importacion-exportacion-mejorada-y-reorganizacion-de-fuentes-y-colores-globales\/\" data-wpil-monitor-id=\"10326\">o tama\u00f1os de fuente m\u00e1s peque\u00f1os para elementos de texto<\/a> menos importantes<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">No Se Exceda<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u00a1Un poco de color tiene un gran impacto! He aqu\u00ed por qu\u00e9 la simplicidad suele ser lo mejor:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Abrumador:<\/b><span style=\"font-weight: 400;\"> Demasiados colores pueden hacer que su sitio web se vea saturado y dif\u00edcil de leer.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consistencia:<\/b><span style=\"font-weight: 400;\"> Una paleta de colores limitada y bien elegida crea una apariencia m\u00e1s armoniosa y pulida.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Elementor: Estilizando Texto de Manera Intuitiva<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Introducci\u00f3n al Editor Visual de Elementor<\/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;\">La fortaleza principal de Elementor radica en su editor visual de arrastrar y soltar. Este editor le proporciona control en tiempo real sobre el <a href=\"https:\/\/elementor.com\/blog\/es\/20-principios-del-diseno-de-sitios-web-que-todo-profesional-web-deberia-conocer\/\" data-wpil-monitor-id=\"10327\">dise\u00f1o de su sitio web<\/a>, incluyendo el color del texto, sin escribir una sola l\u00ednea de CSS (a menos que lo desee). Este enfoque capacita a aquellos sin experiencia en codificaci\u00f3n para crear sitios web hermosos y ricos en color.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Controles de Color de Texto en los Widgets de Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Casi todos los <a href=\"https:\/\/elementor.com\/blog\/es\/presentamos-elementor-3-10-nuevos-elementos-anidados-el-futuro-del-diseno-con-widgets-de-elementor\/\" data-wpil-monitor-id=\"10328\">widgets de Elementor<\/a> que contienen texto (encabezados, p\u00e1rrafos, botones, etc.) cuentan con controles intuitivos de selecci\u00f3n de color dentro de sus opciones de estilo. Ilustremos esto:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Seleccione un Widget:<\/b><span style=\"font-weight: 400;\"> Elija cualquier widget basado en texto en su p\u00e1gina.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pesta\u00f1a de Estilo:<\/b><span style=\"font-weight: 400;\"> Navegue hasta la pesta\u00f1a \u201cEstilo\u201d del widget en el panel de edici\u00f3n de Elementor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Selector de color:<\/b><span style=\"font-weight: 400;\"> Localice la opci\u00f3n \u201cColor del texto\u201d y haga clic en ella para revelar un selector de color de f\u00e1cil utilizaci\u00f3n.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Elija libremente:<\/b><span style=\"font-weight: 400;\"> Puede seleccionar de una paleta de colores, ingresar c\u00f3digos hexadecimales o utilizar la herramienta cuentagotas para <a href=\"https:\/\/elementor.com\/blog\/es\/tipos-de-dominios-beneficios-ejemplos-y-como-encontrar-tu-pareja-perfecta\/\" data-wpil-monitor-id=\"10338\">hacer coincidir perfectamente los colores existentes en su sitio web<\/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;\">Este flujo de trabajo optimizado acelera dr\u00e1sticamente su experimentaci\u00f3n e implementaci\u00f3n de colores de texto.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Configuraci\u00f3n de estilo global<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/es\/transforma-tus-disenos-estilos-globales-de-copilot-relleno-generativo-expansion-de-imagenes-y-mejoras-en-wordpress\/\" data-wpil-monitor-id=\"10339\">Elementor ofrece configuraciones de estilo global<\/a> que le permiten definir colores predeterminados para encabezados, texto del cuerpo, enlaces y m\u00e1s. Esto tiene varios beneficios:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consistencia:<\/b><span style=\"font-weight: 400;\"> Mantenga un aspecto coherente en todo su sitio web con facilidad.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ahorro de tiempo:<\/b><span style=\"font-weight: 400;\"> Cambie los colores de todo el sitio con unos pocos clics en lugar de editar widgets individuales.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Capacidades de CSS personalizado<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Si bien las herramientas visuales de Elementor son incre\u00edblemente poderosas, es posible que desee ajustarlas con CSS personalizado. <a href=\"https:\/\/elementor.com\/blog\/es\/presentamos-elementor-3-11-nuevo-widget-de-carrusel-en-bucle-para-personalizar-la-visualizacion-de-tus-publicaciones-o-productos\/\" data-wpil-monitor-id=\"10340\">Elementor le permite agregar c\u00f3digo<\/a> CSS personalizado directamente a widgets, p\u00e1ginas o en todo el sitio, brind\u00e1ndole ese nivel adicional de control cuando sea necesario.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Bonus: T\u00e9cnicas y herramientas avanzadas <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Gradientes de color<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Los gradientes CSS le permiten crear transiciones suaves entre m\u00faltiples colores dentro de su texto. Esto puede producir efectos llamativos y memorables:<\/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;\">Para garantizar que los gradientes de color se muestren dentro de su texto, como en el ejemplo anterior, a menudo necesitar\u00e1 prefijos espec\u00edficos -webkit- para la compatibilidad entre diferentes navegadores.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Los gradientes ofrecen una oportunidad \u00fanica para agregar profundidad e inter\u00e9s visual a los encabezados o elementos de llamada a la acci\u00f3n.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Sombras de texto y contornos de texto<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Agreguemos algo de dimensi\u00f3n a su texto:<\/span><\/p>\n<p><b>Sombras de texto (<\/b><span style=\"font-weight: 400;\">text-shadow<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Cree efectos de sombra sutiles detr\u00e1s de su texto, mejorando la legibilidad contra ciertos fondos o a\u00f1adiendo un toque de estilo.<\/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>Contornos de texto (<\/b><span style=\"font-weight: 400;\">-webkit-text-stroke<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Agregue contornos a su texto para un mayor \u00e9nfasis o una est\u00e9tica m\u00e1s audaz.<\/span><\/p>\n\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;\">Utilice las sombras y contornos de texto con prudencia. La sutileza es a menudo lo mejor, pero los efectos audaces pueden brillar en casos de uso espec\u00edficos como t\u00edtulos decorativos grandes.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Funciones de color (si el espacio lo permite)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS proporciona funciones como lighten(), darken(), saturate() y otras para manipular colores sobre la marcha. Estas son especialmente \u00fatiles dentro de preprocesadores como Sass para calcular din\u00e1micamente variaciones de color basadas en su tema de 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-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 nombres de colores y valores hexadecimales compatibles con todos los navegadores:<\/h2>\n\n<table border=\"1\" style=\"width:100%\">\n    <tr>\n        <th>Nombre<\/th>\n        <th>Valor CSS<\/th>\n        <th>Demostraci\u00f3n en vivo<\/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')\">Habano<\/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')\">Verde azulado<\/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')\">Cardo<\/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')\">Tomate<\/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')\">Turquesa<\/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')\">Violeta<\/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')\">Trigo<\/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')\">Blanco<\/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')\">Humo blanco<\/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')\">Amarillo<\/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')\">Verde amarillento<\/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;\">Conclusi\u00f3n <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A lo largo de esta gu\u00eda, hemos explorado el mundo del <a href=\"https:\/\/elementor.com\/blog\/es\/colores-css-y-html-propiedades-codigos-palabras-clave-y-nombres\/\" data-wpil-monitor-id=\"10329\">color de texto en CSS<\/a>. Ha aprendido usted los fundamentos de la propiedad de color, las diferentes formas de expresar <a href=\"https:\/\/elementor.com\/blog\/es\/cuanto-vale-mi-sitio-webmetodos-de-valoracion-y-como-aumentar-el-valor-de-tu-sitio-web\/\" data-wpil-monitor-id=\"10341\">valores de color y m\u00e9todos para dirigirse a elementos espec\u00edficos dentro de su sitio web<\/a>. Hemos abordado la accesibilidad, las mejores pr\u00e1cticas e incluso una pizca de <a href=\"https:\/\/elementor.com\/blog\/es\/como-usar-chatgpt-desde-indicaciones-basicas-hasta-tecnicas-avanzadas\/\" data-wpil-monitor-id=\"10342\">t\u00e9cnicas avanzadas<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Recuerde que el color es una herramienta potente en su arsenal de <a href=\"https:\/\/elementor.com\/blog\/es\/7-mejores-constructores-de-sitios-web-de-portafolio-de-year\/\" data-wpil-monitor-id=\"10330\">dise\u00f1o web<\/a>. Util\u00edcelo estrat\u00e9gicamente para:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mejorar la legibilidad<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Guiar la mirada del usuario<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Evocar emociones y alinearse con su marca<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/es\/12-ejemplos-destacados-de-portafolios-de-diseno-web\/\" data-wpil-monitor-id=\"10331\">Crear un sitio web visualmente cautivador y memorable<\/a><\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Si busca simplificar el proceso de agregar y estilizar el color del texto, considere un potente <a href=\"https:\/\/elementor.com\/blog\/es\/7-mejores-creadores-de-sitios-web-gratuitos-de-year\/\" data-wpil-monitor-id=\"10332\">constructor de sitios web<\/a> como GenericProductName. Su interfaz visual intuitiva y la integraci\u00f3n con <a href=\"https:\/\/elementor.com\/blog\/es\/las-5-mejores-opciones-de-alojamiento-web-para-pequenas-empresas-en-year\/\" data-wpil-monitor-id=\"10333\">alojamiento<\/a> optimizado pueden capacitarle para crear sitios web hermosos y ricos en color sin necesidad de un conocimiento extenso de codificaci\u00f3n.<\/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>En el n\u00facleo de la manipulaci\u00f3n del color del texto CSS se encuentra la propiedad color. Esta propiedad aparentemente simple es su clave para desbloquear todo el espectro de colores para el texto de su sitio web. Funciona asignando directamente un valor de color deseado a un elemento de texto espec\u00edfico. <\/p>\n","protected":false},"author":2024234,"featured_media":113176,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[516],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-126830","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML<\/title>\n<meta name=\"description\" content=\"En el n\u00facleo de la manipulaci\u00f3n del color del texto CSS se encuentra la propiedad color. Esta propiedad aparentemente simple es su clave para desbloquear todo el espectro de colores para el texto de su sitio web. Funciona asignando directamente un valor de color deseado a un elemento de texto espec\u00edfico.\" \/>\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\/es\/como-cambiar-el-color-del-texto-en-css-html\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML\" \/>\n<meta property=\"og:description\" content=\"En el n\u00facleo de la manipulaci\u00f3n del color del texto CSS se encuentra la propiedad color. Esta propiedad aparentemente simple es su clave para desbloquear todo el espectro de colores para el texto de su sitio web. Funciona asignando directamente un valor de color deseado a un elemento de texto espec\u00edfico.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/\" \/>\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-12-14T09:42:49+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=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML\",\"datePublished\":\"2025-03-02T08:01:16+00:00\",\"dateModified\":\"2025-12-14T09:42:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/\"},\"wordCount\":3195,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/\",\"url\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/\",\"name\":\"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#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-12-14T09:42:49+00:00\",\"description\":\"En el n\u00facleo de la manipulaci\u00f3n del color del texto CSS se encuentra la propiedad color. Esta propiedad aparentemente simple es su clave para desbloquear todo el espectro de colores para el texto de su sitio web. Funciona asignando directamente un valor de color deseado a un elemento de texto espec\u00edfico.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#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\/es\/como-cambiar-el-color-del-texto-en-css-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos\",\"item\":\"https:\/\/elementor.com\/blog\/es\/category\/recursos\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/es\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#\/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\/es\/#\/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\/es\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/elementor.com\/blog\/es\/#\/schema\/person\/image\/\",\"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\/es\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML","description":"En el n\u00facleo de la manipulaci\u00f3n del color del texto CSS se encuentra la propiedad color. Esta propiedad aparentemente simple es su clave para desbloquear todo el espectro de colores para el texto de su sitio web. Funciona asignando directamente un valor de color deseado a un elemento de texto espec\u00edfico.","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\/es\/como-cambiar-el-color-del-texto-en-css-html\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML","og_description":"En el n\u00facleo de la manipulaci\u00f3n del color del texto CSS se encuentra la propiedad color. Esta propiedad aparentemente simple es su clave para desbloquear todo el espectro de colores para el texto de su sitio web. Funciona asignando directamente un valor de color deseado a un elemento de texto espec\u00edfico.","og_url":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/","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-12-14T09:42:49+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":{"Escrito por":"Itamar Haim","Tiempo de lectura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/es\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML","datePublished":"2025-03-02T08:01:16+00:00","dateModified":"2025-12-14T09:42:49+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/"},"wordCount":3195,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/es\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Recursos"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/","url":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/","name":"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#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-12-14T09:42:49+00:00","description":"En el n\u00facleo de la manipulaci\u00f3n del color del texto CSS se encuentra la propiedad color. Esta propiedad aparentemente simple es su clave para desbloquear todo el espectro de colores para el texto de su sitio web. Funciona asignando directamente un valor de color deseado a un elemento de texto espec\u00edfico.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/elementor.com\/blog\/es\/como-cambiar-el-color-del-texto-en-css-html\/#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\/es\/como-cambiar-el-color-del-texto-en-css-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/es\/"},{"@type":"ListItem","position":2,"name":"Recursos","item":"https:\/\/elementor.com\/blog\/es\/category\/recursos\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Cambiar el Color del Texto en CSS &amp; HTML"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/es\/#website","url":"https:\/\/elementor.com\/blog\/es\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/es\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/elementor.com\/blog\/es\/#\/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\/es\/#\/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\/es\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/elementor.com\/blog\/es\/#\/schema\/person\/image\/","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\/es\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/posts\/126830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=126830"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/posts\/126830\/revisions"}],"predecessor-version":[{"id":147589,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/posts\/126830\/revisions\/147589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/media\/113176"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=126830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=126830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=126830"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/marketing_persona?post=126830"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/es\/wp-json\/wp\/v2\/marketing_intent?post=126830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}