Lossy view on RGB space

Abstract
Various topics around RGB related stuff and colour in general.
Cube model
 While there’s 16M (3 byte channel combinations = 2563 = 16777216) colour nodes in total, only the 1530 (6×255) fully chromatic edges (forming the closed path through
Red,
Yellow,
Lime,
Aqua/Cyan,
Blue,
Magenta/Fuchsia - highlighted in white below) make up a hue wheel.

These hues, effectively the nodes farthest from the non-chromatic grayscale body diagonal between
Black and
White, make but a tiny fraction (less than .01%, or 1/10000) of RGB space, but since they’re the purest and best discernible, their 1-dimensional realm (plus close 3D neighbourhood) hosts a decent part of commonly used colours.

As a refresher, here’s the cubic 12-edge frame, annotated with web color names - the extra
Black→
Yellow diagonal has been added just for showing its wide range of non-hue greenish/brownish tones:

Origin: BlackX-axis: RedY-axis: GreenZ-axis: Blue
LimeGreen
Chartreuse
YellowOlive
~Darkorange~Orange~Gold
Black
Red
Maroon
Springgreen~Turquoise
~Deeppink
Aqua/Cyan
White
~Dodgerblue~Deepskyblue
Blue
~MediumblueNavy
~Blueviolet
Magenta
~Violet
Side note: The placement of web colour names dedicated to the grayscale body diagonal makes its exponential brightness perception evident:
Black
Dimgray
Gray
Darkgray
Silver
Lightgrey
Gainsboro
Whitesmoke
White
Prominent nodes in a tabular summary, with landmarks…
…
Sepia (~midway of
Black→
Darkorange),
…
Palegreen (~midway of
Lime→
White),
…
Teal (midway of
Black→
Aqua/Cyan) and
…
Purple (midway of
Black→
Magenta) added:
RGB valuesHueColourGrayscale
decimalhexpurePosAvgLum
0,0,0#000000×n/aBlack0 • #00
128,0,0#800000×0°Maroon43 • #2b27 • #1b
255,0,0#ff0000✓0°Red85 • #5554 • #36
112,66,20#704214×30°Sepia66 • #4272 • #48
255,140,0#ff8c00✓32.9°Darkorange132 • #84154 • #9a
255,165,0#ffa500✓38.8°Orange140 • #8c172 • #ac
255,215,0#ffd700✓50.6°Gold157 • #9d208 • #d0
128,128,0#808000×60°Olive85 • #55119 • #77
255,255,0#ffff00✓60°Yellow170 • #aa237 • #ed
127,255,0#7fff00✓90.1°Chartreuse127 • #7f209 • #d1
0,128,0#008000×120°Green43 • #2b92 • #5c
0,255,0#00ff00✓120°Lime85 • #55182 • #b6
152,251,152#98FB98×120°Palegreen210 • #d2223 • #df
0,255,127#00ff7f✓149.9°Springgreen127 • #7f192 • #c0
64,224,208#40e0d0~174°Turquoise165 • #a5109 • #bd
0,128,128#008080×180°Teal90 • #5a101 • #65
0,255,255#00ffff✓180°Aqua/Cyan170 • #aa201 • #c9
0,191,255#00bfff✓195.1°Deepskyblue149 • #95155 • #9b
30,144,255#1e90ff~209.6°Dodgerblue143 • #8f128 • #80
0,0,205#0000cd~240°Mediumblue68 • #4415 • #0f
0,0,128#000080×240°Navy43 • #2b9 • #09
0,0,255#0000ff✓240°Blue85 • #5518 • #12
138,43,226#8a2be2~271.1°Blueviolet136 • #8876 • #4c
255,0,255#ff00ff✓300°Magenta170 • #aa73 • #49
128,0,128#800080×300°Purple83 • #5354 • #36
238,130,238#ee82ee×300°Violet202 • #ca161 • #a1
255,20,147#ff1493~327.6°Deeppink141 • #8d79 • #4f
255,255,255#ffffff×n/aWhite255 • #ff
Grayscale conversion
 A simple (channel value average) grayscale conversion doesn’t reflect that pure Blue (0,0,255) appears darker than pure Red (255,0,0), and pure Green (0,255,0) looks significantly brighter. To adjust for the perception of luminance, channel values [0…255] must be weighted differently (not just 1/3) - e.g. by factors .2126 (for Red), .7152 (for Green), and .0722 (for Blue), based on standard ITU-R BT.709. This correction becomes obvious when comparing the grayscale columns in the table above.

The following chart features the overall gray conversion of BT.709 (black line). Also shown is the effect of the older standard BT.601 (white line), which uses coefficients .299 (for Red), .587 (for Green), and .114 (for Blue). The gray line in the background depicts the unweighted average method.
ITU-R BT.709 (HDTV, 1993)
ITU-R BT.601 (PAL, 1982)
As can easily be spotted, the black BT.709 line leads to a wider contrast spread, which might be preferable in some cases. Otherwise, good old BT.601 is still decent enough to be used by default.

Side by side examples:
AverageBT.601OriginalBT.709
Dissecting HSL
 To enhance interpretability by using abstraction, in HSL (Hue/Saturation/Lightness) space, a colour is defined by a triple of slightly more intuitive components than RGB’s somewhat entangled byte elements.

Let’s look at an example where the lightness layer is extracted:
OriginalHue/SaturationLightness
As overlay on background checkerboard pattern.
At first glance, the bare hue/saturation part (containing the color info) looks surprisingly washed out, which only underlines the importance of the lightness component with its distinctive structural and textural features produced by light/shadow contrast and gradients.

Another way of visualizing color info would be to look at chroma (by which we actually mean 'colourfulness', but gladly denominations in this context happen to be loose in general, so we prefer the shorter expression). Its values, here the range [0…255], can neatly be turned into a grayscale image:
ChromaWe already met chroma (as can best be analysed in a bi-cone model), which, under the hood, represents the spread of RGB channel values, that is, the distance (absolute difference) between lowest and highest value.
The higher a color’s chroma, the closer it is to being a pure hue tone. The lower its chroma, the closer to being a grayscale tone.
From that, it’s easy to see why every node on the hue line has always one channel at zero, and another at 255, resulting in a maximum spread, thus possessing full chroma.
Hue
Speaking of, this is how an explicit hue layer would look like, if (by maximazing chroma) each pixel is purified to its actual intrinsic hue colour.

Side note: HSL’s saturation is defined by chroma per max(r,g,b); or C/V in short.
Lightness on Gray
Expectedly, overlaying lightness on mid
Gray, aka rgb(128,128,128) #80808, results in a grayscale representation of the image.
Below, for comparison, the versions of aforementioned common conversion methods:
AverageBT.601BT.709
Lightness layer: LiDa
 Although HSL’s lightness component in separation might not deliver a great grayscale version, the very concept of a gradually transparent black&white overlay for adding definite structure to a colourful but shapeless background is worth a closer look. In the works of designers and graphic artists it’s pretty much always about combining shapes and colours anyway; think children’s colouring books even.

A LiDa (as I like to call them - for Light/Dark) is conceptually rather simple: its pixels, having individual transparency, are either
Black (to apply shade) or
White (to apply tint).
One shape in many pure colours
 This demo uses the previously extracted lightness layer put on a unicolour backdrop:
Obviously, the visual quality is best at tones of a perceived brightness close to mid
Gray (HSL’s reference point), such as
Red and
Magenta. On brighter colours, e.g.
Yellow, the whites are barely visible, and the shades are underrepresented. On
Blue it’s the other way round.

Logical conclusion: Why not having the backdrop colour’s brightness define our reference point - that is, where to divide shades from tints - instead of a fixed 50:50 split?

Well, let’s take samples… According to BT.601,
Yellow’s perceived brightness corresponds to a
gray value of 226 (→ 89:11 split), and for
Blue we get a
gray value of 29 (→ 11:89 split).
Creating and overlaying such adapted LiDas definitely yields a more consistent and satisfying look now:
Full look-up table for split reference points (intermediate values to be calculated by interpolation):
HueBT.601BT.709
SplitgraydechexSplitgraydechex
Red		29.9 : 70.176#4c21.3 : 78.754#36
Yellow		88.6 : 11.4226#e292.8 : 7.2237#ed
Lime		58.7 : 41.3150#9671.5 : 28.5182#b6
Aqua/Cyan		70.1 : 29.9179#b378.7 : 21.3201#c9
Blue		11.4 : 88.629#1d7.2 : 92.818#12
Magenta		41.3 : 58.7105#6928.5 : 71.573#49
Side note: The combination of pure hues and B&W LiDas covers the entire RGB cube surface (all 6 sides = 390152 nodes, about 2.325% or 1/43 of RGB space).
One shape in many medium colours
 Creating individual LiDas can get laborious, especially when the colour palette has more than a handful entries, let alone when dealing with dynamic colouring. Ideally we’d like to use a single LiDa for all tones, which is possible if they all share a similar brightness.

Let's look at our relevant hue nodes recalculated - satisfying BT.601 perception - to the brightness of mid
Gray (intermediate nodes can then be determined by interpolation):
ColourRGB valuesHSL parameter
HueTonedecimalhexHueSat(%)Lig(%)
Red216,89,89#d859590°61.9559.8
Yellow141,141,14#8d8d0e60°81.9430.39
Lime52,179,52#34B334120°54.9845.29
Aqua/Cyan38,165,165#26a5a5180°62.5639.8
Blue113,113,240#7171f0240°80.8969.22
Magenta202,75,202#ca4bca300°54.5154.31
Original
Tone+LiDa

Looks too dull? By restocking saturation (up to 100%), the tone will retrieve a bit of vibrance, luckily without exceeding our brightness wiggle room.
Many shapes in a few colours
 A small palette (colour swatch) with only [4…8] entries is often used to distinguish the elements of a group - such as players, categories, concepts, etc. - at a glance.
With just a handful of tones it’s relatively easy to keep track of individual LiDa split points when it comes to image asset production (typically icons or symbols). This chapter therefore is more about choosing appropriate colour combinations.
In a calender app, seasons could have individual tones, with their month panels tinted accordingly, e.g. winter=blueish, spring=greenish, summer=orange, and autumn=brownish.
Seasons lite
WinterSpringSummerAutumn
CSS#40ffff#00ffa0#ffd080#d0c0a0
RGB64,255,2550,255,160255,208,128208,224,160
HSL180,100%,63%158,100%,50%38,100%,75%75,51%,75%
Background pastel tones of seasons and months (suits), created in a design study of the Japanese card game Hanafuda:
Months lite
Winter (cold/blue)Spring (warm/green)
DecemberJanuaryFebruaryMarchAprilMay
CSS#b9c7f5#b9e0f4#b8f3ee#b8f4d6#b8f4bd#ccf4b8
RGB185,199,245185,224,244184,243,238184,244,214184,244,189204,244,184
HSL226,75%,84%200,73%,84%175,71%,84%150,73%,84%125,73%,84%100,73%,84%
Summer (hot/yellow)Autumn (mixed/magenta)
JuneJulyAugustSeptemberOctoberNovember
CSS#b9c7f5#b9e0f4#b8f3ee#b8f4d6#b8f4bd#ccf4b8
RGB229,234,183243,235,184244,210,184244,186,185255,185,221195,185,245
HSL66,55%,82%52,71%,84%26,73%,84%1,73%,84%329,100%,86%250,75%,84%
Text/background tones of BlasterBlind, a puzzler game based on Mastermind:
Cell text/background
dark reddark orangedark browndark yellowdark greendark cyan
CSS#cc0000#ee7700#775500#aaaa00#006633#009999
RGB204,0,0238,119,0119,85,0170,170,00,102,510,153,153
HSL0,100%,40%30,100%,47%43,100%,23%60,100%,33%150,100%,20%180,100%,30%
dark bluedark magentadark gray/pinkredorangebrown
TextTextText
CSS#5555ff#990077#cc66aa#ff8888#ffbb00#bb9900
RGB85,85,255153,0,119204,102,170255,136,136255,187,0187,153,0
HSL240,100%,67%313,100%,30%320,50%,60%0,100%,77%44,100%,50%49,100%,37%
yellowgreencyanbluemagentagray/pink
TextTextTextTextTextText
CSS#ffff00#00cc66#66ddff#aaaaff#ff66cc#ffbbdd
RGB255,255,00,204,102255,187,221170,170,255255,102,204195,185,245
HSL60,100%,50%150,100%,40%193,100%,70%240,100%,83%320,100%,70%330,100%,87%
Chatroom nickname colours in PubHub, a gaming portal prototype:
Text colours for dark background 51 • #33 • hsl(0,0,20%)
Text Text Text Text Text Text Text Text
redorangebrowngreen
CSS#ff4444#ff8800#aaaa00#00aa55
RGB255,68,68255,136,0170,170,00,170,85
HSL0,100%,63%32,100%,50%60,100%,33%150,100%,33%
cyanbluemagentapink
CSS#0099aa#8888ff#ee00dd#ff0088
RGB0,153,170136,136,255238,0,221255,0,136
HSL186,100%,33%240,100%,77%304,100%,47%328,100%,50%
Tetromino colours in Tequatris, a Tetris variant:
Dark/light tones
dark reddark orangedark yellowdark green 1dark green 2dark cyan
CSS#990000#aa5500#999900#006633#008844#008888
RGB153,0,0170,85,0153,153,00,102,510,136,680,136,136
HSL0,100%,30%30,100%,33%60,100%,30%150,100%,20%150,100%,27%180,100%,27%
dark blue 1dark blue 2dark magentaredorangeyellow
CSS#4444ff#6666ff#990099#ff7777#ff9900#ffff00
RGB68,68,255102,102,255153,0,153255,119,199255,153,0255,255,0
HSL240,100%,63%240,100%,70%300,100%,30%325,100%,73%36,100%,50%60,100%,50%
green 1green 2cyanblue 1blue 2magenta
CSS#00cc66#00ff88#00dddd#8888ff#ccccff#ff66ff
RGB0,204,1020,255,1360,221,221136,136,255204,204,255255,102,255
HSL150,100%,40%152,100%,50%180,100%,43%240,100%,77%240,100%,90%300,100%,70%
Digit colours of Swinemeeper, a Minesweeper clone:
Text tones for gray background 204 • #cc • hsl(0,0,80%)
1 2 3 4 5 6 7 8
1 (blue)2 (magenta)3 (red)4 (green)
CSS#0000ff#c000c0#ff0000#007f00
RGB0,0,255192,0,192255,0,00,127,0
HSL240,100%,50%300,100%,38%0,100%,50%120,100%,25%
5 (brown)6 (cyan)7 (mid blue)8 (pink)
CSS#808000#408080#7f7fff#ff0080
RGB128,128,064,128,128127,127,255255,0,128
HSL60,100%,25%180,33%,38%240,100%,75%330,100%,50%
Region colours in Queens, a puzzle game:
Warm/cold tones
redorangedark yellowyellowgreendark green
CSS#ff6666#ff8800#cccc00#eeee00#88dd88#00cc55
RGB255,102,102255,136,0204,204,0238,238,0136,221,1360,204,85
HSL0,100%,70%30,100%,33%60,100%,30%150,100%,20%150,100%,27%180,100%,27%
turquoisecyanbluelite bluepinkmagenta
CSS#00ddcc#00ffff#8888ff#9999ff#ff22cc#ff44bb
RGB0,221,2040,255,255136,136,255153,153,255255,34,204255,68,187
HSL175,100%,43%180,100%,50%240,100%,77%240,100%,80%314,100%,57%322,100%,63%
Furniture colours in Seatwave, a prototype based on the game Seat Away.
Armchair/sofa tones
redorangebrownyellow
CSS#ff0000#ff8800#448800#dddd00
RGB255,0,0255,136,068,136,0221,221,0
HSL0,100%,50%32,100%,50%90,100%,27%60,100%,43%
greencyanbluemagenta
CSS#00cc66#00ddff#7777ff#ff00bb
RGB0,204,1020,221,255119,119,255255,0,187
HSL150,100%,40%188,100%,50%240,100%,73%316,100%,50%
Function/estate group colours of Slumlord, a Monopoly variant:
Game card design
Board bg
Travel frontTravel front2
RailroadEstate frontEstate front2Group 1Group 2
CSS#ddddcc#eeeedd#ffffee#993399#77ccff
RGB221,221,204238,238,221255,255,238153,51,153119,204,255
HSL60,20%,83%60,33%,90%60,100%,97%300,50%,40%203,100%,73%
Community
frontfront2backsideGroup 3Group 4
CSS#aaddff#cceeff#a8dafc#cc44cc#ff9900
RGB170,221,255204,238,255168,218,252204,68,204255,153,0
HSL204,100%,83%200,100%,90%204,93%,82%300,57%,53%36,100%,50%
Chance
frontfront2backsideGroup 5Group 6
CSS#ffaadd#ffddee#fca8db#ff2222#dddd44
RGB255,170,221255,221,238252,168,219255,34,34221,221,68
HSL324,100%,83%330,100%,93%324,93%,82%0,100%,57%60,69%,57%
Lottery
frontfront2backsideGroup 7Group 8
CSS#aaffaa#ccffcc#a8fca8#00aa55#2222ee
RGB170,255,170204,255,204168,252,1680,170,8534,34,238
HSL120,100%,83%120,100%,90%120,93%,82%150,100%,33%240,86%,53%
UtilityGroup 9Group 10Group 11Group 12
CSS#999988#ff3388#888800#00ff88#8811ff
RGB153,153,136255,51,136136,136,00,255,136136,17,255
HSL60,8%,57%335,100%,60%60,100%,27%152,100%,50%270,100%,53%
Linear swatch generator
 This tool outputs a collection of cards with linear colour properties.
0 359
Degree from0
(wrap) to0
Sector size360°
2 24
Entries2
HSL0 100
Saturation0% (0 =
Gray)
Lightness0% (default: 50)
Suppression0 150
Un-bright0%
Un-dark0%
Output:
1
#
.
%
If special tone is needed, copy/paste e.g. HSL info (bottom line on card) and adjust its values manually.
Many pictures in one style
 For stylization purposes, e.g. giving game card motifs a yellowish tint and blueish shadows, the tone pair of a LiDa could be created accordingly.

Use the slider below to change the effect’s intensity:
Web colour names
 As of 2025, W3C has standardized 141 colour names recognized by CSS parsers. This list is implemented by pretty much all modern browsers.

Sort

.
#
.
%