Designers e desenvolvedores da web costumam usar o código hexadecimal em seus arquivos CSS para dizer qual a cor que um determinado elemento será. Este método tem seus próprios méritos e falhas. Ajuda tremendamente à medida que padroniza todo o fluxo de trabalho entre diferentes desenvolvedores.Você pode usar diferentes tipos de exibição com precisão variável de cores e ainda seguir a paleta de cores original sem qualquer confusão. Mas muitas vezes é complicado usar códigos hexadecimais para representar as cores. O número em si não significa nada para um desenvolvedor humano e isso pode prejudicar a criatividade.Enquanto você pode usar uma infinidade de catadores de cores do Adobe para o seletor de cores HTML da W3Schools, alternar entre eles e seu editor pode quebrar a concentração e tornar sua vida muito mais difícil.

Para remediar essa situação, vejamos um seletor de cores que você pode instalar como um plugin para o Atom Text Editor, tornando todo o processo muito mais suave. Você precisa ter o Atom instalado em seu sistema. Depois de instalar, você pode instalar este pacote específico em cima dele. Tem mais de 1.7 milhões de downloads e isso destaca -se, se você decidir pesquisar via Atom Editor.

Instalando o seletor de cores

Abra o Configurações [Ctrl +,] em seu editor de átomos e no Instalar Seção Pesquise de novo pacotes.

Instale o picker de cores (versão 2.3.0 ou mais tarde) e uma vez instalado, lembre -se de Habilitar isto.

Uma vez tudo isso é feito. Você pode ir em frente e abrir um novo arquivo de texto e podemos começar a testá -lo.

Várias opções de coleta de cores

Abra um novo arquivo dentro do átomo e, com ele, use o KeyBinding [Ctrl+Alt+C] se você estiver no Windows ou Linux ou use [CMD+Shift+C] se você usar o Mac OSX.

Você verá vários controles deslizantes e barras diferentes à direita. O mais à direita é selecionar a cor que resta é a barra que determina a opacidade da sua cor e o quadrado no meio decide qual tom de uma determinada cor será selecionada.

Você pode ficar extremamente leve, que ficaria branco, não importa qual fosse a escolha inicial da sua cor ou você pode escolher uma versão completamente acinzentada ou preto. O caso de uso normal envolve escolher algo entre o qual se encaixa no seu caso de uso.

Por exemplo, as pessoas usam cores diferentes para o mesmo elemento para fazer o site se sentir um pouco mais interativo. Os hiperlinks podem ser atribuídos em cor azul e, quando você passa o mouse sobre ele, a cor muda para preto.

A opacidade é mais um fator importante que os desenvolvedores usam para ocultar elementos sob um patch colorido e, quando o usuário executa uma certa ação, a opacidade é exibida para zero e o elemento abaixo é tornado visível.

Padrões diferentes

Você notará que as cores podem ser mostradas em diferentes padrões, principalmente em formatos RGB (Verde Verde e Azul), Hex e HSL.

Vamos começar com o formato hexadecimal, pois é usado um pouco, pelo menos no nível do iniciante.

É simplesmente um dígito hexadecimal (que é um sistema de numeração que vai de 0 a 9 e depois tem a representar 10, b representar 11 e assim por diante, até 15 que é representado usando f). Escolha uma cor usando o pacote de colorido, clique no botão hexadecimal abaixo do widget e você verá que o código hexadecimal correspondente para essa cor é colado em seu editor.

O próximo padrão usa RGB, que mostra qual a porcentagem de uma cor é vermelha, qual porcentagem é verde e quanto é azul.

A mesma cor acima tem a representação RGB da seguinte forma

Por fim, você precisa saber sobre HSL, que significa Hue, Saturação e Loreza.

Hue representa qual a cor que o elemento tem. Pode variar da extremidade vermelha do espectro até azul e simplesmente ignora as cores como combinações de vermelho, verde e azul (pelo menos do ponto de vista do desenvolvedor). Isso é frequentemente descrito como uma roda de cores com vermelho, verde e azul a 60 graus separados um do outro, mas o seletor de cores o abriu para uma única barra à direita.

A próxima coisa a se preocupar é a saturação, que descreve o quão intensa a cor será. Cores completamente saturadas não têm tons de cinza, 50% saturados são cores mais claras e 0% são indistinguíveis de cinza. O espaço quadrado é perfeito para selecionar isso.

A leveza descreve o quão brilhante as cores vão aparecer. As cores 100% leves são indistinguíveis do branco e 0% parecem completamente pretas. Por exemplo, se o seu site tiver muito material de leitura, você gostaria de uma solução menos brilhante para facilitar o envolvimento do leitor. Então isso é HSL.

Conclusão

Editores como Atom e Visual Studio Code têm um ethos inteiro de pacotes e temas úteis construídos em torno deles. Picker de cores é apenas um exemplo que um desenvolvedor pode usar para renunciar a viagens desnecessárias a W3schools ou Stack Overflow. Usar o selecionador de cores ainda exige que você tenha uma tela precisa que seja calibrada corretamente.

Depois de decidir a paleta de cores do seu projeto, no entanto, você pode começar a construir projetos mais rápidos e suaves usando pacotes como seletor de cores.