Entendendo as cores relativas no web design

Na web design, mesmo as decisões mais simples podem se multiplicar. O que começa como uma única opção de design se expande rapidamente em dezenas de variações visuais para interações, fundos, bordas e muito mais. Sua construção pode ficar confusa com valores incompatíveis e ajustes manuais sem um sistema consistente.

A sintaxe de cor relativa no CSS oferece uma abordagem mais inteligente e escalável. Ele permite definir variações visuais com base em uma única fonte, mantendo seu design coeso e fácil de gerenciar. Normalmente, isso requer a gravação de código personalizado. Mas com o Divi 5, você pode usar essas técnicas modernas visualmente, desde o início. Vamos dar uma olhada mais de perto.

Problemas comuns de gerenciamento de cores

Essa cor perfeita da marca que você escolhe pode se multiplicar rapidamente em dezenas de variações espalhadas pelo seu site. Aqui estão alguns problemas que contribuem para este problema:

Gerenciando variações para uma cor

Você começa com um azul base e precisa rapidamente de dezenas de variações. O seletor de cores do seu construtor de páginas se torna uma bagunça. Azul claro, azul mais claro, azul escuro, azul mais escuro, azul desbotado - cada um é salvo como uma cor separada.

Sua marca Blue abrange vinte tons diferentes em seu site. Algumas seções usam o azul original, outras usam uma versão mais leve que você fez há três semanas e seus botões usam aquele tom mais escuro que você fez para um melhor contraste.

Nenhuma dessas cores se conecta aos outros. Quando seu cliente quer roxo em vez de azul, você enfrenta atualizando todas as cores manualmente. Você passará horas clicando nos módulos. Você caça em cada sombra. Você espera que não perca nenhum.

Uma coleção de muitos tons azuis semelhantes à esquerda se transforma em roxos espalhados e não relacionados à direita, porque atualizá -los um por um é tedioso e requer constante constantemente. Ainda mais, essas variações de cores geralmente são olhos e não têm nenhuma conexão.

O problema da opacidade

Muitos construtores de páginas incluem controles de transparência, que podem ser um pesadelo para a consistência de cores. Você pode criar uma sobreposição azul perfeita com 60% de opacidade, mas depois precisa do mesmo vermelho transparente para uma seção diferente.

Seu construtor de páginas não se lembra da mistura exata, então você está deixando de olho no controle deslizante da opacidade e tentando combinar o que você fez antes.

As tentativas 1, 2 e 3 variam em sombra e transparência, porque os olhos não fornecem resultados precisos, mesmo com controles precisos.

Alguns construtores de páginas permitem salvar cores transparentes. Outros não. Você acaba com um monte de azul transparente de aparência semelhante.

Eles são todos um pouco diferentes. Seu design perde consistência. Você não pode recriar com segurança a mesma cor transparente em vários módulos. Cada vez que você precisa de transparência, você começa do zero. Você acha que nos valores de opacidade. Você espera que eles correspondam ao seu design existente.

Criando variáveis manualmente

A maioria dos construtores de páginas oferece alguma forma de economia de cores, mas rapidamente se torna incontrolável. Você salva cores com nomes genéricos como "amarelo 1", "amarelo 2" e "luz amarela".

Seis meses depois, você não tem idéia de qual amarelo faz o quê. Sua paleta de cores salva se torna uma bagunça de cores de aparência semelhante com nomes sem sentido. Sua biblioteca de cores cresce sem nenhum sistema organizacional. Você tem três laranjas diferentes que parecem quase iguais, mas servem a vários propósitos.

Uma grade de muitas amostras de cores com tons sobrepostos e nomes inconsistentes e pouco claros contribui para uma paleta confusa e confusa que é difícil de organizar ou usar efetivamente.

Os membros da equipe adicionam suas variações de cores, criando tons duplicados com nomes diferentes. Sua marca Orange existe como "Orange", "Brand Orange", "Primary Orange" e "Orange Main". Ninguém sabe qual usar.

Alguns desenvolvedores tentam resolver isso escrevendo variáveis CSS personalizadas. Isso lhes dá um melhor controle sobre os relacionamentos de cores.

Mas agora você criou um obstáculo técnico. Os membros da sua equipe que não são de tecnologia não podem mais atualizar as cores e seus clientes não podem fazer alterações simples de cores. Você se torna responsável por cada ajuste menor de cores.

Que cores relativas são no CSS (e por que você precisa delas)

Cores relativas resolvem seus problemas de cor. Você escolhe uma cor de marca. O CSS faz todas as versões que você precisa. Leves para fundos. Dark Ones for Borders. Claros para sobreposições. Tudo a partir de uma cor inicial.

O CSS funciona como uma ferramenta de cores dinâmicas. Você diz: "Torne este isqueiro amarelo". CSS faz o trabalho. Seu botão vermelho precisa desaparecer ao passar o mouse. CSS adiciona a transparência. Seu cabeçalho azul precisa de uma borda mais escura. O CSS cria imediatamente.

Os fluxos de trabalho tradicionais exigiram mais esforço manual. Os designers fizeram conjuntos de cores no Photoshop. Os codificadores usavam ferramentas como o SASS. Os construtores de sites tiveram que adivinhar as cores correspondentes. O CSS agora lida com isso automaticamente.

Como o CSS cria cores das cores

A palavra "de" diz ao CSS para usar uma cor existente como ponto de partida. Você dá ao CSS uma cor e quebra essa cor em pedaços que ela pode usar.

Sua cor inicial se torna a base. CSS divide -o em partes. Quantidades vermelhas, quantidades verdes, quantidades azuis. Ou matiz, brilho e saturação, se você preferir esses controles.

Você pode começar com qualquer formato de cor. Use uma cor hexadecimal como #e91e63. Diga ao CSS para trabalhar com ele como HSL para facilitar mudanças de brilho. Saia como RGB se o seu código precisar disso. O CSS converte tudo automaticamente.

O código segue um padrão simples. Primeiro, você diz onde obter a cor e depois diz o que mudar sobre isso. Você pode manter tudo da mesma forma, mas adicionar transparência ou alterar a tonalidade, mas mantenha o brilho. Ambos funcionam da mesma maneira.

Quebrando cores em partes

Diferentes formatos de cores oferecem ferramentas diferentes. O RGB permite mudar de vermelho, verde e azul separadamente. HSL fornece controles de matiz, saturação e leveza.

Aqui está como funciona. Você escreve RGB (de #FF4081 RGB). O CSS pega esse código hexadecular rosa e o divide em números vermelhos, verdes e azuis. Então você pode usar esses números como quiser. O padrão permanece o mesmo: função de cor (do seu canal2 do canal2 do seu canal2 Channel3).

Portanto, em vez de escrever cores do zero, você se baseia em uma cor existente e altera apenas as peças que deseja alterar.

Cada parte é convertida para combinar com o que você escolheu. A conversão de hexadecimal rosa dá a você r = 255, g = 64, b = 129. Use-os como está ou altere-os com calc ().

Você também pode misturar e combinar canais. Quer que todos os pixels vermelhos sejam os mesmos? Use RGB (de var (–Color) GGG). Isso pega o valor verde e o usa para vermelho, verde e azul, criando um tom cinza a partir da sua cor original.

Suporte ao navegador e outras considerações

Grandes sites não podem ignorar os visitantes porque precisam acomodar todos. As versões antigas do Safari funcionam de maneira diferente. As versões do Chrome lidam com algumas coisas do seu jeito. Firefox, é o próprio. Você acabará escrevendo três versões de código diferentes para um efeito de cor.

Todo esse trabalho extra tira um tempo longe de coisas melhores. Você pode melhorar a funcionalidade do site e adicionar recursos que as pessoas desejam.

Muitos desenvolvedores usam cores relativas seletivamente. Ferramentas internas e projetos pessoais funcionam bem desde que você controla o navegador. Os sites de marketing e o trabalho do cliente precisam de um planejamento mais cuidadoso.

A tecnologia funciona muito bem onde é suportado. A questão é se a complexidade extra se encaixa na linha do tempo e na equipe do projeto ou na capacidade técnica do cliente. Mas, na maioria dos casos, seria um exagero e uma sobrecarga para a maioria dos membros da equipe.

É exatamente por isso que a equipe do Divi entrou em cena. Vimos designers da web lutando com a compatibilidade do navegador enquanto perdem ferramentas de cores poderosas. Nossa solução no Divi 5 pega as melhores partes das cores relativas e as envolve em um sistema que funciona em todos os lugares e não requer codificação.

Como o divi 5 facilita as cores relativas

Agora, você conhece o poder das cores relativas; No entanto, você pode ter percebido que não é tão fácil de implementar. O Divi 5 adotou uma abordagem diferente e a flexibilidade de cores construída diretamente em sua interface visual. Mas vamos descobrir o que é exatamente o divi.

O que é Divi?

Divi é o construtor de páginas do WordPress mais popular. Ele prioriza o design visual e oferece controle completo sobre seu design.

Você pode assistir suas alterações ao vivo, ajustar tamanhos de fonte ou espaçamento de linha e ver imediatamente os resultados em sua página. Você obtém acesso a mais de 200 módulos que vão a qualquer lugar que desejar. Blocos de texto, títulos e peças de conteúdo funcionam em equipe. Não há modelos rígidos que espremem suas idéias em formas desajeitadas.

Aqui está o que torna o Divi diferente: mais de 2000 layouts prontos construídos para negócios reais. Estes não são modelos básicos de partida. Cada design tem como alvo indústrias específicas. Você encontrará layouts que falam o idioma do seu público e correspondem às suas necessidades de negócios.

Pule o blues da página em branco com sites rápidos Divi

Os sites rápidos do Divi corrigem que intimidam a tela vazia que mata projetos antes de começarem. Você obtém sites de iniciantes profissionais com design sólido que nossa equipe de design construa usando imagens e obras de arte originais que você não encontrará em nenhum outro lugar.

Se você deseja algo mais personalizado, os sites rápidos do Divi trabalham com a Divi AI para criar layouts personalizados com base nos detalhes da sua empresa. Descreva sua empresa ou restaurante de consultoria e produz páginas relevantes com conteúdo específico do setor.

São wireframes básicos: você recebe manchetes reais, conteúdo escrito e imagens que se encaixam no seu tipo de negócio. Ele até projeta cabeçalhos e rodapés, páginas de produtos e modelos de postagem no blog, entre outras coisas, para você.

Você pode definir suas fontes e cores da marca desde o início ou deixar a IA escolhê -las para você. A IA trabalha dentro dessas diretrizes. Posteriormente, tudo permanece completamente editável, para que você possa ajustar a tipografia até que ela atenda às suas necessidades exatas.

Controle completo sobre o design do seu site, agora com ai

O construtor de temas o coloca no comando do design em todo o seu site. Crie cabeçalhos personalizados que reflitam a personalidade da sua marca. Crie layouts de blog que mantêm os leitores envolvidos com artigos longos. Suas 404 páginas podem permanecer na marca com fontes e modelos correspondentes.

O Divi AI, como mencionado anteriormente, coloca a IA bem dentro do seu fluxo de trabalho de design. Crie manchetes que pareçam que você os escreveu e descrições de produtos que capturam a voz da sua marca.

A edição de fotos pode ser feita dentro do construtor. Diga à IA o que muda em uma imagem e lida com as edições.

Precisa de imagens frescas? Isso cria isso também.

Seções completas de página que se encaixam perfeitamente no seu negócio.

Além de trechos de código quando você precisar deles.

Divi 5: a próxima evolução

O Divi 5 entra no teste alfa com uma missão clara: melhorar o desempenho do seu processo de design da web. Ouvimos feedback real sobre o que o mais diminui e o que o ajudaria.

Tudo o que você gosta na divi atual permanece. Acabamos de fazer funcionar melhor. A interface parece mais limpa. As páginas carregam mais rápido do que antes. Os controles respondem exatamente quando você clica neles.

Reconstruímos a fundação usando os padrões da web de hoje. Isso significa menos bugs estranhos e um desempenho mais suave em geral.

Você passa menos tempo lutando contra o construtor e mais tempo projetando. Seus sites parecem mais profissionais porque a consistência acontece automaticamente. Os clientes obtêm sites melhores porque você pode se concentrar em suas necessidades, em vez de problemas técnicos.

A versão Alpha está pronta para ser usada em novos sites, embora não recomendamos a conversão de seus sites Divi 4 existentes no Divi 5.

O que há de novo no divi 5

O Divi 5 traz grandes mudanças na maneira como você cria sites. A versão alfa pública funciona muito bem para novos projetos no momento. Nossas equipes de desenvolvimento enviam novos recursos a cada duas semanas, com várias atualizações importantes já lançadas desde o início da Alpha.

Aqui estão algumas atualizações importantes:

• A base de código moderna acelera as coisas carregando apenas os módulos que você realmente precisa, removendo o inchaço do código que diminuiu a velocidade do Divi 4.
• Um sistema completo de layout do Flexbox agora inclui modelos de novas linhas, centralização vertical automática, embalagem de conteúdo e distribuição de espaçamento por meio de controles visuais.
• Um construtor de loops novos que repete módulos, grupos ou seções com conteúdo dinâmico e suporta loops aninhados para estruturas de dados complexas.
• As cores relativas com HSL fornecem controle dinâmico de cores com base nos valores de matiz, saturação e leveza.
• O sistema baseado em HTML-5 substitui os códigos de atalho completamente , o que significa menos bugs e melhor compatibilidade com o WordPress.
• A interface do Visual Builder obteve uma reforma completa, com modos claros e escuros, painéis ancoráveis, janelas com guias, atalhos de teclado e camadas aprimoradas visualizam com migalhas de pão.
• Os pontos de interrupção responsivos personalizáveis substituem os três fixos do Divi 4, oferecendo mais controle com escala de tela para ver exatamente como os designs olham para diferentes tamanhos de tela.
• Os grupos de módulos funcionam como recipientes versáteis que agrupam elementos relacionados, para que você possa estilizá -los como unidades ou movê -los sem perder relacionamentos.
• As variáveis de design permitem definir cores, fontes, números, imagens, texto e URLs globalmente em todo o seu site.
• As predefinições de grupo de opções salvam propriedades de design específicas, como tipografia ou sombras que funcionam em diferentes tipos de módulos.
• As unidades CSS avançadas agora suportam as funções Clamp (), Calc (), Min () e Max () através da interface visual sem escrever o código.
• O sistema de interações cria pop-ups, alterna, efeitos de rolagem e efeitos de movimento do mouse sem plugins externos.

O que está por vir ...

• Os módulos WooCommerce reconstruídos do zero usando a arquitetura Divi 5 com predefinição completa e compatibilidade variável.
• O inspetor de elementos fornecerá novas ferramentas de depuração e desenvolvimento para usuários avançados.
• Da mesma forma, o módulo de carrossel em grupo pode ajudá -lo a criar um carrossel composto por grupos e, em seguida, desenvolver o conteúdo de cada slide, utilizando o conjunto completo de elementos da Divi para projetar qualquer estilo de carrossel que você desejar.

Construindo paletas que se escalam com o divi 5

Seu seletor de cores se torna uma bagunça quando você precisa de dezenas de variações de cores da sua marca. O Divi 5 corrige isso conectando cada tom a uma cor base. As etapas abaixo mostram como criar um sistema de cores escalável e sustentável.

1. Configurando sua fundação de cor primária

Abra o Visual Builder e encontre o ícone do Variable Manager na barra lateral esquerda. Clique nele para ver a base de cores do seu site. O Divi 5 vem com variáveis de cor predefinidas já esperando por você: cores primárias, secundárias, titulares e corporais.

Você não pode excluir essas variáveis predefinidas, mas pode alterar seus valores. Isso funciona perfeitamente porque essas quatro cores lidam com a maioria dos sites. Clique na variável de cor primária e insira a cor principal da sua marca. Isso se torna a base para todas as outras variações de cores do seu site.

Sua variável de cor primária deve refletir a versão mais saturada da cor da sua marca. Pense nisso como a versão pura e não diluída antes de criar fundos mais leves ou adicionar efeitos de transparência. Isso oferece o maior número de variações de construção posteriormente.

A cor secundária funciona bem para sotaques, botões ou destaques que precisam se destacar da cor da marca principal. Defina a cor da direção para algo que lida bem contra seus antecedentes. A cor do corpo normalmente permanece cinza escuro ou preto para obter legibilidade.

Essas quatro variáveis predefinidas se conectam ao sistema inteiro da Divi. Quando você constrói módulos, essas cores aparecem como opções rápidas. Altere seu primário de azul para verde aqui e todos os módulos usando as atualizações primárias da variável instantaneamente em seu site.

Evite criar variáveis personalizadas excessivas desde o início. Em vez disso, comece com essas quatro predefinições. A maioria dos sites pode precisar apenas dessas cores básicas, com variações criadas pelos controles relativos de cores do Divi 5. Mas é claro que, se precisar, você pode adicionar quantas variáveis quiser.

2. Criando tons de cores com controles HSL

Agora, adicione outra variável de cor. Desta vez, você construirá um tom a partir da sua cor primária, em vez de definir uma nova cor base. No seletor de cores, selecione sua variável de cor primária na lista.

Agora você vê três controles deslizantes: matiz, saturação e leveza. Estes controlam como sua cor base muda.

A matiz se move ao redor da roda de cores de 0 a 360 graus. Deixe isso em paz ao fazer tons da mesma cor. A saturação passa de 0% a 100% e controla a aparência da sua cor. A 0%, qualquer cor se torna cinza. Em 100%, você obtém intensidade total.

A leveza passa de 0% a 100%. Este controle deslizante cria seus tons reais. Aos 0, você obtém a forma pura da sua cor. Mova -o até 50% para tons mais leves. Solte -o para -20% para tons mais escuros.

Você pode misturar e combinar essas cores HSL para criar novas cores e variações, conforme necessário.

Vamos criar duas variações da nossa cor primária. Adicione uma variável e nomeie seu novo tom algo claro como "luz primária" ou "escuro primário". Repita esse processo para criar vários tons. Uma configuração típica usa sua base primária a 30% de leveza para fundos e tal, e escuro com -15% de leveza.

Você também pode adicionar tons tão mais leves e escuros para sua cor secundária.

3. Construindo variáveis de cores aninhadas

Você criou a luz primária e a escuridão primária na etapa 2. Agora você pode construir mais cores a partir desses tons.

Faça uma nova variável chamada “Sombra de fundo do cartão”. Escolha sua luz principal da lista. Soltar opacidade para 50%. Isso oferece uma tonalidade quase pouco para fundos de cartão. Em seguida, crie "Button Hover". Escolha o escuro primário. Soltar a leveza outros 10% para torná -la ainda mais escura. Agora, seus botões podem ser uma cor mais escura quando as pessoas pairam sobre eles.

Você também pode criar cores personalizadas a partir de suas tonalidades. Faça “sombra de texto” escolhendo o botão Passe o mouse. Defina a opacidade para 15%. Agora, sua sombra de texto se conecta ao Button Hover, que se conecta ao escuro primário, que se conecta ao primário.

Experimente o "sotaque da fronteira" da luz primária. Saturação de bump para 100% para torná -lo mais. Isso oferece uma borda brilhante que ainda corresponde à sua marca. Cada corrente fica mais longa. Todas as cinco cores remontam a uma escolha primária.

Adicione tons semelhantes à sua cor secundária para uma boa seleção de cores para selecionar.

4. Aplicando cores relativas ao seu site

Você construiu sua base de cores e criou todos esses tons. Agora vem a parte prática: implementá -los em seu site.

Abra qualquer módulo no Visual Builder. Clique em uma opção de cor para fundos, texto ou bordas. Suas variáveis de cores salvas aparecem bem dentro do seletor de cores. Você não precisará se lembrar dos nomes ou dos códigos hexadecimais.

Escolha sua cor primária para os botões principais. Escolha luz primária para os fundos da seção. Use escuro primário para bordas e detalhes sutis, como botões CTA. Cada seleção se conecta novamente ao seu sistema de cores base.

Suas variáveis de cores funcionam em todos os lugares: cabeçalhos, rodapés, layouts de blog e páginas de produtos. Os membros da sua equipe e os clientes podem escolher cores sem adivinhar. Eles vêem “luz primária” em vez de códigos hexadecimais aleatórios no seletor. Nomes claros significam menos erros e trabalho de design mais rápido. Todo mundo sabe qual cor serve a que propósito.

Este sistema baseado em variável impede a inconsistência visual. Você não terá que salvar dezenas de blues semelhantes ou se perguntar qual sombra usar para efeitos de pairar. Suas variáveis oferecem estrutura, mantendo a flexibilidade do design.

5. Atualizando as cores quando necessário

Seu cliente decide que quer a meia -noite azul em vez de apenas azul. Com o gerenciamento tradicional de cores, isso significa horas de peneirar nos módulos e atualizar manualmente cada tom ou atualizar um monte de cores globais de uma só vez. Com as cores relativas do Divi 5, você altera uma variável e tudo o mais segue.

Seus fundos de luz primários se tornam verdes claros. As fronteiras escuras primárias mudam para verde escuro. As cores do mouse de botão se ajustam a um azul mais escuro. Todos os relacionamentos aninhados que você construiu ficam intactos.

A sombra do seu cartão tinha uma opacidade de 15% da luz primária. Torna -se uma opacidade de 15% da nova luz primária verde sem você tocá -la. Sua sombra de texto se conecta ao mouse de botão, que se conecta ao escuro primário, que se conecta ao primário.

A maneira antiga significava recriar a harmonia de cores do zero sempre. Você preserva os relacionamentos enquanto muda a base e seu design permanece equilibrado.

Suas cores, suas regras

O uso inconsistente de cores mina o bom design. Você salvou tons aleatórios com nomes sem sentido, caçando módulos para atualizações e reconstruindo paletas do zero toda vez que os clientes mudam de idéia.

As cores relativas do Divi 5 terminam este pesadelo do fluxo de trabalho. Construa uma vez a partir de uma cor base e observe automaticamente todas as atualizações de variações em seu site. O sistema lida com a compatibilidade do navegador, mantém relacionamentos e mantém o seletor de cores organizado, para que você não precise brincar com o CSS.

Seu próximo projeto merece um melhor gerenciamento de cores. Faça o download do Divi 5 e veja como é o design organizado.