Farvepalettegenerator - Skab Harmoniske Farvesammensætninger

Hvad er en farvepaletgenerator?

En farvepaletgenerator er et værktøj, der opbygger et sæt matchende farver ud fra én startfarve, kaldet primærfarven. Denne farvepaletgenerator tager en primærfarve og en harmonitype og beregner derefter resten af paletten ved hjælp af regler fra farvelæren. Den understøtter de fire harmonityper komplementær, analog, triadisk og monokromatisk.

Sådan opbygger værktøjet en palet

Værktøjet konverterer primærfarven fra en hex-kode (f.eks. #3B82F6) til HSL-farvemodellen. HSL beskriver en farve med tre tal:

• Farvetone: farvens position på et 360-graders farvehjul (0° er rød, 120° er grøn, 240° er blå).
• Mætning: hvor intens farven er, fra 0 % (grå) til 100 % (ren farve).
• Lyshed: hvor tæt farven er på sort eller hvid, fra 0 % (sort) til 100 % (hvid).

Hver harmonitype forskyder farvetonen, lysheden eller begge dele og konverterer derefter resultatet tilbage til en hex-kode.

Sådan beregnes komplementærfarver

Formlen:

$h' = (h + 180) \bmod 360$

hvor h er primærfarvens farvetone i grader, og h′ er den nye farvetone. Mod-trinnet fører et resultat, der går forbi en hel omgang, tilbage på hjulet.

Mætning og lyshed forbliver de samme.

Regneeksempel: Ren blå, #0000FF, har farvetonen 240°, mætningen 100 % og lysheden 50 %. Hvis man lægger 180° til, bliver farvetonen 60°. Når farvetonen 60° konverteres tilbage til hex med samme mætning og lyshed, fås #FFFF00, som er gul. Værktøjet parrer altså blå med gul, ikke med orange.

Det kan virke forvirrende, fordi man i kunstundervisning ofte lærer et andet farvehjul, RYB-pigmenthjulet (rød-gul-blå), hvor blås modstykke er orange. Dette værktøj fungerer med det RGB-baserede HSL-farvehjul, der bruges af skærme, så de komplementære par adskiller sig fra farvehjulet til malingblanding.

Sådan beregnes analoge farver

Analoge farver ligger tæt på primærfarven på hjulet. Værktøjet genererer to farvetoner 30° fra primærfarvetonen og to farvetoner 60° fra den, alle med samme mætning og lyshed.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

hvor h er primærfarvens farvetone.

Regneeksempel: Blå, #0000FF (farvetone 240°), giver farvetonen 270° (#8000FF), farvetonen 210° (#0080FF), farvetonen 300° (#FF00FF) og farvetonen 180° (#00FFFF). Sammen med primærfarven indeholder paletten fem farver.

Sådan beregnes triadiske farver

Triadiske farver ligger 120° fra hinanden på hjulet og danner en jævnt fordelt trio med primærfarven.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Regneeksempel: Rød, #FF0000 (farvetone 0°), giver farvetonen 120° (#00FF00, grøn) og farvetonen 240° (#0000FF, blå). Sættet med tre farver består af rød, grøn og blå, de samme tre farvetoner, der bruges som primærfarver på digitale skærme.

Sådan beregnes monokromatiske farver

Monokromatiske farver bevarer den samme farvetone og mætning og ændrer kun lysheden. Værktøjet forskyder lysheden med 15 og 30 procentpoint i hver retning, begrænset til intervallet mellem 5 % og 95 %.

$l \pm 15, \qquad l \pm 30$

hvor l er primærfarvens lyshed i procentpoint.

Regneeksempel: Blå, #0000FF (lyshed 50 %), giver lysheden 65 % (#4D4DFF), lysheden 35 % (#0000B3), lysheden 80 % (#9999FF) og lysheden 20 % (#000066).

På grund af grænserne på 5 % og 95 % kan en primærfarve, der allerede er meget lys eller meget mørk, ramme den samme grænse to gange. Sort, #000000, giver lysheden 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) og igen 5 % (#0D0D0D), så én farve gentages.

Brug af værktøjet

1. Vælg en primærfarve med farvevælgeren, eller indtast en hex-kode som #3B82F6.
2. Vælg en harmonitype: komplementær, analog, triadisk eller monokromatisk.
3. Se den genererede palet. Hver farveprøve viser sin hex-kode på en knap.
4. Klik på knappen for at kopiere hex-koden, eller brug "Kopiér alle farver" til at kopiere hele paletten på én gang.

Kontrol af kontrast for tilgængelighed

Hver farveprøve viser to små mærker: ét for kontrasten mod hvid og ét for kontrasten mod sort. Værktøjet beregner et kontrastforhold ved hjælp af WCAG-formlen (retningslinjerne for tilgængeligt webindhold):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

hvor C er kontrastforholdet.

L1 er den relative luminans for den lysere farve, og L2 er den relative luminans for den mørkere farve. Luminansen beregnes ud fra farvens røde, grønne og blå værdier. Et mærke viser "AA", når forholdet er 4,5 eller højere, hvilket er WCAG-minimumskravet for tekst i normal størrelse. Det viser "!", når forholdet er under 4,5. Hvis man holder markøren over et mærke, vises det nøjagtige forhold. Sort tekst på en hvid baggrund opnår et forhold på 21, den højest mulige værdi.

Værktøjet bruger den samme kontrastregel til at vælge farven på kopieringsknappen på hver farveprøve. Det sammenligner farveprøven med sort og hvid og placerer derefter den af de to, der er lettest at læse. Skiftet sker ved en relativ luminans på omkring 0,179, det punkt hvor begge forhold er ens.

Ofte stillede spørgsmål

Hvad er en farvepaletgenerator? Det er et værktøj, der frembringer et sæt farver, som fungerer sammen, ud fra én primærfarve og en valgt harmoniregel.

Hvorfor parrer dette værktøj blå med gul i stedet for orange som komplementærfarve? Værktøjet drejer farvetonen 180° på HSL-farvehjulet, som er baseret på, hvordan skærme blander rødt, grønt og blåt lys. Det rød-gul-blå-farvehjul, man lærer i kunstundervisning, giver andre komplementære par, fordi det blander pigmenter i stedet for lys.

Hvor mange farver frembringer hver harmonitype? Komplementær frembringer i alt 2 farver (inklusive primærfarven). Triadisk frembringer 3. Analog frembringer 5. Monokromatisk frembringer 5.

Hvilken farvemodel bruger værktøjet internt? HSL (farvetone, mætning, lyshed). Det konverterer den indtastede hex-kode til HSL, udfører beregningerne og konverterer derefter resultatet tilbage til hex.

Kontrollerer værktøjet, om farverne er tilgængelige? Ja. Hver farveprøve viser, om den har tilstrækkelig kontrast mod hvid og sort til at opfylde WCAG AA-standarden for normal tekst, som kræver et forhold på mindst 4,5.

Kan jeg bruge mere end én harmonitype til et projekt? Ja. Mange designs kombinerer harmonityper, f.eks. et analogt sæt til hovedfarverne og én komplementærfarve til en knap eller fremhævelse.

Farveformater

Værktøjet skriver hver genereret farve som en sekscifret hex-kode med et #-tegn foran (f.eks. #ff0000 for rød). Hex-koder svarer direkte til røde, grønne og blå værdier fra 0 til 255 hver. Primærfarven vises præcis, som den blev indtastet, så en forkortet tresifret kode som #F00 forbliver i kort form. Tresifrede koder betyder den samme farve som den sekscifrede form: hvert ciffer fordobles, så #F00 er #FF0000. HSL er en alternativ måde at beskrive de samme farver på ved hjælp af farvetone, mætning og lyshed i stedet for mængder af rødt, grønt og blåt.