Cores que foram resolvidas, não escolhidas.

Instalar

Escolha o que combina com você. Cada um está completo — não existe passo dois.

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@noctua-world/colors/system/css/palette/ochre-balanced.css">

npm install @noctua-world/colors

/* then, in your CSS */
@import "@noctua-world/colors/palette/ochre-balanced.css";

@import "tailwindcss";
@import "@noctua-world/colors/tailwind/palette/ochre-balanced.css";

<!-- then -->
<div class="bg-surface text-fg border-border dark:bg-surface-subtle">

cargo add noctua-colors-tokens --features ochre_balanced

use noctua_colors_tokens::ochre_balanced::light::accent;
let hex = accent::SOLID.hex;

Isso é uma paleta, completa: a rampa neutra, todos os nomes semânticos e os dois modos — 29 KB na rede. O arquivo com as 39 paletas tem 741 KB, e é por isso que o pequeno existe. Use-o apenas se seus usuários trocarem de paleta em tempo de execução.

A paleta

Cada família em cada tema, nos dois modos. Toque em qualquer amostra para copiá-la — como hexadecimal, OKLCH, variável CSS, caminho Rust ou classe Tailwind.

Escalas neutras

Separada dos doze papéis funcionais e compartilhada pelos dois modos. Interfaces precisam de uma resolução de cinzas bem mais fina que doze passos, e precisam dela concentrada onde as superfícies realmente ficam — logo abaixo do branco e logo acima do preto — em vez de distribuída por igual.

As escalas fria e quente têm exatamente as mesmas luminosidades em outra temperatura — o posicionamento dos passos depende apenas da quantidade e da densidade, então gray-7 e gray-cool-7 diferem só no matiz, e uma pode substituir a outra sem mover nenhum contraste.

--nc-gray-*

--nc-gray-cool-*

--nc-gray-warm-*

Contextos

Todos os nomes que uma aplicação pode usar. Dez deles são famílias com matiz própria, porque seus significados precisam ser distinguidos sem legenda; o resto são apelidos para uma dessas, porque uma família custa uma escala inteira em cada tema, modo e gamut, e um apelido custa uma linha.

Cor sozinha não separa dez significados para um dicromata — medido, e publicado em system/reports/colour-vision.md. Acompanhe uma cor de estado com um ícone ou um rótulo.

Escalas categóricas

Matizes distribuídas ao redor do círculo, não ao longo de um caminho, em intervalos perceptuais iguais e não em ângulos iguais — uma rotação fixa pelos verdes muda muito menos a aparência que a mesma rotação pelos azuis. Cada conjunto também percorre uma faixa de luminosidade, porque a matiz é exatamente o eixo que falta a um dicromata, e a luminosidade é o que sobra.

Seis é o que um conjunto gerado consegue manter distinguível sob as três dicromacias. Um conjunto marcado como rotulado passa disso de propósito e diz isso: sua legenda precisa nomear cada série, e as margens medidas são publicadas em system/reports/colour-vision.md em vez de ignoradas.

Escalas ordenadas

Um semáforo, lido em ordem. Os passos são espaçados por distância perceptual ao longo do caminho de matiz, e não igualmente no parâmetro, e a luminosidade desce em passos iguais de índice — porque a luminosidade é o único eixo que sobra quando a matiz falta, e só o índice garante que o passo seja igual.

Translucidez

Alfa real, não um hex resolvido para compor sobre um fundo fixo. Cada passo é color-mix(in oklab, <token> N%, transparent), que é pré-multiplicado — então é o token naquela opacidade e compõe corretamente sobre qualquer coisa. Mostrado aqui sobre duas superfícies diferentes por esse motivo.

Nenhuma verificação de contraste pode auditá-los: contraste é uma propriedade de duas cores opacas, e uma camada translúcida não tem nenhum antes de ser composta.

Em contexto

Uma paleta se julga em uso, não como uma grade de quadrados. Tudo abaixo é construído com os tokens semânticos e acompanha o tema e o modo selecionados acima.

Integrar

Os artefatos gerados são versionados, então todo caminho de consumo funciona sem etapa de build: submódulo, subtree, checkout esparso, cópia simples ou URL direta.

<!-- three files: the dense grays, the semantic contract, and
     the default theme's values -->
<link rel="stylesheet" href="system/css/ramp.css">
<link rel="stylesheet" href="system/css/contexts.css">
<link rel="stylesheet" href="system/css/ochre-balanced.css">

<!-- or index.css: all of the above plus every other theme, and a name
     that survives a theme being renamed -->

.card {
  background: var(--nc-color-surface-raised);
  color: var(--nc-color-fg);
  border: 1px solid var(--nc-color-border);
}

@import "tailwindcss";
@import "../noctua-colors/system/tailwind/theme.css";

<!-- then -->
<div class="bg-surface text-fg border-border">

noctua-colors-tokens = { path = "../noctua-colors/system/rust" }

use noctua_colors_tokens::balanced::dark::accent;
let hex = accent::SOLID.hex;

import { palette } from "../noctua-colors/system/ts/index.js";

const solid = palette.themes.balanced.light.families.accent.steps[8];
solid.renditions[0].hex;

import "."

Rectangle {
    color: NoctuaDark.surface
    border.color: NoctuaDark.border
}

Por que estas cores são confiáveis