Atributo de color de fuente HTML especifica el color del texto del contenido dentro del etiqueta . El atributo de color de fuente acepta un valor de color que queremos aplicar a un texto y se mostrará en pantalla con ese color mencionado.
Sintaxis:
>
Valores de atributos:
- nombre_color: Establece el color del texto utilizando el nombre del color. Por ejemplo: rojo .
- número_hexadecimal: Establece el color del texto mediante el uso de un código hexadecimal de color. Por ejemplo: #0000ff .
- número_rgb: Establece el color del texto mediante el uso de código rgb. Por ejemplo: rgb(0, 153, 0) .
Nota: El atributo de color no es compatible con HTML5 .
Ejemplo para establecer el color de fuente en HTML
Podemos usar el atributo de color del etiqueta de fuente para establecer un color de fuente en HTML. Podemos asignar un valor de color usando un nombre del color , código hexadecimal , o código RGB .
Entendámoslo mejor con el ejemplo:
Ejemplo: En este ejemplo, obtenemos el texto coloreado utilizando el atributo de color que tiene tres tipos diferentes de valores. Hemos utilizado el valor del nombre del color, el valor del código hexadecimal y el valor del código RGB para establecer el color de fuente de tres elementos de texto diferentes.
HTML HTML |<font>color Título del atributo> cabeza> <body> <font size='6' face='verdana' color='green'>techcodeview.com! fuente> <br> <font size='6' face='arial' color='#008000'>techcodeview.com! fuente> <br> <font size='6' color='rgb(128, 128, 0)'>techcodeview.com! fuente> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/html-attributes/40/html-font-color-attribute.webp' alt="color de fuente html usando el atributo de color"></p> <h3> <b> <strong>Navegadores compatibles</strong> </b> </h3><p dir='ltr'><span>Puede ver los colores de fuente HTML establecidos utilizando estos navegadores. Los navegadores admiten el atributo de color de la etiqueta de fuente y muestran los cambios en el color del texto.</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Borde</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Ópera</span> </li><li value='5'> <span>Safari</span> </li></ul><p dir='ltr'><span>HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo esto</span> <span>Tutorial HTML</span> <span>y</span> <span>Ejemplos HTML</span> <span>.</span></p> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/http-response-status-codes/">Http-Códigos-De-Estado-De-Respuesta</a> </li><li> <a href="/net-worth/">Valor Neto</a> </li><li> <a href="/complexity-analysis/">Análisis De Complejidad</a> </li><li> <a href="/java-new-features/">Nuevas Características De Java</a> </li><li> <a href="/cpp-oops/">Cpp-Oop</a> </li><li> <a href="/python-numpy-indexing/">Indexación Numpy De Python</a> </li><li> <a href="/english-word-play/">Juego De Palabras En Ingles</a> </li><li> <a href="/cpp-data-types/">Tipos-De-Datos-Cpp</a> </li><li> <a href="/maths-class-10-cat/">Matemáticas-Clase-10</a> </li><li> <a href="/ssc-general-awareness/">Conciencia General De La Css</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Función De Matriz Php</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Función De Matriz Php</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/php-array-function/"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/html-font-color-attribute">Atributo de color de fuente HTML</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ncaa-act-scores-what-you-need-qualify-131938">Puntajes de la NCAA ACT: lo que necesita para calificar</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/constructor-abstract-class-java">Constructor en clase abstracta en Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-colors-make-pink-131104">¿Qué colores forman el rosa? Cómo hacer rosa fácilmente</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/inline-functions-c">Funciones en línea en C++</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/counter-variable-java">contador java</a>
</li><li><a href="/arp-commands">comando de windows arp</a>
</li><li><a href="/binary-search-python">Python de búsqueda binaria</a>
</li><li><a href="/factorial-program-java">java factoriales</a>
</li><li><a href="/public-vs-private-java">Java público vs privado</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Todos Los Derechos Reservados | <a href="//sk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>