primary
#6750A4
rgb(103, 80, 164)
Light Schemeprimarytone role
Referensi Warna Material Design
Cari, filter, dan salin token warna Material Design 3 untuk mode terang, mode gelap, dan palet tonal Material You. Temukan nilai token yang tepat dengan cepat untuk Android, web, dan sistem UI lintas platform, tanpa pendaftaran.
Material Design Color Reference
Search and filter Material Design 3 color tokens from light and dark role schemes plus full Material You tonal palettes. Copy token names, HEX, and RGB values instantly.
Showing 156 of 156 Material Design 3 tokens
Material You baseline palette
on-primary
#FFFFFF
rgb(255, 255, 255)
Light Schemeprimarytone role
primary-container
#EADDFF
rgb(234, 221, 255)
Light Schemeprimarytone role
on-primary-container
#21005D
rgb(33, 0, 93)
Light Schemeprimarytone role
secondary
#625B71
rgb(98, 91, 113)
Light Schemesecondarytone role
on-secondary
#FFFFFF
rgb(255, 255, 255)
Light Schemesecondarytone role
secondary-container
#E8DEF8
rgb(232, 222, 248)
Light Schemesecondarytone role
on-secondary-container
#1D192B
rgb(29, 25, 43)
Light Schemesecondarytone role
tertiary
#7D5260
rgb(125, 82, 96)
Light Schemetertiarytone role
on-tertiary
#FFFFFF
rgb(255, 255, 255)
Light Schemetertiarytone role
tertiary-container
#FFD8E4
rgb(255, 216, 228)
Light Schemetertiarytone role
on-tertiary-container
#31111D
rgb(49, 17, 29)
Light Schemetertiarytone role
error
#B3261E
rgb(179, 38, 30)
Light Schemeerrortone role
on-error
#FFFFFF
rgb(255, 255, 255)
Light Schemeerrortone role
error-container
#F9DEDC
rgb(249, 222, 220)
Light Schemeerrortone role
on-error-container
#410E0B
rgb(65, 14, 11)
Light Schemeerrortone role
background
#FFFBFE
rgb(255, 251, 254)
Light Schemesurfacetone role
on-background
#1C1B1F
rgb(28, 27, 31)
Light Schemesurfacetone role
surface
#FFFBFE
rgb(255, 251, 254)
Light Schemesurfacetone role
on-surface
#1C1B1F
rgb(28, 27, 31)
Light Schemesurfacetone role
surface-variant
#E7E0EC
rgb(231, 224, 236)
Light Schemesurfacetone role
on-surface-variant
#49454F
rgb(73, 69, 79)
Light Schemesurfacetone role
outline
#79747E
rgb(121, 116, 126)
Light Schemeutilitytone role
outline-variant
#CAC4D0
rgb(202, 196, 208)
Light Schemeutilitytone role
shadow
#000000
rgb(0, 0, 0)
Light Schemeutilitytone role
scrim
#000000
rgb(0, 0, 0)
Light Schemeutilitytone role
inverse-surface
#313033
rgb(49, 48, 51)
Light Schemesurfacetone role
inverse-on-surface
#F4EFF4
rgb(244, 239, 244)
Light Schemesurfacetone role
inverse-primary
#D0BCFF
rgb(208, 188, 255)
Light Schemeprimarytone role
surface-dim
#DED8E1
rgb(222, 216, 225)
Light Schemesurfacetone role
surface-bright
#FFFBFE
rgb(255, 251, 254)
Light Schemesurfacetone role
surface-container-lowest
#FFFFFF
rgb(255, 255, 255)
Light Schemesurfacetone role
surface-container-low
#F7F2FA
rgb(247, 242, 250)
Light Schemesurfacetone role
surface-container
#F3EDF7
rgb(243, 237, 247)
Light Schemesurfacetone role
surface-container-high
#ECE6F0
rgb(236, 230, 240)
Light Schemesurfacetone role
surface-container-highest
#E6E0E9
rgb(230, 224, 233)
Light Schemesurfacetone role
primary
#D0BCFF
rgb(208, 188, 255)
Dark Schemeprimarytone role
on-primary
#381E72
rgb(56, 30, 114)
Dark Schemeprimarytone role
primary-container
#4F378B
rgb(79, 55, 139)
Dark Schemeprimarytone role
on-primary-container
#EADDFF
rgb(234, 221, 255)
Dark Schemeprimarytone role
secondary
#CCC2DC
rgb(204, 194, 220)
Dark Schemesecondarytone role
on-secondary
#332D41
rgb(51, 45, 65)
Dark Schemesecondarytone role
secondary-container
#4A4458
rgb(74, 68, 88)
Dark Schemesecondarytone role
on-secondary-container
#E8DEF8
rgb(232, 222, 248)
Dark Schemesecondarytone role
tertiary
#EFB8C8
rgb(239, 184, 200)
Dark Schemetertiarytone role
on-tertiary
#492532
rgb(73, 37, 50)
Dark Schemetertiarytone role
tertiary-container
#633B48
rgb(99, 59, 72)
Dark Schemetertiarytone role
on-tertiary-container
#FFD8E4
rgb(255, 216, 228)
Dark Schemetertiarytone role
error
#F2B8B5
rgb(242, 184, 181)
Dark Schemeerrortone role
on-error
#601410
rgb(96, 20, 16)
Dark Schemeerrortone role
error-container
#8C1D18
rgb(140, 29, 24)
Dark Schemeerrortone role
on-error-container
#F9DEDC
rgb(249, 222, 220)
Dark Schemeerrortone role
background
#1C1B1F
rgb(28, 27, 31)
Dark Schemesurfacetone role
on-background
#E6E1E5
rgb(230, 225, 229)
Dark Schemesurfacetone role
surface
#1C1B1F
rgb(28, 27, 31)
Dark Schemesurfacetone role
on-surface
#E6E1E5
rgb(230, 225, 229)
Dark Schemesurfacetone role
surface-variant
#49454F
rgb(73, 69, 79)
Dark Schemesurfacetone role
on-surface-variant
#CAC4D0
rgb(202, 196, 208)
Dark Schemesurfacetone role
outline
#938F99
rgb(147, 143, 153)
Dark Schemeutilitytone role
outline-variant
#49454F
rgb(73, 69, 79)
Dark Schemeutilitytone role
shadow
#000000
rgb(0, 0, 0)
Dark Schemeutilitytone role
scrim
#000000
rgb(0, 0, 0)
Dark Schemeutilitytone role
inverse-surface
#E6E1E5
rgb(230, 225, 229)
Dark Schemesurfacetone role
inverse-on-surface
#313033
rgb(49, 48, 51)
Dark Schemesurfacetone role
inverse-primary
#6750A4
rgb(103, 80, 164)
Dark Schemeprimarytone role
surface-dim
#141218
rgb(20, 18, 24)
Dark Schemesurfacetone role
surface-bright
#3B383E
rgb(59, 56, 62)
Dark Schemesurfacetone role
surface-container-lowest
#0F0D13
rgb(15, 13, 19)
Dark Schemesurfacetone role
surface-container-low
#1D1B20
rgb(29, 27, 32)
Dark Schemesurfacetone role
surface-container
#211F26
rgb(33, 31, 38)
Dark Schemesurfacetone role
surface-container-high
#2B2930
rgb(43, 41, 48)
Dark Schemesurfacetone role
surface-container-highest
#36343B
rgb(54, 52, 59)
Dark Schemesurfacetone role
primary0
#000000
rgb(0, 0, 0)
Tonal Paletteprimarytone 0
primary10
#21005D
rgb(33, 0, 93)
Tonal Paletteprimarytone 10
primary20
#381E72
rgb(56, 30, 114)
Tonal Paletteprimarytone 20
primary30
#4F378B
rgb(79, 55, 139)
Tonal Paletteprimarytone 30
primary40
#6750A4
rgb(103, 80, 164)
Tonal Paletteprimarytone 40
primary50
#7F67BE
rgb(127, 103, 190)
Tonal Paletteprimarytone 50
primary60
#9A82DB
rgb(154, 130, 219)
Tonal Paletteprimarytone 60
primary70
#B69DF8
rgb(182, 157, 248)
Tonal Paletteprimarytone 70
primary80
#D0BCFF
rgb(208, 188, 255)
Tonal Paletteprimarytone 80
primary90
#EADDFF
rgb(234, 221, 255)
Tonal Paletteprimarytone 90
primary95
#F6EDFF
rgb(246, 237, 255)
Tonal Paletteprimarytone 95
primary98
#FEF7FF
rgb(254, 247, 255)
Tonal Paletteprimarytone 98
primary99
#FFFBFE
rgb(255, 251, 254)
Tonal Paletteprimarytone 99
primary100
#FFFFFF
rgb(255, 255, 255)
Tonal Paletteprimarytone 100
secondary0
#000000
rgb(0, 0, 0)
Tonal Palettesecondarytone 0
secondary10
#1D192B
rgb(29, 25, 43)
Tonal Palettesecondarytone 10
secondary20
#332D41
rgb(51, 45, 65)
Tonal Palettesecondarytone 20
secondary30
#4A4458
rgb(74, 68, 88)
Tonal Palettesecondarytone 30
secondary40
#625B71
rgb(98, 91, 113)
Tonal Palettesecondarytone 40
secondary50
#7A7289
rgb(122, 114, 137)
Tonal Palettesecondarytone 50
secondary60
#958DA5
rgb(149, 141, 165)
Tonal Palettesecondarytone 60
secondary70
#B0A7C0
rgb(176, 167, 192)
Tonal Palettesecondarytone 70
secondary80
#CCC2DC
rgb(204, 194, 220)
Tonal Palettesecondarytone 80
secondary90
#E8DEF8
rgb(232, 222, 248)
Tonal Palettesecondarytone 90
secondary95
#F6EDFF
rgb(246, 237, 255)
Tonal Palettesecondarytone 95
secondary98
#FEF7FF
rgb(254, 247, 255)
Tonal Palettesecondarytone 98
secondary99
#FFFBFE
rgb(255, 251, 254)
Tonal Palettesecondarytone 99
secondary100
#FFFFFF
rgb(255, 255, 255)
Tonal Palettesecondarytone 100
tertiary0
#000000
rgb(0, 0, 0)
Tonal Palettetertiarytone 0
tertiary10
#31111D
rgb(49, 17, 29)
Tonal Palettetertiarytone 10
tertiary20
#492532
rgb(73, 37, 50)
Tonal Palettetertiarytone 20
tertiary30
#633B48
rgb(99, 59, 72)
Tonal Palettetertiarytone 30
tertiary40
#7D5260
rgb(125, 82, 96)
Tonal Palettetertiarytone 40
tertiary50
#986977
rgb(152, 105, 119)
Tonal Palettetertiarytone 50
tertiary60
#B58392
rgb(181, 131, 146)
Tonal Palettetertiarytone 60
tertiary70
#D29DAC
rgb(210, 157, 172)
Tonal Palettetertiarytone 70
tertiary80
#EFB8C8
rgb(239, 184, 200)
Tonal Palettetertiarytone 80
tertiary90
#FFD8E4
rgb(255, 216, 228)
Tonal Palettetertiarytone 90
tertiary95
#FFECF1
rgb(255, 236, 241)
Tonal Palettetertiarytone 95
tertiary98
#FFF8F8
rgb(255, 248, 248)
Tonal Palettetertiarytone 98
tertiary99
#FFFBFA
rgb(255, 251, 250)
Tonal Palettetertiarytone 99
tertiary100
#FFFFFF
rgb(255, 255, 255)
Tonal Palettetertiarytone 100
error0
#000000
rgb(0, 0, 0)
Tonal Paletteerrortone 0
error10
#410E0B
rgb(65, 14, 11)
Tonal Paletteerrortone 10
error20
#601410
rgb(96, 20, 16)
Tonal Paletteerrortone 20
error30
#8C1D18
rgb(140, 29, 24)
Tonal Paletteerrortone 30
error40
#B3261E
rgb(179, 38, 30)
Tonal Paletteerrortone 40
error50
#DC362E
rgb(220, 54, 46)
Tonal Paletteerrortone 50
error60
#E46962
rgb(228, 105, 98)
Tonal Paletteerrortone 60
error70
#EC928E
rgb(236, 146, 142)
Tonal Paletteerrortone 70
error80
#F2B8B5
rgb(242, 184, 181)
Tonal Paletteerrortone 80
error90
#F9DEDC
rgb(249, 222, 220)
Tonal Paletteerrortone 90
error95
#FCEEEE
rgb(252, 238, 238)
Tonal Paletteerrortone 95
error98
#FFF8F7
rgb(255, 248, 247)
Tonal Paletteerrortone 98
error99
#FFFBF9
rgb(255, 251, 249)
Tonal Paletteerrortone 99
error100
#FFFFFF
rgb(255, 255, 255)
Tonal Paletteerrortone 100
neutral0
#000000
rgb(0, 0, 0)
Tonal Paletteneutraltone 0
neutral10
#1C1B1F
rgb(28, 27, 31)
Tonal Paletteneutraltone 10
neutral20
#313033
rgb(49, 48, 51)
Tonal Paletteneutraltone 20
neutral30
#484649
rgb(72, 70, 73)
Tonal Paletteneutraltone 30
neutral40
#605D62
rgb(96, 93, 98)
Tonal Paletteneutraltone 40
neutral50
#787579
rgb(120, 117, 121)
Tonal Paletteneutraltone 50
neutral60
#939094
rgb(147, 144, 148)
Tonal Paletteneutraltone 60
neutral70
#AEAAAE
rgb(174, 170, 174)
Tonal Paletteneutraltone 70
neutral80
#C9C5CA
rgb(201, 197, 202)
Tonal Paletteneutraltone 80
neutral90
#E6E1E5
rgb(230, 225, 229)
Tonal Paletteneutraltone 90
neutral95
#F4EFF4
rgb(244, 239, 244)
Tonal Paletteneutraltone 95
neutral98
#FDF8FD
rgb(253, 248, 253)
Tonal Paletteneutraltone 98
neutral99
#FFFBFE
rgb(255, 251, 254)
Tonal Paletteneutraltone 99
neutral100
#FFFFFF
rgb(255, 255, 255)
Tonal Paletteneutraltone 100
neutral-variant0
#000000
rgb(0, 0, 0)
Tonal Paletteneutral-varianttone 0
neutral-variant10
#1D1A22
rgb(29, 26, 34)
Tonal Paletteneutral-varianttone 10
neutral-variant20
#322F37
rgb(50, 47, 55)
Tonal Paletteneutral-varianttone 20
neutral-variant30
#49454F
rgb(73, 69, 79)
Tonal Paletteneutral-varianttone 30
neutral-variant40
#605D66
rgb(96, 93, 102)
Tonal Paletteneutral-varianttone 40
neutral-variant50
#79747E
rgb(121, 116, 126)
Tonal Paletteneutral-varianttone 50
neutral-variant60
#938F99
rgb(147, 143, 153)
Tonal Paletteneutral-varianttone 60
neutral-variant70
#AEA9B4
rgb(174, 169, 180)
Tonal Paletteneutral-varianttone 70
neutral-variant80
#CAC4D0
rgb(202, 196, 208)
Tonal Paletteneutral-varianttone 80
neutral-variant90
#E7E0EC
rgb(231, 224, 236)
Tonal Paletteneutral-varianttone 90
neutral-variant95
#F5EEFA
rgb(245, 238, 250)
Tonal Paletteneutral-varianttone 95
neutral-variant98
#FEF7FF
rgb(254, 247, 255)
Tonal Paletteneutral-varianttone 98
neutral-variant99
#FFFBFE
rgb(255, 251, 254)
Tonal Paletteneutral-varianttone 99
neutral-variant100
#FFFFFF
rgb(255, 255, 255)
Tonal Paletteneutral-varianttone 100
Mengapa Memakai Referensi Warna Material Design Kami?
- Cari Semua Token Material: temukan token Material Design 3 seketika berdasarkan nama peran, nilai HEX, nilai RGB, keluarga, atau mode.
- Tampilan Terang, Gelap, dan Tonal: beralih antara peran skema terang, peran skema gelap, dan token palet tonal Material You dari satu referensi.
- Salin Sekali Klik: salin nama token, nilai HEX, dan nilai RGB langsung dari tiap kartu untuk mempercepat serah terima desain ke implementasi.
- Alat Privat Hanya di Browser: semua pencarian, pemfilteran, dan penyalinan berjalan lokal di browser Anda tanpa unggahan, akun, atau pelacakan.
Kasus Penggunaan Umum Referensi Warna Material Design
- Tema Aplikasi Android: petakan peran warna Compose MaterialTheme dengan cepat saat membangun layar Android yang mengikuti panduan Material Design 3.
- Token Desain Lintas Platform: rujuk warna Material You yang sama di implementasi Android, Flutter, dan web untuk mengurangi perbedaan visual.
- Serah Terima Desain ke Kode: ubah token pilihan desainer menjadi nilai HEX dan RGB siap salin untuk langsung dipakai di kode dan variabel gaya.
- Audit Pustaka Komponen: periksa bahwa kartu, dialog, dan permukaan memakai pasangan peran yang benar untuk latar, garis luar, dan teks di atas warna.
- Eksplorasi Palet Brand: jelajahi palet tonal di semua keluarga untuk memilih nada seimbang bagi aksen brand, status, dan permukaan semantik.
- Tinjauan Aksesibilitas UI: validasi pilihan peran sebelum implementasi dengan memeriksa keterbacaan kombinasi token di mode gelap dan terang.
Pertanyaan yang Sering Diajukan
Referensi Warna Material Design adalah pencarian token warna Material Design 3. Alat ini mencakup token peran terang dan gelap serta nilai palet tonal Material You, sehingga Anda bisa cepat menemukan nama token resmi dan nilai warnanya.
Ya. Alat ini mencakup token peran terang dan gelap dasar seperti primary, on-primary, surface, on-surface, outline, peran error, dan varian kontainer yang dipakai di sistem MD3.
Ya. Anda bisa mencari berdasarkan nama token, nilai HEX, nilai RGB, label mode, atau label keluarga. Ini berguna saat mengubah spesifikasi desain menjadi token implementasi.
Ya. Referensi ini mencakup nilai palet tonal di langkah nada utama untuk keluarga primary, secondary, tertiary, error, neutral, dan neutral-variant.
Tidak. Halaman ini berisi token referensi dasar Material Design 3. Skema warna dinamis yang dibuat dari warna benih berbeda-beda tergantung warna masukan dan konteks runtime, dan di luar cakupan pencarian statis ini.
Ya. Alat ini sepenuhnya gratis, tanpa pendaftaran, tanpa akun, dan tanpa batas penggunaan.
Ya. Semuanya berjalan lokal di browser Anda. Alat ini tidak mengunggah masukan, tidak menyimpan pencarian, dan tidak mengirim permintaan warna ke layanan mana pun.
Ya. Token dan nilainya berguna untuk Android, web, dan sistem desain lintas platform. Anda bisa menyalin nama token dan nilai warna langsung ke dokumentasi, token desain, dan kode.