Flutter Color Generator
flutter
static const Color primary = Color(0xFF3B82F6); static const Color danger = Color(0xFFEF4444);
You Might Also Need
The flutter color generator converts named hex colors into Dart constants using the Color(0xFF...) form, ready to paste into a Flutter colors class.
What is Flutter Color Generator?
The flutter color generator takes a list of named colours and writes out one Dart line per entry. The default rows produce a line for primary and a line for danger, and the Add button appends further rows named color plus a number. Each row pairs a name field with a colour field and a delete button, and the output panel updates as you edit.
- Each line takes the form of a static const Color declaration, with the name from the left of the row and the value converted into Flutter's ARGB integer literal.
- That conversion is the part worth understanding: Dart's Color constructor takes a single thirty-two bit integer in which the first two hex digits carry the alpha channel, not a string.
- Flutter's convention for an opaque colour is therefore a color 0xff prefix in front of the six hex digits, which is why the value you type as a six-digit hex becomes an eight-digit literal in the output.
- Nothing is lost in the process — the alpha is simply made explicit.
The output is a set of declarations rather than a complete class. That is the right granularity for most projects: paste the lines inside the class you already keep for design tokens and they compile immediately, with no wrapper to reconcile and no naming scheme imposed. The names you type are the names in the code, so the token file and the call sites use the same vocabulary.
- In use, the workflow is to type the token names in the left column in the same casing your project expects — lowerCamelCase is the Dart convention, so surfaceMuted rather than surface-muted — set each colour, then copy.
- Because the output is one line per row, it can be pasted in pieces as a palette grows, and the six-digit values are the same ones you would get from a design file, which keeps the handoff honest.
There are real limits worth knowing. The alpha channel is always opaque, so translucent colours cannot be expressed here; Flutter handles those with a separate withOpacity call at the point of use. Only the ARGB hex form is produced, so there is no MaterialColor swatch with its shade map and no ThemeData scaffold — a Material palette is built from a seed colour rather than from a list of literals. The output is also not a complete Dart file: it has no class declaration, no imports and no closing brace, so it is a block of declarations to place rather than something to compile on its own.
Compared with the other native exporters, this one is deliberately narrow — Android resources, iOS UIColor initialisers and Flutter constants each get their own page, sharing the same row interface. Used as a flutter color generator for a token list, it is the shortest route from hex values to the flutter color constants a project needs: type the names, read off the dart color from hex conversions, and copy the lines into your flutter colors class with the color 0xff form already written.
How to use Flutter Color Generator
- Type the token names in the left column, using the casing your project expects.
- Set each colour with the field beside its name, or add rows with Add.
- Copy the declarations and paste them inside your existing colours class.
When to use Flutter Color Generator vs related tools
Use this when a Flutter project needs a block of colour constants from a palette. Use the iOS or Android exporters for those platforms, or the design token generator when the colours need to travel as a document rather than as code. A JavaScript-side array of the same values is what the color array generator writes, and handing the palette to a build step rather than to the editor is what the color CSV exporter is for.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.