Cinzas. Quem não os ama? Quando se trata de construção de sites, pode ser útil ter alguns tons de cinza à sua disposição, independentemente da sua paleta de cores. Nós os usamos para bordas e divisórias sutis, sombras e para indicar mudanças de estado sem sobrecarregar o usuário com cores. Alguns designers acham que um site precisa de alguns tons de cinza para transmitir sutilezas. Certa vez, trabalhei em um projeto que tinha literalmente 50 tons de cinza.
Se sua língua nativa for o inglês americano, você pode ficar um pouco irritado com a grafia de “cinza” aqui. Desculpe, não desculpe. Felizmente, as cores nomeadas em CSS são muito inclusivas quando se trata de tons de cinza. Todos os sabores de cinza vêm em variantes dos EUA/Reino Unido – escolha uma destas belezas:
- cinza claro/cinza claro
- cinzento
- cinza escuro/cinza escuro (que é mais claro que cinza/cinza!)
- cinza claro/cinza claro
- cinza ardósia/cinza ardósia
- cinza ardósia escuro/cinza ardósia escuro
- cinza escuro / cinza escuro
- fumaça branca (tecnicamente cinza)
- prata (também cinza)
Eles provavelmente não vão atender a todas as suas necessidades de interface do usuário. O que queremos é uma bela seleção de cinzas que complementem nossa paleta de cores. É claro que poderíamos usar um seletor de cores e nossa ferramenta de design favorita (chata). Ou poderíamos criar uma paleta de cinzas com a color-mix()função CSS (yaaaay!). Vamos com a segunda opção.
Uma cartilha sobre mistura de cores()
A color-mix()função nos permite misturar porcentagens de duas cores e gerar o resultado. Para usá-lo, precisamos especificar três argumentos: o método de interpolação de cores e as duas cores que queremos misturar. Podemos especificar as proporções de cada cor como porcentagens. Se omitirmos estes serão misturados 50/50, ou podemos especificar um deles e o outro será dimensionado para que totalizem 100%.
/* 50% red, 50% blue */
color-mix(in srgb, red, blue)
/* 60% red, 40% blue */
color-mix(in srgb, red 60%, blue)
/* 60% red, 40% blue */
color-mix(in srgb, red, blue 40%)Se quisermos entrar em detalhes, há um pouco mais para explorar, especialmente quando se trata de entender como funcionam os diferentes métodos de interpolação de cores. Escrevi uma cartilha color-mix() para MDN se você estiver interessado, e muitas pessoas mais inteligentes escreveram extensivamente sobre o funcionamento interno de vários espaços de cores, gamas e métodos de interpolação. Eu recomendo a palestra de Chris Lilley no CSS Day se você quiser entender como as cores podem ser alucinantes. Se alguma vez houve um tópico que está pronto para derreter seu cérebro, é a cor na web. Mas supondo que você queira apenas misturar algumas cores, color-mix()no geral é bastante intuitivo.
Afinal, o que é cinza?
Voltemos ao Grey (o álbum menos conhecido de Amy Winehouse). Quando crianças, aprendemos que o cinza vem da mistura de preto e branco. Isso é verdade porque certamente nos dá tons de cinza, mas quando se trata de design, nossas escolhas de cinza tendem a ser menos preto e branco (risos). Podemos querer usar tons de cinza mais quentes ou mais frios, que se misturam com um pouco de cor, e ainda assim nos referiremos aos resultados como “cinza” em nossa paleta de cores ou sistema de design.
Cinzas simples com mistura de cores()
Podemos misturar preto e branco com a color-mix()função de criar vários tons de cinza, do claro ao escuro. Aqui vamos misturá-los em incrementos de 20%, de 20% preto/80% branco a 80% preto/20% branco, armazenando-os como propriedades personalizadas para que possamos usá-los em qualquer lugar em nosso CSS. (A variável inicial --grey, como vimos no exemplo anterior, é resolvida para 50% preto/50% branco).
:root {
--grey: color-mix(in oklch, black, white);
--grey-20: color-mix(in oklch, black 20%, white);
--grey-40: color-mix(in oklch, black 40%, white);
--grey-60: color-mix(in oklch, black 60%, white);
--grey-80: color-mix(in oklch, black 80%, white);
}Só precisamos incluir uma porcentagem para uma de nossas cores (preto neste caso), a segunda estará implícita.
Claro, se você realmente quer 50 tons de cinza, vá em frente e crie quantas variáveis quiser. Caramba, até coloque um pouco calc()aí, não me importo.
:root {
--steps: 50;
--increment: calc(100% / var(--steps));
--grey-1: color-mix(in oklch, black var(--increment), white);
--grey-2: color-mix(in oklch, black calc(var(--increment) * 2), white);
--grey-3: color-mix(in oklch, black calc(var(--increment) * 3), white);
/* etc. */
}Uma observação lateral sobre espaços de cores (serei breve, prometo): estamos usando oklchaqui porque as cores neste espaço são perceptualmente uniformes . Isso significa que a diferença percentual entre as cores (bem, cinzas) será percebida pelo observador como sendo igual. Se compararmos os mesmos cinco tons de cinza no srgbespaço, veremos que há uma diferença.
Lea Verou tem um ótimo artigo sobre cores LCH em CSS, incluindo o que realmente significa uniformidade perceptual.
Tons de cinza
Agora vamos criar alguns tons de cinza mais quentes e mais frios misturando outra cor com nossas variáveis de cinza. Sim, isso mesmo, podemos misturar as cores que saem do arquivo color-mix().
Para nossos cinzas mais frios, misturaremos um pouco de azul. Estamos usando o CSS chamado color blue, que equivale a rgb(0 0 255), mas fique à vontade para usar qualquer cor azul ou azul em qualquer espaço de cores de sua preferência. Vamos misturar a mesma quantidade de cor em cada um dos nossos tons de cinza, então vamos criar uma propriedade personalizada “mixer”. Dessa forma, se quisermos mexer no nosso tom azul só temos um lugar onde precisamos fazer isso.
:root {
--blue-mixer: blue 10%;
}Em seguida, usaremos color-mix()para misturar isso em nosso conjunto original de cinzas, criando um novo conjunto de propriedades personalizadas:
:root {
--blue-grey: color-mix(in oklch, var(--grey), var(--blue-mixer));
--blue-grey-20: color-mix(in oklch, var(--grey-20), var(--blue-mixer));
--blue-grey-40: color-mix(in oklch, var(--grey-40), var(--blue-mixer));
--blue-grey-60: color-mix(in oklch, var(--grey-60), var(--blue-mixer));
--blue-grey-80: color-mix(in oklch, var(--grey-80), var(--blue-mixer));
}
Talvez estes sejam azuis demais para você? Você pode, é claro, diminuir ou aumentar o azul ajustando o valor percentual na --blue-mixerpropriedade personalizada.
Podemos fazer o mesmo com um tom vermelho para criar também alguns tons de cinza quentes. Confira a demonstração completa abaixo. Quem disse que o cinza tem que ser chato?