Colour Names 1

It's common knowledge that web colour names are derived from the X11 colour names. But the relationship is in reality a series of compromises. Here's a comparison list:

Colour	X11 Name(s)	Web Name(s)	RGB
	Alice Blue	aliceblue	#F0F8FF
	Antique White	antiquewhite	#FAEBD7
	Aqua Cyan	aqua cyan	#00FFFF	Note 1
	Aquamarine	aquamarine	#7FFFD4
	Azure	azure	#F0FFFF
	Beige	beige	#F5F5DC
	Bisque	bisque	#FFE4C4
	Black	black	#000000
	Blanched Almond	blanchedalmond	#FFEBCD
	Blue	blue	#0000FF
	Blue Violet	blueviolet	#8A2BE2
	Brown	brown	#A52A2A
	Burlywood	burlywood	#DEB887
	Cadet Blue	cadetblue	#5F9EA0
	Chartreuse	chartreuse	#7FFF00
	Chocolate	chocolate	#D2691E
	Coral	coral	#FF7F50
	Cornflower Blue	cornflowerblue	#6495ED
	Cornsilk	cornsilk	#FFF8DC
	Crimson	crimson	#DC143C
	Dark Blue	darkblue	#00008B
	Dark Cyan	darkcyan	#008B8B
	Dark Goldenrod	darkgoldenrod	#B8860B
	Dark Gray Dark Grey	darkgray darkgrey	#A9A9A9	Note 2
	Dark Green	darkgreen	#006400
	Dark Khaki	darkkhaki	#BDB76B
	Dark Magenta	darkmagenta	#8B008B
	Dark Olive Green	darkolivegreen	#556B2F
	Dark Orange	darkorange	#FF8C00
	Dark Orchid	darkorchid	#9932CC
	Dark Red	darkred	#8B0000
	Dark Salmon	darksalmon	#E9967A
	Dark Sea Green	darkseagreen	#8FBC8F
	Dark Slate Blue	darkslateblue	#483D8B
	Dark Slate Gray Dark Slate Grey	darkslategray darkslategrey	#2F4F4F	Note 2
	Dark Turquoise	darkturquoise	#00CED1
	Dark Violet	darkviolet	#9400D3
	Deep Pink	deeppink	#FF1493
	Deep Sky Blue	deepskyblue	#00BFFF
	Dim Gray Dim Grey	dimgray dimgrey	#696969	Note 2
	Dodger Blue	dodgerblue	#1E90FF
	Firebrick	firebrick	#B22222
	Floral White	floralwhite	#FFFAF0
	Forest Green	forestgreen	#228B22
	Fuchsia Magenta	fuchsia magenta	#FF00FF	Note 3
	Gainsboro	gainsboro	#DCDCDC
	Ghost White	ghostwhite	#F8F8FF
	Gold	gold	#FFD700
	Goldenrod	goldenrod	#DAA520
	Gray Grey X11 Gray X11 Grey	n/a	#BEBEBE	Note 4
	Green Yellow	greenyellow	#ADFF2F
	Honeydew	honeydew	#F0FFF0
	Hot Pink	hotpink	#FF69B4
	Indian Red	indianred	#CD5C5C
	Indigo	indigo	#4B0082
	Ivory	ivory	#FFFFF0
	Khaki	khaki	#F0E68C
	Lavender	lavender	#E6E6FA
	Lavender Blush	lavenderblush	#FFF0F5
	Lawn Green	lawngreen	#7CFC00
	Lemon Chiffon	lemonchiffon	#FFFACD
	Light Blue	lightblue	#ADD8E6
	Light Coral	lightcoral	#F08080
	Light Cyan	lightcyan	#E0FFFF
	Light Goldenrod	lightgoldenrod	#FFEC8B	Note 5
	Light Goldenrod Yellow	lightgoldenrodyellow	#FAFAD2	Note 5
	Light Gray Light Grey	lightgray lightrey	#D3D3D3
	Light Green	lightgreen	#90EE90
	Light Pink	lightpink	#FFB6C1
	Light Salmon	lightsalmon	#FFA07A
	Light Sea Green	lightseagreen	#20B2AA
	Light Sky Blue	lightskyblue	#87CEFA
	Light Slate Gray Light Slate Grey	lightslategray lightslategrey	#778899
	Light Steel Blue	lightsteelblue	#B0C4DE
	Light Yellow	lightyellow	#FFFFE0
	Lime Green	limegreen	#32CD32
	Lime Green X11 Green	lime	#00FF00	Note 6
	Linen	linen	#FAF0E6
	Maroon X11 Maroon	n/a	#B03060	Note 7
	Medium Aquamarine	mediumaquamarine	#66CDAA
	Medium Blue	mediumblue	#0000CD
	Medium Orchid	mediumorchid	#BA55D3
	Medium Purple	mediumpurple	#9370DB
	Medium Sea Green	mediumseagreen	#3CB371
	Medium Slate Blue	mediumslateblue	#7B68EE
	Medium Spring Green	mediumspringgreen	#00FA9A
	Medium Turquoise	mediumturquoise	#48D1CC
	Medium Violet Red	mediumvioletred	#C71585
	Midnight Blue	midnightblue	#191970
	Mint Cream	mintcream	#F5FFFA
	Misty Rose	mistyrose	#FFE4E1
	Moccasin	moccasin	#FFE4B5
	Navajo White	navajowhite	#FFDEAD
	Navy Navy Blue	navy	#000080	Note 8
	Old Lace	oldlace	#FDF5E6
	Olive	olive	#808000
	Olive Drab	olivedrab	#6B8E23
	Orange	orange	#FFA500
	Orange Red	orangered	#FF4500
	Orchid	orchid	#DA70D6
	Pale Goldenrod	palegoldenrod	#EEE8AA
	Pale Green	palegreen	#98FB98
	Pale Turquoise	paleturquoise	#AFEEEE
	Pale Violet Red	palevioletred	#DB7093
	Papaya Whip	papayawhip	#FFEFD5
	Peach Puff	peachpuff	#FFDAB9
	Peru	peru	#CD853F
	Pink	pink	#FFC0CB
	Plum	plum	#DDA0DD
	Powder Blue	powderblue	#B0E0E6
	Purple X11 Purple	n/a	#A020F0	Note 9
	Rebecca Purple	rebeccapurple	#663399	Note 10
	Red	red	#FF0000
	Rosy Brown	rosybrown	#BC8F8F
	Royal Blue	royalblue	#4169E1
	Saddle Brown	saddlebrown	#8B4513
	Salmon	salmon	#FA8072
	Sandy Brown	sandybrown	#F4A460
	Sea Green	seagreen	#2E8B57
	Seashell	seashell	#FFF5EE
	Sienna	sienna	#A0522D
	Silver	silver	#C0C0C0
	Sky Blue	skyblue	#87CEEB
	Slate Blue	slateblue	#6A5ACD
	Slate Gray Slate Grey	slategray slategrey	#708090	Note 2
	Snow	snow	#FFFAFA
	Spring Green	springgreen	#00FF7F
	Steel Blue	steelblue	#4682B4
	Tan	tan	#D2B48C
	Teal	teal	#008080
	Thistle	thistle	#D8BFD8
	Tomato	tomato	#FF6347
	Turquoise	turquoise	#40E0D0
	Violet	violet	#EE82EE
	Web Gray Web Grey	gray grey	#808080	Note 4
	Web Green	green	#008000	Note 6
	Web Maroon	maroon	#800000	Note 7
	Web Purple	purple	#800080	Note 9
	Wheat	wheat	#F5DEB3
	White	white	#FFFFFF
	White Smoke	whitesmoke	#F5F5F5
	Yellow	yellow	#FFFF00
	Yellow Green	yellowgreen	#9ACD32

Notes:

1. "Aqua" and "Cyan" are synonyms and refer to the same RGB colours.
2. In X11 and hence web names, "Gray" (en-us) and "Grey" (en-gb) are synonyms.
3. "Fuchsia" and "Magenta" are synonyms and refer to the same RGB colours.
4. There is no equivalent of X11 "Gray/Grey" in the web colours. The closest is named "Web Gray/Gray" in X11 and maps to "gray/grey" in the web namespace.
5. "Light Goldenrod" and "Light Goldenrod Yellow" are two distinct colours in both namespaces. Many online lists conflate the two.
6. "Green" is different in the X11 (#00FF00) and Web (#008000) namespaces.
7. "Maroon" is different in the X11 (#B03060) and Web (#800000) namespaces.
8. "Navy/Navy Blue" can only be officially named "navy" in the Web namespace.
9. "Purple" is different in the X11 (#A020F0) and Web (#800080) namespaces.
10. "Rebecca Purple" was added to X11 and CSS 4.1.

If we exclude the three X11 colours ("Gray/Grey", "Maroon" and "Purple") that have no web equivalent, we are left with the 140 unique web colours.

ZX81 Characters in Unicode 13.0

Almost exactly ten years ago, in an earlier post, I bemoaned the fact that a few glyphs from the ZX81 character set were missing from the Unicode standard. However, whilst researching seven-segment displays, I came across a reference to part of Unicode 13.0 named "Symbols for Legacy Computing". This obviously piqued my interest.

Within the upcoming release of the Unicode standard are:

214 graphic characters that provide compatibility with various home computers from the mid-1970s to the mid-1980s and with early teletext broadcasting standards.

Lo and behold, characters U+1FBF0 to U+1FBF9 are the ten seven-segment digits that first brought my attention to this block, whilst four other codepoints provide the missing ZX81 glyphs:

ZX81	Unicode	Description
0x09	U+1FB8F	LOWER HALF MEDIUM SHADE
0x0A	U+1FB8E	UPPER HALF MEDIUM SHADE
0x89	U+1FB91	UPPER HALF BLOCK AND LOWER HALF INVERSE MEDIUM SHADE
0x8A	U+1FB92	UPPER HALF INVERSE MEDIUM SHADE AND LOWER HALF BLOCK

Someone has even updated the Wikipedia page. Marvellous.

The ZX81 was launched in March 1981, but its character set was evolved from that used in the ZX80 which launched in January 1980. Then, in March 2020, Unicode was extended with characters that finally filled in the blanks. Forty years later? Crikey!

By the way, the eagle-eyed may have noticed that U+1FB94 ("LEFT HALF INVERSE MEDIUM SHADE AND RIGHT HALF BLOCK") does not have a mirrored twin ("LEFT HALF BLOCK AND RIGHT HALF INVERSE MEDIUM SHADE") which looks like it should fit at U+1FB93 (currently flagged "<reserved>"). However, the fascinating Working Group Proposal explains that

One code point, U+1FB93, was left unassigned in this proposal as a placeholder for the as-yet unattested *LEFT HALF BLOCK AND RIGHT HALF INVERSE MEDIUM SHADE, which would be the reverse-video equivalent of U+1FB8D RIGHT HALF MEDIUM SHADE from the Aquarius.

After briefly investigating the Aquarius character set, I feel Unicode 13.1 may be imminent.

Arm Clock

Seven-segment displays have long been used in digital clocks as they are a natural fit for LCD and LED technologies. There are even electro-mechanical displays for larger applications. However, for some reason I wondered if there was an alternative to flipping each segment in a binary fashion.

The ten digits are typically rendered in the following fashion:

If we want to produce these shapes using articulated arms (with each black segment being a "bone" and each grey dot being a "joint") we quickly see two constraints:

1. There must be at least seven bones.
2. The "root" of any arm must be located at one of the three right-hand pivot points.

If we further limit ourselves to the minimum number of bones (seven) it becomes apparent that we need at least two arms: try to manipulate a single seven-bone arm to make the "8" digit without breaking it.

I chose to use two arms: one rooted in the top-right corner with four bones (red), the other rooted at the middle-right pivot with three bones (blue):

By manipulating the angles between the bones, these two arms can fold themselves into any of the shapes making up the ten digits above:

If we wish to physically build this arrangement, there are two main problems to overcome:

1. Bone are sometimes coincident (the joints fold back on themselves 180 degrees)
2. The joint motors (or linkages) have to somehow fit in the arm bones

But these are merely robotics issues.

So we can theoretically create the shapes of digits to form a clock. But can we create some feasible transitions to animate it? If we assume a twenty-four hour clock, it turns out there are thirteen transitions we need to concern ourselves with:

1. "0" → "1"
2. "1" → "2"
3. "2" → "3"
4. "3" → "4"
5. "4" → "5"
6. "5" → "6"
7. "6" → "7"
8. "7" → "8"
9. "8" → "9"
10. "9" → "0"
11. "2" → "0" (e.g. "23:59:59" to "00:00:00")
12. "3" → "0" (e.g. "23:59:59" to "00:00:00")
13. "5" → "0" (e.g. "23:59:59" to "00:00:00")

By manually fettling the angles of the arm joints, I came up with a fairly pleasing series of transitions that don't flail the arms too much, clattering them into adjacent digits.

The resulting web page uses CSS transitions to animate an inline SVG. Both the CSS rules and SVG elements are created programmatically in a fairly concise JavaScript script.