The numeric colour palettes in modern web frameworks explained
Tags: materialdesign, tailwindcss, designsystems, colors
Published: 2021-07-08 07:56:15

---
title: The numeric colour palettes in modern web frameworks explained
published: true
description: Learn how what web framework color system is based on. They share a common system defining colors ready use for designers and developers.
tags: MaterialDesign, Tailwind, DesignSystems, Colors
// cover_image: https://n8d.at/wp-content/uploads/2021/07/numeric-color-systems.jpg
---
<img src="https://cdn.n8d.studio/n8d-at/wp-content/uploads/2021/07/numeric-color-systems-1024x576.jpg" alt="" width="900" height="506" class="aligncenter size-large wp-image-53363" />
Colour palettes are a mystery in and of itself. Fluent Design, Material Design, Tailwind or even Bootstrap have them, and the colours have colour labels. I always wondered where these numbers are coming from until I recently had enlightenment.

All palettes follow the same order from lighter to darker colours, with the regular colour somewhere in the middle range. Here are some examples of the most popular Frameworks.

### Material Colour System

<img src="https://n8d.at/wp-content/uploads/2021/07/material-design-color-palette-1024x675.png" alt="" width="900" height="593" class="size-large wp-image-53365" /> <a href="https://material.io/design/color/the-color-system.html#color-usage-and-palettes" rel="noopener" target="_blank">Material Design color system</a>

### Bootstrap Colour System

<img src="https://n8d.at/wp-content/uploads/2021/07/bootstrap-color-palette-1024x750.png" alt="" width="900" height="659" class="size-large wp-image-53366" /> <a href="https://getbootstrap.com/docs/5.0/customize/color/" rel="noopener" target="_blank">Bootstrap colour system</a>

### Tailswind Colour System
<img src="https://n8d.at/wp-content/uploads/2021/07/tailwinds-color-palette-1024x679.png" alt="" width="900" height="597" class="size-large wp-image-53367" /> <a href="https://tailwindcss.com/docs/customizing-colors" rel="noopener" target="_blank">Tailwind color system</a>

## Origins of the values of the numbers

As far as I know, the first design system that introduces the numbers attached to the colours was Material Design. For a long time, I wondered where these values come from until it clicked yesterday.

The lightest colour uses a 50 or 100, the darkest colour range somewhere in the 900. It bugged me for a long time where is the origin of those numbers. It might have anything to do with opacity, transparency, hue, lightness, saturation, or any other value defining the colour.

The answer to these numbers is pretty simple, but I could not make a connection with it. In CSS, the font-weight share the same mysterious numbers.

| Value | Common Font Weight Names |
|:--|:--|
| 100 | Thin |
| 200 | Extra-Light |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi-bold |
| 700 | Bold |
| 800 | Extra-bold (Ultra-bold) |
| 900 | Black (Heavy) |

So the thinner the font, the lower the number is. The bolder the font is, the higher the number is. These values come actually from the [Open Type Specification](https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass). 

The numeric value in the case of fonts has a different purpose too. So when the font-weight has a value normal (400), a lighter font would then use 300; a bolder font would be 500.

This method works in font-weights pretty well, especially with [variable fonts](https://web.dev/variable-fonts/); those values become more important than ever. When the parent container has set a font-weight with a value of 500 specified, and you like to make, let's say, a title bolder. The easiest way is to specify `font-weight: bolder` and get the next bolder available font-weight.

**Sidenote:** `font-weight: bold` will just end up with a font weight of 700, while 'bolder' might return 600 instead.

The same number system got introduces to colour palettes too. If I am not mistaken, Material Design was the first one to describe a colour palette in this way.

[caption id="attachment_53371" align="aligncenter" width="900"]<img src="https://n8d.at/wp-content/uploads/2021/07/different-colors-from-material-design-applied-1024x1019.png" alt="" width="900" height="896" class="size-large wp-image-53371" /> Different Colors from Material Design applied[/caption]

The lightest colour equals 100 or 50, the boldest or darkest colour equals 900, and all other variants in between. It seems like it has become an unofficial industry standard for palettes on the web and in-app development. It makes the colour system also easy to remember when you are familiar with the font weights system. Or think about it like this the higher the number, the darker the font becomes.

## Fluent Design

Fluent Design "innovates" this model to have names instead of numeric values.

<img src="https://n8d.at/wp-content/uploads/2021/07/themese-defined-in-fluentdesign-973x1024.png" alt="" width="900" height="947" class="size-large wp-image-53375" /> Theme colours defined in Fluent Design

It is hard to remember those. You look in your design for a lighter colour; you always have to look it up. There is no easy way to get your head around it. Following the same numerical solution would have been too easy. Especially they are not consistently named in the primary theme palette. 

The default grey scale follows a different pattern.

<img src="https://n8d.at/wp-content/uploads/2021/07/innovation-at-all-cost-lead-to-a-failing-color-system-1024x499.png" alt="" width="900" height="439" class="size-large wp-image-53376" /> <a href="https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html" rel="noopener" target="_blank">Innovation at all cost lead to a failing color system</a>

There was a time when Microsoft was leading the design into a new area. I am talking about the Metro area, but recently, Microsoft is sadly not innovative in Fluent Design and draws more people away from using it.

To be honest, I find this simple number version pretty solid. I look forward to harmonising it with other frameworks in my [hTWOo Fluent Design](https://n8d.at/htwoo-ui-launched-fluent-design-in-html-and-css) framework in future.