Warna Aksen Windows 11

Jelajahi sistem warna Windows 11 secara lengkap: 17 warna palet aksen default, token dinamis SystemAccentColor (Light1 hingga Dark3), token desain Fluent 2 untuk kontrol (tombol, sakelar, penggeser, bilah progres), warna teks dan isian untuk tema terang dan gelap, isian latar dan permukaan (termasuk warna dasar Mica dan Acrylic), serta token semantik untuk status bahaya, sukses, peringatan, dan informasi. Cari berdasarkan nama, HEX, atau nama token, filter menurut 6 kategori, dan salin nilai HEX atau RGB dengan satu klik. Tanpa pendaftaran.

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

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

Mengapa memakai referensi warna Windows 11 kami?

Referensi warna Windows 11 lengkap: jelajahi seluruh sistem warna Windows 11, termasuk 17 warna palet aksen default, token dinamis SystemAccentColor (Light1-Dark3), kuas sistem Fluent Design untuk kontrol, teks, ikon, latar, permukaan, serta material acrylic/mica - semuanya di satu tempat.
Pencarian dan filter per kategori: temukan warna Windows 11 apa pun dengan cepat melalui pencarian berdasarkan nama, HEX, RGB, nama token, atau deskripsi. Filter berdasarkan kategori: Palet Aksen, Token Aksen Sistem, Kontrol, Teks & Isian, Latar & Permukaan, atau Token Fluent. Hemat waktu menelusuri dokumentasi Microsoft.
Salin HEX dan RGB dengan satu klik: setiap kartu warna menyertakan tombol salin untuk nilai HEX dan RGB. Baik Anda mendesain aplikasi WinUI, antarmuka web, atau hanya butuh warna Windows 11 yang tepat, salin nilai yang Anda perlukan dengan satu klik.
Nilai tema terang dan gelap: menyertakan entri terpisah untuk varian tema terang dan gelap dari teks, ikon, latar, acrylic, mica, lapisan, dan pembatas. Cocok untuk membangun aplikasi dan situs yang mengikuti bahasa desain Windows 11 di kedua mode tema.

Apa itu warna aksen Windows 11?

Warna aksen Windows 11 adalah palet warna seluruh sistem yang bisa disesuaikan pengguna di Pengaturan → Personalisasi → Warna. Palet default menawarkan 17 pilihan warna (Biru, Biru Tosca, Hijau, Hijau Rimba, Zaitun, Emas, Oranye, Karat, Merah, Merah Kecubung, Ungu, Lavender, Indigo, Baja, Batu Tulis, Merah Muda, Merah Muda Pucat). Saat pengguna memilih warna aksen, warna itu menjadi SystemAccentColor dan menyebar secara dinamis ke semua kontrol WinUI - tombol, sakelar, penggeser, bilah progres, kotak centang, tombol radio, dan lainnya.

Sistem warna Fluent 2

Sistem Desain Fluent 2 dari Microsoft menetapkan arsitektur token warna yang menyeluruh untuk Windows 11. Sistem ini dibangun di atas beberapa keluarga token utama:

SystemAccentColor - token dinamis yang mengikuti warna aksen pilihan pengguna. Mencakup warna dasar plus tiga varian lebih terang (Light1, Light2, Light3) dan tiga varian lebih gelap (Dark1, Dark2, Dark3).
SolidBackgroundFillColor - isian permukaan dasar, sekunder, tersier, dan kuarter untuk jendela, panel, kartu, dan permukaan bertingkat.
TextFillColor - warna teks primer, sekunder, tersier, dan nonaktif untuk tema terang dan gelap.
Warna isian kontrol - token khusus untuk Button, ToggleSwitch, Slider, CheckBox, RadioButton, ProgressBar, dan kontrol WinUI lainnya.

Material Mica dan Acrylic

Windows 11 memperkenalkan Mica dan Acrylic sebagai efek material khasnya. Mica adalah material bertinta desktop yang mengambil warna wallpaper untuk menciptakan tint halus dan statis pada latar jendela. Acrylic adalah material blur semi-transparan yang dipakai pada flyout, menu konteks, dan aplikasi Pengaturan. Keduanya memiliki nilai token khusus untuk tema terang dan gelap. Meski nilai warna dasarnya tercantum di sini, efek visual lengkapnya bergantung pada wallpaper desktop dan parameter blur/opasitas yang diterapkan oleh sistem operasi.

Warna semantik dan status

Fluent 2 menetapkan token warna semantik untuk menyampaikan status dan informasi: Danger (merah), Success (hijau), Warning (oranye), dan Information (biru). Masing-masing mencakup warna latar depan dan isian latar berpasangan. Warna-warna ini dipakai secara konsisten di Windows 11 untuk pesan kesalahan, dialog konfirmasi, peringatan, dan banner informasi. Nilai referensi di sini memberikan warna persis untuk indikator latar depan maupun isian latar lembut yang dipakai dalam bahasa desain Fluent 2.

Pertanyaan yang Sering Diajukan

Warna aksen Windows 11 adalah warna sistem yang dipakai untuk taskbar, menu Mulai, bilah judul, hyperlink, dan kontrol WinUI. Pengguna bisa memilih dari 17 warna default atau menentukan warna khusus di Pengaturan. Warna aksen menyebar sebagai SystemAccentColor ke seluruh sistem token desain Fluent 2.

Salin nilai HEX atau RGB dari kartu warna mana pun dengan satu klik. Anda bisa mencari berdasarkan nama, nilai HEX, nama token, atau deskripsi. Filter per kategori untuk menemukan jenis warna tertentu: palet aksen, token sistem, kontrol, teks/isian, latar, atau token Fluent.

Ya. Warna teks, ikon, latar, permukaan, acrylic, mica, lapisan, dan pembatas semuanya memiliki entri terpisah untuk tema terang dan gelap. Setiap entri diberi label jelas «(Light)» atau «(Dark)» pada namanya.

Ya. 100 % gratis tanpa pendaftaran, tanpa tingkat premium, dan tanpa batas pemakaian. Semua data warna bersifat statis dan langsung dimuat di browser Anda.