Tutorial de HTML - Parte 3 - Cores

Debates relacionados à temas da mídia, seriados, filmes, tecnologia, jogos, música, entre outros.
Responder
Fênix
Membro (Marechal)
Mensagens: 1348
Registrado em: Dom Nov 19, 2006 11:51 am
Maker Preferido: Rpg Maker 2003
Contato:

Tutorial de HTML - Parte 3 - Cores

Mensagem por Fênix » Sex Mar 21, 2008 12:32 pm

Tutorial HTML - Parte 3 - Cores

----------------------------------------------------------------------------------
----------------------------------------------------------------------------------

Introdução

Bem vindos a mais uma parte do tutorial HTML.
Nesta, eu falarei sobre as cores e os códigos que é usado para representá-las.
Boa leitura e vamos lá!

Cores em HTML

As cores em uma página html podem ser representadas pelo seu nome em inglês, em código hexadecimal ou ainda em seu valor rgb.
É um conceito bem simples, mas geralmente trabalhoso.
Em hexadecimal funciona da seguinte forma:
Você da o valor das três cores primárias (vermelho, verde e azul) que vai de 00 até ff (que é 255 em decimal). O valor mais baixo é o mais escuro e o mais alto mais claro. Com isso, preto é #000000 e branco #FFFFFF.

É trabalhoso porque você tem que ficar misturando os códigos, e a não ser que você já esteje acostumado com isso, é bem chato.

Exemplos:

Código: Selecionar todos

<font color="#FF0000">
<p> Este texto está em vermelho </p>

Código: Selecionar todos

<font color="#00FF00">
<p> Este texto está em verde </p>

Código: Selecionar todos

<font color="#0000FF">
<p> Este texto está em azul </p>
Segue aí uma pequena tabela com algumas cores em hexadecimal e em rgb (decimal).

Imagem

Agora em "ingrêis"

Como eu já havia dito, você também pode escrever as cores em inglês.
Isso é beeem pior do que escrever em hexadecimal, já que é limitado. Sem contar que é bem mais seguro usar o hexadecimal, porque você não corre o risco de um internet explorer da vida não conseguir identificar aquele nome de cor.
Aqui vai uma tabela com algumas cores seguras, testada pelo padrão W3C, e você
pode usar sossegado, que, segundo eles, todos os navegadores suportam.

Imagem

Imagem

Tem também o RGB

Da mesma maneira que você pode escrever o nome da cor em hexadecimal e em inglês, você também pode escrever seu valor decimal, que é o rgb.
Funciona do mesmo jeito do hexadecimal, você da o valor das três coresprimárias (vermelho, verde e azul, respectivamente) separadas por vírgula e entre parênteses.
Até que é um jeito legal de se escrever a cor, mas eu, particulamente, não uso.

Exemplos:

Código: Selecionar todos

<font color="rgb(255,0,0)">
<p> Este texto está em vermelho </p>

Código: Selecionar todos

<font color="rgb(0,255,0)">
<p> Este texto está em verde </p>

Código: Selecionar todos

<font color="rgb(0,0,255)">
<p> Este texto está em azul </p>
Nota: Escrever a cor em rgb apresenta problemas no FireFox (pelo menos aqui não ta funcionando direito).

Cores seguras da Web

Reza a lenda que antigamente, em meados da década de 90, os computadores só
suportavam 256 cores simultaneamente. Sistemas operacionais como RuWindows e
Apple Macintosh
reservavam 20 cores pra cada, para limparem a bunda (40 no total). E assim sobravam apenas 216 para serem escolhidas livremente sem medo do Windows ou o Mac não mostralem-nas.
Essas 216 cores receberam o nome de cores seguras da web

A forma que se tem pra ver apenas essas tais "cores seguras da web" é montando combinações de cores com esses códigos:

Imagem

Aqui vai a lista das cores seguras da web (o "#" foi omitido):

Imagem


Imagem

Hoje em dia isso já não existe mais. Todas as máquinas modernas suportam milhões de cores simultâneas, e assim, você pode ficar tranqüilo. ;)

Tons de vermelho

Achei essa tabela bem legal, e vou colocar aqui também:

Imagem

Tons de cinza

Outra tabela legal. Veja os tons de cinza. Seu código é equilibrado, ou seja, tem o mesmo valor em cada cor. O cinza mais escuro é o preto (#000000) e o mais claro é o branco (#ffffff).

Imagem

Imagem

----------------------------------------------------------------------------------
----------------------------------------------------------------------------------

É isso aí pessoal, espero ter ajudado nessa parte tão importante que é as cores. ;)
Qualquer coisa é só perguntar.

----------------------------------------------------------------------------------
----------------------------------------------------------------------------------

Todas as tabelas de cores foram retiradas da apostila Guia Prático HTML - 2007 - Prof.
Tiago Daniel de Souza
.

Decon
Moderador Global
Mensagens: 5470
Registrado em: Qua Ago 30, 2006 6:55 pm
Contato:

Mensagem por Decon » Sex Mar 21, 2008 3:56 pm

Essas tabelas de cores são muito boas e bastante uteis mesmo, falou o esquema das cores seguras lá que eu nem imaginava que existia, mas enfim, outro belo tutorial :happy:

crauser
Membro (Major)
Mensagens: 372
Registrado em: Seg Dez 25, 2006 3:08 am
Maker Preferido: Rpg Maker 2003
Localização: Porto Alegre RS

Re: Tutorial de HTML - Parte 3 - Cores

Mensagem por crauser » Dom Mar 22, 2009 10:28 pm

cara eu toh aprendendo exatamente essa parte de HTML. toh fazendo um blog só com códigos html. tenho uma dúvida.... como faz um esquema de cores onde na parte de cima é escuro e quando desce vai clareando pra vermelho?(toh falando da parte do plano de fundo).

eu ainda sou mtu leigo nessa parte. toh aprendendo aos poucos. se puder respoder fico agradecido ^^

fallow!!!
A corrida para a excelência não tem linha de chegada.

O sucesso tem feito o fracasso de muitos homens.

O sentido da vida consiste em que não tem nenhum sentido dizer que a vida não tem sentido.

http://www.holy-war.net/?ref=17866-1PTHW

Fênix
Membro (Marechal)
Mensagens: 1348
Registrado em: Dom Nov 19, 2006 11:51 am
Maker Preferido: Rpg Maker 2003
Contato:

Re: Tutorial de HTML - Parte 3 - Cores

Mensagem por Fênix » Dom Mar 22, 2009 10:49 pm

Opa crauser, tenta fazer como ensinam nesse tutorial: http://www.maujor.com/dicas/bgdegrade.php

Se não tiver o Fireworks não tem problema, é só criar a imagem do jeito que quer e nas proporções indicadas no tutorial em outro editor. O importante mesmo é o código.

Qualquer dúvida posta aí, flw.

helivelton
Membro (Marechal)
Mensagens: 1350
Registrado em: Qua Fev 28, 2007 4:04 pm
Maker Preferido: Rpg Maker 2003

Re: Tutorial de HTML - Parte 3 - Cores

Mensagem por helivelton » Seg Mar 23, 2009 9:22 am

Imagem

Reparem, bem 1 ano depois ele pergunta =D

Isso ai é mais com CSS, acho Crauser... ou usa imagem de fundo, com código HTML acho que não dá xD

Decon
Moderador Global
Mensagens: 5470
Registrado em: Qua Ago 30, 2006 6:55 pm
Contato:

Re: Tutorial de HTML - Parte 3 - Cores

Mensagem por Decon » Seg Mar 23, 2009 8:38 pm

helivelton escreveu:Imagem

Reparem, bem 1 ano depois ele pergunta =D

Isso ai é mais com CSS, acho Crauser... ou usa imagem de fundo, com código HTML acho que não dá xD
aheuehaeuhaeuhauaheuhaeuhaeuhaeuhaeuaeuheuheauheauheuahaeuhaeuhuaehuea
Isso sim é uma boa imagem :happy:
Mas é o que o Fênix mostrou, faz naquele esquema que isso é CSS mesmo.

SoulMortis
Membro (Marechal)
Mensagens: 1294
Registrado em: Ter Out 02, 2007 7:40 pm
Maker Preferido: Rpg Maker 2003
Contato:

Re: Tutorial de HTML - Parte 3 - Cores

Mensagem por SoulMortis » Qui Mar 26, 2009 9:55 pm

ahuahuahua...
bom tópico, provavelmente usarei em algum projeto ...
"Lute por algo chorando, mesmo que um dia o prometeu sorrindo"(anonimo)

crauser
Membro (Major)
Mensagens: 372
Registrado em: Seg Dez 25, 2006 3:08 am
Maker Preferido: Rpg Maker 2003
Localização: Porto Alegre RS

Re: Tutorial de HTML - Parte 3 - Cores

Mensagem por crauser » Sex Abr 03, 2009 1:45 pm

helivelton escreveu:Imagem

Reparem, bem 1 ano depois ele pergunta =D

Isso ai é mais com CSS, acho Crauser... ou usa imagem de fundo, com código HTML acho que não dá xD
cara é porque só agora que toh começando a aprender isso. :P
A corrida para a excelência não tem linha de chegada.

O sucesso tem feito o fracasso de muitos homens.

O sentido da vida consiste em que não tem nenhum sentido dizer que a vida não tem sentido.

http://www.holy-war.net/?ref=17866-1PTHW

Fênix
Membro (Marechal)
Mensagens: 1348
Registrado em: Dom Nov 19, 2006 11:51 am
Maker Preferido: Rpg Maker 2003
Contato:

Re: Tutorial de HTML - Parte 3 - Cores

Mensagem por Fênix » Dom Abr 05, 2009 3:58 pm

Conseguiu fazer?

Responder