Skip to content
ToolQivo

HEX to Flutter Color

Convert a HEX code into Dart Color and MaterialColor code.

Color Tools Reviews Free · no sign-up

The colour

Dart 
The Dart code appears here

Quick Tool Overview

HEX to Flutter Color writes the Dart literal with the alpha already in place — the thing everyone forgets once — and generates a complete MaterialColor swatch from 50 to 900 around your colour.

What it does
Converts a HEX colour into Dart colour code
You give it
A HEX code
You get back
Color(0xFF…), fromARGB and a full MaterialColor
Best for
Flutter theming and design handoffs
Color Tools Free, unlimited use No sign-up Runs in your browser

About the HEX to Flutter Color

Flutter takes a colour as a 32-bit integer with the alpha channel first, written in Dart as Color(0xFF4F46E5). The leading FF is the alpha, and leaving it off is the mistake everyone makes once — the colour comes out fully transparent and nothing appears.

This writes the literal for you, with the alpha in place and adjustable, along with the Color.fromARGB form if you prefer the channels spelled out. Both are shown because codebases tend to settle on one.

The MaterialColor swatch is the more useful output. Flutter theming expects a swatch with ten shades from 50 to 900, and hand-writing one is tedious. The tool generates the whole swatch from your colour, keeping it as the 500, and emits the complete MaterialColor definition ready to drop into a theme — plus a ColorScheme.fromSeed line for projects on Material 3.

Key features of the HEX to Flutter Color

Alpha in place

Color(0x4F46E5) is invisible because its alpha is zero. The output always carries the leading FF.

A whole swatch generated

Ten shades from 50 to 900 built around your colour as the 500, which is what primarySwatch needs.

Both literal forms

The hex literal and Color.fromARGB, because codebases settle on one or the other.

Material 3 line too

A ColorScheme.fromSeed call for projects that derive the whole scheme from one seed colour.

Paste-ready Dart

The MaterialColor definition is complete and correctly formatted — it goes straight into a theme file.

How to use the HEX to Flutter Color

  1. 1

    Enter your HEX colour

    Six digits, or eight if you want a specific alpha.

  2. 2

    Take the Color literal

    Color(0xFF…) with the alpha already in place, or the fromARGB form.

  3. 3

    Generate the swatch

    A full MaterialColor from 50 to 900, built around your colour as the 500.

  4. 4

    Copy it into your theme

    The definition is complete Dart — paste it straight into a theme file.

Frequently asked questions

Almost always a missing alpha. Color(0x4F46E5) has an alpha of 0x00 and is invisible. It needs eight digits: Color(0xFF4F46E5).

Reviews of the HEX to Flutter Color

What people who use the HEX to Flutter Color think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the HEX to Flutter Color. It takes half a minute and no account.

Write the first review

More color tools