How Does Hexadecimal Color Work

How does hexadecimal color work?

Hexadecimal uses sixteen distinct symbols, in the case of css color the symbols 0–9 to represent values zero to nine (obviously), and A, B, C, D, E, F to represent values ten to fifteen. So, using one Hexadecimal character you can represent 16 values. With two Hexadecimal you can represent 256 (16*16) values.

In RGB you have colours represented by Red Green Blue (R=0-255, G=0-255, B=0-255), so we use 3 pairs of Hexadecimal symbols! So when you see an RGB color, you can make the calculation below.

Example:

Hex: #4C8ED5 is RGB: 76, 142, 213.

Because 4C = 76(Red), 8E = 142(Green), D5 = 213(Blue)!

Hope it helps your understanding!

More to read: Hexadecimal on Wikipedia and a nice RGB to Hexidecimal Converter

Intuitive way of understanding hexadecimal html color codes?

You just have to remember that the scale is 00 (no color effect) through FF (full color effect) and the three parts of the triplet are red, green and blue.

000000 is black (i.e., no color) and FFFFFF is white (mixing all three primary colors).

The hard bit is remembering the mixtures, which I use the following mnemonics for:

• Really good yams: Red + Green = Yellow (potatoes are my favorite food).
• Really bad prunes: Red + Blue = Purple (I really hate prunes).
• Good/bad apples: Green + Blue = Aqua (I'm indifferent about apples).

Obviously, you may have to come up with your own mnemonics if you food tastes differ from mine. But I find that's the easiest way for me.

Then it's just a matter of varying the quantities to add a little more red or little less blue and so on. I generally only use values of 00, 40, 80, C0 and FF since that gives you a 125-color palette to choose from and I don't want an abundance of choices to slow me down.

Why do hexadecimal colors have 2 digits per color?

It's because the colors are represented as R-G-B, each primary color have a value between 0 and 255, which makes 256 possibility. Hexadecimal is a way to write numbers, just like binary or decimal, and hexadecimal requires 2 digits (FF, to be precise) to represent 256.

How do the numbers and letters differ in hexadecimal colours?

First you split the hex code into pairs of digits (so #37136F becomes 37, 13, and 6F), and those are the values for red, green, and blue respectively. Let's focus on the blue component, 6F.

6F is a two digit hexadecimal number (base 16). Just as 25 in base 10 is actually 2*10 + 5, 6F in hexadecimal is actually 6*16 + 15 = 111 in base 10. In general, if X and Y are hexadecimal digits (0 through F), then XY in base 16 is X*16 + Y.

Note that the minimum and maximum two-digit hex numbers are 00 and FF respectively, which equal 0*16 + 0 = 0 and 15*16 + 15 = 255 respectively. This is why RGB values range from 0 to 255 inclusive, when written in base 10.

How do I use hexadecimal color strings in Flutter?

In Flutter, the Color class only accepts integers as parameters, or there is the possibility to use the named constructors fromARGB and fromRGBO.

So we only need to convert the string #b74093 to an integer value. Also we need to respect that opacity always needs to be specified.

255 (full) opacity is represented by the hexadecimal value FF. This already leaves us with 0xFF. Now, we just need to append our color string like this:

const color = const Color(0xffb74093); // Second `const` is optional in assignments.

The letters can by choice be capitalized or not:

const color = const Color(0xFFB74093);

If you want to use percentage opacity values, you can replace the first FF with the values from this table (also works for the other color channels).

Extension class

Starting with Dart 2.6.0, you can create an extension for the Color class that lets you use hexadecimal color strings to create a Color object:

extension HexColor on Color {
  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
  static Color fromHex(String hexString) {
    final buffer = StringBuffer();
    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
    buffer.write(hexString.replaceFirst('#', ''));
    return Color(int.parse(buffer.toString(), radix: 16));
  }

  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
      '${alpha.toRadixString(16).padLeft(2, '0')}'
      '${red.toRadixString(16).padLeft(2, '0')}'
      '${green.toRadixString(16).padLeft(2, '0')}'
      '${blue.toRadixString(16).padLeft(2, '0')}';
}

The fromHex method could also be declared in a mixin or class because the HexColor name needs to be explicitly specified in order to use it, but the extension is useful for the toHex method, which can be used implicitly. Here is an example:

void main() {
  final Color color = HexColor.fromHex('#aabbcc');

  print(color.toHex());
  print(const Color(0xffaabbcc).toHex());
}

Disadvantage of using hex strings

Many of the other answers here show how you can dynamically create a Color from a hex string, like I did above. However, doing this means that the color cannot be a const.

Ideally, you would assign your colors the way I explained in the first part of this answer, which is more efficient when instantiating colors a lot, which is usually the case for Flutter widgets.

Why does the below mentioned hex color code visually have the same color as the 6 digit hex code?

You are correct that second digit in each pair represents a shade. This is calculated from the hexadecimal representation of the number. Specifically, this is x * 16 * x for each pair. For example, F has a hexadecimal value of 15, so the pair FF would be 15 * 16 + 15. This would give you 255, which is the maximum value possible.

This can be seen in the following:

.color1 {  background: #A1BD24; /* rgb(161, 189, 36) */}
.color2 {  background: #A0B020; /* rgb(160, 176, 32) */}
.color3 {  background: #AB2; /* rgb(170, 187, 34) */}
.color4 {  background: #AABB22; /* rgb(170, 187, 34) */}

<div class="color1">Test 1</div><div class="color2">Test 2</div><div class="color3">Test 3</div><div class="color4">Test 4</div>