Colores W3.CSS


El esquema de color predeterminado que se usa en W3.CSS está inspirado en los colores de Material Design (colores que se usan en marketing, señales de tráfico y notas adhesivas).


Colorear elementos HTML

Las clases w3 - color y w3- text- color se pueden usar para colorear cualquier elemento HTML:

Contenedores:

Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.

Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.

Botones:

Texto:

Rojo Púrpura Azul Verde Naranja

Fronteras:

rojo

Verde

Azul

Amarillo

gris

Negro

Mesas:

Nombre Puntos
jill smith 50
eva jackson 94
adam johnson 67

Tarjetas:

Un automóvil es un vehículo autopropulsado con ruedas que se utiliza para el transporte. La mayoría de las definiciones del término especifican que los automóviles están diseñados para funcionar principalmente en las carreteras, para tener asientos para una a ocho personas y, por lo general, para tener cuatro ruedas. (Wikipedia)



Colores de fondo

Las clases de color w3- establecen el color de fondo para cualquier elemento HTML:

Londres

Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.


Londres

Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.


Londres

Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.

Ejemplo

<div class="w3-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-yellow">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-gray">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

Los colores gris y gris son intercambiables en todas las clases de W3.CSS.


Colores de texto

Las clases w3- text- color establecen el color del texto de cualquier elemento HTML:

Londres

Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.

Londres

Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.

Ejemplo

<div class="w3-text-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>


Colores flotantes

Las clases w3-hover- color definen el color de fondo para cualquier elemento HTML:

Londres

Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.

Ejemplo

<div class="w3-container w3-orange w3-hover-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

Las clases w3-hover- text- color definen el color de desplazamiento del texto para cualquier elemento HTML:

Londres

Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.

Ejemplo

<div class="w3-container w3-orange w3-hover-text-white">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

Bibliotecas de colores

Además de los colores estándar de W3.CSS, W3.CSS también puede usar colores de muchas bibliotecas de colores diferentes:

Colores de ventanas:

Lima
Verde
Aceituna
Esmeralda
verde azulado
Acero
cian
Azul
Índigo
Cobalto
Violeta
Color de malva
Rosa
Magenta
rojo
naranja
Ámbar
Amarillo
marrón
Gris pardo
tierra de siena
carmesí

Haz clic aquí para Más información sobre los colores de Windows


Colores de moda:

Fuego
Verdor
Puerto pequeño

amarillo prímula
gris neutro

Abeto sombreado

peonía azul marino

Oporto Tawny

Haz clic aquí para Más información sobre colores de moda


Colores de la carretera:

rojo
Verde
Azul
Amarillo

Haz clic aquí para Más información sobre las bibliotecas de colores

Aprenderá mucho más sobre los colores en capítulos posteriores de este tutorial.