Skip to content
Menu
CDhistory
CDhistory

Convertendo Cores

Posted on Dezembro 30, 2021 by admin

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 📋

A capa do livro

  • 📕 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

RGB Distribuição da Cor A distribuição dos valores RGB, vermelho, verde e azul. vermelho A Perecentagem de Vermelho na Cor.Verde A Perecentagem de Verde na Cor.Azul A Perecentagem de Azul na Cor.RGB
  • Vermelho (29%)
  • Verde (42%)
  • Azul (24%)
RYB Distribuição da Cor A distribuição dos valores RYB, vermelho, amarelo e azul. Vermelho A Perecentagem de Vermelho na Cor. Amarelo A Perecentagem de Amarelo na Cor.Azul A Perecentagem de Azul na Cor. RYB
  • Vermelho (24%)
  • Amarelo (42%)
  • Azul (37%)
CMYK Distribuição da Cor A distribuição dos valores CMYK, Ciano, Magenta, Amarelo e Preto.Cyan A Perecentagem de Cyan na Cor. Magenta A Perecentagem de Magenta na Cor. Amarelo A Perecentagem de Amarelo na Cor. Preto A Perecentagem de Preto na Cor.CMYK
  • Ciano (32%)
  • Magenta (0%)
  • Amarelo (44%)
  • Preto (58%)
CMY Distribuição da Cor A distribuição dos valores CMY, Ciano, Magenta, Amarelo.Cyan A Perecentagem de Cyan na Cor.Magenta A Perecentagem de Magenta na Cor.Yellow A Perecentagem de Amarelo na Cor.CMY
  • Ciano (71%)
  • Magenta (58%)
  • Amarelo (76%)

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.

  • 103, 102, 46
  • 73, 108, 60
  • 33, 112, 84

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.

  • 73, 108, 60
  • 6, 106, 150
  • 149, 77, 87

Complementar

O esquema de cores complementar é um par de cores que estão no oposto um do outro na roda de cores.

  • 73, 108, 60
  • 95, 60, 108

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.

  • 141, 79, 114
  • 73, 108, 60
  • 79, 97, 150

Quadrado

O esquema quadrado é como o esquema de cores rectangulares, mas as quatro cores estão uniformemente espaçadas na roda de cores.

  • 73, 108, 60
  • 0, 111, 135
  • 118, 87, 137
  • 143, 83, 63

Rectângulo

O esquema de cores do rectângulo consiste em quatro cores que formam um rectângulo na roda de cor.

  • 73, 108, 60
  • 0, 113, 102
  • 118, 87, 137
  • 148, 77, 96

Sweetspot

A sweet spot agrupa a cor original e cinco cores complementares.

  • 73, 108, 60
  • 127, 140, 122
  • 108, 94, 60
  • 63, 71, 60
  • 199, 199, 199
  • 71, 71, 71

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

Texto Grande (acima de 18pt) WCAG AA ✓ Passe
Qualquer Texto WCAG AA ✓ Passe
Texto Grande (acima de 18pt) WCAG AAA ✓ Passar
Qualquer Texto WCAG AAA ✕ Falhar

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

Texto Grande (acima de 18pt) WCAG AA ✓ Passar
Qualquer Texto WCAG AA ✕ Falhar
Texto Grande (acima de 18pt) WCAG AAA ✕ Falha
Qualquer Texto WCAG AAA ✕ Falha

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

Cor Original
73, 108, 60

Protanopia
108, 99, 57

Deuteranopia
119, 94, 63

Tritanopia
81, 102, 110

Trichromacy

Cor Original
73, 108, 60

Protanomaly
95, 102, 58

Deuteranomaly
102, 99, 62

Tritanomalia
78, 104, 92

Monocromática

Cor Original
73, 108, 60

Achromatopsia
92, 92, 92

Achromatomaly
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.

Book Cover

📕 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.

Deixe uma resposta Cancelar resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Artigos recentes

  • Acela está de volta: NYC ou Boston por $99
  • Entrada OMIM – # 608363 – CHROMOSOME 22q11.2 SÍNDROME DE DUPLICAÇÃO
  • Kate Albrecht’s Parents – Learn More About Her Father Chris Albrecht And Mother Annie Albrecht
  • Temple Fork Outfitters
  • Burr (romance)

Arquivo

  • Fevereiro 2022
  • Janeiro 2022
  • Dezembro 2021
  • Novembro 2021
  • Outubro 2021
  • Setembro 2021
  • Agosto 2021
  • Julho 2021
  • Junho 2021
  • Maio 2021
  • Abril 2021
  • DeutschDeutsch
  • NederlandsNederlands
  • SvenskaSvenska
  • DanskDansk
  • EspañolEspañol
  • FrançaisFrançais
  • PortuguêsPortuguês
  • ItalianoItaliano
  • RomânăRomână
  • PolskiPolski
  • ČeštinaČeština
  • MagyarMagyar
  • SuomiSuomi
  • 日本語日本語
©2022 CDhistory | Powered by WordPress & Superb Themes