Scheme Reference

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 FlexScheme.light/dark and FlexThemeData.light/dark properties swapLegacyOnMaterial3 and useMaterial3 are set to true, swap its secondary, 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 does not improve the fit or if it is already a good fit, the colors are not set to be swapped. The indicated swap only happens if you also set both swapLegacyOnMaterial3 and useMaterial3 to true. This optional swapping of secondary and 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. This even more so, if you do not use the secondary color as a key color when making seed generated color schemes. In many cases you can however 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 M3 design fit. You will then of course 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, so 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 swapLegacyOnMaterial3 and 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 a 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 gives different hue results for the generated tertiary colors.

ReleaseSwap on M3Second KeyFlexSchemeScheme Name  Description Light   Dark   
1.0.0YesexcludematerialMaterial defaultDefault Material 2 color theme, used in the design guide.
1.0.0YesexcludematerialHcMaterial high contrastHigh contrast Material 2 design guide theme.
1.0.0Yescan useblueBlue delightBlue color theme, based on Material blue and light blue colors.
1.0.0NoborderlineindigoIndigo nightsIndigo color theme, based on Material indigo and deep purple colors.
1.0.0YesexcludehippieBlueHippie blueHippie blue with surfie green and chock coral pink theme.
1.0.0NoborderlineaquaBlueAqua blueAqua tropical ocean blue theme.
1.0.0Nomay usebrandBlueBrand bluesA mixture of blue colors from well known web brands.
1.0.0NoborderlinedeepBlueDeep blue seaDark deep blue sea color theme.
1.0.0NoborderlinesakuraPink sakuraPink color theme, based on sakura cherry blossom like colors.
1.0.0YesexcludemandyRedOh Mandy redMandy red and Viking blue colored theme.
1.0.0YesborderlineredRed tornadoRed color theme, based on Material red and pink colors.
1.0.0Yescan useredWineRed red wineRed color theme, based on red wine like colors.
1.0.0YesborderlinepurpleBrownPurple brownPurple brown tinted aubergine and eggplant colored theme.
1.0.0YesexcludegreenGreen forestGreen color theme, based on Material green and cyan colors.
1.0.0YesexcludemoneyGreen moneyGreen money and finance style color theme.
1.0.0Yescan usejungleGreen jungleGreen jungle and rain forest color theme.
1.0.0YesexcludegreyLawGrey lawMaterial blue grey and ultra dark purple color theme. Colors suitable for law firms.
1.0.0YesexcludewasabiWillow and wasabiWild Willow and wasabi green with orchid purple inspired colors.
1.0.0Yescan usegoldGold sunsetGold sunset color theme, based on orange like colors.
1.0.0YesexcludemangoMango mojitoOrange and green Mango mojito color theme.
1.2.0NoexcludeamberAmber blueAmber blaze and blue color theme, based on Material amber and blue accent colors, a high-contrast theme. An alternative to the default Material high contrast theme.
1.2.0NoexcludevesuviusBurnVesuvius burnedVesuvius burned orange and eden green theme.
1.2.0YesexcludedeepPurpleDeep purpleDeep purple daisy bush theme, based on Material deepPurple and lightBlueAccent colors.
1.2.0YesexcludeebonyClayEbony clayEbony clay dark blue-grey and watercourse green colored theme.
1.4.1NoexcludebarossaBarossaBarossa red and cardin green colored theme. A somber color set suited for courts and law firms.
1.4.1YesexcludesharkShark and orangeShark grey and orange ecstasy colored theme.
1.4.1NoexcludebigStoneBig stone tulipBig stone blue and tulip tree yellow colored theme.
1.4.1NoexcludedamaskDamask and lunarDamask red and lunar green colored theme.
3.0.0Yescan usebahamaBlueBahama and trinidadBahama blue and trinidad orange colored theme.
3.0.0Yesmay usemallardGreenMallard and valenciaMallard green and Valencia pink colored theme.
3.0.0YesexcludeespressoEspresso and cremaEspresso dark brown and crema colored theme.
3.0.0Yescan useouterSpaceOuter space stageOuter space dark blue-grey and stage red theme.
4.0.0YesexcludeblueWhaleBlue whaleBlue whale, jungle green and outrageous tango orange theme.
4.0.0YesexcludesanJuanBlueSan Juan blueSan Juan blue and pink salmon theme.
4.0.0NoexcluderosewoodRosewoodRosewood red, with horses neck and driftwood theme.
4.0.0Yescan useblumineBlueBlumineBlumine, easter blue and saffron mango theme.
5.0.0Nocan useflutterDashFlutter DashFlutter Dash wallpaper based theme.
5.0.0Nocan usematerialBaselineM3 baselineMaterial guide 3 baseline based theme.
5.0.0Nocan useverdunHemlockVerdun greenMaterial guide 3 verdun and mineral green with hemlock.
5.0.0Nocan usedellGenoaDell genoa greenMaterial guide 3 theme with dell, axolotl and genoa greens.