Gerador de paleta de cores de 11 etapas para Tailwind CSS e API

 (tints.dev)
5 pontos por GN⁺ 2024-02-03 | 1 comentários | Compartilhar no WhatsApp
  • É possível começar o trabalho de paleta do Tailwind CSS com um único valor Hex e expandi-lo rapidamente para 11 etapas de cor, de 50 a 950
  • O ponto de referência padrão é 500, mas, se necessário, é possível definir outra posição no intervalo de 50 a 950 como cor-base
  • Ajustando saturação e Hue, é possível criar uma paleta mais natural do que com simples variações de brilho
  • Dependendo dos valores mínimo e máximo de Lightness/Luminance e da troca de modo, a distribuição das cores em direção ao branco e ao preto muda
  • No momento, a API se concentra em retornar paletas com base em um valor Hex padrão, e ainda não oferece opções de ajuste HSL

Criando uma paleta Tailwind CSS

  • O Palette Creator recebe um valor de cor hexadecimal válido como valor inicial e gera uma paleta de 11 etapas para Tailwind CSS
  • O ponto de referência padrão é 500, mas pode ser alterado para outro ponto entre 50 e 950, para colocar a cor desejada no centro da paleta

  • Como o ajuste de cores funciona

    • Cores com saturação de 100% podem receber Hue Shift para cima ou para baixo, adicionando variação à paleta
    • Para cores-base com baixa saturação, aumentar a Saturation nas extremidades gera uma paleta mais interessante
    • Ajustando Minimum/Maximum Lightness ou Luminance, é possível expandir as demais cores até os extremos de branco e preto
    • Ao alternar entre Lightness e Luminance, a distribuição das cores nas extremidades é gerada de forma diferente
    • Os princípios de design de cores foram inspirados em Adam Wathan e Steve Schoger no livro Refactoring UI, e o livro não recomenda o uso de ferramentas automatizadas
    • Esta ferramenta tem como foco acelerar o início da criação de uma nova paleta, em vez de fornecer uma resposta final pronta

API e uso da saída

  • É possível obter vários conjuntos de paletas com a Palette API
  • Pode ser útil em ferramentas de design que precisam criar uma paleta de 50 a 950 a partir de um único valor Hex
  • Atualmente, a API retorna apenas paletas baseadas em um valor Hex padrão, e não oferece opções de ajuste HSL
  • A paleta gerada é fornecida em um formato que pode ser colado em CSS para configuração do Tailwind
    • O exemplo de saída inclui, dentro de um bloco @theme, variáveis de cor OKLCH de --color-yellow-50 até --color-yellow-950

Leituras relacionadas

1 comentários

 
GN⁺ 2024-02-03
Comentários do Hacker News

  • Seria ótimo se ferramentas assim já viessem com uma experiência de desenvolvimento voltada à acessibilidade como padrão
    A ideia é que, ao definir uma paleta de cores, só de olhar os nomes das cores já dê para saber se a combinação é acessível
    Por exemplo, no sistema de design USWDS dá para saber que blue-30 sobre gray-80 é acessível (WCAG AA), porque a diferença entre os dois valores é de pelo menos 50
    Escrevi sobre esse conceito um tanto restrito no passado: https://darekkay.com/blog/accessible-color-palette/

    • Embora eu tenha chamado isso de um conceito restrito, acho que no web design isso deveria ser um elemento prioritário
      Todo mundo em algum momento vai passar por alguma deficiência, permanente ou temporária, e até ferramentas excelentes como o Streamlit muitas vezes não podem ser usadas por causa de acessibilidade
    • Radix Colors já tem muitos recursos de acessibilidade embutidos
      https://www.radix-ui.com/colors
      Trabalho na WorkOS, e o Radix é um projeto open source que mantemos
    • A Stripe também publicou sobre seu sistema de cores acessível: https://stripe.com/blog/accessible-color-systems
      Mas ainda não conheço bem uma ferramenta que use esse conceito para gerar novas paletas
    • O Material 3, uma especificação bem grande usada pelo Google, também tem um sistema de cores que funciona assim

  • Gosto de brincar com cores, e essa também é uma boa ferramenta
    Outras alternativas legais são https://adevade.github.io/color-scheme-generator/, https://colorcolor.in não gera Tailwind diretamente, mas é bem feito, e também http://colormind.io e https://uicolors.app/create

    • Faz tempo que procuro a ferramenta de cores perfeita, mas ainda não encontrei
      Quero algo que consiga trabalhar nesse nível de sofisticação que esta biblioteca mostra: https://colorjs.io/
    • Queria recomendar https://github.com/ardov/huetone (https://huetone.ardov.me/)
      Ela tem uma UI única que não vi em ferramentas parecidas, e pelo gráfico dá para ver o L/C/H relativo de todas as cores da paleta
      Isso facilita criar uma paleta mais consistente
    • Gosto de https://huemint.com/
    • Hoje em dia o site parece carregar um pouco devagar, mas gosto do https://www.colourlovers.com há muito tempo
    • Boa lista
      Acrescentando alguns links mais gerais sobre teoria das cores que uso com frequência, https://paletton.com/ permite criar paletas baseadas em teoria das cores e gerar o esquema completo
      https://medialab.github.io/iwanthue/ usa k-means para separar cores, sendo bom para cores de gráficos e para garantir contraste

  • Fiz um recentemente
    É bem mais simples e reflete fortemente meu gosto, mas consegue gerar configuração do Tailwind: https://ghola.dev funciona melhor no desktop ou no iPad
    Também tem um texto longo sobre como foi feito com web components: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

    • Gostei da ferramenta que você fez
      Chamar algo que lida com apenas uma cor por vez de gerador de paleta não parece certo, ou pelo menos não é isso que eu procuro
      Preciso de um gerador de paleta que monte um conjunto de cores para um app, e essa ferramenta está mais próxima disso

  • Excelente
    Comecei com um único logo e em menos de um minuto fiz uma paleta melhor do que a que eu mesmo levei 30 minutos para montar da última vez

  • Gostei
    Fico pensando qual seria a forma mais fácil de sincronizar essas cores com o Figma
    Talvez designers profissionais usem algum plugin para gerar essas cores e exportar para Tailwind

    • Você está procurando um plugin desse tipo? https://github.com/croma-app/huehive-figma-plugin
    • Figma Tokens é uma abordagem decente
    • O jeito como o Figma lida com cores é tão frustrante e estranho que eu já nem me preocupo mais com isso
      Tentei usar direito algumas vezes, mas é tudo tão manual e trabalhoso que acabei desistindo

  • Boa ferramenta
    Outra abordagem que uso na minha base de código é definir a paleta de cores com variáveis CSS, e fazer a configuração do Tailwind apontar para essas variáveis
    Assim dá para encaixar diferentes temas de cores em tempo de execução

  • Ferramenta bem útil
    Gero uma paleta de cores a partir de uma única cor e depois coloco o resultado no https://palettte.app para ajustar manualmente cada cor

  • Fiquei curioso com o exemplo de brand na demo; será que as pessoas costumam usar assim em configurações normais?
    Eu imaginava que usariam modificando as cores padrão ou criando novas variáveis como primary e secondary

    • Sou a pessoa que fez o tints.dev
      O conjunto de cores brand é a cor que uso no meu blog simeongriggs.dev, e na prática coloquei o valor de amostra 500 nessa ferramenta para gerar o restante

  • Parece útil para gradientes
    Acho estranho ninguém mencionar o Paletton, porque é minha ferramenta principal na hora de escolher cores: https://paletton.com/
    Se você começa pela cor base, também consegue gradientes que seguem para cores adjacentes dentro da paleta
    Harmonia triádica e harmonia tetrádica são especialmente úteis

  • Eu estava procurando ativamente uma forma de aplicar deslocamento de cor, e mesmo assim levei um bom tempo para descobrir como fazer isso