Zum Inhalt springen
Aback Tools Logo

Windows 11 Akzentfarben

Durchsuchen Sie das komplette Farbsystem von Windows 11: 17 Farben der Standard-Akzentpalette, dynamische SystemAccentColor-Token (Light1 bis Dark3), Fluent-2-Design-Token für Steuerelemente (Schaltflächen, Umschalter, Schieberegler, Fortschrittsbalken), Text- und Füllfarben für helles und dunkles Design, Hintergrund- und Oberflächenfüllungen (einschließlich Mica- und Acryl-Basisfarben) sowie semantische Token für die Zustände Gefahr, Erfolg, Warnung und Information. Suchen Sie nach Name, HEX oder Token-Namen, filtern Sie nach 6 Kategorien und kopieren Sie HEX- oder RGB-Werte mit einem Klick. Ohne Anmeldung.

Windows 11 Accent Colors

Reference for Windows 11 system accent colours, Fluent 2 design tokens, and the default accent colour palette. Search, filter by category, and copy HEX or RGB values with one click.

Showing 87 of 87 Windows 11 colours

Fluent 2 Design System - Windows 11

#0078d4

Blue

rgb(0, 120, 212)

Windows 11 default accent colour

#00b7c3

Teal

rgb(0, 183, 195)

#008970

Green

rgb(0, 137, 112)

#3b8c4a

Forest

rgb(59, 140, 74)

#69802a

Olive

rgb(105, 128, 42)

#b48c3c

Gold

rgb(180, 140, 60)

#ca5010

Orange

rgb(202, 80, 16)

#8e562e

Rust

rgb(142, 86, 46)

#c42b1c

Red

rgb(196, 43, 28)

#c239b3

Cranberry

rgb(194, 57, 179)

#8764b8

Purple

rgb(135, 100, 184)

#9b6ac9

Lavender

rgb(155, 106, 201)

#5f6caf

Indigo

rgb(95, 108, 175)

#69797e

Steel

rgb(105, 121, 126)

#78808f

Slate

rgb(120, 128, 143)

Originally Pale Blue in older builds

#e74856

Pink

rgb(231, 72, 86)

#ea005e

Rose

rgb(234, 0, 94)

#0078d4

SystemAccentColor

SystemAccentColor

rgb(0, 120, 212)

Matches user accent - shown with default Blue

#5badff

SystemAccentColorLight1

SystemAccentColorLight1

rgb(91, 173, 255)

#8ccdff

SystemAccentColorLight2

SystemAccentColorLight2

rgb(140, 205, 255)

#c7e0f4

SystemAccentColorLight3

SystemAccentColorLight3

rgb(199, 224, 244)

#005a9e

SystemAccentColorDark1

SystemAccentColorDark1

rgb(0, 90, 158)

#004578

SystemAccentColorDark2

SystemAccentColorDark2

rgb(0, 69, 120)

#002f54

SystemAccentColorDark3

SystemAccentColorDark3

rgb(0, 47, 84)

#0078d4

Button Background

ButtonBackground

rgb(0, 120, 212)

Follows accent; accent in light, darker in dark

#ffffff

Button Foreground

ButtonForeground

rgb(255, 255, 255)

#8b8b8b

Button Border

ButtonBorder

rgb(139, 139, 139)

#106ebe

Button Pointer-over

ButtonBackgroundPointerOver

rgb(16, 110, 190)

#005a9e

Button Pressed

ButtonBackgroundPressed

rgb(0, 90, 158)

#0078d4

Toggle On

ToggleSwitchFillOn

rgb(0, 120, 212)

Follows accent colour

#8b8b8b

Toggle Off

ToggleSwitchFillOff

rgb(139, 139, 139)

#ffffff

Toggle Thumb On

ToggleSwitchKnobFillOn

rgb(255, 255, 255)

#ffffff

Toggle Thumb Off

ToggleSwitchKnobFillOff

rgb(255, 255, 255)

#0078d4

Slider Track

SliderTrackFill

rgb(0, 120, 212)

Follows accent colour

#0078d4

Slider Thumb

SliderThumbFill

rgb(0, 120, 212)

#0078d4

CheckBox Checked

CheckBoxCheckBackgroundFill

rgb(0, 120, 212)

Follows accent colour

#0078d4

RadioButton Selected

RadioButtonOuterEllipseFill

rgb(0, 120, 212)

#0078d4

Progress Bar

ProgressBarFill

rgb(0, 120, 212)

Follows accent colour

#000000

Text Primary (Light)

TextFillColorPrimary

rgb(0, 0, 0)

Light theme; dark theme uses high white

#616161

Text Secondary (Light)

TextFillColorSecondary

rgb(97, 97, 97)

#9e9e9e

Text Tertiary (Light)

TextFillColorTertiary

rgb(158, 158, 158)

#bdbdbd

Text Disabled (Light)

TextFillColorDisabled

rgb(189, 189, 189)

#000000

Icon Default (Light)

IconFillColorPrimary

rgb(0, 0, 0)

#616161

Icon Secondary (Light)

IconFillColorSecondary

rgb(97, 97, 97)

#bdbdbd

Icon Disabled (Light)

IconFillColorDisabled

rgb(189, 189, 189)

#005a9e

Accent Text (Light)

AccentTextFillColorPrimary

rgb(0, 90, 158)

Dark accent for readability on white

#ffffff

Text Primary (Dark)

TextFillColorPrimaryDark

rgb(255, 255, 255)

#ababab

Text Secondary (Dark)

TextFillColorSecondaryDark

rgb(171, 171, 171)

#767676

Text Tertiary (Dark)

TextFillColorTertiaryDark

rgb(118, 118, 118)

#5c5c5c

Text Disabled (Dark)

TextFillColorDisabledDark

rgb(92, 92, 92)

#ffffff

Icon Default (Dark)

IconFillColorPrimaryDark

rgb(255, 255, 255)

#ababab

Icon Secondary (Dark)

IconFillColorSecondaryDark

rgb(171, 171, 171)

#5badff

Accent Text (Dark)

AccentTextFillColorPrimaryDark

rgb(91, 173, 255)

Light accent for readability on dark

#ffffff

Background (Light)

SolidBackgroundFillColorBase

rgb(255, 255, 255)

#f9f9f9

Background Secondary (Light)

SolidBackgroundFillColorSecondary

rgb(249, 249, 249)

#f2f2f2

Background Tertiary (Light)

SolidBackgroundFillColorTertiary

rgb(242, 242, 242)

#ebebeb

Background Quaternary (Light)

SolidBackgroundFillColorQuaternary

rgb(235, 235, 235)

#ffffff

Card Background (Light)

CardBackgroundFillColorDefault

rgb(255, 255, 255)

#f6f6f6

Acrylic Base (Light)

AcrylicBackgroundFillColorDefault

rgb(246, 246, 246)

Semi-transparent blur material

#f3f3f3

Mica Base (Light)

MicaBackgroundFillColorDefault

rgb(243, 243, 243)

Desktop wallpaper-tinted material

#1f1f1f

Background (Dark)

SolidBackgroundFillColorBaseDark

rgb(31, 31, 31)

#2a2a2a

Background Secondary (Dark)

SolidBackgroundFillColorSecondaryDark

rgb(42, 42, 42)

#323232

Background Tertiary (Dark)

SolidBackgroundFillColorTertiaryDark

rgb(50, 50, 50)

#3b3b3b

Background Quaternary (Dark)

SolidBackgroundFillColorQuaternaryDark

rgb(59, 59, 59)

#2a2a2a

Card Background (Dark)

CardBackgroundFillColorDefaultDark

rgb(42, 42, 42)

#2c2c2c

Acrylic Base (Dark)

AcrylicBackgroundFillColorDefaultDark

rgb(44, 44, 44)

#202020

Mica Base (Dark)

MicaBackgroundFillColorDefaultDark

rgb(32, 32, 32)

#ffffff

Layer Fill (Light)

LayerFillColorDefault

rgb(255, 255, 255)

#f6f6f6

Layer Fill Alternate (Light)

LayerFillColorAlternate

rgb(246, 246, 246)

#2a2a2a

Layer Fill (Dark)

LayerFillColorDefaultDark

rgb(42, 42, 42)

#333333

Layer Fill Alternate (Dark)

LayerFillColorAlternateDark

rgb(51, 51, 51)

#0078d4

Fluent Brand Blue

FluentBrandColor

rgb(0, 120, 212)

The Fluent brand colour (same as default accent)

#106ebe

Fluent Commit Blue

FluentCommitColor

rgb(16, 110, 190)

Used for hover/press states

#c42b1c

Fluent Danger Red

DangerColor

rgb(196, 43, 28)

#008970

Fluent Success Green

SuccessColor

rgb(0, 137, 112)

#ca5010

Fluent Warning Orange

WarningColor

rgb(202, 80, 16)

#0078d4

Fluent Info Blue

InformationColor

rgb(0, 120, 212)

#fde7e9

Fluent Error Background

ErrorBackgroundColor

rgb(253, 231, 233)

#dff6dd

Fluent Success Background

SuccessBackgroundColor

rgb(223, 246, 221)

#fff4ce

Fluent Warning Background

WarningBackgroundColor

rgb(255, 244, 206)

#f0f6ff

Fluent Info Background

InformationBackgroundColor

rgb(240, 246, 255)

#0078d4

Fluent Link Default

HyperlinkForeground

rgb(0, 120, 212)

#004578

Fluent Link Hover

HyperlinkForegroundHover

rgb(0, 69, 120)

#5f6caf

Fluent Link Visited

HyperlinkForegroundVisited

rgb(95, 108, 175)

#e0e0e0

Fluent Divider (Light)

DividerStrokeColorDefault

rgb(224, 224, 224)

#444444

Fluent Divider (Dark)

DividerStrokeColorDefaultDark

rgb(68, 68, 68)

#005a9e

Fluent Focus Indicator

FocusStrokeColorDefault

rgb(0, 90, 158)

Focus-reveal border colour

Warum unsere Windows-11-Farbreferenz verwenden?

  • Vollständige Windows-11-Farbreferenz: Durchsuchen Sie das gesamte Farbsystem von Windows 11, einschließlich der 17 Farben der Standard-Akzentpalette, der dynamischen SystemAccentColor-Token (Light1-Dark3), der Fluent-Design-Systempinsel für Steuerelemente, Text, Symbole, Hintergründe, Oberflächen und Acryl-/Mica-Materialien - alles an einem Ort.
  • Suche und Filter nach Kategorie: Finden Sie jede Windows-11-Farbe schnell, indem Sie nach Name, HEX, RGB, Token-Namen oder Beschreibung suchen. Filtern Sie nach Kategorie: Akzentpalette, System-Akzent-Token, Steuerelemente, Text & Füllung, Hintergrund & Oberfläche oder Fluent-Token. Sparen Sie Zeit bei der Suche in der Microsoft-Dokumentation.
  • Ein-Klick-Kopieren - HEX & RGB: Jede Farbkarte enthält Kopierschaltflächen für HEX- und RGB-Werte. Ob Sie eine WinUI-App, eine Weboberfläche gestalten oder einfach die exakte Windows-11-Farbe benötigen - kopieren Sie den gewünschten Wert mit einem einzigen Klick.
  • Werte für helles und dunkles Design: Enthält separate Einträge für die hellen und dunklen Varianten von Text, Symbolen, Hintergründen, Acryl, Mica, Ebenen und Trennlinien. Perfekt für Apps und Websites, die die Designsprache von Windows 11 in beiden Designmodi umsetzen.

Was sind die Windows-11-Akzentfarben?

Die Windows-11-Akzentfarben sind die systemweite Farbpalette, die Nutzer unter Einstellungen → Personalisierung → Farben anpassen können. Die Standardpalette bietet 17 Farbauswahlmöglichkeiten (Blau, Blaugrün, Grün, Waldgrün, Oliv, Gold, Orange, Rost, Rot, Cranberry, Violett, Lavendel, Indigo, Stahl, Schiefer, Pink, Rosé). Wenn ein Nutzer eine Akzentfarbe wählt, wird sie zur SystemAccentColor und breitet sich dynamisch über alle WinUI-Steuerelemente aus - Schaltflächen, Umschalter, Schieberegler, Fortschrittsbalken, Kontrollkästchen, Optionsfelder und mehr.

Das Fluent-2-Farbsystem

Das Fluent-2-Designsystem von Microsoft definiert eine umfassende Farb-Token-Architektur für Windows 11. Das System basiert auf mehreren zentralen Token-Familien:

  • SystemAccentColor - Dynamische Token, die der vom Nutzer gewählten Akzentfarbe folgen. Enthält die Basisfarbe sowie drei hellere Varianten (Light1, Light2, Light3) und drei dunklere Varianten (Dark1, Dark2, Dark3).
  • SolidBackgroundFillColor - Basis-, sekundäre, tertiäre und quartäre Oberflächenfüllungen für Fenster, Panels, Karten und verschachtelte Oberflächen.
  • TextFillColor - Primäre, sekundäre, tertiäre und deaktivierte Textfarben für helles und dunkles Design.
  • Steuerelement-Füllfarben - Eigene Token für Button, ToggleSwitch, Slider, CheckBox, RadioButton, ProgressBar und andere WinUI-Steuerelemente.

Mica- und Acryl-Materialien

Windows 11 führt Mica und Acryl als charakteristische Materialeffekte ein. Mica ist ein desktop-getöntes Material, das die Hintergrundbildfarbe aufnimmt und eine subtile, statische Tönung auf Fensterhintergründen erzeugt. Acryl ist ein halbtransparentes Unschärfematerial, das in Flyouts, Kontextmenüs und der Einstellungen-App verwendet wird. Beide haben eigene Token-Werte für helles und dunkles Design. Während die Basisfarbwerte hier aufgeführt sind, hängt der vollständige visuelle Effekt vom Desktop-Hintergrundbild und den vom Betriebssystem angewendeten Unschärfe-/Deckkraftparametern ab.

Semantische und Status-Farben

Fluent 2 definiert semantische Farb-Token zur Vermittlung von Status und Information: Danger (Rot), Success (Grün), Warning (Orange) und Information (Blau). Jeder enthält eine Vordergrundfarbe und eine zugehörige Hintergrundfüllung. Sie werden in Windows 11 durchgängig für Fehlermeldungen, Bestätigungsdialoge, Warnhinweise und Infobanner verwendet. Die hier angegebenen Referenzwerte liefern die exakten Farben sowohl für die Vordergrundanzeige als auch für die sanfte Hintergrundfüllung der Fluent-2-Designsprache.

Häufig gestellte Fragen

Die Windows-11-Akzentfarben sind die systemweiten Farben für Taskleiste, Startmenü, Titelleisten, Hyperlinks und WinUI-Steuerelemente. Nutzer können aus 17 Standardfarben wählen oder in den Einstellungen eine eigene Farbe festlegen. Die Akzentfarbe wird als SystemAccentColor durch das gesamte Fluent-2-Design-Token-System weitergegeben.

Kopieren Sie die HEX- oder RGB-Werte jeder Farbkarte mit einem Klick. Sie können nach Name, HEX-Wert, Token-Namen oder Beschreibung suchen. Filtern Sie nach Kategorie, um bestimmte Farbtypen zu finden: Akzentpalette, System-Token, Steuerelemente, Text/Füllung, Hintergründe oder Fluent-Token.

Ja. Text-, Symbol-, Hintergrund-, Oberflächen-, Acryl-, Mica-, Ebenen- und Trennlinienfarben enthalten separate Einträge für helles und dunkles Design. Jeder Eintrag ist im Namen klar mit „(Light)“ oder „(Dark)“ gekennzeichnet.

Ja. 100 % kostenlos, ohne Anmeldung, ohne Premium-Stufe und ohne Nutzungslimits. Alle Farbdaten sind statisch und werden sofort in Ihrem Browser geladen.