Color NCol

Natural Color System notation explained

What Is NCol?

NCol (Natural Color) is a color notation system that describes colors in a way that feels natural to humans. Instead of abstract numbers, NCol uses six named primary hues — Red, Yellow, Green, Cyan, Blue, and Magenta — as starting points.

The format is: <Letter><Offset>, <Whiteness>%, <Blackness>%. For example, R0, 0%, 0% is pure red, while R30, 20%, 10% is red shifted 30° toward yellow, with 20% white and 10% black mixed in.

The Six Primary Hues

R0, 0%, 0%#FF0000
OffsetR0
Whiteness0%
Blackness0%
NColR0, 0%, 0%
HEX#FF0000
RGB255, 0, 0

Understanding the NCol Format

NCol breaks the 360° hue wheel into six equal 60° segments, each named after a primary color:

LetterColorHue RangeExample
RRed0°–59°R0 = pure red, R30 = orange-red
YYellow60°–119°Y0 = pure yellow, Y30 = yellow-green
GGreen120°–179°G0 = pure green, G30 = teal-green
CCyan180°–239°C0 = pure cyan, C30 = ocean blue
BBlue240°–299°B0 = pure blue, B30 = violet
MMagenta300°–359°M0 = pure magenta, M30 = pink-magenta

NCol Reference Table

Common colors and their NCol notation:

ColorSwatchHEXNCol
Pure Red
#FF0000R0, 0%, 0%
Orange
#FF8800R32, 0%, 0%
Pure Yellow
#FFFF00Y0, 0%, 0%
Lime
#88FF00Y28, 0%, 0%
Pure Green
#00FF00G0, 0%, 0%
Spring
#00FF88G32, 0%, 0%
Pure Cyan
#00FFFFC0, 0%, 0%
Sky Blue
#0088FFC28, 0%, 0%
Pure Blue
#0000FFB0, 0%, 0%
Violet
#8800FFB32, 0%, 0%
Pure Magenta
#FF00FFM0, 0%, 0%
Rose
#FF0088M28, 0%, 0%
White
#FFFFFFR0, 100%, 0%
Light Gray
#C0C0C0R0, 75%, 25%
Dark Gray
#404040R0, 25%, 75%
Black
#000000R0, 0%, 100%

Try It — Convert Any Color to NCol

NCol Explorer
NColC37, 26%, 4%
RGB66, 133, 244
HSL217°, 89%, 61%
HWB217° 26% 4%
C37, 26%, 4%
#4285F4
ℹ️
Note: NCol is not a CSS-native color format — you cannot use it directly in stylesheets. It is a descriptive notation useful for education, design communication, and understanding color relationships. Convert to HEX, RGB, or HSL for use in code.

NCol vs. Other Color Models

FeatureNColHSLHWB
Hue representationLetter + offset (R30)Degrees (30°)Degrees (30°)
Tint controlWhiteness %Lightness %Whiteness %
Shade controlBlackness %Lightness %Blackness %
CSS nativeNoYesYes (Level 4)
ReadabilityMost naturalGoodGood