Farvepalette-generator

Sådan bruger du farvepalette-generatoren

1. Vælg en Grundfarve med farveprøven, eller skriv en kode i Grundfarvens kode (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), et CSS-navn …).
2. Vælg en Harmoni: Komplementær, Analog, Triadisk, Delt komplementær, Tetradisk (rektangel), Kvadrat eller Monokromatisk.
3. Vælg Farvehjul: HSL (klassisk) eller OKLCH (perceptuelt). Paletten opdateres, når du ændrer en indstilling, og Generér palette opdaterer den også.
4. Kopiér en enkelt farve med knappen Kopiér under dens farveprøve, eller vælg et format i Eksportér som (HEX-liste, CSS-variabler, SCSS-variabler, JSON-array eller Tailwind-farver) og brug Kopiér eller Download til hele paletten.

Hver farveprøve viser sin HEX-kode i sort eller hvid, alt efter hvad der giver bedst kontrast, og sin position i forhold til grundfarven (for eksempel +120°).

Alt foregår i din browser. Intet, du indtaster, sendes til en server.

Farveharmonierne

Farveharmonier er faste vinkler på farvehjulet. Med udgangspunkt i din grundfarvetone drejer værktøjet farvetonen og bevarer grundfarvens mætning og lysstyrke.

• Komplementær (0°, 180°): den modstående farve. Maksimal kontrast, velegnet til en handlingsknap mod en primær virksomhedsfarve.
• Analog (−60°, −30°, 0°, +30°, +60°): naboer på hjulet. Rolige, naturlige kombinationer, der fungerer godt til baggrunde og illustrationer.
• Triadisk (0°, 120°, 240°): tre jævnt fordelte farvetoner. Livlig og afbalanceret. Som regel dominerer én farve, og de to andre er accenter.
• Delt komplementær (0°, 150°, 210°): de to naboer til komplementærfarven. Stærk kontrast med mindre spænding end et rent komplementært par.
• Tetradisk (rektangel) (0°, 60°, 180°, 240°): to komplementære par. Rige paletter, der kræver én dominerende farve for at hænge sammen.
• Kvadrat (0°, 90°, 180°, 270°): fire jævnt fordelte farvetoner.
• Monokromatisk: én farvetone i fem lysstyrketrin fra mørk til lys. Ideel til UI-tilstande, diagrammer og afdæmpede designs.

HSL- eller OKLCH-hjul?

HSL (klassisk)-hjulet er det traditionelle, som de fleste designværktøjer og vejledninger bruger. Ulempen er, at lige store vinkler ikke ser lige lyse ud: gul ved 60° ser meget lysere ud end blå ved 240° med samme HSL-lysstyrke.

OKLCH (perceptuelt)-hjulet drejer farvetonen i farvemodellen Oklab, som er udviklet, så lysstyrken ser ensartet ud. Paletter bygget på den har farver med omtrent samme visuelle vægt, og det hjælper på tilgængelig kontrast. Nogle drejede farver kan ligge uden for det, en skærm kan vise. Værktøjet sænker så deres kroma en smule, så de kan vises.

Brug af den eksporterede palette

CSS-variabler giver en :root-blok med --color-1, --color-2 …, som du kan indsætte i et stylesheet. SCSS-variabler giver linjer som $color-1: …;, JSON-array giver en liste af HEX-strenge til scripts, og Tailwind-farver giver et colors-objekt med nøglerne 100, 200, 300 …, som du kan indsætte i din Tailwind-konfiguration.

Tjek tekstkontrasten, før du udgiver: en harmoni garanterer behagelige farvetoner, ikke læsbar tekst. Brug mørke eller lyse neutrale farver til brødtekst, og spar de mættede palettefarver til accenter, knapper og grafik.