Farbpaletten- Generator

Generieren Sie professionelle Farbskalen für Design-Systeme, Tailwind CSS und Design-Tokens

Base Color

Palettenname

Algorithmus

Kontraststufe

Anzahl der Schattierungen

Über den Farbpaletten-Generator

Was ist ein Farbpaletten-Generator?

Ein Farbpaletten-Generator erstellt professionelle Farbskalen aus einer einzigen Basisfarbe. Er generiert mehrere Schattierungen (typischerweise 50-950), die harmonisch zusammenarbeiten in Design-Systemen und Konsistenz in Ihrer gesamten Anwendung gewährleisten.

Wie verwendet man die 50-950-Skala?

Die 50-950-Skala bietet 11 Schattierungen, wobei 50 die hellste und 950 die dunkelste ist. Typischerweise repräsentiert Schattierung 500 oder 600 Ihre Basisfarbe. Verwenden Sie hellere Schattierungen (50-400) für Hintergründe und subtile Elemente und dunklere Schattierungen (600-950) für Text, Rahmen und Betonung.

Was ist OKLCH?

OKLCH ist ein moderner Farbraum, der perzeptuell einheitliche Farben bietet. Im Gegensatz zu HSL stellt OKLCH sicher, dass Farben mit demselben Helligkeitswert für das menschliche Auge gleich hell erscheinen, was es ideal für die Generierung barrierefreier und visuell ausgewogener Farbpaletten macht.

Wie exportiert man für Tailwind CSS?

Verwenden Sie die Exportoption "Tailwind CSS", um eine einsatzbereite Konfiguration zu erhalten. Kopieren Sie den generierten Code in Ihre tailwind.config.js-Datei unter theme.extend.colors. Für Tailwind CSS v4 verwenden Sie das "@theme"-Exportformat mit CSS-Variablen.

Wie verwendet man CSS-Variablen?

CSS-Variablen (Custom Properties) ermöglichen es Ihnen, Farben einmal zu definieren und sie in Ihrem gesamten Stylesheet wiederzuverwenden. Exportieren Sie als "CSS-Variablen" und fügen Sie den generierten Code zu Ihrer globalen CSS-Datei hinzu. Referenzieren Sie dann Farben mit var(--primary-500) in Ihren Stilen.

Como gerar paleta para dark mode?

Para dark mode, escolha uma cor base mais escura ou use o algoritmo "Dark Mode Ready". Este algoritmo gera tons otimizados para fundos escuros, garantindo que os tons mais claros tenham contraste suficiente. Você também pode usar o Preview UI para testar sua paleta em modo escuro.

Qual a diferença entre OKLCH e HSL?

HSL (Hue, Saturation, Lightness) é um espaço de cores mais antigo onde cores com o mesmo valor de luminosidade podem parecer diferentes em brilho. OKLCH é perceptualmente uniforme, garantindo que cores com o mesmo valor de luminosidade apareçam igualmente brilhantes, resultando em paletas mais harmoniosas e acessíveis.

Como garantir acessibilidade nas cores?

Use a aba "Contraste" para verificar se suas combinações de cores atendem aos padrões WCAG AA (4.5:1) ou AAA (7:1). A ferramenta mostra automaticamente quais tons são seguros para texto branco ou preto, e fornece recomendações para garantir que seu design seja acessível para todos os usuários.

Quantos tons devo usar no meu design system?

A escala padrão de 11 tons (50-950) é ideal para a maioria dos design systems, oferecendo flexibilidade suficiente sem sobrecarregar. Para projetos menores, 9 tons podem ser suficientes. Para sistemas complexos com muitas variações, 11 tons fornecem granularidade adequada para todos os casos de uso.

Posso usar essas paletas comercialmente?

Sim! As paletas geradas são 100% livres para uso comercial e pessoal. Você tem total propriedade das cores geradas e pode usá-las em qualquer projeto, incluindo produtos comerciais, sites, aplicativos e materiais de marketing sem restrições.