Free Tool

Flutter Color Palette Generator

Generate a full Material Design color swatch from any hex color. Get shades 50 through 900 with Dart and CSS code ready to copy.

50
100
200
300
400
500
600
700
800
900
50
Hex
RGB227, 247, 241
Dart
100
Hex
RGB190, 242, 226
Dart
200
Hex
RGB131, 237, 204
Dart
300
Hex
RGB61, 236, 182
Dart
400
Hex
RGB13, 213, 151
Dart
500(base)
Hex
RGB5, 150, 105
Dart
600
Hex
RGB3, 124, 87
Dart
700
Hex
RGB1, 98, 68
Dart
800
Hex
RGB0, 71, 49
Dart
900
Hex
RGB0, 47, 32
Dart
Dart MaterialColor
const MaterialColor myColor = MaterialColor(
  0xFF059669,
  <int, Color>{
    50: Color(0xFFE3F7F1),
    100: Color(0xFFBEF2E2),
    200: Color(0xFF83EDCC),
    300: Color(0xFF3DECB6),
    400: Color(0xFF0DD597),
    500: Color(0xFF059669),
    600: Color(0xFF037C57),
    700: Color(0xFF016244),
    800: Color(0xFF004731),
    900: Color(0xFF002F20),
  },
);
CSS Custom Properties
:root {
  --color-50: #E3F7F1;
  --color-100: #BEF2E2;
  --color-200: #83EDCC;
  --color-300: #3DECB6;
  --color-400: #0DD597;
  --color-500: #059669;
  --color-600: #037C57;
  --color-700: #016244;
  --color-800: #004731;
  --color-900: #002F20;
}

Using this tool

Enter a hex color to generate ten shades using HSL adjustments. Copy the result as a Dart MaterialColor or CSS custom properties.

What the output does not tell you

This is a simple shade generator, not a Material 3 theme builder or an accessibility check. Test actual foreground and background combinations; a color ramp alone does not establish readable contrast.

Flutter accessibility guidance

Need help applying this to your product?

Mobile app development with me