RGB-farvegradientgenerator
Byg en reproducerbar farverampe, forhåndsvis hvert genererede trin og kopiér den nøjagtige HEX-sekvens til CSS, diagrammer eller design-tokens.
Begynd at bruge
RGB-farvegradientgenerator
Byg en reproducerbar farverampe, forhåndsvis hvert genererede trin og kopiér den nøjagtige HEX-sekvens til CSS, diagrammer eller design-tokens.
Hvad dette værktøj hjælper dig med
Byg en reproducerbar farverampe, forhåndsvis hvert genererede trin og kopiér den nøjagtige HEX-sekvens til CSS, diagrammer eller design-tokens.
Arbejdseksempel
#2563EB → #EC4899, 5 farver
#2563EB, #575CD7, #8956C2, #BA4FAE, #EC4899
Sådan produceres resultatet
Hver mellemfarve oprettes ved lineær interpolation af de røde, grønne og blå kanaler. Endepunkterne bevares, og de resterende farver placeres med lige store intervaller.
Nyttige arbejdsgange
- Opret ordnede diagramfarver eller heatmap-ramper
- Byg hover- og tilstandsfarver mellem to design-tokens
- Producer en kompakt palet til en baggrundsgradient
Vigtige begrænsninger
- RGB-interpolation kan se mørkere eller mudret ud mellem nogle komplementære farver.
- En glat udseende palet er ikke automatisk farveblindevenlig.
- Denne generator producerer jævnt fordelte RGB-farver; den hævder ikke perceptuel ensartethed.
Ofte stillede spørgsmål
Hvorfor kan midtpunktet se gråt eller mudret ud?
Når modsatrettede RGB-kanaler gennemsnitsberegnes, kan resultatet blive en neutral farve. Tilføj en passende mellemfarve i en multi-stop CSS-arbejdsgang, når visuel livlighed betyder noget.
Hvor mange farver skal jeg generere?
Brug det mindste antal, der matcher de forskellige tilstande eller databånd, du har brug for; kontinuerlige baggrunde kan bruge flere trin.
Antallet omfatter begge endepunkter og er som standard 10. Decimaler afkortes, og antallet begrænses til 2–100. Panelerne tilbyder HEX, RGB, HSV og HSL; interpolation bruger altid kodede RGB-kanaler afrundet til heltal. Forhåndsvisningen har en fast retning på 90°. Ekstra farvestop, alfa og valg af farverum findes ikke. Output er én HEX-værdi pr. linje, uden CSS-kode eller billeddownload.
Behandlingen foregår lokalt i din browser.