Softonic

Material Design-färgväljare

Steg 1 / 3 Välj en färgfamilj

Fast Material Design-palett från 2014 (Material Design 2). Material 3 använder i stället genererade tonpaletter.

Välj en färgfamilj

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

Material Design-paletten definierar 19 färgfamiljer, Röd, Rosa, Lila genom Grå och Blågrå, var och en med en ramp från nyans 50 (blek) till 900 (nästan svart), plus valfria accentnyanser A100–A700. Den här väljaren lägger ut varje nyans i ett rutnät och låter dig kopiera valfritt värde som HEX, RGB, HSL eller Material-tokennamn för användning i Tailwind, CSS-variabler, iOS UIColor eller Android-färgresurser.

Så använder du paletten

  1. 1

    Skanna rutnätet

    Familjer löper nedåt till vänster; nyanser löper tvärs över toppen från 50 till 900.

  2. 2

    Tryck på en nyans

    Se HEX, RGB, HSL och det kanoniska Material-tokennamnet (t.ex. Indigo 500).

  3. 3

    Kopiera formatet du behöver

    Ett klick kopierar den exakta strängen: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Kontrollera kontrast

    Panelen visar WCAG-kontrastförhållandet mot vitt och svart för att välja tillgängliga textfärger.

Nyansstegen

Nyans Användning
50 Hover-bakgrunder, bleka ytor
100 Chip-bakgrunder, fyllningar med låg betoning
200 Inaktiverade tillstånd, sekundära ytor
300 Kantlinjer, avgränsare
400 Sekundär text på ljusa bakgrunder
500 Standard- / primärfärg, utgångspunkten
600 Interaktiva tillstånd (hover, nedtryckt)
700 Rubriker, stark betoning
800 Mörk text på ljusa bakgrunder
900 Element med högst kontrast (nästan svart)
A100 Ljus accent
A200 Accent ljusare än standard
A400 Accent (ofta den “klara” varumärkesframhävningen)
A700 Djup accent

Familjer i Material-paletten

Röd, Rosa, Lila, Mörklila, Indigo, Blå, Ljusblå, Cyan, Blågrön, Grön, Ljusgrön, Lime, Gul, Bärnsten, Orange, Mörkorange, Brun, Grå, Blågrå.

Brun, Grå och Blågrå har inga accentnyanser, de är de neutrala familjerna.

Att välja en primärfärg

Specifikationen föreslår 500 som primärfärg, 700 för den mörkare varianten (används i statusfältet på Android), och en A200- eller A400-accent för sekundära åtgärder. Detta är en konvention, inte en regel, moderna Material 3 (dynamisk färg) härleder paletter från en enda frökärnfärg snarare än att välja från fasta ramper.

Tillgänglighetskontroll

  • Brödtext: kontrastförhållande ≥ 4.5:1 mot sin bakgrund (WCAG AA).
  • Stor text (18 pt+ fet eller 24 pt+ normal): ≥ 3:1.
  • UI-komponenter och grafiska objekt: ≥ 3:1.

Paletten är inte kontrastsäker som standard. Gul 500 på vitt klarar WCAG riktigt dåligt. Kontrollera alltid förhållandet innan du skeppar en kombination, väljaren visar det inline.

Format som stöds

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (modern syntax) eller rgb(63, 81, 181) (äldre).
  • HSL: hsl(231 48% 48%).
  • Material-token: Indigo 500, praktiskt för designdokument och Figma.
  • Tailwind: indigo-500, släpp rakt in i ett class-attribut om ditt Tailwind-tema använder Material-skalan.
  • Android color XML: <color name="indigo_500">#FF3F51B5</color>, ARGB-format.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Vanliga frågor

Verktyget återger den fasta Material Design-palett som Google publicerade 2014 och senare dokumenterade på webbplatsen för Material Design 2. Det skapar inte Material 3-tonpaletter från en källfärg. Använd det för de klassiska numrerade nyanserna och accentfärgerna.

Brun, Grå och Blågrå är neutraler och deltar inte i accentfärgsparningar. Specifikationen utelämnar helt enkelt A100–A700 för dem.

Tailwinds standardpalett är inspirerad av Material men inte identisk. Om du vill ha exakta Material-färger, utöka theme.extend.colors med Material-värdena och referera till dem som material-indigo-500 i dina klassnamn.

Konventionen säger ja, men inget hindrar dig från att använda 700 eller en accent som primär. 500-konventionen handlar om att ha en pålitlig grundnyans med 8 steg åt vardera hållet för variation.

Relaterade verktyg

QR-kodsgenerator

Skapa en QR-kod av text eller en URL i webbläsaren och ladda ned den som PNG.

Memgenerator

Lägg till en övertext och undertext på en JPG-, PNG- eller WebP-bild. Ställ in typsnitt, färger och kontur och ladda ned din mem som PNG.

GIF-skapare

Gör en bildsekvens eller en kort video till en animerad GIF. Ställ in bildfrekvens, loopar och storlek före export.

BMP till PNG

Konvertera BMP-filer till PNG i webbläsaren. Förlustfritt, bevarar färgdjup och lägger till valfri transparens från BMP-filens ursprungliga alfakanal.

Streckkodsgenerator

Skapa en 1D-streckkod i webbläsaren i Code 128, EAN, UPC, ITF-14 och andra format som stöds och ladda ned den som SVG eller PNG.

Ändra bildstorlek

Ändra bilder till exakta pixelmått eller procentvärden och behåll proportionerna. Smidigt för flera filer, utan uppladdning.