This table lists all current built-in color schemes in FlexColorScheme, the version it was released with, its enum value, short name and description. It shows a small thumbnail of each color scheme in light and dark theme mode. Clicking on a thumbnail opens a high-resolution version of the image.
The column Swap on M3 shows if a scheme will when the
useMaterial3 are set to true, swap its
tertiary colors and their container colors. It is only defined to swap, if doing so makes a scheme originally designed for the Material-2 color system, a better fit for intended color design when using the Material 3 color system. If it doesn't improve the fit or if it is already a good fit, the colors aren't set to be swapped. The indicated swap only happens if you also set both
useMaterial3 to true. This optional swapping of
tertiary colors, was introduced in FlexColorScheme version 6.1.0 to make color schemes originally designed for the Material-2 color system, a better fit when using Material-3 and its color system.
Color schemes released starting from version 5.0, were designed with the Material 3 color system in mind. They can even be native Material 3 schemes based on pre-seeded colors or slight variations of them. Color schemes used as examples in the Material 3 design guide, most prominently the one referred to as Material baseline, are also included.
Using seed generated color schemes, with the predefined schemes' defined light theme mode primary, secondary and tertiary colors as input, any predefined scheme can be made into a perfect fit for the Material 3 color system and its intended color design. It works even better if you don't use the secondary color as a key color when making seed generated color schemes. In many cases you can also include the secondary color, and still get a color scheme that fits the Material 3 color system's design intent.
FlexColorScheme can use the secondary color of a built-in scheme as a key color to seed generate secondary colors. The secondary color and its container are in the Material-3 color system used for less prominent components in the UI. In the color design it is typically a less chromatic version of the primary-color's hue, or a hue close to it. If the hue of a built-in scheme's secondary color, or your custom scheme's secondary color, differs significantly in hue from the primary color, then it may be preferred to not use the secondary color as a key color when seed generating a color scheme. If you for such cases exclude it, you will get a scheme with perfect Material-3 design fit. You will then not find the hue of the scheme's secondary color, in the resulting seed-generated effective color scheme. The more restricted seed generation offered by Flutter SDK's via e.g.
ColorScheme.fromSeed, can only use one seed color. With it, you have no choice.
In the scheme reference table, the column Second Key indicates if it is preferred to exclude a scheme's secondary color when making a seed generated Material 3 color scheme from it. This applies if you want to get a scheme that fits the secondary color's design intent in the Material 3 color system. The recommendations below are based on that
useMaterial3 are also set to
true. The recommendation meanings are:
- exclude, prefer not using the secondary color as a seed key with this scheme.
- borderline, the resulting color is a bit off from the M3 intent, but not too bad, if you flex a bit.
- may use, it is not exactly the same, but close enough to probably not matter.
- can use, this scheme works perfectly fine with using the secondary color as seed-key. The result will be almost the same even if it is not used as seed-key.
The tertiary colors don't have the same usage and design restrictions as the secondary colors in Material 3. With tertiary color, using it as a key color or using the default Material 3 color systems +60 degree hue rotation from primary color, is more of a color design choice. Either will work fine, they just give different resulting hues for the generated tertiary colors.