Colors class Null safety

Color and ColorSwatch constants which represent Material design's color palette.

Instead of using an absolute color from these palettes, consider using Theme.of to obtain the local ThemeData.colorScheme, which defines the colors that most of the Material components use by default.

Most swatches have colors from 100 to 900 in increments of one hundred, plus the color 50. The smaller the number, the more pale the color. The greater the number, the darker the color. The accent swatches (e.g. redAccent) only have the values 100, 200, 400, and 700.

In addition, a series of blacks and whites with common opacities are available. For example, black54 is a pure black with 54% opacity.

To select a specific color from one of the swatches, index into the swatch using an integer for the specific color desired, as follows:
Color selection = Colors.green[400]!; // Selects a mid-range green.

Each ColorSwatch constant is a color and can used directly. For example:
Container(
  color: Colors.blue, // same as Colors.blue[500] or Colors.blue.shade500
)

Color palettes

Blacks and whites

These colors are identified by their transparency. The low transparency levels (e.g. Colors.white12 and Colors.white10) are very hard to see and should be avoided in general. They are intended for very subtle effects.

The Colors.transparent color isn't shown here because it is entirely invisible!

See also:

Properties

hashCode int
The hash code for this object.
read-onlyinherited
runtimeType Type
A representation of the runtime type of the object.
read-onlyinherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed.
inherited
toString() String
A string representation of this object.
inherited

Operators

operator ==(Object other) bool
The equality operator.
inherited

Constants

accents → const List<MaterialAccentColor>
The Material Design accent color swatches.
<MaterialAccentColor>[redAccent, pinkAccent, purpleAccent, deepPurpleAccent, indigoAccent, blueAccent, lightBlueAccent, cyanAccent, tealAccent, greenAccent, lightGreenAccent, limeAccent, yellowA…
amber → const MaterialColor
The amber primary color and swatch.
MaterialColor(_amberPrimaryValue, <int, Color>{50 : Color(0xFFFFF8E1), 100 : Color(0xFFFFECB3), 200 : Color(0xFFFFE082), 300 : Color(0xFFFFD54F), 400 : Color(0xFFFFCA28), 500 : Color(_amberPrima…
amberAccent → const MaterialAccentColor
The amber accent color and swatch.
MaterialAccentColor(_amberAccentPrimaryValue, <int, Color>{100 : Color(0xFFFFE57F), 200 : Color(_amberAccentPrimaryValue), 400 : Color(0xFFFFC400), 700 : Color(0xFFFFAB00)})
black → const Color
Completely opaque black.
Color(0xFF000000)
black12 → const Color
Black with 12% opacity.
Color(0x1F000000)
black26 → const Color
Black with 26% opacity.
Color(0x42000000)
black38 → const Color
Black with 38% opacity.
Color(0x61000000)
black45 → const Color
Black with 45% opacity.
Color(0x73000000)
black54 → const Color
Black with 54% opacity.
Color(0x8A000000)
black87 → const Color
Black with 87% opacity.
Color(0xDD000000)
blue → const MaterialColor
The blue primary color and swatch.
MaterialColor(_bluePrimaryValue, <int, Color>{50 : Color(0xFFE3F2FD), 100 : Color(0xFFBBDEFB), 200 : Color(0xFF90CAF9), 300 : Color(0xFF64B5F6), 400 : Color(0xFF42A5F5), 500 : Color(_bluePrimary…
blueAccent → const MaterialAccentColor
The blue accent color and swatch.
MaterialAccentColor(_blueAccentPrimaryValue, <int, Color>{100 : Color(0xFF82B1FF), 200 : Color(_blueAccentPrimaryValue), 400 : Color(0xFF2979FF), 700 : Color(0xFF2962FF)})
blueGrey → const MaterialColor
The blue-grey primary color and swatch.
MaterialColor(_blueGreyPrimaryValue, <int, Color>{50 : Color(0xFFECEFF1), 100 : Color(0xFFCFD8DC), 200 : Color(0xFFB0BEC5), 300 : Color(0xFF90A4AE), 400 : Color(0xFF78909C), 500 : Color(_blueGre…
brown → const MaterialColor
The brown primary color and swatch.
MaterialColor(_brownPrimaryValue, <int, Color>{50 : Color(0xFFEFEBE9), 100 : Color(0xFFD7CCC8), 200 : Color(0xFFBCAAA4), 300 : Color(0xFFA1887F), 400 : Color(0xFF8D6E63), 500 : Color(_brownPrima…
cyan → const MaterialColor
The cyan primary color and swatch.
MaterialColor(_cyanPrimaryValue, <int, Color>{50 : Color(0xFFE0F7FA), 100 : Color(0xFFB2EBF2), 200 : Color(0xFF80DEEA), 300 : Color(0xFF4DD0E1), 400 : Color(0xFF26C6DA), 500 : Color(_cyanPrimary…
cyanAccent → const MaterialAccentColor
The cyan accent color and swatch.
MaterialAccentColor(_cyanAccentPrimaryValue, <int, Color>{100 : Color(0xFF84FFFF), 200 : Color(_cyanAccentPrimaryValue), 400 : Color(0xFF00E5FF), 700 : Color(0xFF00B8D4)})
deepOrange → const MaterialColor
The deep orange primary color and swatch.
MaterialColor(_deepOrangePrimaryValue, <int, Color>{50 : Color(0xFFFBE9E7), 100 : Color(0xFFFFCCBC), 200 : Color(0xFFFFAB91), 300 : Color(0xFFFF8A65), 400 : Color(0xFFFF7043), 500 : Color(_deepO…
deepOrangeAccent → const MaterialAccentColor
The deep orange accent color and swatch.
MaterialAccentColor(_deepOrangeAccentPrimaryValue, <int, Color>{100 : Color(0xFFFF9E80), 200 : Color(_deepOrangeAccentPrimaryValue), 400 : Color(0xFFFF3D00), 700 : Color(0xFFDD2C00)})
deepPurple → const MaterialColor
The deep purple primary color and swatch.
MaterialColor(_deepPurplePrimaryValue, <int, Color>{50 : Color(0xFFEDE7F6), 100 : Color(0xFFD1C4E9), 200 : Color(0xFFB39DDB), 300 : Color(0xFF9575CD), 400 : Color(0xFF7E57C2), 500 : Color(_deepP…
deepPurpleAccent → const MaterialAccentColor
The deep purple accent color and swatch.
MaterialAccentColor(_deepPurpleAccentPrimaryValue, <int, Color>{100 : Color(0xFFB388FF), 200 : Color(_deepPurpleAccentPrimaryValue), 400 : Color(0xFF651FFF), 700 : Color(0xFF6200EA)})
green → const MaterialColor
The green primary color and swatch.
MaterialColor(_greenPrimaryValue, <int, Color>{50 : Color(0xFFE8F5E9), 100 : Color(0xFFC8E6C9), 200 : Color(0xFFA5D6A7), 300 : Color(0xFF81C784), 400 : Color(0xFF66BB6A), 500 : Color(_greenPrima…
greenAccent → const MaterialAccentColor
The green accent color and swatch.
MaterialAccentColor(_greenAccentPrimaryValue, <int, Color>{100 : Color(0xFFB9F6CA), 200 : Color(_greenAccentPrimaryValue), 400 : Color(0xFF00E676), 700 : Color(0xFF00C853)})
grey → const MaterialColor
The grey primary color and swatch.
MaterialColor(_greyPrimaryValue, <int, Color>{50 : Color(0xFFFAFAFA), 100 : Color(0xFFF5F5F5), 200 : Color(0xFFEEEEEE), 300 : Color(0xFFE0E0E0), 350 : Color(0xFFD6D6D6), 400 : Color(0xFFBDBDBD),…
indigo → const MaterialColor
The indigo primary color and swatch.
MaterialColor(_indigoPrimaryValue, <int, Color>{50 : Color(0xFFE8EAF6), 100 : Color(0xFFC5CAE9), 200 : Color(0xFF9FA8DA), 300 : Color(0xFF7986CB), 400 : Color(0xFF5C6BC0), 500 : Color(_indigoPri…
indigoAccent → const MaterialAccentColor
The indigo accent color and swatch.
MaterialAccentColor(_indigoAccentPrimaryValue, <int, Color>{100 : Color(0xFF8C9EFF), 200 : Color(_indigoAccentPrimaryValue), 400 : Color(0xFF3D5AFE), 700 : Color(0xFF304FFE)})
lightBlue → const MaterialColor
The light blue primary color and swatch.
MaterialColor(_lightBluePrimaryValue, <int, Color>{50 : Color(0xFFE1F5FE), 100 : Color(0xFFB3E5FC), 200 : Color(0xFF81D4FA), 300 : Color(0xFF4FC3F7), 400 : Color(0xFF29B6F6), 500 : Color(_lightB…
lightBlueAccent → const MaterialAccentColor
The light blue accent swatch.
MaterialAccentColor(_lightBlueAccentPrimaryValue, <int, Color>{100 : Color(0xFF80D8FF), 200 : Color(_lightBlueAccentPrimaryValue), 400 : Color(0xFF00B0FF), 700 : Color(0xFF0091EA)})
lightGreen → const MaterialColor
The light green primary color and swatch.
MaterialColor(_lightGreenPrimaryValue, <int, Color>{50 : Color(0xFFF1F8E9), 100 : Color(0xFFDCEDC8), 200 : Color(0xFFC5E1A5), 300 : Color(0xFFAED581), 400 : Color(0xFF9CCC65), 500 : Color(_light…
lightGreenAccent → const MaterialAccentColor
The light green accent color and swatch.
MaterialAccentColor(_lightGreenAccentPrimaryValue, <int, Color>{100 : Color(0xFFCCFF90), 200 : Color(_lightGreenAccentPrimaryValue), 400 : Color(0xFF76FF03), 700 : Color(0xFF64DD17)})
lime → const MaterialColor
The lime primary color and swatch.
MaterialColor(_limePrimaryValue, <int, Color>{50 : Color(0xFFF9FBE7), 100 : Color(0xFFF0F4C3), 200 : Color(0xFFE6EE9C), 300 : Color(0xFFDCE775), 400 : Color(0xFFD4E157), 500 : Color(_limePrimary…
limeAccent → const MaterialAccentColor
The lime accent primary color and swatch.
MaterialAccentColor(_limeAccentPrimaryValue, <int, Color>{100 : Color(0xFFF4FF81), 200 : Color(_limeAccentPrimaryValue), 400 : Color(0xFFC6FF00), 700 : Color(0xFFAEEA00)})
orange → const MaterialColor
The orange primary color and swatch.
MaterialColor(_orangePrimaryValue, <int, Color>{50 : Color(0xFFFFF3E0), 100 : Color(0xFFFFE0B2), 200 : Color(0xFFFFCC80), 300 : Color(0xFFFFB74D), 400 : Color(0xFFFFA726), 500 : Color(_orangePri…
orangeAccent → const MaterialAccentColor
The orange accent color and swatch.
MaterialAccentColor(_orangeAccentPrimaryValue, <int, Color>{100 : Color(0xFFFFD180), 200 : Color(_orangeAccentPrimaryValue), 400 : Color(0xFFFF9100), 700 : Color(0xFFFF6D00)})
pink → const MaterialColor
The pink primary color and swatch.
MaterialColor(_pinkPrimaryValue, <int, Color>{50 : Color(0xFFFCE4EC), 100 : Color(0xFFF8BBD0), 200 : Color(0xFFF48FB1), 300 : Color(0xFFF06292), 400 : Color(0xFFEC407A), 500 : Color(_pinkPrimary…
pinkAccent → const MaterialAccentColor
The pink accent color swatch.
MaterialAccentColor(_pinkAccentPrimaryValue, <int, Color>{100 : Color(0xFFFF80AB), 200 : Color(_pinkAccentPrimaryValue), 400 : Color(0xFFF50057), 700 : Color(0xFFC51162)})
primaries → const List<MaterialColor>
The Material Design primary color swatches, excluding grey.
<MaterialColor>[red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, blueGrey]
purple → const MaterialColor
The purple primary color and swatch.
MaterialColor(_purplePrimaryValue, <int, Color>{50 : Color(0xFFF3E5F5), 100 : Color(0xFFE1BEE7), 200 : Color(0xFFCE93D8), 300 : Color(0xFFBA68C8), 400 : Color(0xFFAB47BC), 500 : Color(_purplePri…
purpleAccent → const MaterialAccentColor
The purple accent color and swatch.
MaterialAccentColor(_purpleAccentPrimaryValue, <int, Color>{100 : Color(0xFFEA80FC), 200 : Color(_purpleAccentPrimaryValue), 400 : Color(0xFFD500F9), 700 : Color(0xFFAA00FF)})
red → const MaterialColor
The red primary color and swatch.
MaterialColor(_redPrimaryValue, <int, Color>{50 : Color(0xFFFFEBEE), 100 : Color(0xFFFFCDD2), 200 : Color(0xFFEF9A9A), 300 : Color(0xFFE57373), 400 : Color(0xFFEF5350), 500 : Color(_redPrimaryVa…
redAccent → const MaterialAccentColor
The red accent swatch.
MaterialAccentColor(_redAccentValue, <int, Color>{100 : Color(0xFFFF8A80), 200 : Color(_redAccentValue), 400 : Color(0xFFFF1744), 700 : Color(0xFFD50000)})
teal → const MaterialColor
The teal primary color and swatch.
MaterialColor(_tealPrimaryValue, <int, Color>{50 : Color(0xFFE0F2F1), 100 : Color(0xFFB2DFDB), 200 : Color(0xFF80CBC4), 300 : Color(0xFF4DB6AC), 400 : Color(0xFF26A69A), 500 : Color(_tealPrimary…
tealAccent → const MaterialAccentColor
The teal accent color and swatch.
MaterialAccentColor(_tealAccentPrimaryValue, <int, Color>{100 : Color(0xFFA7FFEB), 200 : Color(_tealAccentPrimaryValue), 400 : Color(0xFF1DE9B6), 700 : Color(0xFF00BFA5)})
transparent → const Color
Completely invisible.
Color(0x00000000)
white → const Color
Completely opaque white.
Color(0xFFFFFFFF)
white10 → const Color
White with 10% opacity.
Color(0x1AFFFFFF)
white12 → const Color
White with 12% opacity.
Color(0x1FFFFFFF)
white24 → const Color
White with 24% opacity.
Color(0x3DFFFFFF)
white30 → const Color
White with 30% opacity.
Color(0x4DFFFFFF)
white38 → const Color
White with 38% opacity.
Color(0x62FFFFFF)
white54 → const Color
White with 54% opacity.
Color(0x8AFFFFFF)
white60 → const Color
White with 60% opacity.
Color(0x99FFFFFF)
white70 → const Color
White with 70% opacity.
Color(0xB3FFFFFF)
yellow → const MaterialColor
The yellow primary color and swatch.
MaterialColor(_yellowPrimaryValue, <int, Color>{50 : Color(0xFFFFFDE7), 100 : Color(0xFFFFF9C4), 200 : Color(0xFFFFF59D), 300 : Color(0xFFFFF176), 400 : Color(0xFFFFEE58), 500 : Color(_yellowPri…
yellowAccent → const MaterialAccentColor
The yellow accent color and swatch.
MaterialAccentColor(_yellowAccentPrimaryValue, <int, Color>{100 : Color(0xFFFFFF8D), 200 : Color(_yellowAccentPrimaryValue), 400 : Color(0xFFFFEA00), 700 : Color(0xFFFFD600)})