Перейти к содержимому
Aback Tools Logo

Акцентные цвета Windows 11

Просматривайте полную цветовую систему Windows 11: 17 цветов стандартной акцентной палитры, динамические токены SystemAccentColor (Light1-Dark3), токены дизайна Fluent 2 для элементов управления (кнопки, переключатели, ползунки, индикаторы прогресса), цвета текста и заливки для светлой и тёмной темы, заливки фона и поверхностей (включая базовые цвета Mica и Acrylic) и семантические токены для состояний опасности, успеха, предупреждения и информации. Ищите по названию, HEX или имени токена, фильтруйте по 6 категориям и копируйте значения HEX или RGB в один клик. Без регистрации.

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

Зачем использовать наш справочник цветов Windows 11?

  • Полный справочник цветов Windows 11: изучайте всю цветовую систему Windows 11, включая 17 цветов стандартной акцентной палитры, динамические токены SystemAccentColor (Light1-Dark3), кисти системы Fluent Design для элементов управления, текста, значков, фонов, поверхностей и материалов акрил/mica - всё в одном месте.
  • Поиск и фильтр по категориям: быстро находите любой цвет Windows 11, выполняя поиск по названию, HEX, RGB, имени токена или описанию. Фильтруйте по категориям: акцентная палитра, системные акцентные токены, элементы управления, текст и заливка, фон и поверхности или токены Fluent. Экономьте время на поиске в документации Microsoft.
  • Копирование HEX и RGB в один клик: каждая цветовая карточка содержит кнопки копирования значений HEX и RGB. Проектируете ли вы приложение WinUI, веб-интерфейс или просто нуждаетесь в точном цвете Windows 11 - скопируйте нужное значение одним нажатием.
  • Значения светлой и тёмной темы: включает отдельные записи для светлых и тёмных вариантов текста, значков, фонов, акрила, mica, слоёв и разделителей. Идеально для приложений и сайтов, соответствующих языку дизайна Windows 11 в обоих режимах темы.

Что такое акцентные цвета Windows 11?

Акцентные цвета Windows 11 - это системная цветовая палитра, которую пользователи могут настроить в разделе Параметры → Персонализация → Цвета. Стандартная палитра предлагает 17 вариантов цвета (синий, бирюзовый, зелёный, лесной, оливковый, золотой, оранжевый, ржавый, красный, клюквенный, фиолетовый, лавандовый, индиго, стальной, серый, розовый, светлый розовый). Когда пользователь выбирает акцентный цвет, он становится SystemAccentColor и динамически распространяется на все элементы управления WinUI: кнопки, переключатели, ползунки, индикаторы прогресса, флажки, переключатели и другие.

Цветовая система Fluent 2

Дизайн-система Microsoft Fluent 2 определяет полную архитектуру цветовых токенов для Windows 11. Система построена на нескольких ключевых семействах токенов:

  • SystemAccentColor - динамические токены, следующие за выбранным пользователем акцентным цветом. Включают базовый цвет плюс три более светлых варианта (Light1, Light2, Light3) и три более тёмных (Dark1, Dark2, Dark3).
  • SolidBackgroundFillColor - базовые, вторичные, третичные и четвертичные заливки поверхностей для окон, панелей, карточек и вложенных поверхностей.
  • TextFillColor - цвета текста: основной, вторичный, третичный и неактивный для светлой и тёмной темы.
  • Цвета заливки элементов управления - отдельные токены для Button, ToggleSwitch, Slider, CheckBox, RadioButton, ProgressBar и других элементов WinUI.

Материалы Mica и Acrylic

Windows 11 вводит Mica и Acrylic как характерные эффекты материалов. Mica - материал с оттенком рабочего стола, который берёт цвет обоев и создаёт мягкий статичный оттенок на фоне окон. Acrylic - полупрозрачный материал с размытием, используемый в всплывающих панелях, контекстных меню и приложении «Параметры». У обоих есть отдельные значения токенов для светлой и тёмной темы. Хотя базовые значения цвета приведены здесь, полный визуальный эффект зависит от обоев рабочего стола и параметров размытия/прозрачности, применяемых операционной системой.

Семантические цвета и цвета состояний

Fluent 2 определяет семантические цветовые токены для передачи состояний и информации: Danger (красный), Success (зелёный), Warning (оранжевый) и Information (синий). Каждый включает цвет переднего плана и связанную заливку фона. Они единообразно используются в Windows 11 для сообщений об ошибках, диалогов подтверждения, оповещений и информационных баннеров. Приведённые здесь справочные значения дают точные цвета как индикатора переднего плана, так и мягкой фоновой заливки, применяемых в языке дизайна Fluent 2.

Часто задаваемые вопросы

Акцентные цвета Windows 11 - это системные цвета, используемые для панели задач, меню «Пуск», заголовков окон, гиперссылок и элементов управления WinUI. Пользователи могут выбрать один из 17 стандартных цветов или задать собственный в параметрах. Акцентный цвет распространяется как SystemAccentColor по всей системе токенов дизайна Fluent 2.

Копируйте значения HEX или RGB с любой цветовой карточки в один клик. Можно искать по названию, значению HEX, имени токена или описанию. Фильтруйте по категориям, чтобы найти нужные типы цветов: акцентная палитра, системные токены, элементы управления, текст/заливка, фоны или токены Fluent.

Да. Цвета текста, значков, фона, поверхностей, акрила, mica, слоёв и разделителей включают отдельные записи для светлой и тёмной темы. Каждая запись явно помечена «(Light)» или «(Dark)» в названии.

Да. 100 % бесплатно, без регистрации, без премиум-уровня и без ограничений. Все данные о цветах статичны и моментально загружаются в браузере.