Seletor de Cores - Converter Códigos de Cores RGB, Hex, CMYK e HSV

O que é um seletor de cores?

Um seletor de cores é uma ferramenta para escolher uma cor e consultar seu valor em diferentes formatos de cor. Este mostra uma cor em RGB (vermelho, verde, azul), hexadecimal, CMYK (ciano, magenta, amarelo, preto) e HSV (matiz, saturação, valor) ao mesmo tempo. Alterar qualquer formato atualiza os outros instantaneamente.

Como usar o seletor de cores

Há três maneiras de escolher uma cor.

Clique em qualquer ponto da caixa do espectro para selecionar uma matiz e uma saturação. A posição horizontal define a matiz (a família de cores, como vermelho ou azul). A posição vertical define a saturação (o quão viva ou desbotada a cor parece). Um controle deslizante abaixo do espectro controla o brilho, de preto, à esquerda, até o brilho máximo, à direita.

Digitar valores exatos também funciona. O campo hexadecimal aceita códigos como #2ECC71, com ou sem #. Cada campo RGB aceita um número inteiro de 0 a 255. Cada campo CMYK aceita um número inteiro de 0 a 100. Um valor digitado acima do intervalo permitido é limitado ao máximo.

Cada formato de cor tem um botão de cópia ao lado. Clicar nele copia o valor para a área de transferência e exibe uma mensagem curta: "Copiado!".

Modelos de cor explicados

RGB

RGB descreve uma cor como uma mistura de luz vermelha, verde e azul, as mesmas três cores que uma tela usa para criar cada pixel. Cada canal varia de 0 a 255. RGB(255, 0, 0) é vermelho puro, e RGB(0, 0, 0) é preto. Navegadores, aplicativos e softwares de vídeo usam RGB, pois esse modelo corresponde ao funcionamento das telas.

Hexadecimal

Um código hexadecimal escreve uma cor RGB na base 16, em vez da base 10. #2ECC71 tem três pares de caracteres: 2E para vermelho, CC para verde e 71 para azul. Cada par vai de 00 a FF. Códigos hexadecimais são comuns no design para a web, pois o CSS os aceita diretamente e eles são mais curtos de digitar que rgb(). Também existe uma forma abreviada de três caracteres: #0F0 significa o mesmo que #00FF00.

CMYK

CMYK é usado na impressão. Uma impressora cria cores sobrepondo tintas ciano, magenta, amarelo e preta sobre papel branco; por isso, o modelo funciona subtraindo luz, em vez de adicioná-la. Cada canal é uma porcentagem de 0 a 100. CMYK(0, 0, 0, 0) significa ausência total de tinta, deixando o papel branco visível. CMYK não consegue reproduzir todas as cores que uma tela pode exibir; algumas cores brilhantes da tela, especialmente certos azuis e verdes, ficam mais apagadas depois de impressas.

HSV

HSV descreve separadamente o matiz, a saturação e o valor. O matiz é a família de cores, expressa em graus de 0° a 360°, sendo 0° vermelho, 120° verde e 240° azul. A saturação indica o quão viva é a cor, de 0% (cinza) a 100% (totalmente colorida). O valor indica o brilho, de 0% (preto) a 100% (brilho máximo). O HSV se aproxima da maneira como as pessoas descrevem naturalmente as cores, por isso o espectro e o controle deslizante de brilho desta ferramenta se baseiam nele.

Fórmula de RGB para hexadecimal

Cada canal RGB, um número de 0 a 255, é convertido em um número hexadecimal de dois dígitos; depois, os três pares são unidos com # na frente.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Fórmula de RGB para CMYK

Primeiro, cada canal RGB é convertido em uma fração entre 0 e 1. O preto (K) é definido a partir do maior canal. Em seguida, ciano, magenta e amarelo são calculados usando os canais restantes e K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Quando K é igual a 1 (a cor é preto puro), C, M e Y são definidos como 0 para evitar a divisão por zero.

Fórmula de RGB para HSV

Primeiro, RGB é convertido em frações entre 0 e 1. Seja $C_{max}$ o maior dos três valores, $C_{min}$ o menor e $\Delta$ a diferença entre eles.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ caso contrário } \frac{\Delta}{C_{max}}\times 100\%$

A matiz depende de qual canal é o maior:

undefined