Paleta de cores Uchū para entusiastas da internet

 (uchu.style)
2 pontos por GN⁺ 2025-02-17 | 1 comentários | Compartilhar no WhatsApp
  • Uchū é uma paleta de cores para entusiastas da internet criada por NetOperator Wibby, apresentada com foco em uma lista de valores oklch() em vez de nomes de cores
  • A paleta é dividida em 8 conjuntos de cores, e cada conjunto é composto por 9 níveis de valores oklch(L C H)
  • O primeiro conjunto é uma série de baixa saturação, com croma no nível de 0.002~0.004, e os demais parecem corresponder, pelo ângulo de matiz, a tons de vermelho, rosa, roxo, azul, verde, amarelo e laranja
  • Não são fornecidos nomes para as cores, exemplos de aplicação, amostras de código, forma de download nem informações de licença
  • Para usar em um sistema de design ou tema, é preciso copiar e aplicar diretamente os valores OKLCH fornecidos

Forma básica da paleta Uchū

  • Uchū é uma paleta de cores apresentada com a descrição “the color palette for internet lovers”
  • O autor aparece como NetOperator Wibby
  • A paleta é centrada mais na lista de valores oklch() do que em texto explicativo, e cada valor define uma cor com três números correspondentes a luminosidade, croma e ângulo de matiz

Como a paleta é organizada

  • A paleta completa é composta por 8 conjuntos de cores
  • Cada conjunto contém 9 valores oklch()
  • A marcação de níveis aparece em cada conjunto de ### 2 até ### 9, enquanto o primeiro valor é colocado antes, sem um título numérico separado

Faixas de OKLCH por conjunto de cores

  • Série de baixa saturação

    • Os valores de croma ficam no nível de 0.002~0.004
    • Valor inicial: oklch(0.9557 0.003 286.35)
    • Valor final: oklch(0.5682 0.004 247.89)

  • Ângulos de matiz que parecem vermelho e rosa

    • O segundo conjunto fica em uma faixa de ângulo de matiz de aproximadamente 3~19
      • Valor inicial: oklch(0.8898 0.052 3.28)
      • Valor final: oklch(0.4117 0.157 16.58)
    • O terceiro conjunto fica em uma faixa de ângulo de matiz de aproximadamente 352~355
      • Valor inicial: oklch(0.958 0.023 354.27)
      • Valor final: oklch(0.5768 0.074 353.14)

  • Ângulos de matiz que parecem roxo e azul

    • O quarto conjunto fica em uma faixa de ângulo de matiz de aproximadamente 298~305
      • Valor inicial: oklch(0.891 0.046 305.24)
      • Valor final: oklch(0.3601 0.145 298.35)
    • O quinto conjunto fica em uma faixa de ângulo de matiz de aproximadamente 258~260
      • Valor inicial: oklch(0.8966 0.046 260.67)
      • Valor final: oklch(0.3953 0.15 259.87)

  • Ângulos de matiz que parecem verde, amarelo e laranja

    • O sexto conjunto fica em uma faixa de ângulo de matiz de aproximadamente 144~149
      • Valor inicial: oklch(0.9396 0.05 148.74)
      • Valor final: oklch(0.5277 0.138 145.41)
    • O sétimo conjunto fica em uma faixa de ângulo de matiz de aproximadamente 91~92
      • Valor inicial: oklch(0.9705 0.039 91.2)
      • Valor final: oklch(0.6229 0.097 91.9)
    • O oitavo conjunto fica em uma faixa de ângulo de matiz de aproximadamente 51~57
      • Valor inicial: oklch(0.9383 0.037 56.93)
      • Valor final: oklch(0.5249 0.113 51.98)

Pontos a verificar ao usar

  • Não são fornecidos nomes para cada cor em cada conjunto
  • Não há exemplos de aplicação em temas, amostras de código, forma de download nem informações de licença
  • Na prática, o usuário precisa copiar diretamente os valores oklch() da lista para usá-los na composição da paleta ou do tema

Leituras relacionadas

1 comentários

 
GN⁺ 2025-02-17
Comentários do Hacker News

  • Hoje descobri oklch()
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

  • Fico curioso por que usaram a palavra uchu
    Hoje em dia parece que quase tudo — esquemas de cores, modelos de IA, startups, ferramentas, apps etc. — recebe como nome uma palavra japonesa aleatória, e não sei por quê

    • Não quero soar negativo, mas agora parece que isso está sendo usado um pouco em excesso
      Curiosamente, no Japão acontece a mesma coisa com palavras em inglês que parecem escolhidas aleatoriamente, então não é algo totalmente sem precedentes
    • Fico me perguntando se nomes de produtos como Galaxy ou Forester também incomodam
      Reclamar de nomes de produtos de uma só palavra parece bem estranho. Não sei se o problema é o idioma de origem da palavra, se é inveja por usarem uma palavra de duas sílabas em vez de uma mais longa como Navigator, ou se incomoda por não ser uma sílaba só como Chrome
      Será que Ubuntu não tem problema por não ser japonês, ou a ideia é aposentar nomes como Twitter e Yahoo também e fazer tudo virar uma única letra como X?
    • “uchū” significa universo em japonês
      Como uso este tema em todos os projetos, ele é, por assim dizer, universal
      Não sei quanto aos outros casos, mas pessoalmente gosto de estilo e estética japoneses, então, se uma palavra combina, tento usá-la
    • Palavras curtas e pronunciáveis são raras
      Se você quer um nome de projeto de 4 a 6 letras, palavras japonesas muitas vezes atendem bem a esses critérios, e a cultura japonesa também é muito difundida no exterior
    • À medida que as gerações mais jovens cresceram mais familiarizadas com a cultura japonesa, como anime, videogames e referências culturais não retrô, parece que elas dão nomes com palavras que soam agradáveis

  • Fico curioso se fizeram uma análise de legibilidade com isso
    O contraste entre fundo e primeiro plano parece baixo demais para ser confortável em leituras longas

    • Hoje em dia parece que há foco demais em legibilidade
      Surgiu uma nova equipe no trabalho que está fazendo todo mundo medir todo contraste para pessoas com dificuldades de leitura. Dizem que o contraste precisa ser de mais de 80%, que o tamanho da fonte também tem que ser enorme, que não se pode mudar o tema e, “por segurança”, também proíbem instalar plugins como o Dark Reader
      O problema é que o resultado fica muito feio e cansativo para os olhos de outras pessoas. Agora que nem posso usar o Dark Reader, ficou pior. Tudo parece em negrito e gritando, então também fica mais difícil distinguir o que é importante. Não comprei uma tela de 4,7 milhões de cores para ver só 10 cores. Contraste muito alto costuma me dar dor de cabeça, então prefiro temas mais suaves, como Solarized
      Os 0,5% dos funcionários com problemas de visão poderiam ser suficientemente ajudados por plugins de navegador que cada um ajusta conforme seu problema. Dificuldades visuais não são todas iguais. Algumas pessoas não enxergam certas combinações de cores, então elas precisam ser evitadas ou corrigidas; outras enxergam embaçado, então precisam de texto grande, talvez muito maior do que o atual. Para quem não enxerga nada, isso também não ajuda: é preciso um display braille e bons textos alternativos para imagens. Mas a empresa parece não se importar com isso, só com o que salta aos olhos
      Antes havia uma assinatura de e-mail discreta, mas agora ela vem com cores de jardim de infância e letras gigantes, muito invasiva. E é uma informação que ninguém lê mesmo. Havia um motivo para ela ser menos destacada: você sabia que estava ali se precisasse, mas entendia que não era uma informação importante. Se realmente quisesse ler, podia selecionar o texto, ou mudar para o modo de texto simples
      Não sou nem um pouco contra suporte a pessoas com deficiência, mas gostaria de ver uma abordagem mais personalizada. Não gosto desse jeito de tentar consertar uma coisa e acabar estragando para todo o resto. Também não uso meu celular no modo de letras gigantes, mas acho ótimo que esse recurso exista para quem precisa
    • Quando você fala de contraste, fico curioso se está se referindo à área das amostras de cores
      Se for isso, os pequenos valores de cor servem mais para uso visual do que para transmitir informação, e no repositório os valores estão em um formato fácil de ler. Por exemplo, você provavelmente não gostaria de ler mais de um parágrafo de texto laranja-claro sobre um fundo laranja

  • A expressão esquema de cores é confusa
    Para mim, um esquema de cores significa um pequeno conjunto de cores que combinam bem entre si, como o Monokai. Os usos também são claros e fáceis, como realce de sintaxe em um editor de código
    Isto parece uma lista com muitas cores de uma mesma família monocromática, e não sei como deveria ser usado. Não estou tentando criticar; estou realmente confuso

    • Isto é parecido com a forma como o Tailwind fornece uma paleta de cores completa para uso em desenvolvimento de UI
      Ter vários níveis de luminosidade da mesma cor dá flexibilidade para criar elementos de UI que parecem da mesma família e combinam bem entre si. Por exemplo, se você quiser usar uma borda azul em um card azul, pode usar um azul mais claro no fundo e um azul mais escuro na borda
      Em vez de aplicar transparência a uma borda preta, cada nível de luminosidade desta paleta foi escolhido individualmente para harmonizar dentro da mesma família de cores. Outra vantagem é que dá para garantir que cada “nível de luminosidade” seja consistente entre as cores. Um cinza 50% fica em uma posição parecida com um vermelho 50%
      De forma mais geral, cada cor aqui foi projetada para combinar bem com todas as outras. Não pode ser uma cor qualquer; elas precisam estar em harmonia
    • Seria mais preciso chamar de paleta de cores
    • Pessoalmente, também acho que deveria ter sido chamado de “paleta de cores”. Exemplos parecidos são estes
      Open Color do OpenProps https://yeun.github.io/open-color/
      Paleta de cores do Tailwind https://tailwindcss.com/docs/colors
      Do ponto de vista de design, uma paleta de cores pode ser muito difícil de escolher mantendo boas pontuações de contraste e outros critérios de acessibilidade. Paletas padronizadas são úteis porque fazem esse trabalho por você. Uso com frequência as paletas OC ou Tailwind, mas muitas vezes faltam as famílias de cores que eu quero, então ter três opções como esta é bem bom
    • Também não entendo como, na prática, uma lista de caixas de cores recebe 476 pontos

  • Esta paleta não parece perceptualmente uniforme
    Ou seja, a razão de contraste entre cada tonalidade e branco/preto não é a mesma em todas as cores. Fico curioso se ela foi analisada em https://huetone.ardov.me/

  • Fico me perguntando por que isto é um esquema de cores para entusiastas da internet

    • Eu gosto da internet e também gosto de cores bonitas. Não deve ser só eu, né? ;)

  • Comparando os números entre si, o azul parece muito mais vivo e opaco do que as outras cores
    Ao comparar todos os 5 níveis lado a lado, o azul salta como algo elétrico, enquanto as outras cores parecem ter uma tonalização aplicada
    Claro que isso depende da gama do monitor e do perfil de cores, mas fico curioso se a intenção era fazer com que cada número parecesse uma tonalização parecida da cor pura. Do jeito que está, parece mais um sistema parecido com RGB/CMYK, só com outra notação, do que uma implementação do Munsell Color System que cria equivalência perceptual por meio de escalonamento da intensidade da cor

    • Não necessariamente
      Não cheguei a essas cores por nenhuma fórmula; apenas fui ajustando visualmente até ficar bom para mim

  • Estou vendo no Firefox para Android e só aparece texto preto em fundo branco
    Imagino que deveria haver mais coisas, certo?

    • Usa aninhamento de CSS[1]. Pense em algo como SCSS. Para suporte completo, é necessário Firefox 117 e Chrome 120[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • Acontece o mesmo no Firefox no desktop Linux, mesmo com JavaScript ativado
      Atualização: pelo visto usa Oklab/oklch() [1], que dizem funcionar a partir do Firefox 113, mas parece não funcionar no 115. Ou talvez alguma outra coisa esteja quebrando
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • Se ao rolar para baixo você não vê vários conjuntos de amostras de cores agrupados por luminosidade, então não está vendo corretamente
      No meu Firefox funciona bem, mas não uso Android
    • Acontece o mesmo no Firefox 50 no Linux
      Não sei como chamar pessoas que ignoram compatibilidade retroativa. Meu site funciona até no IE6, se for necessário
    • Acontece o mesmo no Chromium no PC

  • Não uso Tailwind, mas vinha usando a paleta do Tailwind para esse tipo de coisa
    https://tailwindcss.com/docs/colors

    • É preciso tomar cuidado. O Tailwind mudou as cores de novo entre as versões 3 e 4, e essa já é a terceira vez
      Para ser bem claro, atualizar uma biblioteca CSS para a versão mais recente não deveria mudar sutilmente o tema de cores do site inteiro, mas na prática é isso que acontece
      Por isso comecei a migrar para Radix Colors

  • Talvez não exista uma exigência forte de que a saturação seja consistente entre as cores, mas, para o meu gosto, parece um pouco irregular
    O amarelo escuro e o laranja parecem um pouco desbotados demais
    A paleta como um todo é boa. Gosto especialmente do fato de terem evitado o vermelho “vermelhão”. Acho que é uma cor que muitos designers detestam. Gostaria de ver algum estudo sobre a relação entre a cor dos olhos e a preferência por cores
    Vai numa direção parecida, mas com mais famílias de cores: https://www.s-ings.com/scratchpad/oklch-smooth/

    • Amarelo e laranja são definitivamente complicados
      Obrigado pelo link; essas famílias de cores parecem realmente ótimas