Palettgenerator för Material Design
Skapa vackra färgpaletter baserade på Googles riktlinjer för Material Design. Välj primär- och accentfärg för att generera ett komplett tema.
Palettgenerator
Genererad palett
Komplett färgpalett för Material Design
Bläddra bland alla Material Design-färger. Klicka på en färg för att kopiera dess hex-kod.
Röd
Rosa
Lila
Blå
Grön
Orange
Blågrön
Bärnsten
Användningstips
- Använd nyans 500 som primärfärg
- Använd nyans 700 för mörkare varianter (t.ex. appfält)
- Använd accentfärger (A200, A400) för flytande åtgärdsknappar och markeringar
- Se till att kontrastvärdena uppfyller kraven på tillgänglighet
Professionell färggenerator för Material Design
Få tillgång till hela Googles färgsystem för Material Design 3 med Material You-paletter, officiella färgtoken och professionella exportalternativ för modern gränssnittsutveckling och Android-appdesign.
Varför välja vår Material Design-generator?
Vårt heltäckande verktyg ger dig tillgång till hela färgsystemet i Material Design 3 med dynamisk Material You-tematisering, officiella Google-färgtoken och professionella exportformat.
- Material Design 3 system
- Material You palettes
- Official color tokens
- Dynamic theming
- Multiple export formats
- Developer-ready code
Komplett Material Design 3-system
Få tillgång till hela färgsystemet i Material Design 3 med primära, sekundära och tertiära färger, ytvarianter och kompletta tonpaletter med semantiska färgroller.
Dynamiska teman med Material You
Generera Material You-färgscheman från en utgångsfärg med automatiska varianter för ljust och mörkt tema samt personlig färgextrahering för moderna Android-appar.
Exportformat redo för utvecklare
Exportera som CSS-variabler, SCSS-variabler, JSON-token, XML-resurser för Android, Figma-token och Flutter-temadata med korrekta namnkonventioner.
Perfekt för:
- Android app development
- Web applications
- Flutter projects
- Design systems
- UI component libraries
- Material UI theming
Så fungerar det:
Välj färgsystem
Välj mellan klassiska Material Design 3-färger eller generera Material You-paletter från din utgångsfärg.
Anpassa och förhandsgranska
Justera tonvärden, förhandsgranska ljust och mörkt tema och se hur färgerna fungerar i Material Design-komponenter.
Exportera och implementera
Ladda ner färgtoken i önskat format och integrera dem direkt i ditt utvecklingsflöde.
Vanliga frågor
Material Design 3 är Googles senaste designsystem med förbättrade färgroller och semantiska token. Material You är personaliseringslagret som skapar egna färgscheman utifrån användarens bakgrundsbild eller en utgångsfärg, vilket ger dynamiska teman som anpassas efter personliga preferenser samtidigt som MD3-principerna följs.
Ange din varumärkesfärg eller önskad nyans som utgångsfärg. Vår algoritm genererar en komplett tonpalett med primära, sekundära, tertiära, neutrala och neutralvarianta färgfamiljer, var och en med 13 tonsteg från 0 (svart) till 100 (vitt), enligt Googles Material You-specifikation.
Exportera som CSS-variabler, SCSS/Sass-variabler, JSON-designtoken, XML-resurser för Android, JavaScript/TypeScript-objekt, Figma-designtoken, Flutter ColorScheme-teman och Swift-färgtillgångar för iOS. Alla exporter använder korrekta semantiska namnkonventioner.
Ja! Färgsystemet i Material Design 3 är byggt med tillgänglighet i fokus. Tonpalettsystemet säkerställer rätt kontrast mellan ytfärger och texten ovanpå. Vårt verktyg visar WCAG-nivåer och föreslår automatiskt tillgängliga färgkombinationer.
Absolut! Material Design-färgerna är öppen källkod och kan användas i vilket projekt som helst. Systemet togs fram för Googles produkter, men färgvetenskapen och tillgänglighetsprinciperna gör det utmärkt för alla moderna gränssnitt – på webben, i mobilen eller på datorn.
Material Design 3 använder semantiska färgroller som automatiskt kopplas till rätt tonvärden för ljust och mörkt tema. Till exempel använder ”primary” ton 40 i ljust tema och ton 80 i mörkt tema. Vår generator ger dig båda temavarianterna med bibehållen kontrast och tillgänglighet.