Tutoriais
Step-by-step tutorials applying color science concepts to real-world design and development tasks.
Gerando Imagens OG Coloridas com Next.js e Satori
Gere imagens Open Graph dinâmicas com Next.js e Satori. Crie templates OG com consciência de cor, gradientes, cores de marca e designs responsivos.
Atualizado Fev 24, 2026
Propriedades Personalizadas CSS para Sistemas de Cores Dinâmicos
Aprenda a construir sistemas de cores sustentáveis e com suporte a temas usando propriedades personalizadas CSS. Abrange variáveis, modos claro/escuro e alterações de cores em tempo real com JS.
Atualizado Fev 18, 2026
Cores do Tailwind CSS: Guia Completo do Sistema de Tons
Domine o sistema de cores do Tailwind CSS: a paleta padrão, a convenção de tons de 50 a 950, cores personalizadas no config e a nova abordagem de variáveis CSS no Tailwind v4.
Atualizado Fev 11, 2026
Implementando o Modo Escuro: Um Guia Completo para Desenvolvedores
Aprenda a implementar o modo escuro usando propriedades personalizadas CSS, prefers-color-scheme, alternâncias em JavaScript e estratégias adequadas de adaptação de cores para qualquer projeto web.
Atualizado Fev 04, 2026
Criando um Seletor de Cores como Web Component do Zero
Crie um seletor de cores acessível como Web Component. Implemente renderização em canvas, sliders de matiz, canais alfa e eventos customizados com Shadow DOM.
Atualizado Fev 02, 2026
CSS color-mix(): Misture Cores Nativamente no Navegador
Aprenda CSS color-mix() para misturar cores nativamente no navegador. Domine a sintaxe, espaços de cores, casos de uso práticos e crie paletas dinâmicas sem JavaScript.
Atualizado Jan 31, 2026
Gamut de Cores Explicado: sRGB, P3 e Rec. 2020
Entenda os gamuts de cores — sRGB, Display P3 e Rec. 2020 — e como usar cores de gamut amplo no CSS com @media (color-gamut) para monitores modernos. Com exemplos práticos.
Atualizado Jan 28, 2026
Funções de Cor CSS: rgb(), hsl(), oklch() Comparadas
Compare todas as funções de cor CSS — rgb(), rgba(), hsl(), hsla(), lab(), lch(), oklch() e color-mix(). Aprenda qual usar, quando, e como está o suporte nos navegadores.
Atualizado Jan 22, 2026
Espaços de Cor Perceptuais: Lab, LCH, Oklab, OKLCH
Explore espaços de cor perceptualmente uniformes — CIE Lab, LCH, Oklab e OKLCH. Aprenda como cada um foi projetado, onde se destaca e qual usar para CSS e trabalho de design.
Atualizado Jan 22, 2026
Componentes Auto Layout do Figma com Tokens de Cores
Construa componentes auto layout do Figma com arquitetura de tokens de cores. Aprenda vinculação de variáveis, tokens responsivos, variantes de tema e handoff para desenvolvedores.
Atualizado Jan 15, 2026
Prova de Cores: Garantindo Cores de Impressão Precisas
Aprenda técnicas de soft proofing, hard proofing e prova de prensa para garantir reprodução precisa de cores na impressão, da tela ao produto final.
Atualizado Jan 13, 2026
CMYK para Web Designers: Quando a Impressao Encontra a Tela
Web designers que trabalham em projetos de impressao precisam entender CMYK. Aprenda sobre diferencas de gama, estrategias seguras de conversao RGB para CMYK, fluxos de prova e armadilhas comuns.
Atualizado Jan 12, 2026
Como o Papel Afeta a Cor: Substrato e Qualidade de Impressão
Entenda como o tipo, o revestimento e o gramado do papel afetam a cor impressa. Aprenda as diferenças entre papéis revestidos, não revestidos e especiais para precisão de cor.
Atualizado Jan 09, 2026
Estampagem a Foil e Cores Metálicas no Design Gráfico
Aprenda sobre técnicas de estampagem a foil, opções de tinta metálica, escolhas de foil dourado e prateado e considerações de design para materiais impressos premium.
Atualizado Jan 08, 2026
Arquitetura de Cores Multi-Marca: Um Código, Vários Temas
Construa arquitetura de cores multi-marca com propriedades customizadas CSS e design tokens. Suporte a temas white-label a partir de um único código com integração ao Tailwind.
Atualizado Jan 06, 2026
Cor em 3D e WebGL: Espaço de Cor Linear e PBR
Entenda a cor em renderização 3D — sRGB vs RGB linear, correção de gamma, cores de renderização fisicamente baseada, gerenciamento de cores no Three.js e HDR em 3D web.
Atualizado Jan 02, 2026
Cor para Contar Histórias com Dados: Além das Paletas Padrão
Vá além das cores padrão de gráficos para narrar histórias com dados. Aprenda paletas sequenciais, divergentes e categóricas, acessibilidade em dataviz e escalas de cores em D3/Chart.js.
Atualizado Dez 29, 2025
Animação de Cores em CSS: Transições e Keyframes
Domine a animacao de cores em CSS com transicoes, animacoes de keyframe, rotacao de matiz HSL, interpolacao OKLCH para suavidade perceptual e boas praticas de performance.
Atualizado Dez 26, 2025
Função CSS light-dark(): Alternância Nativa de Tema
Use CSS light-dark() para alternância nativa de tema. Substitua toggles JavaScript e media queries por uma única função CSS para cores em modo claro e escuro.
Atualizado Dez 24, 2025
Modelo de Cor RGB: Como as Telas Exibem Cores
Entenda como o modelo de cor RGB funciona — mistura de luz vermelha, verde e azul, o intervalo de 0 a 255, a função CSS rgb() e por que telas podem exibir 16,7 milhões de cores.
Atualizado Dez 20, 2025
Fluxo de Trabalho de Gerenciamento de Cores: Da Tela à Impressão
Domine o gerenciamento de cores, da calibração do monitor à prova de impressão. Aprenda como perfis ICC, soft proofing e um fluxo de trabalho consistente mantêm as cores precisas da tela à impressão.
Atualizado Dez 14, 2025
Construindo um Sistema de Cores para Seu Design System
Crie uma arquitetura de cores sistemática para seu design system com convenções de nomenclatura, geração de escalas de tonalidades, tokens semânticos e padrões de implementação.
Atualizado Dez 09, 2025
Projetando uma API de Cores: Endpoints REST para Dados de Cores
Projete uma API RESTful de cores com endpoints para conversao, busca, verificacao de contraste e geracao de paletas. Aprenda design de esquema e boas praticas.
Atualizado Dez 06, 2025
Técnicas de Cor em SVG: Fill, Stroke e Gradientes
Domine as técnicas de cor em SVG: atributos fill e stroke, gradientes lineares e radiais, a palavra-chave currentColor e estilização de SVG via CSS para desenvolvimento web moderno.
Atualizado Nov 29, 2025
A Regra 60-30-10: Proporção de Cores no Design
Domine a regra 60-30-10 de cores no design. Aprenda como cores dominantes, secundárias e de destaque funcionam juntas, com exemplos reais, códigos hex e dicas para quebrar a regra com eficácia.
Atualizado Nov 24, 2025
Separação de Cores Explicada: Preparando Arquivos para Impressão
Entenda a separação de cores CMYK, placas de cores especiais, trapping e marcas de registro. Prepare arquivos prontos para impressão com separações de cores corretas.
Atualizado Nov 21, 2025
HSL vs HSV: Qual Modelo de Cores Você Deve Usar?
Entenda a diferença entre os modelos de cores HSL e HSV, quando cada um é apropriado para desenvolvimento web ou seletores de cores, e como ambos se comparam às funções de cor do CSS.
Atualizado Nov 19, 2025
Sistemas de Cores Semânticos: Nomeando Cores por Propósito, Não por Matiz
Construa sistemas de cores semânticos que nomeiam cores por propósito (sucesso, aviso, erro) em vez de matiz. Aprenda arquitetura de tokens e implementação em CSS e Tailwind.
Atualizado Nov 14, 2025
Sintaxe de Cor Relativa CSS: Transforme Qualquer Cor Dinamicamente
Domine a sintaxe de cor relativa CSS para transformar cores dinamicamente. Ajuste matiz, saturação, luminosidade e canais alfa diretamente nas suas folhas de estilos.
Atualizado Nov 10, 2025
Projetando para Modo de Alto Contraste: Windows, macOS e Web
Projete para modo de alto contraste no Windows, macOS e web. Aprenda forced-colors no CSS, palavras-chave de cores do sistema, estratégias de teste e armadilhas comuns a evitar.
Atualizado Nov 06, 2025
Entendendo Códigos de Cor Hex: O Guia Completo
Domine os códigos de cor hexadecimais do zero. Aprenda o que significa #RRGGBB, como ler qualquer valor hex, notação abreviada, transparência alpha e como converter entre formatos.
Atualizado Out 29, 2025
Cor na Arte Generativa: Algoritmos para Paletas Belas
Crie cores belíssimas em arte generativa com espirais HSL, paletas baseadas em ruído, amostragem pela proporção áurea e algoritmos de cor em p5.js para estética procedural.
Atualizado Out 26, 2025
Tematização Dinâmica de Cores no React: Além das Variáveis CSS
Implemente tematização dinâmica de cores no React usando variáveis CSS, provedores de contexto e Tailwind CSS. Crie temas personalizáveis pelo usuário com geração de cores em tempo de execução.
Atualizado Out 23, 2025
Sistema de Correspondência Pantone Explicado: Um Guia para Designers
Aprenda como o Sistema de Correspondência Pantone funciona, a diferença entre os cadernos revestido e não revestido, cores especiais vs de processo e os limites da conversão Pantone para hex.
Atualizado Out 19, 2025
Acessibilidade Além do Contraste: A Cor no Design Inclusivo
A acessibilidade de cores vai além das relações de contraste. Aprenda o princípio 'não apenas pela cor' da WCAG, indicadores de foco, estados de erro e padrões amigáveis para daltônicos.
Atualizado Out 17, 2025
Cores para Serigrafia: Um Guia para Designers
Domine as técnicas de cores para serigrafia, incluindo separação de cores, telas de meio-tom, tintas spot color e preparação de arte para materiais serigrafados.
Atualizado Out 14, 2025
Interpolação de Cores em CSS: Por Que o OKLCH Vence
A interpolação de cores em CSS determina como gradientes e color-mix() mesclam cores. Saiba por que o OKLCH produz resultados vívidos e perceptualmente uniformes enquanto RGB e HSL falham.
Atualizado Out 12, 2025
Lista de Verificação de Acessibilidade de Cores para Desenvolvedores Web
Uma lista completa de acessibilidade de cores para desenvolvedores web, cobrindo taxas de contraste WCAG, dependência exclusiva de cores, indicadores de foco, ferramentas de teste e verificações automatizadas.
Atualizado Out 07, 2025
Manipulação de Cores em JavaScript: Bibliotecas e Técnicas
Domine a manipulação de cores em JavaScript com chroma.js, culori e tinycolor2. Analise, transforme e gere cores programaticamente para aplicações web.
Atualizado Out 02, 2025
Cor na Animação Web: GSAP, Framer Motion e CSS
Domine a animação de cores em transições CSS, GSAP e Framer Motion. Aprenda sobre interpolação OKLCH, técnicas de keyframe e otimização de desempenho.
Atualizado Set 29, 2025
Cores Spot vs. Cores de Processo: Guia de Impressão em Cores
Entenda a diferença entre cores spot e cores de processo CMYK, quando usar cada uma, como elas afetam os custos de impressão e como preparar arquivos corretamente para cada método.
Atualizado Set 27, 2025
Algoritmos de Contraste de Cores: WCAG 2 vs APCA
Entenda como o WCAG 2 com luminancia relativa e o APCA (Advanced Perceptual Contrast Algorithm) calculam o contraste. Compare resultados e aprenda qual usar para design acessivel.
Atualizado Set 25, 2025
Sistema de Cores do SwiftUI: Criando Paletas de Cores Adaptativas
Crie paletas de cores adaptativas no SwiftUI. Aprenda sobre Color vs UIColor, cores no asset catalog, cores dinâmicas para modo escuro e padrões de cor para acessibilidade.
Atualizado Set 19, 2025
Design Tokens para Cores: Do Figma ao Código
Implemente design tokens de cor do Figma ao código de produção usando Style Dictionary. Aprenda nomenclatura de tokens, transformação e saída multiplataforma.
Atualizado Set 12, 2025
Convenções de Nomenclatura de Cores em CSS e Sistemas de Design
Explore as cores nomeadas do CSS, nomenclatura semântica com propriedades personalizadas, nomenclatura de escala no estilo Tailwind e boas práticas para gerenciar nomes de cores em sistemas de design para equipes.
Atualizado Set 06, 2025
Cor no Design de E-mail: O Que Funciona em Todos os Clientes
Domine o design de cores em e-mails no Outlook, Gmail e Apple Mail. Aprenda estratégias seguras, correções para modo escuro e requisitos de estilos inline para resultados consistentes.
Atualizado Set 05, 2025
Tematização de Cores em React: Variáveis CSS e Context
Crie tematização de cores escalável em React usando propriedades customizadas CSS e a Context API. Aborda arquitetura de temas, temas com Tailwind CSS e estratégias multi-marca.
Atualizado Set 03, 2025
Desempenho de Cores na Web: Gradientes, Sombras e Filtros
Otimize o desempenho de cores na web. Aprenda como gradientes, box-shadows, filtros CSS e backdrop-filter afetam o desempenho de renderização e como acelerá-los com GPU.
Atualizado Set 01, 2025
Cores Responsivas: Adaptando Cores para Diferentes Telas
Aprenda como as cores mudam entre displays, gamuts de cor e modo escuro. Use media queries CSS e propriedades customizadas para criar sistemas de cor responsivos para qualquer tela.
Atualizado Ago 31, 2025
Combinações de Cores para Sinalização com Máxima Visibilidade
Aprenda as combinações de cores mais visíveis para sinalização, pesquisas sobre legibilidade à distância, requisitos ADA para placas, considerações com LED e como materiais e iluminação afetam a percepção de cor.
Atualizado Ago 30, 2025
Como Escolher Cores de Marca: Um Guia Passo a Passo
Um guia passo a passo para escolher cores de marca que ressoem com seu publico. Abrange pesquisa, analise setorial, psicologia das cores, testes de combinacao e documentacao de diretrizes de marca.
Atualizado Ago 29, 2025