Bibliotecas de cores W3.CSS


Bibliotecas de cores

Bibliotecas de cores são pequenos arquivos CSS que contêm valores de cores comumente usados, como padrões de segurança, cores de rodovias, cores de moda, cores de camuflagem e muito mais.

Ônibus escolar
Falcon Ridge Parkway
PARE

Como usar bibliotecas de cores

As bibliotecas de cores são fáceis de usar. Basta adicionar um link para a biblioteca de cores em sua página da web:

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-highway.css">

Em seguida, adicione um nome de classe ao elemento HTML que deseja colorir:

<div class="w3-highway-schoolbus">Schoolbus</div>
<div class="w3-highway-green">Falcon Ridge Parkway</div>
<div class="w3-highway-red">STOP</div>

Cores das rodovias dos EUA

w3-estrada-marrom
w3-rodovia-vermelho
w3-estrada-laranja
w3-highway-schoolbus
w3-estrada-amarelo
w3-estrada-verde
w3-estrada-azul

Exemplo

<div class="w3-highway-red">STOP</div>
    Baixe o CSS »

As cores das rodovias são definidas no Federal Standard 595 .


Cores de segurança dos EUA

w3-segurança-vermelho
w3-segurança-laranja
w3-amarelo de segurança
w3-segurança-verde
w3-azul de segurança
w3-segurança-roxo

Exemplo

<div class="w3-safety-red">DANGER</div>
    Baixe o CSS »

As cores de segurança dos EUA são definidas no Padrão Federal 595 .



Cores do Sinal Europeu

w3-sinal-amarelo
w3-sinal-laranja
w3-sinal-vermelho
w3-sinal-violeta
w3-sinal-azul
w3-sinal-verde
w3-sinal-cinza
w3-sinal-marrom
w3-sinal-branco
w3-sinal-preto

Exemplo

<div class="w3-signal-red">Stop</div>
<div class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
    Baixe o CSS »

As cores do sinal europeu são definidas no RAL Color Standard .



Cores vivas

w3-rosa-vivo
w3-vivo-vermelho
w3-vivo-laranja
w3-vivo-amarelo
w3-vivo-verde
w3-vivo-azul
w3-vivo-violeta
w3-vivo-roxo
w3-vivo-preto
w3-vivo-branco
w3-vivo-amarelo-rosa
w3-vivo-laranja-avermelhado
w3-vivo-laranja-amarelo
w3-vivo-amarelo-esverdeado
w3-vivo-amarelo-verde
w3-vivo-amarelo-verde
w3-vivo-azulado-verde
w3-vivo-esverdeado-azul
w3-vivo-roxo-azul
w3-vivo-roxo-avermelhado
w3-vivo-roxo-vermelho

Exemplo

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

As cores vivas são definidas em ISCC-NBS .


Cores de alimentos

w3-comida-maçã
w3-alimento-aspargos
w3-alimento-damasco
w3-alimento-beringela
w3-alimento-abacate
w3-comida-banana
w3-food-manteiga
w3-alimento-mirtilo
w3-comida-cereja
w3-food-chocolate
w3-alimento-cranberry
w3-comida-café
w3-food-ovo
w3-food-uva
w3-comida-kiwi
w3-alimento-limão
w3-alimento-cal
w3-food-manga
w3-comida-cogumelo
w3-alimento-mostarda
w3-food-hortelã
w3-food-olive
w3-alimento-laranja
w3-comida-ervilha
w3-alimento-pêssego
w3-food-pera
w3-food-pistache
w3-alimento-ameixa
w3-food-framboesa
w3-alimento-açafrão
w3-alimento-salmão
w3-alimento-hortelã
w3-alimento-abóbora
w3-comida-morango
w3-alimento-tomate
w3-alimento-trigo
w3-comida-vinho

Exemplo

<div class="w3-food-apple">Apple</div>
<div class="w3-food-banana">Banana</div>
    Baixe o CSS »

Cores de camuflagem

w3-camo-marrom
w3-camo-vermelho
w3-camo-azeitona
w3-campo de camuflagem
w3-camo-terra
w3-camo-areia
w3-camo-tan
w3-camo-arenito
w3-camo-verde-escuro
w3-camo-floresta
w3-camo-verde-claro
w3-camo-verde
w3-camo-cinza-escuro
w3-camo-cinza
w3-camo-preto

Exemplo

<div class="w3-camo-earth">Camouflaged Truck</div>
<div class="w3-camo-grey">Camouflaged Ship</div>
    Baixe o CSS »

As cores da camuflagem são definidas no Federal Standard 595 .