0

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:

enter image description here

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

  • Also helps while coding to keep CSS/ SASS minimal by using that nice short name instead of "Concrete Jungle" – mastablasta Nov 27 at 2:42
4

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/brightness1). 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.

Atlasian's range of neutral shades

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.

enter image description here


1 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 converters2, 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 |

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

  • 1
    Good and true answer except for one point: It is not only a difference in saturation. The difference from N0 to N900 is in saturation and brightness. – Moritz Lüdtke Nov 27 at 8:12
  • 1
    @MoritzLüdtke Thanks for pointing that out... I've added some clarification and some sample conversions from RGB to HSV/HSL to illustrate the point. – TripeHound Nov 27 at 9:31
  • great answer! (and very useful) – Devin Nov 27 at 21:02
  • @TripeHound thanks for adding the very useful information! :) Especially the conversion table really makes this clear. – Moritz Lüdtke Nov 28 at 10:57
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.