Converting Colors

Conversions – Details – Harmonies – Images – Preview – Color Blindness Simulation – CSS – Help

Conversions

Aqui você vê a 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 do REST API.

📕 HOWCOLORS.WORK

A CSS color notation guide.

ou compre no Leanpub!

Detalhes

A cor Hex B76E79 é uma cor escura, e a versão websafe é hex 996666, e o nome da cor é ouro rosa. Um complemento desta cor seria 6EB7AC, e a versão em tons de cinza é 858585.
A versão 20% mais clara da cor original é F1A3AD, e 803D49 é a cor 20% mais escura. Se saturar a cor em 10%, obtém B75C69, e se dessaturar em 10%, é B78089.

Distribuição

Brilho & Gradientes de Saturação

Estes gradientes mostram como a cor Hex B76E79 muda ao alterar 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 Hex B76E79 alterando a saturação em 10% em vez disso.

Harmonias

SVG Images

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

>br>Vistas

Hex B76E79 Background

Simulação da cegueira de cor

A deficiência de visão da cor é um tema muito complexo, e não poderia descrever melhor as diferentes causas do que a Wikipédia, por isso, se quiser saber mais, deve consultar o seu artigo sobre a cegueira de cor.

Dicromacy

Trichromacy

Monocromacy

CSS Exemplos

Text

A propriedade CSS para mudar a cor do texto para Hex B76E79 é chamada “cor”. A propriedade cor pode ser definida em classes, ids ou directamente no elemento HTML.

Este exemplo mostra como se parece o texto na cor #B76E79.

.text, #text, p{color:#B76E79}
📋 Copy Code

Se quiser adicionar uma sombra de texto nessa cor use a propriedade sombra de texto, pode gerar uma sombra de texto directamente com o nosso 🔧 Gerador de Sombra de Texto CSS.

Aí verá como se parece um texto preto com uma sombra colorida de 4 pixels #B76E79.

.shadow{ text-shadow: 4px 4px 2px #B76E79 } 
📋 Copy Code

Bordadura

A propriedade CSS para alterar a borda de um elemento para Hex B76E79 chama-se “borda”. A propriedade fronteira pode ser definida em classes, ids ou directamente no elemento HTML.

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

.border, #border, table{ border:4px solid #B76E79 }
📋 Copy Code

Se apenas a cor da fronteira deve ser alterada, use a propriedade cor da fronteira.

.border{ border-color:#B76E79 }
📋 Copy Code

Se quiser adicionar uma sombra de caixa com essa cor:

Aí verá como se parece uma caixa com uma sombra colorida de 4 pixels #B76E79.

.boxshadow{ -moz-box-shadow:4px 4px 4px 4px #B76E79; -webkit-box-shadow:4px 4px 4px 4px #B76E79; box-shadow:4px 4px 4px 4px #B76E79 }
📋 Copy Code

Background

A propriedade CSS para alterar a cor de fundo de um elemento para Hex B76E79 é chamada “background”. A propriedade background pode ser definida em classes, ids ou directamente no elemento HTML.

.background, #background, body{ background:#B76E79 }
📋 Copy Code

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

.background{ background-color:#B76E79 }
📋 Copy Code

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

Para optimizar e comprimir o seu código CSS, pode utilizar o nosso compressor e optimizador de CSS online baseado em csstidy. Se quiser criar um gradiente linear ou radial como fundo ou borda, consulte o 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 num destes formatos de cor, por exemplo, “B76E79”, no campo de entrada e clique em converter. O resultado estará na secção Conversões, e as secções seguintes fornecer-lhe-ão mais detalhes sobre a cor.

alguns formatos de cor utilizam a mesma notação, e a conversão adivinhará a composição da consulta de pesquisa. Como exemplo, se tentar converter a string “351°, 40%, 72%” pode ser uma cor HSV ou HSL, a conversão assumirá HSL neste caso.

Como isto pode levar a conversões erradas, pode definir qual o formato que está a passar, envolvendo a string de cor entre parênteses com o formato em frente. A cadeia de pesquisa “HSV(351°, 40%, 72%)” dar-lhe-á a cor HSV correcta, pois não há necessidade de adivinhar o formato. Outros exemplos seriam “CIELAB(54,66, 30,32, 6,37)”, “CIELCH(55, 30,982, 11,862)”, “YXY(22,5996, 0,3960, 0,3134)” e “CMYK(0,00, 0,40, 0,34, 0.28)”.

Detalhes

Na secção de detalhes, obtém-se primeiro um resumo da cor e, se disponível, uma descrição como “vermelho escuro e mudo”. É possível ver a distribuição da cor em diferentes formatos. Por exemplo, no formato RGB, conhece a quantidade de vermelho, verde, e azul na sua cor.

Finalmente, obtém gradientes de brilho e saturação da sua cor em passos de 10%. Assim, se precisar de uma versão mais brilhante ou mais escura, pode escolher a partir daqui.

Harmonies

As harmonias basicamente mostram-lhe cores que combinam bem com a cor que está a visualizar actualmente. 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 utilizando a cor actual. Pode descarregar estes ficheiros e utilizá-los nos seus projectos, por exemplo, como imagem de fundo.

Previews

Quer ver como fica a sua cor sobre um fundo branco ou preto? Então deve verificar a secção “Pré-visualizações” da página de cor.

Veja também o contraste da sua cor nestes fundos e obtenha um link para o Color Contrast Checker com a sua cor pré-seleccionada.

Simulação de Cegueira da Cor

Quando selecciona uma cor para o seu projecto, talvez queira ter em mente como esta cor é percebida por qualquer pessoa com uma deficiência de visão cromática. Por conseguinte, acrescentei esta secção mostrando-lhe pré-visualizações da sua cor para diferentes deficiências de visão de cor.

CSS Exemplos

Se é novo no desenvolvimento da web, talvez queira ver como aplicar a sua cor como primeiro plano, fundo, ou cor de borda. A secção “Exemplos CSS” dá-lhe exactamente isto, ajuda a usar a cor actual em CSS.

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

Cor Bucket

Decidiu as cores para o seu próximo projecto e quer descarregá-las como uma paleta ou partilhá-las com amigos para discutir a sua decisão? Então deve dar uma vista de olhos ao balde colorido. Permite-lhe armazenar até 10 cores, cria automaticamente paletas de cores para cada uma destas cores com base na leveza, e dá-lhe uma matriz WCAG.

P>Pode descarregar cada uma das paletas de cores ou as cores seleccionadas como uma paleta GIMP, Adobe® ASE, ou Tailwind CSS. Além disso, pode ver tudo como um 🌈 CSS Gradient, 🔧 CSS Text Shadow, ou 📷 Color Palette Image.

Para adicionar uma cor ao seu balde de cor, coloquei um link “❤️ Adicione esta cor ao balde” na secção de cabeçalho de cada página deste website.

Color Contrast Checker

Quando decidir as cores para um projecto, é essencial ter em mente o contraste de cores. O meu Verificador de Contraste de Cor permite-lhe verificar as cores seleccionadas de acordo com as Directrizes de Acessibilidade do Conteúdo da Web (WCAG) 2.0.