Färgpalettgenerator

Så använder du färgpalettgeneratorn

1. Välj en Basfärg med färgrutan, eller skriv valfri kod i Basfärgens kod (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), ett CSS-namn …).
2. Välj en Harmoni: Komplementär, Analog, Triadisk, Delad komplementär, Tetradisk (rektangel), Kvadrat eller Monokrom.
3. Välj Färghjul: HSL (klassiskt) eller OKLCH (perceptuellt). Paletten uppdateras när du ändrar ett alternativ; Generera palett uppdaterar den också.
4. Kopiera en enskild färg med knappen Kopiera under dess ruta, eller välj ett format i Exportera som (HEX-lista, CSS-variabler, SCSS-variabler, JSON-array eller Tailwind-färger) och använd Kopiera eller Ladda ner för hela paletten.

Varje färgruta visar sin HEX-kod i svart eller vitt, beroende på vad som ger bäst kontrast, och sin position i förhållande till basfärgen (till exempel +120°).

Färgharmonierna

Färgharmonier är fasta vinklar på färghjulet. Med din basnyans som utgångspunkt vrider verktyget nyansen och behåller basfärgens mättnad och ljushet.

• Komplementär (0°, 180°): den motsatta färgen. Maximal kontrast, perfekt för en knapp som ska locka till handling mot en huvudsaklig profilfärg.
• Analog (−60°, −30°, 0°, +30°, +60°): grannar på hjulet. Lugna, naturliga kombinationer som fungerar bra för bakgrunder och illustrationer.
• Triadisk (0°, 120°, 240°): tre jämnt fördelade nyanser. Livfullt och balanserat; oftast dominerar en färg och de två andra är accentfärger.
• Delad komplementär (0°, 150°, 210°): komplementfärgens två grannar. Stark kontrast med mindre spänning än ett rent komplementärt par.
• Tetradisk (rektangel) (0°, 60°, 180°, 240°): två komplementära par. Rika paletter som behöver en dominerande färg för att hålla ihop.
• Kvadrat (0°, 90°, 180°, 270°): fyra jämnt fördelade nyanser.
• Monokrom: en nyans i fem ljushetssteg, från mörk till ljus. Idealisk för lägen i gränssnitt, diagram och diskret design.

HSL- eller OKLCH-hjul?

Hjulet HSL (klassiskt) är det traditionella som de flesta designverktyg och guider använder. Nackdelen är att lika vinklar inte ser lika ljusa ut: gult vid 60° ser mycket ljusare ut än blått vid 240° med samma HSL-ljushet.

Hjulet OKLCH (perceptuellt) vrider nyansen i färgmodellen Oklab, som är utformad så att ljusheten upplevs som jämn. Paletter som bygger på den har färger med liknande visuell tyngd, vilket underlättar tillgänglig kontrast. Vissa vridna färger kan hamna utanför vad en skärm kan visa; verktyget sänker då deras kroma något så att de går att visa.

Använda den exporterade paletten

CSS-variabler ger ett :root-block med --color-1, --color-2 … som du kan klistra in i en stilmall. SCSS-variabler ger rader som $color-1: …;, JSON-array ger en lista med HEX-strängar för skript, och Tailwind-färger ger ett colors-objekt med nycklarna 100, 200, 300 … att klistra in i din Tailwind-konfiguration.

Kontrollera textkontrasten innan du publicerar: en harmoni garanterar behagliga nyanser, inte läsbar text. Använd mörka eller ljusa neutrala färger för brödtext och spara de mättade palettfärgerna till accenter, knappar och grafik.