Convertendo Cores

Conversões – Detalhes – Harmonias – Imagens – Pré-visualização – Simulação de Cegueira por Cores – CSS – Ajuda

Conversões

Aqui você vê sua cor convertida para 15 formatos de cor diferentes como RGB, CMYK, HSV, HSL, CIELab, Android, Decimal, e YUV.

Converta várias cores ao mesmo tempo ou obtenha Conversões e Harmonias através da API REST.

Conversões Parte 1

Formato	Cor
Hex	496C3C
	RGB	73, 108, 60
RGB Porcentagem	29%, 42%, 24%
CMY	0.7137, 0,5765, 0,7647
CMYK	0,32, 0,00, 0,44, 0.58
HSL	104°, 29%, 33%
>HSV	104°, 44%, 42%
XYZ	8.9258, 12.4678, 6.2111

Conversões Parte 2

Formato	Cor
RYB	60, 108, 95
Decimal	4811836
CIELab	41.95, -22,52, 22,92
CIELCh	42, 32,133, 134,485
Yxy	12,4678, 0.3233, 0.4517
Android (android.graphics.Color)	4283001916 (0xFF496C3C)
YUV	92.0630, -15.8071, -16.7183

• HOWCOLORS.WORK
• Distribuição
• Brilho & Gradientes de Saturação
• Analógico
• Triad
• Complementar
• Split Complementary
• Quadrado
• Rectângulo
• Sweetspot
• Fundo branco
• Verificação de Contraste de Cor
• Fundo Preto
• Color Contrast Check
• RGB 73, 108, 60 Fundo
• Dicromia
• Trichromacy
• Monocromática
• Texto
• Border
• Background
• HOWCOLORS.WORK
• Conversão
• Detalhes
• Harmonies
• SVG Images
• Pré-visualizações
• Simulação de Cegueira da Cor
• CSS Exemplos
• Cor Bucket
• Color Contrast Checker

HOWCOLORS.WORK

Um guia de notação de cores CSS.

ou compre no Leanpub!

Detalhes

A cor RGB 73, 108, 60 é uma cor escura, e a versão websafe é hex 336633. Um complemento desta cor seria 95, 60, 108, e a versão em tons de cinza é 92, 92, 92.
A versão 20% mais clara da cor original é 123, 160, 108, e 26, 60, 16 é a cor 20% mais escura. Se você saturar a cor em 10%, você obtém 65, 108, 49, e se você dessaturar em 10%, é 81, 108, 71.

Distribuição

Brilho & Gradientes de Saturação

Estes gradientes mostram como a cor RGB 73, 108, 60 muda mudando o brilho em 10%. A primeira figura mostra uma mudança de +10% para cada cor e a segunda figura -10%.

Similiar aos gradientes de brilho mas os seguintes gradientes de saturação mostram uma mudança da cor RGB 73, 108, 60 mudando a saturação em 10% em vez disso.

Harmonias

SVG Imagens

Uma selecção de imagens SVG usando a versão hexadecimal #496C3C da cor actual.

Pré-visualizações

RGB 73, 108, 60 Fundo

Simulação de cegueira colorida

A deficiência de visão colorida é um tópico muito complexo, e eu não poderia descrever as diferentes causas melhor do que a Wikipedia, então se você quiser aprender mais, você deve conferir o artigo deles sobre cegueira colorida.

Dicromia

Trichromacy

Monocromática

CSS Exemplos

Texto

A propriedade CSS de alterar a cor do texto para RGB 73, 108, 60 é chamada de “cor”. A propriedade cor pode ser definida em classes, ids ou diretamente no elemento HTML.

Este exemplo mostra como o texto na cor rgb(73, 108, 60) se parece com.

 Copy Code

Se você quiser adicionar uma sombra de texto nessa cor use a propriedade sombra de texto, você pode gerar uma sombra de texto diretamente com nosso Gerador de Sombra de Texto CSS .

Aqui você vê como o texto preto com uma sombra colorida de 4 pixels rgb(73, 108, 60) se parece.

 Copy Code

Border

A propriedade CSS para alterar a borda de um elemento para RGB 73, 108, 60 é chamada de “border”. A propriedade border pode ser definida em classes, ids ou diretamente no elemento HTML.

Este exemplo mostra a cor como border, ela pode ser aplicada através da propriedade CSS “border” ou “border-color”.

 Copy Code

Se apenas a cor da border deve ser alterada, use a propriedade border-color.

 Copy Code

Se você quiser adicionar uma sombra de caixa nessa cor use:

Aqui você vê como uma caixa com uma sombra de 4 pixels rgb(73, 108, 60) colorida se parece.

 Copy Code

Background

A propriedade CSS para mudar a cor de fundo de um elemento para RGB 73, 108, 60 é chamada de “background”. A propriedade background pode ser definida em classes, ids ou diretamente no elemento HTML.

 Copy Code

Se apenas a cor de fundo deve ser alterada pode ser usada:

 Copy Code

Este exemplo mostra a cor como fundo, ela é aplicada através da propriedade CSS “background”.

Para otimizar e comprimir o código CSS, você pode usar nosso compressor e otimizador CSS online baseado em csstidy. Se você quiser criar um gradiente linear ou radial como fundo ou borda, verifique nosso CSS Gradient Generator.

HOWCOLORS.WORK

Um guia de notação de cores CSS.

ou compre no Leanpub!

Como usar a conversão de cores

Conversão

Para converter, cole uma string em um desses formatos de cor, por exemplo, “496C3C”, no campo de entrada e clique em converter. O resultado estará na seção Conversões, e as seções seguintes lhe fornecerão mais detalhes sobre a cor.

Alguns formatos de cor usam a mesma notação, e a conversão irá adivinhar a composição da consulta de pesquisa. Como exemplo, se você tentar converter a string “104°, 44%, 42%” pode ser uma cor HSV ou HSL, a conversão assumirá HSL neste caso.

Como isto pode levar a conversões erradas, você pode definir qual formato você está passando envolvendo sua string de cor entre colchetes com o formato na frente. A cadeia de busca “HSV(104°, 44%, 42%)” lhe dará a cor HSV correta, pois não há necessidade de adivinhar o formato. Outros exemplos seriam “CIELAB(41,95, -22,52, 22,92)”, “CIELCH(42, 32,133, 134,485)”, “YXY(12,4678, 0,3233, 0,4517)” e “CMYK(0,32, 0,00, 0,44, 0,58)”.

Detalhes

Na secção de detalhes, obtenha primeiro um resumo da cor e, se disponível, uma descrição como “dark muted red”. Você pode ver a distribuição da cor em diferentes formatos. Por exemplo, no formato RGB, você conhece a quantidade de vermelho, verde e azul na sua cor.

Finalmente, você obtém gradientes de brilho e saturação da sua cor em passos de 10%. Portanto, se você precisar de uma versão mais brilhante ou mais escura, você pode escolhê-la daqui.

Harmonies

As harmonias basicamente mostram cores que combinam bem com a cor que você está vendo atualmente. Se gostar de uma das harmonias, pode criar directamente um Gradiente CSS ou CSS Text Shadow a partir dele ou ver a harmonia como um Bucket de cor .

SVG Images

Esta pequena secção mostra-lhe uma selecção de ficheiros SVG usando a cor actual. Você pode baixar esses arquivos e usá-los em seus projetos, por exemplo, como imagem de fundo.

Pré-visualizações

Você quer ver como sua cor fica em um fundo branco ou preto? Então você deve verificar a seção “Pré-visualizações” da página de cor.

Você também vê o contraste da sua cor nestes fundos e obtenha um link para o Color Contrast Checker com a sua cor pré-selecionada.

Simulação de Cegueira da Cor

Quando você selecionar uma cor para o seu projeto, você pode querer ter em mente como esta cor é percebida por qualquer pessoa com deficiência de visão colorida. Portanto, eu adicionei esta seção mostrando as prévias da sua cor para diferentes deficiências de visão colorida.

CSS Exemplos

Se você é novo no desenvolvimento web, talvez queira ver como aplicar sua cor como primeiro plano, fundo ou borda de cor. A seção “Exemplos CSS” lhe dá exatamente isso, ajuda como usar a cor atual em CSS.

Se você estiver visualizando uma cor em um formato não disponível em CSS, então você verá a cor convertida para um formato compatível.

Cor Bucket

Você decidiu as cores para seu próximo projeto e quer baixá-las como uma paleta ou compartilhá-las com amigos para discutir sua decisão? Então você deve dar uma olhada no balde colorido. Ele permite que você armazene até 10 cores, cria automaticamente paletas de cores para cada uma dessas cores com base na leveza, e lhe dá uma matriz WCAG.

Você pode baixar cada uma das paletas de cores ou as cores selecionadas como uma paleta GIMP, Adobe® ASE, ou Tailwind CSS. Além disso, você pode ver tudo como um CSS Gradient, CSS Text Shadow, ou Color Palette Image.

Para adicionar uma cor à sua paleta de cores, eu coloquei um link “ Adicione esta cor à paleta” na seção de cabeçalho de cada página deste site.

Color Contrast Checker

Quando você decide sobre cores para um projeto, é essencial manter o contraste de cores em mente. My Color Contrast Checker permite-lhe verificar as cores seleccionadas de acordo com as Directrizes de Acessibilidade de Conteúdo Web (WCAG) 2.0.