Cor para o desafiador de cor

Leia isto se você chupar a escolha de cores

Ferdy Christant em Ferdy Christant Seg. 20 de abr · 27 min ler

Introdução

Em vez de colocar o pessoal da Web no bucket Developer ou Designer , acho que muitas pessoas se encontrariam em algum lugar na zona cinzenta, não nos extremos.

Eu certamente me sinto assim comigo mesmo. Eu sou principalmente um desenvolvedor, mas com algumas tendências criativas (eu costumava desenhar muito quando era mais jovem e sou apaixonada por fotografia). Também gosto de pensar que adquiri um pouco de gosto pelo bom design. Significado, eu posso distinguir um bom design de design ruim.

Mas eu definitivamente estou aquém das habilidades de um designer profissional educado e / ou talentoso para criar um bom design. Eles operam em outro nível. Isso significa que, nos casos em que tenho a tarefa de projetar, preciso compensar. Finja, basicamente.

Quando você não tem habilidades específicas de design ou talento, é muito possível compensar isso, aqui estão algumas estratégias:

  • Engenheiro isso . Vários aspectos do design estão sujeitos a regras e diretrizes, e todos podem ser aprendidos. Exemplos que eu posso imaginar são em layout e tipografia, há várias práticas recomendadas que podem ser reutilizadas. Parte do design é matemática.
  • Força bruta . Embora ineficiente, você pode continuar reiterando até ter um design que seja bom. A abordagem pura determinação.
  • Roube ou reutilize . De preferência de forma ética. O método direto. Isso pode significar reutilizar todo um framework (digamos, Bootstrap), uma abordagem, ou inspirar-se no grande trabalho de outros, e depois ajustá-lo para torná-lo seu.

Portanto, há maneiras de preencher a lacuna, mas existe esse aspecto do design que não consigo dominar ou falsificar: a cor . A cor tem que ser o aspecto mais artístico e emocional do design, dificultando a replicação. E não é apenas engenhoso, é também tecnicamente complexo. A teoria das cores é difícil e cheia de armadilhas.

Colocação mais simples: quando tenho a tarefa de escolher uma paleta de cores ou esquema, normalmente faço uma iteração para sempre e ainda assim ficarei insatisfeito com o resultado. Estou ciente das muitas ferramentas que auxiliam nessa tarefa, mas esses resultados ainda costumam falhar quando usados no mundo real.

Em outras palavras, sou cor-desafiado . E se você também for, talvez este artigo tenha valor.

Devo me incomodar lendo isso?

Este vai ser um extenso artigo com uma sobrecarga de texto e cor. É melhor eu tentar vender para você agora, deixando você decidir se vale a pena. Aqui estão as principais partes:

  • Capítulo I:
    O lançamento de uma paleta de cores grande, muito utilizável e pronta para usar , atraente, bem comportada e extensível. É baseado no trabalho fantástico feito pelo criador do Open Color , com algumas extensões adicionadas.
  • Capítulo II:
    Uma parte teórica sobre como julgar e classificar paletas de cores por várias características, fortalecendo nossa compreensão da cor.
  • Capítulo III:
    Discutindo as extensões que adicionei ao Open Color e por quê.
  • Capítulo IV:
    Provavelmente, a parte mais interessante do artigo: extrair o valor ideal da paleta de cores por meio de muitos testes avançados do mundo real e ótimos ajudantes para utilizar a paleta de cores da melhor maneira possível.
  • Capítulo V:
    Uma explicação das técnicas para estender ou substituir a paleta com seus próprios matizes, de uma maneira que mantenha a integridade da paleta inteira intacta.

Capítulo I: A paleta de cores

Para aqueles que querem valor imediato, vamos primeiro lançar o resultado final, uma grande paleta de 234 cores (18 tons x 13 passos de luminosidade). É uma paleta de cores intencionalmente grande e ampla, de modo que sua aplicabilidade potencial seja ampla. Ele pode ser usado para design da web e de aplicativos, ilustração e possivelmente também para impressão.

Todos os matizes e passos de luminosidade na paleta

Um rápido explicador sobre como ler a paleta:

Um único matiz na paleta

Um único matiz tem 13 etapas (explicarei esse número estranho mais tarde) em sua forma mais ampla, mas também estou compartilhando conjuntos compactados de paletas de 7 e 5 etapas. Cada cor tem um nome, numerado de alta a baixa luminosidade. O código hexadecimal é compartilhado para cada tom. O número abaixo do valor hexadecimal é o valor da luminosidade que indica o quanto a cor é percebida. A luminosidade não deve ser confundida com o brilho ou a luminosidade encontrados no sistema de cores HSL. O L na HSL não representa a luminosidade experimentada pela visão humana.

Abaixo de cada linha de cor, você encontrará uma faixa de gradiente que executa um gradiente suave com base nas 13 etapas. Isso permite duas coisas:

  • No caso ímpar, em que você precisa de um valor intermediário, você pode pegá-lo da banda e fazer isso de uma maneira que respeite a curva.
  • É uma ótima soma de verificação para a consistência e integridade da paleta. Se houver algum salto estranho em matiz, saturação ou luminosidade de um passo para o outro, a banda não aparecerá suave.

Eu não sei sobre você, mas a adição da banda de gradiente para mim cria a ilusão de que os tons de cores principais também são um gradiente. Eu posso garantir que eles são cores sólidas. A cor é estranha. Ou cérebros são.

Aqui está a paleta de 7 etapas:

Essa paleta menor tem o mesmo valor inicial e final, apenas menos etapas entre elas. Aqui está o sistema de 5 etapas ainda mais compactado:

Agora, vamos compartilhar essa paleta de maneiras mais úteis, permitindo uma fácil integração em seu fluxo de trabalho. Por exemplo, no Photoshop:

Eu criei uma repro aqui . A paleta é compartilhada das seguintes maneiras:

  • .aco: Photoshop
  • .afpalette: Designer de afinidade
  • .ase: formato de troca da Adobe
  • .json: para scripts
  • .php: formato da matriz PHP
  • .png: captura de tela de alta resolução
  • .scss: para integração com o (S) CSS
  • .Esketchpalette: Sketch (não testei, não tenho um Mac)

Tome e use como quiser. Eu quero colocar um aviso gigante aqui . A reprodução não deve ser vista como um fork do Open Color. Eu simplesmente precisava de um lugar para armazenar esses recursos publicamente. Eu chamei de “Colar” porque eu precisava nomear alguma coisa. Não é uma reprodução que vou manter, é um dump único de ativos para complementar este artigo.

Da mesma forma, eu não reivindico qualquer propriedade ou crédito para o resultado final, o trabalho realmente duro foi feito por @ Yeun of Open Color . Certifique-se de agradecer-lhe se você usar isso. Este artigo leva seu trabalho fundamental e:

  • Estende-o para torná-lo adequado para uso mais amplo (mais etapas, mais matizes)
  • Discute métodos avançados para utilizar a paleta
  • Discute maneiras de adicionar seus próprios matizes de maneira consistente

Talvez algumas dessas idéias voltem ao Open Color, talvez não. Em qualquer caso, o Open Color deve ser visto como o projeto ativo e o crédito pertence a ele.

Capítulo II: Características de uma paleta de cores

Com a paleta compartilhando fora do caminho, vamos agora discutir o que contribui para uma boa paleta de cores. Descobriremos que isso depende do uso pretendido e também descobriremos que é impossível cumprir todas as metas, pois elas podem estar em desacordo umas com as outras.

Mais uma vez preciso elogiar o trabalho dos outros. Muito deste capítulo e meu novo entendimento dos sistemas de cores é baseado neste artigo, que considero leitura obrigatória :

Projetando Cores Sistemáticas

Como tornar rampas de cor compatíveis com as normas WCAG 2.1, flexíveis, para um sistema de design

uxplanet.org