Seletor e Conversor de Cores

Modelos de cores

Um modelo de cor é um sistema para descrever cores como números. Diferentes modelos são usados em diferentes contextos, dependendo de se a saída é uma tela, uma impressora ou uma especificação de design.

RGB / RGBA

Formato

RGB define cores pela mistura de luz vermelha, verde e azul. Cada canal varia de 0 a 255. rgb(255, 0, 0) é vermelho puro. rgb(255, 255, 255) é branco. O canal A (alfa) adiciona transparência, variando de 0 (totalmente transparente) a 1 (totalmente opaco). Por exemplo, rgba(255, 0, 0, 0.5) é vermelho semi-transparente. RGB é o modelo de cor nativo para telas e displays digitais.

Histórico

O modelo RGB tem raízes na teoria da visão tricromática de Young-Helmholtz do século XIX. James Clerk Maxwell conduziu os primeiros experimentos de fotografia colorida RGB em 1861. RGB se tornou o padrão para displays eletrônicos com o desenvolvimento dos televisores coloridos de tubo catódico nas décadas de 1930 e 1940, e posteriormente foi adotado para monitores de computador. O espaço de cor sRGB foi formalmente adotado como padrão web no HTML 3.2 em janeiro de 1997.

HEX / HEXA

Formato

HEX é uma notação compacta para valores RGB usando hexadecimal. #FF0000 é o mesmo que rgb(255, 0, 0). Cada par de dígitos hexadecimais representa um canal: #RRGGBB. A forma de 8 dígitos #RRGGBBAA adiciona um canal alfa, onde 00 é totalmente transparente e FF é totalmente opaco. Por exemplo, #FF000080 é vermelho com 50% de opacidade. Formas abreviadas como #F00 expandem para #FF0000.

Histórico

A notação hexadecimal de cores originou-se nos primeiros navegadores web em meados da década de 1990. As primeiras versões do Mosaic e do Netscape Navigator herdaram o sistema de nomes de cores X11. CSS Level 1, publicado em dezembro de 1996 por Hakon Wium Lie e Bert Bos, padronizou formalmente os trigêmeos hexadecimais como a forma principal de especificar cores na web.

HSL / HSLA

Formato

HSL descreve a cor como matiz, saturação e luminosidade. O matiz é um grau na roda de cores (0-360): 0 é vermelho, 120 é verde, 240 é azul. A saturação (0-100%) controla a intensidade da cor. A luminosidade (0-100%) controla o brilho, onde 0% é preto e 100% é branco. HSL é frequentemente mais intuitivo que RGB para selecionar cores porque permite ajustar brilho e saturação independentemente.

Histórico

HSL foi descrito pela primeira vez por George H. Joblove e Donald Greenberg em um artigo de 1978 na Computer Graphics. Foi criado para resolver um problema fundamental do RGB: misturar valores de vermelho, verde e azul não é intuitivo para humanos. HSL reorganiza o espaço de cor RGB para que artistas e designers possam pensar em termos de cor (matiz), vivacidade (saturação) e claridade (luminosidade), o que se aproxima mais de como as pessoas descrevem cores naturalmente.

HSV / HSB

Formato

HSV (matiz, saturação, valor) é semelhante ao HSL, mas usa "valor" (brilho) em vez de luminosidade. Com 100% de valor, cores totalmente saturadas são puras e vibrantes. HSV se adapta mais naturalmente ao funcionamento dos seletores de cores: o painel de saturação/brilho ajusta S e V enquanto o controle deslizante de matiz ajusta H.

Histórico

HSV foi descrito por Alvy Ray Smith em agosto de 1978 enquanto trabalhava no laboratório de computação gráfica do New York Institute of Technology. Foi publicado na mesma edição da Computer Graphics que HSL. Smith projetou HSV para uso em um programa de pintura digital pioneiro, onde artistas precisavam de uma forma intuitiva de selecionar cores na tela. O modelo cilíndrico do HSV tornou natural implementá-lo como um seletor de cores com um controle deslizante de matiz e um painel de saturação/brilho.

CMYK

Formato

CMYK (ciano, magenta, amarelo, preto/key) é usado em impressão. Enquanto RGB é aditivo (luz), CMYK é subtrativo (tinta). Cada valor representa a porcentagem de tinta aplicada. cmyk(0, 100, 100, 0) produz vermelho. A conversão entre RGB e CMYK é aproximada porque cobrem diferentes gamas de cores (gamuts).

Histórico

Os fundamentos do CMYK remontam a Jacob Christoph Le Blon, que inventou a impressão colorida em meio-tom usando placas de cobre separadas por volta de 1710. Inicialmente usava placas de vermelho, amarelo e azul, e mais tarde adicionou uma placa preta para contornos e texto mais nítidos. O processo moderno CMYK de quatro cores foi implementado pela primeira vez na década de 1890 para ilustrações coloridas em jornais. A placa preta é chamada de placa "key" (chave) porque carrega os detalhes finos aos quais as outras placas são alinhadas.

Formatos de cores CSS

O CSS moderno suporta diversas notações de cores:

• #FF5733 ou #ff5733 (HEX)
• rgb(255, 87, 51) ou rgba(255, 87, 51, 0.5)
• hsl(14, 100%, 60%) ou hsla(14, 100%, 60%, 0.5)
• Cores nomeadas: red, cornflowerblue, rebeccapurple (148 cores nomeadas no total)