Aller au contenu
Aback Tools Logo

Couleurs d'accent de Windows 11

Parcourez le système de couleurs complet de Windows 11 : 17 couleurs de la palette d'accent par défaut, jetons dynamiques SystemAccentColor (Light1 à Dark3), jetons de design Fluent 2 pour les contrôles (boutons, interrupteurs, curseurs, barres de progression), couleurs de texte et de remplissage pour les thèmes clair et sombre, remplissages d'arrière-plan et de surface (y compris les couleurs de base Mica et Acrylic) et jetons sémantiques pour les états danger, succès, avertissement et information. Recherchez par nom, HEX ou nom de jeton, filtrez par 6 catégories et copiez les valeurs HEX ou RGB en un clic. Sans inscription.

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

Pourquoi utiliser notre référence des couleurs Windows 11 ?

  • Référence complète des couleurs Windows 11 : parcourez tout le système de couleurs de Windows 11, y compris les 17 couleurs de la palette d'accent par défaut, les jetons dynamiques SystemAccentColor (Light1-Dark3), les pinceaux du système Fluent Design pour les contrôles, le texte, les icônes, les arrière-plans, les surfaces et les matières acrylique/mica, au même endroit.
  • Recherche et filtre par catégorie : trouvez rapidement n'importe quelle couleur Windows 11 en recherchant par nom, HEX, RGB, nom de jeton ou description. Filtrez par catégorie : Palette d'accent, Jetons d'accent système, Contrôles, Texte et remplissage, Arrière-plan et surface, ou Jetons Fluent. Gagnez du temps dans la documentation Microsoft.
  • Copie en un clic - HEX et RGB : chaque carte de couleur inclut des boutons de copie pour les valeurs HEX et RGB. Que vous conceviez une application WinUI, une interface web ou que vous ayez simplement besoin de la couleur Windows 11 exacte, copiez la valeur voulue d'un simple clic.
  • Valeurs de thème clair et sombre : inclut des entrées distinctes pour les variantes claires et sombres du texte, des icônes, des arrière-plans, de l'acrylique, du mica, des calques et des séparateurs. Parfait pour créer des applications et des sites qui respectent le langage de design de Windows 11 dans les deux modes de thème.

Que sont les couleurs d'accent de Windows 11 ?

Les couleurs d'accent de Windows 11 sont la palette de couleurs à l'échelle du système que les utilisateurs peuvent personnaliser dans Paramètres → Personnalisation → Couleurs. La palette par défaut propose 17 choix de couleurs (bleu, turquoise, vert, vert forêt, olive, or, orange, rouille, rouge, canneberge, violet, lavande, indigo, acier, ardoise, rose et rose poudré). Lorsqu'un utilisateur sélectionne une couleur d'accent, celle-ci devient la SystemAccentColor et se propage dynamiquement dans tous les contrôles WinUI : boutons, interrupteurs, curseurs, barres de progression, cases à cocher, boutons radio et plus encore.

Le système de couleurs Fluent 2

Le système de design Fluent 2 de Microsoft définit une architecture complète de jetons de couleur pour Windows 11. Le système repose sur plusieurs familles de jetons clés :

  • SystemAccentColor - Jetons dynamiques qui suivent la couleur d'accent choisie par l'utilisateur. Inclut la couleur de base plus trois variantes plus claires (Light1, Light2, Light3) et trois plus sombres (Dark1, Dark2, Dark3).
  • SolidBackgroundFillColor - Remplissages de surface de base, secondaires, tertiaires et quaternaires pour les fenêtres, panneaux, cartes et surfaces imbriquées.
  • TextFillColor - Couleurs de texte primaire, secondaire, tertiaire et désactivé pour les thèmes clair et sombre.
  • Couleurs de remplissage des contrôles - Jetons dédiés pour Button, ToggleSwitch, Slider, CheckBox, RadioButton, ProgressBar et d'autres contrôles WinUI.

Matières Mica et Acrylic

Windows 11 introduit Mica et Acrylic comme effets de matière emblématiques. Mica est une matière teintée par le bureau qui échantillonne la couleur du fond d'écran pour créer une teinte subtile et statique sur les arrière-plans de fenêtre. Acrylic est une matière de flou semi-transparente utilisée dans les volets, les menus contextuels et l'application Paramètres. Les deux disposent de valeurs de jetons dédiées pour les thèmes clair et sombre. Bien que les valeurs de couleur de base soient indiquées ici, l'effet visuel complet dépend du fond d'écran du bureau et des paramètres de flou/opacité appliqués par le système.

Couleurs sémantiques et d'état

Fluent 2 définit des jetons de couleur sémantiques pour transmettre un état et une information : Danger (rouge), Success (vert), Warning (orange) et Information (bleu). Chacun inclut une couleur de premier plan et un remplissage d'arrière-plan associé. Ils sont utilisés de façon cohérente dans Windows 11 pour les messages d'erreur, les boîtes de confirmation, les alertes et les bannières d'information. Les valeurs de référence fournies ici donnent les couleurs exactes de l'indicateur de premier plan et du remplissage d'arrière-plan adouci utilisés dans le langage de design Fluent 2.

Foire aux questions

Les couleurs d'accent de Windows 11 sont les couleurs à l'échelle du système utilisées pour la barre des tâches, le menu Démarrer, les barres de titre, les hyperliens et les contrôles WinUI. Les utilisateurs peuvent choisir parmi 17 couleurs par défaut ou une couleur personnalisée dans les Paramètres. La couleur d'accent se propage en tant que SystemAccentColor dans tout le système de jetons de design Fluent 2.

Copiez les valeurs HEX ou RGB de n'importe quelle carte de couleur en un clic. Vous pouvez rechercher par nom, valeur HEX, nom de jeton ou description. Filtrez par catégorie pour trouver des types précis de couleurs : palette d'accent, jetons système, contrôles, texte/remplissage, arrière-plans ou jetons Fluent.

Oui. Les couleurs de texte, d'icône, d'arrière-plan, de surface, acrylique, mica, de calque et de séparateur comportent des entrées distinctes pour les valeurs de thème clair et sombre. Chaque entrée est clairement libellée « (Light) » ou « (Dark) » dans son nom.

Oui. 100 % gratuit, sans inscription, sans offre premium et sans limite d'utilisation. Toutes les données de couleur sont statiques et chargées instantanément dans votre navigateur.