Como usar cores relativas CSS para obter a cor hexadecimal final em JavaScript

Compreendendo como trabalhar com cores relativas CSS em JavaScript

As cores relativas CSS oferecem aos desenvolvedores mais flexibilidade de estilo, permitindo-lhes modificar dinamicamente as cores com base em valores de cores pré-existentes. Por exemplo, você pode querer modificar a transparência alfa de uma cor, bem como seus canais vermelho e azul. Os sistemas de design de fluidos têm mais possibilidades devido a esta técnica.

Porém, trabalhar com esses dados gerados dinamicamente em JavaScript pode ser difícil. Se você tentar usar getComputedStyle para recuperar uma cor computada, ele pode retornar a string não processada em vez de corrigir as alterações de CSS feitas. Isso restringe a manipulação programática e a análise da cor final da saída.

Neste artigo, examinamos o processo de obtenção da cor hexadecimal computada completa do CSS, independentemente de ela ser definida por meio do sofisticado Cores relativas CSS sintaxe. Estamos abordando a questão de como obter o valor preciso da cor uma vez que as modificações relativas aos canais RGB e alfa tenham sido calculadas pelo mecanismo CSS.

Também examinaremos outras opções possíveis, como quaisquer bibliotecas de terceiros ou APIs integradas do navegador que possam ajudá-lo a extrair essas informações de cores em um formato que possa ser usado em seu código JavaScript para posterior modificação.

JavaScript: utilizando cores relativas CSS para extrair a cor hexadecimal final

No primeiro script, usamos JavaScript para obter e trabalhar com cores calculadas dinamicamente em CSS, aproveitando os recursos integrados do navegador. O principal problema está no fato de que Cores relativas CSS permite o ajuste variável do canal de cores, que não é representado na saída ao utilizar técnicas mais convencionais como getComputedStyle. Criamos uma solução alternativa empregando um tela elemento. Podemos obter valores RGB precisos renderizando a cor computada em uma tela com dimensões de 1x1 pixels. A capacidade da API canvas de manipular dados de imagem em nível de pixel, incluindo cores, torna esse processo possível.

Os valores RGBA de cada pixel são extraídos pelo getImageData método uma vez que a cor foi colocada na tela. Em seguida, utilizando conversões de número para string e operações bit a bit em JavaScript, esses valores são transformados em formato hexadecimal. Aqui, as instruções importantes, como preencherRect e getContext('2d'), são responsáveis ​​por gerar a cor e produzir uma superfície desenhável. Quando exigimos a cor exata que o navegador renderiza de acordo com o CSS regras — incluindo quaisquer ajustes de transparência ou canal de cores — essa técnica funciona bem. É um excelente método de resolver o problema sem utilizar outras bibliotecas.

No segundo método, simplificamos as manipulações de cores usando uma ferramenta de terceiros chamada Chroma.js. Com facilidade, as cores podem ser convertidas entre vários formatos usando Chroma.js, que fornece um método mais abstrato de interação com as cores. Chroma.js lida automaticamente com a conversão para hexadecimal ou outros formatos como RGB ou HSL assim que a cor computada for adquirida do DOM. Ao trabalhar em projetos que exigem ajustes de cores ou conversões de formato mais complexos, essa abordagem é perfeita. Como resultado, o código se torna mais simples, limpo e fácil de manter.

Embora a partir de perspectivas opostas, ambas as estratégias lidam com o mesmo problema. Para determinar a cor hexadecimal final, o primeiro usa cálculos bit a bit e APIs nativas do navegador, enquanto o segundo aproveita os recursos de um pacote especializado em manipulação de cores. Você pode usar Chroma.js para maior flexibilidade e facilidade de uso, ou pode optar pela forma nativa para evitar adicionar dependências, dependendo das necessidades do seu projeto. JavaScript permite manipulação adicional da cor hexadecimal recuperada em ambos os cenários, oferecendo oportunidades para estilos dinâmicos e animações baseadas em cores.

// 1. First, grab the element whose color you want to extract
const element = document.querySelector('.my-element');

// 2. Use getComputedStyle to get the color property
let computedColor = getComputedStyle(element).color;

// 3. Create a canvas to convert the computed color to hex format
let canvas = document.createElement('canvas');
canvas.width = 1; // Small canvas, just for color conversion
canvas.height = 1;
let ctx = canvas.getContext('2d');

// 4. Set the fill style to the computed color and fill the canvas
ctx.fillStyle = computedColor;
ctx.fillRect(0, 0, 1, 1);

// 5. Extract the color in hex format using getImageData
let pixelData = ctx.getImageData(0, 0, 1, 1).data;
let hexColor = "#" +
  ((1 << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2])
    .toString(16)
    .slice(1); // Convert to hex and remove the alpha

console.log(hexColor); // This will log the final hex color value

// 1. First, include Chroma.js in your project (e.g., via CDN or NPM)
// <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js">
const element = document.querySelector('.my-element');

// 2. Retrieve the computed color using getComputedStyle
let computedColor = getComputedStyle(element).color;

// 3. Use Chroma.js to convert the computed color to hex
let chromaColor = chroma(computedColor);
let hexColor = chromaColor.hex();

console.log(hexColor); // Log the final hex color

// Chroma.js also supports other formats such as RGB or HSL
let rgbColor = chromaColor.rgb();
let hslColor = chromaColor.hsl();

console.log(rgbColor); // Logs RGB array
console.log(hslColor); // Logs HSL array

describe('Color Extraction Tests', () => {
  it('should return the correct hex color using canvas', () => {
    let color = getHexColorFromCanvas('.my-element');
    expect(color).toBe('#e6aabb'); // Expected final hex color
  });

  it('should return the correct hex color using Chroma.js', () => {
    let color = getHexColorUsingChroma('.my-element');
    expect(color).toBe('#e6aabb'); // Expected final hex color
  });
});

// Functions used for the tests
function getHexColorFromCanvas(selector) {
  const element = document.querySelector(selector);
  let computedColor = getComputedStyle(element).color;
  let canvas = document.createElement('canvas');
  canvas.width = 1;
  canvas.height = 1;
  let ctx = canvas.getContext('2d');
  ctx.fillStyle = computedColor;
  ctx.fillRect(0, 0, 1, 1);
  let pixelData = ctx.getImageData(0, 0, 1, 1).data;
  return "#" + ((1 << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2]).toString(16).slice(1);
}

function getHexColorUsingChroma(selector) {
  const element = document.querySelector(selector);
  let computedColor = getComputedStyle(element).color;
  return chroma(computedColor).hex();
}

Técnicas avançadas para lidar com cores relativas CSS em JavaScript

Usar variáveis ​​para obter modificações dinâmicas de cores é um recurso poderoso, mas às vezes desconsiderado, do Cores relativas CSS. Por exemplo, você poderia usar JavaScript para criar variáveis ​​CSS que representam cores básicas e alterá-las em tempo real, permitindo sistemas de design responsivos e temas dinâmicos. Este método possibilita esquemas de cores escalonáveis ​​e sustentáveis ​​em aplicativos on-line contemporâneos quando usado com funções de cores relativas CSS.

Usar o modelo de objeto digitado CSS (Typed OM) é um método adicional para resolver o problema de obtenção da cor final computada. Os desenvolvedores podem trabalhar de forma mais programática e sistemática com atributos CSS graças ao Typed OM. Os valores CSS agora podem ser acessados ​​como objetos JavaScript graças ao Typed OM, que elimina a necessidade de métodos baseados em strings. Cores relativas e outras transformações CSS complexas se beneficiam disso, pois proporcionam um controle mais preciso sobre a manipulação de propriedades.

Por último, se você deseja rastrear alterações nos estilos dos elementos, especialmente quando as variáveis ​​CSS ou valores relativos de cores são alterados dinamicamente, pense em utilizar o JavaScript Observador de mutação. MutationObserver pode rastrear modificações no DOM, como ajustes nos estilos embutidos de um elemento. Você pode fazer com que sua lógica JavaScript recalcule a cor e atualize-a de acordo com quaisquer alterações de estilo aplicáveis. Essa técnica funciona particularmente bem para interfaces altamente dinâmicas, onde mudanças de estilo acontecem regularmente em resposta a entradas do usuário ou de fontes externas.