What do numbers mean in a colour palette?

Question

I'm in the process of refining a colour palette and while doing some research I'm seeing a lot of palettes, such as this one from Atlassian, add numbers to their colours ranging from 50 to 900:

How exactly are these numbers determined against the colours and what do they mean?

Answer 1

The nomenclature is described in more detail on the Atlasian Design: Colors page. Like in the Material Design pages mentioned in other answers, the numeric part (e.g. 500 or 800) is indicative of the saturation level of the colour (and inversely indicative of the lightness/brightness¹). The initial letter is – in most cases – an indication of the base colour (B for blue; Y for yellow etc.). Here, the N stands for Neutral (which is actually derived from a shade of purple).

From the page above:

Muted and neutral palettes are derived from purple. Their varying degrees of saturation allow for the appropriate level of warmth across marketing and product.

And also a selection of their "secondary colour palatte", showing how the initial letter indicates the underlying colour:

We use R300 primarily to indicate errors and to indicate destructive actions. Y300 indicates warnings and blocked progress and can be found in lozenges and banners. Use N800 for any text placed on top of Y300. G300 is used to represent success in flags and inline messages, while P300 is used to indicate help, information, and Prince songs.

---

¹ As Moritz Lüdtke correctly pointed out in a comment, both the saturation and the brightness vary with the "N-number": a high N-number denotes a high saturation and low brightness; while a low N-number denotes low saturation and a high brightness.

There are (at least) two "colour systems" using saturation: one, HSV, uses hue, saturation and value (also known as brightness); the other, HSL, uses hue, saturation and lightness. See HSL and HSV on Wikipedia for more on their similarities and differences.

Taking the first column of the "neutral" colours above, and plugging their RGB values into a pair of online converters², we can see the relationship between N-number and HSV/HSL:

| Nxxx  Name         |     RGB |   R    G    B |   H     S     V |   H     S     L |
|--------------------+---------+---------------+-----------------+-----------------|
| N900  Slate        | #091e42 |   9   30   66 | 218  86.4  25.9 | 218  76.0  14.7 |
| N500  Mick Fanning | #42526e |  66   82  110 | 218  40.0  43.1 | 218  25.0  34.5 |
| N100  Humboldt Fog | #7a869a | 122  134  154 | 218  20.8  60.4 | 218  13.7  54.1 |
|  N60  Sentinel     | #b3bac5 | 179  186  197 | 217   9.1  77.3 | 217  13.4  73.7 |
|  N20  Gram's Hair  | #f4f5f7 | 244  245  247 | 220   1.2  96.9 | 220  15.8  96.3 |

² See RGB to HSV color conversion and RGB to HSL color conversion: both provided by RapidTables.com.

Answer 2

Looking at the Material Design documentation for their colour systems, it certainly seems like there is an internal standard for providing an easier way to identify the colours without using the hexadecimal value (which is the unique identifier).

It seems to be designed to allow a consistent way to categorize and label the colours that also provide some indication of their respective values.

Answer 3

In most cases, these values represent different shades of a color. They range from light to dark (small number to large number) but the hue stays the same. You can barely see it in the screenshot. N500 is lighter than N800.

The material design docs talk about these “color palettes” here under “Colors and theming”: https://material.io/design/color/the-color-system.html#color-usage-palettes

As Micheal said it is an easier way to speak or reference different kind of colors. Calling a color N500 is much easier to communicate.

Answer 4

If you look at it from a contrast ratio perspective. Given pure black #000000 and pure white #FFFFFF a number value of 500 is generally given to a color shade that would give the same contrast ratio for both black and white.

As you go smaller in number the white text gets harder to read but the black text just increases in contrast.

Conversely as you go higher in number, white text gets more clearer and black text gets harder to read.

So given that 500 is a neutral color depending on your design, you can choose a button background color that's neutral and you don't have to change between dark and light mode to achieve contrast (this keeps your page a little more stable if people switch between dark and light mode ... not something that happens normally so don't use that as a reason to keep it at 500).

But the effects of the buttons which may be lighter or darker would be able to flip between the opposing poles of the swatch. Again that's justification by math and not really design. It's like justifying with golden ratio. Best to use your and other people's eyes be the judge as to what the ideal swatch gradations are.

A mathematical way of doing this (one I had implemented before) was to determine the luminosity value of HSL for a given color such that it's luminance matches that of pure gray.

  const grayRgb = { r: 0.46078431372, g: 0.46078431372, b: 0.46078431372 };

Luminance being computed according to WCAG guidelines

That would give me the "neutral" value for any given color. Which I then I take the HSL of the neutral value and set it as 500, incrementing by 0.1 luminosity to get the lower values and decrementing by 0.1 luminosity to get the higher values.