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 🙂
1 Comment