Flutter: Color () with Hexadecimal

Oflutter: Flutter Color Hex

While styling the flutter application, you may be used to Color .fromRGBO(), however, the commonly used approach in higher-level development is hexadecimal since most of the design’s colors are made with it, and it’s easier right away to use Color with hexadecimal in a flutter. In this article, we will learn how to use hexadecimal with the Color class

Hexadecimal Color ()

Color() class constructs a color from the lower 32 bits of an int.

The bits are interpreted as follows:

  • Bits 24-31 are the alpha value.
  • Bits 16-23 are the red value.
  • Bits 8-15 are the green value.
  • Bits 0-7 are the blue value.

(Check the official flutter API article)

Usually, when you start creating a Color you start with Color(0xFF….) where 0xFF – means 100% opacity and follow with hexadecimal.

For example, assuming that we have a blue hex color on the design #3399ff In order to convert it to flutter Color, we simply write: Color(0xFF3399FF)

When we develop themes for our app, and we create a separate class for that, we usually write with const value so that we could not modify it later and compile reason.

As an example:

static const Color blueColor = const Color(0xFF3399FF);

Now, what if we want to add some opacity? At the end of the Color if we type . we could see the ability to add .withOpacity(); The problem with that is that we are going to get an error

static const Color blueColor = const Color(0xFF3399FF).withOpacity();

Const variables must be initialized with a constant value.

To fix this problem, instead of .withOpacity() we will be using hex.

Color Hex Opacity

An example of 68% opacity will be AD. In flutter, we would use Color(0xAD…);

Here is the list of Hex opacity:

  • 100% — Color(0xFF…)
  • 99% — Color(0xFC…)
  • 98% — Color(0xFA…)
  • 97% — Color(0xF7…)
  • 96% — Color(0xF5…)
  • 95% — Color(0xF2…)
  • 94% — Color(0xF0…)
  • 93% — Color(0xED…)
  • 92% — Color(0xEB…)
  • 91% — Color(0xE8…)
  • 90% — Color(0xE6…)
  • 89% — Color(0xE3…)
  • 88% — Color(0xE0…)
  • 87% — Color(0xDE…)
  • 86% — Color(0xDB…)
  • 85% — Color(0xD9…)
  • 84% — Color(0xD6…)
  • 83% — Color(0xD4…)
  • 82% — Color(0xD1…)
  • 81% — Color(0xCF…)
  • 80% — Color(0xCC…)
  • 79% — Color(0xC9…)
  • 78% — Color(0xC7…)
  • 77% — Color(0xC4…)
  • 76% — Color(0xC2…)
  • 75% — Color(0xBF…)
  • 74% — Color(0xBD…)
  • 73% — Color(0xBA…)
  • 72% — Color(0xB8…)
  • 71% — Color(0xB5…)
  • 70% — Color(0xB3…)
  • 69% — Color(0xB0…)
  • 68% — Color(0xAD…)
  • 67% — Color(0xAB…)
  • 66% — Color(0xA8…)
  • 65% — Color(0xA6…)
  • 64% — Color(0xA3…)
  • 63% — Color(0xA1…)
  • 62% — Color(0x9E…)
  • 61% — Color(0x9C…)
  • 60% — Color(0x99…)
  • 59% — Color(0x96…)
  • 58% — Color(0x94…)
  • 57% — Color(0x91…)
  • 56% — Color(0x8F…)
  • 55% — Color(0x8C…)
  • 54% — Color(0x8A…)
  • 53% — Color(0x87…)
  • 52% — Color(0x85…)
  • 51% — Color(0x82…)
  • 50% — Color(0x80…)
  • 49% — Color(0x7D…)
  • 48% — Color(0x7A…)
  • 47% — Color(0x78…)
  • 46% — Color(0x75…)
  • 45% — Color(0x73…)
  • 44% — Color(0x70…)
  • 43% — Color(0x6E…)
  • 42% — Color(0x6B…)
  • 41% — Color(0x69…)
  • 40% — Color(0x66…)
  • 39% — Color(0x63…)
  • 38% — Color(0x61…)
  • 37% — Color(0x5E…)
  • 36% — Color(0x5C…)
  • 35% — Color(0x59…)
  • 34% — Color(0x57…)
  • 33% — Color(0x54…)
  • 32% — Color(0x52…)
  • 31% — Color(0x4F…)
  • 30% — Color(0x4D…)
  • 29% — Color(0x4A…)
  • 28% — Color(0x47…)
  • 27% — Color(0x45…)
  • 26% — Color(0x42…)
  • 25% — Color(0x40…)
  • 24% — Color(0x3D…)
  • 23% — Color(0x3B…)
  • 22% — Color(0x38…)
  • 21% — Color(0x36…)
  • 20% — Color(0x33…)
  • 19% — Color(0x30…)
  • 18% — Color(0x2E…)
  • 17% — Color(0x2B…)
  • 16% — Color(0x29…)
  • 15% — Color(0x26…)
  • 14% — Color(0x24…)
  • 13% — Color(0x21…)
  • 12% — Color(0x1F…)
  • 11% — Color(0x1C…)
  • 10% — Color(0x1A…)
  • 9% — Color(0x17…)
  • 8% — Color(0x14…)
  • 7% — Color(0x12…)
  • 6% — Color(0x0F…)
  • 5% — Color(0x0D…)
  • 4% — Color(0x0A…)
  • 3% — Color(0x08…)
  • 2% — Color(0x05…)
  • 1% — Color(0x03…)
  • 0% — Color(0x00…)

That’s pretty much it for today’s article, I hope it was useful 🙂

Oflutter: Flutter Color Hex
Next Post

No more post

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × 5 =