O que é HSL e por que os designers devem dominá -lo

A cor é uma das ferramentas mais poderosas no kit de ferramentas de um designer, mas trabalhar com sistemas tradicionais como Hex e RGB às vezes pode parecer limitador. Esses formatos funcionam, mas eles não refletem como realmente vemos ou pensamos em cores. Precisa de uma sombra mais clara ou deseja combinar a saturação em diferentes tons? Você está deixando adivinhando.

É aí que entra a tonalidade, a saturação e a leveza (HSL). Isso torna os ajustes de cores mais visuais e previsíveis, e o Divi 5 agora suporta nativamente graças à sua versão relativa do recurso Cores e HSL. Vamos explorar como funciona e por que você vai querer dominá -lo.

Por que a maioria dos designers luta com as opções de cores

As ferramentas de cores geralmente não correspondem a como pensamos naturalmente em cores. Você vê um tom de azul que você ama, mas a única maneira de capturá -lo é através de um código hexadecimente como #4A90E2. Essas cartas e números não significam nada para o seu cérebro.

As cores hexadecimal são feitas misturando valores vermelhos, verdes e azuis. Cada par (como 4a, 90, e2) mostra quanto de cada cor é usada, de 0 a 255. Juntos, eles criam a cor final #4A90E2.

Você pode ter problemas para descobrir quais números mudar quando precisar de uma versão mais clara da sua marca azul. Você deve aumentar todos os valores de RGB igualmente? Ou ajuste apenas um canal RGB (vermelho, verde ou azul)? Os números não correspondem ao que seus olhos esperam, então você ajusta e visualiza até que pareça certo.

Os sistemas de cores tradicionais criam problemas maiores quando você trabalha em diferentes contextos. Criar variações de cores se torna pura adivinhação. Você quer cinco tons que funcionam juntos, mas não há sistema para isso. O raio #4A90E2 a #6BA3E8 pode parecer certo, ou pode parecer lavado. Você não saberá até ver.

Obter tons alterando os códigos hexadecimais não é simples. Os novos valores hexadecimais ( #6BA3E8) são cuidadosamente escolhidos à esquerda para criar um tom mais claro de #4A90E2. À direita, apenas fazer alterações nominais (#3B99E5) não ilumina a cor, mas a muda completamente.

Esse fluxo de trabalho lento e manual leva horas para ser concluído. Você ajusta os valores, verifica a visualização e ajusta novamente, lutando contra as ferramentas em vez de projetar. Sua atenção é sugada para detalhes técnicos quando deve se concentrar em como as cores fazem as pessoas se sentirem.

Muitos designers acabam evitando a experimentação de cores porque o processo parece tão desajeitado. Você fica com opções seguras ou copia paletas de outros sites. As ferramentas que devem ajudá -lo a explorar a criatividade de cores realmente limitam -as.

O problema com valores estáticos de RGB

Os valores de RGB nem sempre se comportam como você espera. O verde parece muito mais brilhante que o azul na mesma configuração, mas o sistema os trata igualmente. O RGB (128, 128, 128) é um cinza médio perfeito, mas a aparência pode variar dependendo da tela, iluminação ou perfil de cores usadas.

Quer uma versão mais clara da cor da sua marca? Você pode tentar aumentar os valores do RGB e, às vezes, obtém o que esperava. Outras vezes, você recebe algo que parece lavado e estranho. Não há como contar de antemão.

A cor azul da marca com valores de RGB aumentou igualmente em +50, resultando em uma tonalidade lavada, que não é o tom mais claro esperado. Isso mostra que a adição da mesma quantidade a cada canal RGB nem sempre produz tons de cores previsíveis ou equilibrados.

As cores RGB também mudam entre diferentes programas. Isso acontece devido a diferenças nos perfis de cores, aos motores de renderização e como os navegadores interpretam esses valores. Escolha um tom perfeito no Photoshop, copie o código hexadecimal para o seu site e ainda pode parecer um pouco diferente. As diretrizes da marca se tornam mais difíceis de aplicar quando o mesmo código de cores parece um pouco diferente entre os navegadores e as ferramentas de design.

Cada cor muda à sua maneira quando você tenta aliviar ou escurecer. Como o RGB não ajusta as cores uniformemente, alguns tons desaparecem mais rapidamente ou mudam de maneiras inesperadas. Alguns tons dessaturam mais rápido que outros à medida que a leveza aumenta. Seu azul fica cinza enquanto seu vermelho permanece vibrante. Seu roxo fica enlameado enquanto sua laranja permanece limpa.

O trabalho de cores se transforma em tentativa e erro em vez de design intencional.

Qual é o sistema de matiz, saturação e leveza (HSL)?

Tom, saturação e leveza (HSL) dividem a cor em três partes que correspondem à maneira como seu cérebro realmente pensa sobre a cor. Hue escolhe a cor base de uma roda de 360 ​​opções. A saturação controla a vibração ou o cinza essa cor. A leveza decide se está escuro, brilhante ou em algum lugar entre.

Quando você pensa: "Eu quero um verde escuro", você já está pensando nos termos da HSL. Você sabe que quer verde (matiz), provavelmente bastante rico (saturação) e do lado mais escuro (leveza).

Como os três componentes trabalham juntos

Hue funciona como uma roda de cores cortada do espectro de luz visível. As extremidades conectam vermelho ao magenta, criando um loop suave de todas as cores possíveis. Quer a laranja perfeita? Comece em vermelho (0 graus) e mova -se em direção a amarelo em torno de 30 graus.

A saturação mede a pureza da cor como uma porcentagem. Zero por cento remove toda a cor, deixando cinza. Cem por cento fornece a versão mais vívida possível. Pense na saturação como a diferença entre um sinal de néon e uma aquarela suave.

Como as cores HSL funcionam, inspiradas no gráfico na Wikipedia sobre o mesmo tópico

A leveza varia de 0% (preto puro) a 50% (neutro) a 100% (branco puro). A maioria das cores utilizável vive entre 20% e 80% de leveza. Isso corresponde a você naturalmente pensar em tornar as cores mais claras ou mais escuras.

Por que os construtores de páginas geralmente evitam HSL

A maioria dos construtores de páginas se mantém com códigos hexadecimianos e RGB por razões práticas, não porque esses sistemas funcionam melhor. Os desenvolvedores do construtor enfrentam obstáculos técnicos reais. Os usuários já conhecem códigos hexadecimianos do Photoshop e outras ferramentas de design. A conversão entre os sistemas de cores requer processamento extra.

Suportar o HSL significa criar novas interfaces e educar os usuários sobre conceitos desconhecidos, a menos que o seletor de cores HSL seja pregado perfeitamente. Essa abordagem conservadora faz sentido do ponto de vista dos negócios, mesmo que limite as possibilidades criativas.

Crie variações de cores perfeitas com os novos controles HSL da Divi 5

A HSL parece ótima em teoria, mas a teoria não cria sites. Você precisa de ferramentas que suportem essa abordagem. A maioria dos construtores de páginas o força a voltar aos códigos hexadecimal e adivinhação RGB. Divi 5 muda tudo sobre como você trabalha com a cor. Mas primeiro:

O que é Divi?

O Divi é um construtor de páginas que funciona de maneira diferente de outros construtores de páginas do WordPress. Você obtém ferramentas de design visual misturadas com controles de tipografia sérios. O editor ao vivo mostra suas alterações instantaneamente. Ajuste os tamanhos das fontes, o espaçamento da linha de ajustes e assista à sua atualização da página ali mesmo.

Você pode lançar mais de 200 módulos em qualquer lugar que desejar. Blocos de texto, manchetes e peças de conteúdo especiais são todos bem juntos.

Aqui está o que torna o Divi Special: 2000+ layouts prontos criados para negócios reais. Estamos falando de designs reais, não modelos básicos de partida. Precisa de algo para o seu restaurante? Há um layout para isso. Executando um estúdio de fotografia? Temos você coberto. Consultores e startups de tecnologia também recebem seus próprios designs.

Cada layout conhece seu setor. As cores, o espaçamento e o fluxo de conteúdo fazem sentido como seus clientes pensam e navegam.

Pegue o controle completo do site

O construtor de temas coloca todas as partes do estilo de texto do seu site em suas mãos. Crie cabeçalhos personalizados que falem o idioma da sua marca. Design páginas do blog que facilitam a leitura artigos longos. Suas páginas de erro 404 podem manter as mesmas fontes e estilo do restante do seu site.

Divi Ai traz inteligência artificial diretamente para o seu fluxo de trabalho. Gere manchetes que soam como você os escreveu. Crie uma cópia do produto que corresponda exatamente à voz da sua marca.

Ele constrói seções de página inteiras que entendem seu negócio.

Escreve trechos de código quando você precisar deles.

O Divi AI trabalha com suas imagens também dentro do construtor. Descreva o que precisa ser consertado em qualquer imagem e como ela faz essas alterações.

Até gerar fotos completamente novas sob demanda.

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

Os sites rápidos do Divi corrigem o problema da página em branco que interrompe muitos projetos antes de começarem. Sites iniciais profissionais vêm com a tipografia já configurada. Nossa equipe de design constrói esses modelos com imagens e obras de arte exclusivas que você não verá em nenhum outro lugar.

Os sites rápidos do Divi com a Divi AI também podem criar layouts personalizados com base na descrição da sua empresa. Conte sobre sua prática ou restaurante de consultoria e cria páginas relevantes com cópia apropriada para o seu setor.

Isso vai além de apenas uma estrutura de arame. Você recebe manchetes reais, cópia corporal e imagens que fazem sentido para o seu negócio. Você pode definir as fontes e as cores da marca e deixar a IA escolher para você.

Depois, tudo permanece totalmente editável, para que você possa refinar a tipografia para combinar com sua visão.

O que há de novo no Divi 5?

O Divi 5 é a próxima versão do Page Builder, atualmente em teste alfa e pronto para novos projetos de sites. Nós nos concentramos em melhorias práticas que aceleram seu trabalho diário e tornam os locais de construção mais agradáveis.

As melhores partes do Divi atuais permaneceram ficas enquanto reconstruímos todo o resto. O design de interface fresco atende ao desempenho aprimorado sob o capô. As práticas de codificação modernas alimentam todo o sistema agora.
As páginas carregam mais rápido do que antes. Os controles respondem mais rapidamente quando você clica neles. A tipografia permanece consistente em todo o seu site sem trabalho manual extra.

Aqui estão alguns destaques:

• A estrutura completa de reconstrução despeja o antigo sistema de shortcode. Tudo funciona com a arquitetura moderna baseada em blocos que os navegadores lidam muito melhor.
• O sistema Flexbox da Divi 5 oferece o controle direto para criar layouts modernos e responsivos, gerenciar facilmente o alinhamento, espaçamento e embrulho sem código personalizado.
• O sistema de cores HSL traz controles de cor que correspondem a como os designers pensam. Ajuste a tonalidade, a saturação e a leveza, em vez de adivinhar com códigos hexadecimais.
• Sete pontos de interrupção personalizados substituem o antigo limite de três tamanho. Sua tipografia parece perfeita em todos os dispositivos que seus visitantes usam.
• Funções CSS integradas significa que o trabalho calc (), clamp (), min () e max () diretamente no editor visual. Crie texto responsivo que escala naturalmente sem código.
• As variáveis ​​de design global armazenam fontes, cores e espaçamento em um só lugar. Mude sua fonte principal uma vez. Cada H1 nas atualizações do seu site automaticamente.
• O sistema de design baseado em predefinição inclui predefinições de elementos para módulos individuais, além de predefinições de grupo de opções para estilos completos de tipografia. Para manter as coisas consistentes, use -as em diferentes módulos.
• Uma nova interface do Visual Builder obtém painéis ancoráveis, janelas com guias, atalhos de teclado e uma melhor visualização de camadas com migalhas de pão. A navegação se torna muito mais fácil.
• Linhas aninhadas colocam linhas dentro de outras linhas para layouts complexos. Crie arranjos avançados de layout sem tipos de seção especial.
• Grupos de módulos combinam elementos diferentes em unidades únicas. Isso facilita o gerenciamento de layouts de texto complexos e você também pode criar módulos personalizados.
• O espaço de trabalho de vários painéis move os painéis onde quer que funcione melhor. Mantenha os controles da tipografia abertos enquanto ajustam outras coisas de design.
• Cópias de gerenciamento de atributos , pastas e redefine estilos de tipografia entre elementos. Escolha atributos específicos para transferir em vez de copiar tudo.
• Os modos de interface claro/escuro reduzem a tensão ocular durante as longas sessões de design.
• A escala de tela mostra como a tipografia fica em diferentes tamanhos de tela sem sair do editor.

Descubra todos os lançamentos de recurso Divi 5

Como criar cores HSL com Divi 5

Como mencionado, o Divi 5 reconstrói o seletor de cores do zero. A nova interface solta os códigos hexadecimais para controles HSL que funcionam como seu cérebro pensa em cores. Três controles deslizantes lidam com o trabalho:

• Hue aceita 0 a 360 graus e os valores negativos envolvem (por exemplo, -60 se torna 300). A roda de cores se conecta nas duas extremidades. Zero, 360 e 360 ​​negativo oferecem o mesmo vermelho. Precisa de uma cor complementar? Defina o tom a 180 graus do seu ponto de partida.
• A saturação funciona de 0% a 100% e controla a aparência da sua cor. Zero por cento retira toda a intensidade da cor, deixando cinza. Cem por cento oferece cores de explosão completa.
• A leveza funciona no mesmo intervalo percentual. Zero faz preto, 100% cria branco e 50% mostra a forma pura de qualquer tom que você escolhe.

A atualização dos controles ao vivo enquanto você arrasta. Aplicar botões ou atrasos de atualização não interrompem seu fluxo de trabalho.

1. Construa cores relativas a partir de cores globais

As cores relativas permitem criar novas cores com base nas cores globais existentes, ajustando os componentes HSL individuais. Inicie o gerenciador de variáveis ​​de design adicionando uma nova cor.

Usando o seletor de cores, defina sua cor base (essa pode ser a cor da marca) para corresponder à cor global primária existente.

Vamos configurar as cores secundárias usando sua mudança de matiz primária para criar cores complementares. Pegue sua cor primária, com leveza definida para 25%.

Você pode até brincar com o tom ou a saturação para criar uma nova cor como a cor secundária.

As amostras de cores mostram informações importantes rapidamente. Você pode dizer se algo usa uma variável de design e veja como os filtros HSL modificam a cor base. Esse feedback visual ajuda a entender o que está acontecendo com seus relacionamentos de cores.

Da mesma forma, crie tons mais escuros para a cor do texto e o texto corporal as cores globais, usando a cor primária como base.

Obviamente, você pode criar mais cores decorativas aqui e ainda pode inserir valores hexadecimais, RGB ou de cores nomeadas manualmente.

2. Gerencie relacionamentos variáveis ​​de design de várias camadas

As variáveis ​​de design podem se empilhar umas sobre as outras para sistemas de cores complexos. Com base no seu primário, você pode criar cores decorativas adicionais, como musgo queimado. Em seguida, reduza a opacidade do musgo queimado de construir uma cor de sombra.

Esses relacionamentos aninhados mostram como o Divi 5 lida com hierarquias de cores complexas. Quando você ajusta a cor primária, a cor de musgo queimada atualiza primeiro, acionando a cor da sombra para atualizar. Toda a cadeia permanece conectada.

Essa abordagem muda o gerenciamento de cores de adivinhação aleatória em um sistema previsível. A paleta de cores do seu site permanece harmoniosa sem ajustes manuais em todos os elementos.

3. Aplique as cores HSL no seu site

Aperte qualquer módulo de texto e abra o seletor de cores. Suas variáveis ​​salvas aparecem com indicadores. Clique em "Cor secundária" e preencherá o plano de fundo de uma seção. A mesma cor funciona para botões, fundos e fronteiras.

A tipografia funciona quando você se mantém em um tom, mas muda de leveza. As manchetes podem usar a cor primária a -25% de leveza. O texto corporal fica um pouco mais leve em -15%. Os links estão em -45%. Tudo se relaciona, mas permanece claro.

Os fundos precisam de cores de sua marca atenuadas. Empurre a leveza até 95%. Soltar saturação para 15%. Agora você tem antecedentes de marca que não combatem o conteúdo. Os botões funcionam com saturação total. Hover afirma que cutuca a leveza por um entalhe. Mesma cor, intensidade diferente.

O texto claro precisa de fundo escuro. Os números de leveza dizem o que funciona. Texto a 50% dos pares de leveza com fundos abaixo de -30% da leveza.

Seções com texto escuro em fundos leves revertem os valores. Mesmos tons, a mesma saturação. Troque os valores da leveza e pronto. E, é claro, todas essas cores mantêm seus links mesmo após serem aplicados. Altere uma variável e tudo se adapta. Fácil assim!

4. Salve suas cores HSL como predefinições reutilizáveis

Depois de criar seus módulos e aplicar as variáveis ​​de design de cores, predefine essas cores em estilos reutilizáveis. O Divi 5 oferece dois tipos predefinidos que funcionam juntos:

Predefinições de grupo de opções Controle aspectos específicos do projeto em todos os módulos. Tilize seus títulos com a variável de design de cores de texto do título. Adicione sombras à sua coluna usando musgo queimado e 50% de opacidade. Passe o mouse sobre o ícone do módulo do grupo de opções em qualquer módulo, rotule apropriadamente e salve.

O mesmo funciona para origens, espaçamento, animações e texto. Adicione um raio de borda por meio de uma variável de design numérico e configure a predefinição referenciando esta variável de número. Cada grupo de opções lida com seu próprio território de design e pode ser aplicado cruzado, ou seja, o raio da borda de uma coluna pode ser aplicado à sua chamada à ação.

Para se inscrever, vá para a opção apropriada e selecione a predefinição.

Predefinições de elementos Salve estilos completos do módulo. Estilo um módulo de botão com sua cor secundária a 80% de leveza. Clique no seletor predefinido no canto superior direito das configurações do módulo. Crie uma nova predefinição chamada "Botão de cor da marca". Isso salva todas as configurações do botão, incluindo suas cores HSL.

Agora, quando você adiciona um novo botão, aplique esta predefinição e ele herda todo o estilo. Para cortar seu trabalho para você, pegue qualquer predefinição personalizada (grupo ou elemento de opções) que você criou e clique no ícone de estrela ao lado dele. Essa predefinição se torna o padrão para todas as novas instâncias desse elemento ou grupo de opções.

Seus relacionamentos HSL permanecem intactos dentro de predefinições. Quando você atualiza uma cor, todos os módulos e predefinidos também usando essas atualizações de cores também. Construa bibliotecas predefinidas para seções claras, seções escuras e momentos especiais da marca. Os valores da HSL viajam a cada predefinição, mantendo seu sistema de cores consistentes entre os projetos.

Construa sistemas de cores para seus sites com Divi 5

Trabalho de cores usado para levar dias. Você se mexe com códigos hexadecimianos, copia valores entre os programas e rezaria algo decente.

HSL faz com que a cor funcione divertida novamente. Você vê uma sombra que ama e sabe exatamente como recriá -la. Hue escolhe a cor, a saturação controla o quão vívido é e a leveza a torna mais brilhante ou mais escura. Agora, a atualização da marca leva minutos em vez de horas.

Este é um controle de design real. Divi 5 faz acontecer hoje.