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;
}

How to Use the Flutter Color Palette Generator

This free color palette generator creates a full Material Design color swatch from any hex color you provide. It generates 10 shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) following the Material Design color system used by Flutter and Android.

Enter your brand color or pick one with the color picker. The tool uses HSL-based lightness and saturation adjustments to produce visually harmonious shades: lighter tints for weights 50 through 400, your original color at weight 500, and progressively darker shades for weights 600 through 900.

Each shade shows its hex value, RGB components, and the Dart Color(0xFF...) code. Use the “Copy as Dart” button to get a complete MaterialColor definition ready to paste into your Flutter theme, or use “Copy as CSS” for CSS custom properties you can use in any web project.

Need a custom Flutter theme or design system? Our Flutter development team builds polished, branded mobile apps with cohesive design systems.

Need a Custom Flutter Design System?

We craft beautiful, accessible Flutter apps with cohesive color systems and polished UIs. Let's design your app together.

Get Started