Flutter makes it very easy to create a custom theme for your application. This article will quickly outline the various ways of using colors in Flutter.
The Colors Class
The Colors class provides quick access to colors that match the Material Design color palette.
Primary Colors

- Primary colors have shades from 100 - 900 in increments of one hundred with a starting shade of 50
- The color without a shade (ex:
Colors.pink
) is equivalent to the 500 shade
Accent Colors

- Accent colors have shades of 100, 200, 400, and 700
- The color without a shade (ex:
Colors.pinkAccent
) is equivalent to the 200 shade
Blacks and Whites
The colors class also provides a series of black and white colors. The numbers included in the name describe their opacity level.


Transparent
The Colors.transparent
color represents a fully transparent color.
The Color Class
The Color class (note the lack of a trailing s!) is what we'll use to create our own custom colors.
HEX Colors
We can create a color using HEX values with the Color
constructor
static const c = Color(0xFF42A5F5);
- Prefix the value with
0x
- The first 2 digits are the opacity, a hex code from 0 to FF
- The last 6 digits is the HEX color code
ARGB Colors
We can create a color using ARGB values with the Color.fromARGB
constructor
static const c = Color.fromARGB(255, 66, 165, 245);
- The first value is the alpha value, an
int
from 0 to 255 - The last 3 values are the RGB colors, an
int
from 0 to 255 - Using HEX values is supported
RGBO Colors
We can create a color using RGBO values with the Color.fromRGBO
constructor
static const c = Color.fromRGBO(66, 165, 245, 1.0);
- The first 3 values are the RGB colors, an
int
from 0 to 255 - The last value is the opacity, a
double
from 0.0 to 1.0 - Using HEX values is supported for the first 3 values
Wrapping Up
Thanks for reading! If you enjoyed this article, please consider sharing it with others and becoming a sponsor on GitHub. ❤️