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.
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 📋 |
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
Analógico
A harmonia de cor análoga consiste em três cores que estão próximas uma da outra na roda de cor.
Triad
A harmonia de cores triádica agrupa três cores que estão uniformemente espaçadas entre si e formam um triângulo na roda de cores.
Complementar
O esquema de cores complementar é um par de cores que estão no oposto um do outro na roda de cores.
Split Complementary
Split-complementary colors different from the complementary color scheme. O esquema consiste em três cores, a cor original e duas vizinhas da cor do complemento.
Quadrado
O esquema quadrado é como o esquema de cores rectangulares, mas as quatro cores estão uniformemente espaçadas na roda de cores.
Rectângulo
O esquema de cores do rectângulo consiste em quatro cores que formam um rectângulo na roda de cor.
Sweetspot
A sweet spot agrupa a cor original e cinco cores complementares.
SVG Imagens
Uma selecção de imagens SVG usando a versão hexadecimal #496C3C da cor actual.
Pré-visualizações
Fundo branco
Esta pré-visualização mostra como a cor RGB 73, 108, 60 fica sobre um fundo branco.
Verificação de Contraste de Cor
Se quiser verificar com outras combinações de cores, experimente o Color Contrast Checker.
Fundo Preto
Esta pré-visualização mostra como a cor RGB 73, 108, 60 fica num fundo preto.
Color Contrast Check
Se quiser verificar com outras combinações de cores, experimente o Color Contrast Checker.
RGB 73, 108, 60 Fundo
Esta pré-visualização mostra como o texto preto fica num fundo com a cor RGB 73, 108, 60.
Esta pré-visualização mostra como o texto branco fica em um fundo com a cor RGB 73, 108, 60.
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
73, 108, 60
108, 99, 57
119, 94, 63
81, 102, 110
Trichromacy
73, 108, 60
95, 102, 58
102, 99, 62
78, 104, 92
Monocromática
73, 108, 60
92, 92, 92
85, 98, 80
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.