What are Windows 11 accent colours?

Windows 11 accent colours are the system-wide colours used for taskbar, Start menu, title bars, hyperlinks, and WinUI controls. Users can choose from 17 default colours or pick a custom colour in Settings. The accent colour propagates as SystemAccentColor through the entire Fluent 2 design token system.

How do I use these colours in my project?

Copy the HEX or RGB values from any colour card with one click. You can search by name, HEX value, token name, or description. Filter by category to find specific types of colours - accent palette, system tokens, controls, text/fill, backgrounds, or Fluent tokens.

Are both light and dark theme values included?

Yes. Text, icon, background, surface, acrylic, mica, layer, and divider colours all include separate entries for light theme and dark theme values. Each entry is labelled clearly with "(Light)" or "(Dark)" in the name.

Is this Windows 11 colors reference tool free?

Yes. 100% free with no signup, no premium tier, and no usage limits. All colour data is static and loaded instantly in your browser.

Windows 11 Accent Colors

Browse the complete Windows 11 colour system - 17 default accent palette colours, SystemAccentColor dynamic tokens (Light1 to Dark3), Fluent 2 design tokens for controls (buttons, toggles, sliders, progress bars), text and fill colours for both light and dark themes, background and surface fills (including Mica and Acrylic base colours), and semantic tokens for danger, success, warning, and info states. Search by name, HEX, or token name, filter by 6 categories, and copy HEX or RGB values with one click. No signup required.

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

rgb(0, 120, 212)

Matches user accent - shown with default Blue

#5badff

SystemAccentColorLight1

rgb(91, 173, 255)

#8ccdff

SystemAccentColorLight2

rgb(140, 205, 255)

#c7e0f4

SystemAccentColorLight3

rgb(199, 224, 244)

#005a9e

SystemAccentColorDark1

rgb(0, 90, 158)

#004578

SystemAccentColorDark2

rgb(0, 69, 120)

#002f54

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

Why Use Our Windows 11 Colors Reference?

Complete Windows 11 Color Reference

Browse the full Windows 11 colour system including the 17 default accent palette colours, SystemAccentColor dynamic tokens (Light1-Dark3), Fluent Design system brushes for controls, text, icons, backgrounds, surfaces, and acrylic/mica materials - all in one place.

Search & Filter by Category

Quickly find any Windows 11 colour by searching by name, HEX, RGB, token name, or description. Filter by category: Accent Palette, System Accent Tokens, Controls, Text & Fill, Background & Surface, or Fluent Tokens. Save time hunting through Microsoft docs.

One-Click Copy - HEX & RGB

Every colour card includes Copy buttons for both HEX and RGB values. Whether you are designing a WinUI app, web interface, or just need the exact Windows 11 colour, copy the value you need with a single click.

Light & Dark Theme Values

Includes separate entries for light-theme and dark-theme variants of text, icons, backgrounds, acrylic, mica, layers, and dividers. Perfect for building apps and websites that match the Windows 11 design language in both theme modes.

Common Use Cases for Windows 11 Colors

WinUI / Windows App SDK Development

Reference the exact SystemAccentColor tokens when building WinUI 3 or UWP applications. Our reference includes the Fluent 2 brush names (SolidBackgroundFillColorBase, CardBackgroundFillColorDefault, etc.) so you can match Windows 11's native look and feel perfectly.

Web Apps with Windows 11 Design Language

Design web applications that look native on Windows 11 by using the same accent colours, surface fills, and text hierarchy. Copy the HEX values directly into your CSS custom properties for a cohesive Windows-themed experience.

UI Design Mockups in Figma & Sketch

When designing Windows 11 app mockups or prototypes, use the exact system colours to ensure your designs match the platform. Our reference includes both light and dark theme values so your mockups are accurate for both modes.

Choosing an Accent Colour for Your App

Explore the 17 default Windows 11 accent palette colours - from Blue and Teal to Pink and Rose - to pick the perfect accent colour for your application's theme. Each colour is shown with its exact HEX and RGB values.

Accessibility & Contrast Verification

Use the text and fill colour values (TextFillColorPrimary, TextFillColorSecondary, etc.) as reference points when verifying WCAG contrast compliance for your Windows-targeted designs. Compare light vs dark theme text colours side by side.

Design System Documentation & Education

Reference the Fluent 2 design token colours when documenting a design system or teaching Windows UI design. Our reference serves as a quick lookup for brand colours, semantic colours (danger, success, warning, info), and their background variants.

Understanding Windows 11 Colours & Fluent Design

What Are Windows 11 Accent Colors?

Windows 11 accent coloursare the system-wide colour palette users can customise in Settings → Personalization → Colors. The default palette offers 17 colour choices (Blue, Teal, Green, Forest, Olive, Gold, Orange, Rust, Red, Cranberry, Purple, Lavender, Indigo, Steel, Slate, Pink, Rose). When a user selects an accent colour, it becomes the SystemAccentColor and dynamically propagates through all WinUI controls - buttons, toggles, sliders, progress bars, checkboxes, radio buttons, and more.

The Fluent 2 Color System

Microsoft’s Fluent 2 Design System defines a comprehensive colour token architecture for Windows 11. The system is built on several key token families:

SystemAccentColor- Dynamic tokens that follow the user’s chosen accent colour. Includes the base colour plus three lighter variants (Light1, Light2, Light3) and three darker variants (Dark1, Dark2, Dark3).
SolidBackgroundFillColor - Base, secondary, tertiary, and quaternary surface fills used for windows, panels, cards, and nested surfaces.
TextFillColor - Primary, secondary, tertiary, and disabled text colours for both light and dark themes.
Control fill colours - Dedicated tokens for Button, ToggleSwitch, Slider, CheckBox, RadioButton, ProgressBar, and other WinUI controls.

Mica & Acrylic Materials

Windows 11 introduces Mica and Acrylic as signature material effects. Mica is a desktop-tinted material that samples the wallpaper colour to create a subtle, static tint on window backgrounds. Acrylic is a semi-transparent blur material used in flyouts, context menus, and the Settings app. Both have dedicated token values for light and dark themes. While the base colour values are listed here, the full visual effect depends on the desktop wallpaper and the blur/opacity parameters applied by the OS.

Semantic & Status Colors

Fluent 2 defines semantic colour tokens for conveying status and information: Danger (red), Success (green), Warning (orange), and Information (blue). Each includes a foreground colour and a paired background fill. These are used consistently across Windows 11 for error messages, confirmation dialogs, alerts, and info banners. The reference values here provide the exact colours for both the foreground indicator and the soft background fill used in the Fluent 2 design language.

Related Tools

Color Picker & Converter

Visual color picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs, WCAG contrast checker, CSS variable output - free online color picker converter.

Color Name Finder

Enter any HEX or RGB color and instantly find the closest named color from 300+ CSS, X11, and Pantone color names. Search by name or browse the full database - free online color name finder.

Color Contrast Checker

Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components - live preview, HEX and RGB input. Free online color contrast checker.

Color Difference Calculator (ΔE 2000)

Calculate the perceptual color difference (ΔE 2000 / CIEDE2000) between any two colors - enter HEX or RGB values and get the Delta-E score with a visual comparison and CIE L*a*b* breakdown. Free online color difference calculator.

Frequently Asked Questions About Windows 11 Colors

Windows 11 accent colours are the system-wide colour that customises taskbar, Start menu, title bars, hyperlinks, and WinUI controls. Users can choose from 17 default colours in Settings → Personalization → Colors, or pick a custom colour. The accent colour is exposed programmatically as SystemAccentColor and propagates through the entire Fluent 2 design token system.

When a user selects an accent colour, Windows generates a family of 7 dynamic tokens: the base SystemAccentColor, three lighter variants (Light1, Light2, Light3 - used for hover, pressed, and selected states), and three darker variants (Dark1, Dark2, Dark3 - used for backgrounds and accent text in light theme). Our reference shows the values for the default Blue accent. If the user changes their accent colour, these tokens update automatically throughout the UI.

Mica is a desktop-tinted material that samples the wallpaper to create a subtle, static tint. It uses approximately 30-40% wallpaper colour mixed with a base neutral. Acrylic is a semi-transparent blur material with stronger visual noise and blur effects, used for transient surfaces like flyouts, context menus, and the Settings app. Acrylic has higher visual separation from the background, while Mica provides a more subtle connection to the desktop. Both have dedicated light and dark theme base colour tokens.

The default accent palette has remained consistent since Windows 11 21H2, though Microsoft has added subtle adjustments. The Fluent 2 token values (SolidBackgroundFillColor, TextFillColor, etc.) may vary slightly between Windows 11 versions and between Windows 11 and Windows 10. Our reference reflects the current Windows 11 23H2/24H2 Fluent 2 token values. Always test your design on the specific OS version you are targeting.

Copy the HEX values from our reference and use them as CSS custom properties in your stylesheets. For example: --win11-accent: #0078d4; --win11-bg: #ffffff; --win11-text: #000000. If you want to match the Windows 11 light-theme look, use the "Light" theme entries. For a dark-theme interface, use the "Dark" entries. The token names (e.g. TextFillColorPrimary) map conceptually to common CSS variable naming patterns.

Fluent 2 defines semantic colours for conveying status: Danger (#c42b1c) for errors and destructive actions, Success (#008970) for confirmations and positive feedback, Warning (#ca5010) for cautions and alerts, and Information (#0078d4) for informational messages. Each includes both a foreground (text/accent) colour and a soft background fill colour (ErrorBackgroundColor, SuccessBackgroundColor, etc.) used in banners, callouts, and notifications.

Yes - in fact, these are the exact Fluent 2 token values used by WinUI 3 and the Windows App SDK. In XAML, you reference them as ThemeResource references like {ThemeResource SystemAccentColor} or {ThemeResource SolidBackgroundFillColorBase}. The token names listed in our reference cards match the built-in resource names used by the Windows UI framework. For custom controls, use the HEX values directly.

Windows 11 supports both light and dark theme modes, and many colour tokens have different values depending on the active theme. For example, TextFillColorPrimary is nearly black (#000000) in light theme and pure white (#ffffff) in dark theme. Background fills shift from near-white (#ffffff) in light mode to near-black (#1f1f1f) in dark mode. We include both variants so you can design for either theme (or implement automatic theme switching).