color-mix() e Sintaxe de Cores Relativas
Combine cores e crie variações usando funções modernas de cor do CSS.
color-mix() e Sintaxe de Cores Relativas é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Função color-mix()
color-mix() mistura duas cores em um espaço de cores especificado. Ela permite criar variações de cores orientadas por tokens de design sem Sass ou JavaScript.
<button class="button-hover">Hover-mixed button</button>Sintaxe de color-mix()
Sintaxe completa: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). As porcentagens devem totalizar 100%.
<div class="mix-equal">Equal mix</div>
<div class="mix-weighted">Weighted mix</div>Espaços de cores em color-mix()
O espaço de cores afeta o resultado da mistura. Espaços perceptuais modernos, como oklch, produzem resultados visualmente mais uniformes do que srgb:
<div class="oklch-mix">OKLCH mix</div>
<div class="srgb-mix">sRGB mix</div>Gerando escalas de cores com color-mix()
Crie uma paleta de cores consistente a partir de uma única cor da marca:
<span class="swatch swatch-100"></span>
<span class="swatch swatch-300"></span>
<span class="swatch swatch-700"></span>
<span class="swatch swatch-900"></span>Sintaxe de cores relativas
As cores relativas permitem derivar uma nova cor a partir de uma cor existente, modificando canais específicos. Utilize a palavra-chave from:
<p class="darker">20% darker text</p>
<p class="desaturated">Half saturation text</p>Variante transparente com cores relativas
Crie uma versão transparente de uma cor da marca sem conhecer seus valores RGB:
<div class="overlay">Overlay</div>Clareando e escurecendo
Adicione ou subtraia luminosidade em oklch para criar tons claros e escuros:
<div class="card demo-active">Card</div>Visão geral do espaço de cores oklch
OKLCH é um espaço de cores perceptualmente uniforme:
l— luminosidade (de 0 a 1)c— croma/saturação (de 0 a 0.4+)h— ângulo de matiz (de 0 a 360)
Ajustar l produz tons claros e escuros previsivelmente uniformes.
Suporte dos navegadores
color-mix() tem suporte no Chrome 111+, Firefox 113+ e Safari 16.2+. A sintaxe de cores relativas (palavra-chave from) está disponível no Chrome 119+, Safari 16.4+ e Firefox 128+. Consulte caniuse.com para verificar o suporte atual.
Futuro de color-contrast()
color-contrast() é uma função proposta que escolhe automaticamente a cor mais legível (a partir de uma lista) para um determinado plano de fundo. Ela ainda não está disponível nos navegadores, mas foi projetada para a tematização orientada pela acessibilidade.
Verificação rápida
Qual espaço de cores de color-mix() produz os resultados de mistura mais uniformes perceptualmente?
Recapitulação
color-mix(in oklch, color1 %, color2 %) mistura cores em um espaço especificado, sendo ideal para criar tons claros, tons escuros e variantes transparentes a partir de uma única cor da marca. A sintaxe de cores relativas (oklch(from var(--brand) calc(l+0.2) c h)) deriva novas cores modificando canais individuais. OKLCH é o melhor espaço de cores para obter resultados perceptualmente uniformes.
Perguntas Frequentes
A aula “color-mix() e Sintaxe de Cores Relativas” é grátis?
Sim — o texto completo de “color-mix() e Sintaxe de Cores Relativas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “color-mix() e Sintaxe de Cores Relativas”?
Combine cores e crie variações usando funções modernas de cor do CSS. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “color-mix() e Sintaxe de Cores Relativas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- calc() para Cálculos Dinâmicos
- min(), max() e clamp() para Valores Fluidos
- repeat() e minmax() no Grid
- color-mix() e Sintaxe de Cores Relativas