Template talk:Color chart X11

Spacing & Layout

Is there a programming reason for having this chart in three columns? It runs over the edge of the normal text area on article pages. Could it be narrowed to two columns like this? The order of the color groups could be arranged however they need to be. This would result in the chart being longer, but staying within the article margins. - Tim D. Williamson ^yak-yak 01:42, 5 February 2016 (UTC)

@Timdwilliamson: Now that the template has survived a deletion attempt, it may make sense to put additional work into the formatting. To be mobile friendly, ideally the template should scale automatically to the width of the viewer's screen. That is, on a narrow screen (such as a cell phone) it should scale down to a single column, while showing more columns with higher resolutions and larger screens. I know this can be done, but I don't recall how to format it that way. I won't have time to work on it for a few more days, but if nobody has done anything with it before then, I'll try to find time on Sunday (2/28/16) to research that. Etamni | ✉ | ✓  22:15, 26 February 2016 (UTC)

It does need work. I've been out of town, and I've been working on some less technical pages. I'll get back to this one. Didn't know the columns could change sizes. - Tim D. Williamson ^yak-yak 05:23, 1 March 2016 (UTC)

Recent formatting issues

@Grapesoda22: Have you looked at the Template:X11 color chart since you edited it earlier this week? Two out of the three headers are messed up, spacing-wise, and any colors with long names, such as MediumSlateBlue, have been reduced to borders. Not very useful for a color chart. If someone is looking at the chart for color reference, it seems like it would be helpful for the color to have prominence. Otherwise, what is the point of a color reference chart? I assume that you're trying to make the color names and codes more readable. Not sure, as there was no Edit Summary explaining the change. I reverted the changes, and you simply undid the revert without addressing the issues I mentioned in my summary. Looking forward to discussing this. I feel like there's probably some happy medium here, between whatever you were trying to achieve and what seemed to be a perfectly good color chart, but serial reverts aren't going to get us there. Thanks for your time. - Tim D. Williamson ^yak-yak 01:32, 7 February 2016 (UTC)

@Timdwilliamson:This was an attempt to make the page complaint with Wikipedia's AAA color restrictions. Grapesoda22 (talk) 04:04, 7 February 2016 (UTC)

@Grapesoda22: okay, I can see that. Maybe we can come up with a compromise that retains the necessary contrast that still results in a useable color chart. Maybe if we separate the color codes and names from the swatch? Something like Template:Colornames? - Tim D. Williamson ^yak-yak 04:26, 8 February 2016 (UTC)

I'd be willing to do the work, if you can help me with the markup. I have hours at night that I can edit Wikipedia, but I'm rusty on my markup. Took a three year break from design after my son was born. - Tim D. Williamson ^yak-yak 04:26, 8 February 2016 (UTC)

@Timdwilliamson: Ok, lets do it. Grapesoda22 (talk) 00:46, 9 February 2016 (UTC)

Formatting proposal

At present the tables are formatted like:

Pink

FF C0 CB

255 192 203

This makes it difficult to see the colour being referred to, especially with the longest names which completely take up the column. It would surely be more sensible to remove the {code} containers, and replace them with an equivalent ("font-family: monospaced;" should work, but doesn't on my browser) and set the "color" to whatever contrasts best with the "background" (i.e. white for background colours with a gamma less than 128 (see here), black for those with a gamma of 128 or higher). Then the tables would look like:

Pink	FF C0 CB	255 192 203
Blue	00 00 FF	0   0 255

I would have made this change myself, but as it's such a drastic one (and as the proposed substitute for the {code} container isnt working for me) I have thrown it out for discussion. — Korax1214 (talk) 16:21, 15 October 2017 (UTC)

Maybe naming specific monospaced fonts, as well as "monospaced" to cover the possibility that the named fonts aren't installed? That is to say, "font-family: Andale Mono, Courier, monospaced;", with the result as below? — Korax1214 (talk) 08:58, 17 October 2017 (UTC)

Pink	FF C0 CB	255 192 203
Blue	00 00 FF	0   0 255

Textcolours (black/white) versus Background colours. Proposal to restore the old layout of the colour table

I used the (X11 color section of the) Webcolor page since many years as reference what text colour (black or white) is better readable for a certain background.

However, this major change

• https://en.wikipedia.org/w/index.php?title=Template%3AX11_color_chart&type=revision&diff=703389575&oldid=694187537

removed this extra information and broke in that way my "old" links (as a work-around I now link to the old version, but I don't like this).

Is someone of you supporting my proposal (here) to restore the old layout ?

— Preceding unsigned comment added by Wikinaut (talk • contribs) 15:36, 14 December 2017 (UTC)

Spacing

The Hex and Decimal columns are placed very closely and it’s hard to tell what column the bordering entries belong to. I recommend increasing the spacing or introducing separator(s) between the two columns. Idell (talk) 14:21, 4 August 2020 (UTC)

@Idell for me there is a white separator between each row and each column. Do you not see them? It could be compatibility issue, since the separators are implemented in a deprecated way Walwal20 ^{talk ▾ contribs} 18:42, 4 August 2020 (UTC)

@Walwal20: I'm replying now as I didn't receive your ping; any idea why? The separators work fine on the desktop site but on the mobile version, they are not visible, each row's background is one solid colour, and those two particular columns are placed even closer together than others. Idell (talk) 19:15, 25 October 2020 (UTC)

@Idell: You were not notified because Walwal20 made a mistake in their reply, and then corrected it; corrections like that will not trigger a notification. For a notification to work, the (valid) link to the recipient's user page and the (valid) signature of the sender must both be added in the same edit. --Redrose64 🌹 (talk) 09:59, 26 October 2020 (UTC)

That’s right. I looked at the revision history for such a mistake but for some reason couldn’t spot the second edit. Idell (talk) 10:22, 26 October 2020 (UTC)

Hi Idell and Redrose64, I'm really sorry for messing up the notifications. I remember that by that time I was learning about {{u}}, {{ping}} and notifications in general. I have fixed the discrepancy in display between desktop and mobile. There wasn't really a "problem", as the style was being left for the browser to decide, but now I am enforcing it display the borders. Personally, I preferred the look without the borders, or with borders only between rows (no white separator in the same row), but I'll wait for your opinions. Walwal20 ^{talk ▾ contribs} 22:28, 28 October 2020 (UTC)

Actually, placing borders just between rows does not address Idell's first concern, that it is hard to visually separate the hexadecimal from the RGB values. Here is how it is:

MediumVioletRed	C7 15 85	199  21 133
DeepPink	FF 14 93	255  20 147

Instead of borders, the spacing between Hex and RGB could be increased:

MediumVioletRed	C7 15 85	199  21 133
DeepPink	FF 14 93	255  20 147

Or make the borders thinner?

MediumVioletRed	C7 15 85	199  21 133
DeepPink	FF 14 93	255  20 147

Walwal20 ^{talk ▾ contribs} 22:44, 28 October 2020 (UTC)

a "few" suggested changes

idk if the categories that the colours are placed in were actually decided by the css founders, but if not, here's my suggested chart

HTML name	R G B
	Hex	Decimal
Pink and magenta colors
Thistle	D8 BF D8	216 191 216
Plum	DD A0 DD	221 160 221
Violet	EE 82 EE	238 130 238
Magenta (Fuchsia)	FF 00 FF	255   0 255
DarkMagenta	8B 00 8B	139   0 139
Purple	80 00 80	128   0 128
MediumVioletRed	C7 15 85	199  21 133
DeepPink	FF 14 93	255  20 147
PaleVioletRed	DB 70 93	219 112 147
HotPink	FF 69 B4	255 105 180
LightPink	FF B6 C1	255 182 193
Pink	FF C0 CB	255 192 203
LavenderBlush	FF F0 F5	255 240 245
Red colors
Coral	FF 7F 50	255 127  80
Tomato	FF 63 47	255  99  71
OrangeRed	FF 45 00	255  69   0
Red	FF 00 00	255   0   0
Crimson	DC 14 3C	220  20  60
Brown	A5 2A 2A	165  42  42
Maroon	80 00 00	128   0   0
DarkRed	8B 00 00	139   0   0
Firebrick	B2 22 22	178  34  34
IndianRed	CD 5C 5C	205  92  92
RosyBrown	BC 8F 8F	188 143 143
LightCoral	F0 80 80	240 128 128
Salmon	FA 80 72	250 128 114
DarkSalmon	E9 96 7A	233 150 122
LightSalmon	FF A0 7A	255 160 122
MistyRose	FF E4 E1	255 228 225
Orange and brown colors
SaddleBrown	8B 45 13	139  69  19
Sienna	A0 52 2D	160  82  45
Chocolate	D2 69 1E	210 105  30
Peru	CD 85 3F	205 133  63
DarkOrange	FF 8C 00	255 140   0
SandyBrown	F4 A4 60	244 164  96
Orange	FF A5 00	255 165   0
Tan colors
Tan	D2 B4 8C	210 180 140
Burlywood	DE B8 87	222 184 135
Wheat	F5 DE B3	245 222 179
NavajoWhite	FF DE AD	255 222 173
PeachPuff	FF DA B9	255 218 185
Moccasin	FF E4 B5	255 228 181
Bisque	FF E4 C4	255 228 196
BlanchedAlmond	FF EB CD	255 235 205
AntiqueWhite	FA EB D7	250 235 215
PapayaWhip	FF EF D5	255 239 213
Linen	FA F0 E6	250 240 230
OldLace	FD F5 E6	253 245 230
FloralWhite	FF FA F0	255 250 240

HTML name	R G B
	Hex	Decimal
Yellow and beige colors
Yellow	FF FF 00	255 255   0
Gold	FF D7 00	255 215   0
Goldenrod	DA A5 20	218 165  32
DarkGoldenrod	B8 86 0B	184 134  11
Olive	80 80 00	128 128   0
DarkKhaki	BD B7 6B	189 183 107
Khaki	F0 E6 8C	240 230 140
PaleGoldenrod	EE E8 AA	238 232 170
Beige	F5 F5 DC	245 245 220
LemonChiffon	FF FA CD	255 250 205
LightGoldenrodYellow	FA FA D2	250 250 210
Cornsilk	FF F8 DC	255 248 220
LightYellow	FF FF E0	255 255 224
Ivory	FF FF F0	255 255 240
Lime and yellow-green colors
LimeGreen	32 CD 32	50 205  50
YellowGreen	9A CD 32	154 205  50
Lime	00 FF 00	0 255   0
SpringGreen	00 FF 7F	0 255 127
MediumSpringGreen	00 FA 9A	0 250 154
LawnGreen	7C FC 00	124 252   0
Chartreuse	7F FF 00	127 255   0
LightGreen	90 EE 90	144 238 144
GreenYellow	AD FF 2F	173 255  47
PaleGreen	98 FB 98	152 251 152
Honeydew	F0 FF F0	240 255 240
MintCream	F5 FF FA	245 255 250
Green colors
DarkGreen	00 64 00	0 100   0
Green	00 80 00	0 128   0
DarkOliveGreen	55 6B 2F	85 107  47
ForestGreen	22 8B 22	34 139  34
SeaGreen	2E 8B 57	46 139  87
OliveDrab	6B 8E 23	107 142  35
MediumSeaGreen	3C B3 71	60 179 113
DarkSeaGreen	8F BC 8F	143 188 143
MediumAquamarine	66 CD AA	102 205 170
Cyan colors
Teal	00 80 80	0 128 128
DarkCyan	00 8B 8B	0 139 139
CadetBlue	5F 9E A0	95 158 160
LightSeaGreen	20 B2 AA	32 178 170
DarkTurquoise	00 CE D1	0 206 209
MediumTurquoise	48 D1 CC	72 209 204
Turquoise	40 E0 D0	64 224 208
Cyan (Aqua)	00 FF FF	0 255 255
PaleTurquoise	AF EE EE	175 238 238
Aquamarine	7F FF D4	127 255 212
LightCyan	E0 FF FF	224 255 255
AliceBlue	F0 F8 FF	240 248 255
Azure	F0 FF FF	240 255 255

HTML name	R G B
	Hex	Decimal
Blue and indigo colors
Indigo	4B 00 82	75   0 130
MidnightBlue	19 19 70	25  25 112
Navy	00 00 80	0   0 128
DarkBlue	00 00 8B	0   0 139
MediumBlue	00 00 CD	0   0 205
Blue	00 00 FF	0   0 255
SlateBlue	6A 5A CD	106  90 205
MediumSlateBlue	7B 68 EE	123 104 238
RoyalBlue	41 69 E1	65 105 225
SteelBlue	46 82 B4	70 130 180
DodgerBlue	1E 90 FF	30 144 255
DeepSkyBlue	00 BF FF	0 191 255
CornflowerBlue	64 95 ED	100 149 237
SkyBlue	87 CE EB	135 206 235
LightSkyBlue	87 CE FA	135 206 250
LightBlue	AD D8 E6	173 216 230
PowderBlue	B0 E0 E6	176 224 230
Violet colors
Orchid	DA 70 D6	218 112 214
MediumOrchid	BA 55 D3	186  85 211
DarkOrchid	99 32 CC	153  50 204
DarkViolet	94 00 D3	148   0 211
BlueViolet	8A 2B E2	138  43 226
MediumPurple	93 70 DB	147 112 219
Grayscale colors
Black	00 00 00	0   0   0
DimGray	69 69 69	105 105 105
Gray	80 80 80	128 128 128
DarkGray	A9 A9 A9	169 169 169
Silver	C0 C0 C0	192 192 192
LightGray	D3 D3 D3	211 211 211
Gainsboro	DC DC DC	220 220 220
WhiteSmoke	F5 F5 F5	245 245 245
White	FF FF FF	255 255 255
Desaturated colors
DarkSlateGray	2F 4F 4F	47  79  79
SlateGray	70 80 90	112 128 144
LightSlateGray	77 88 99	119 136 153
LightSteelBlue	B0 C4 DE	176 196 222
Lavender	E6 E6 FA	230 230 250
Seashell	FF F5 EE	255 245 238
GhostWhite	F8 F8 FF	248 248 255
Snow	FF FA FA	255 250 250

and maybe make another column for the other colours:

HTML name	R G B
	Hex	Decimal
Miscellaneous colors
ActiveText	FF 00 00	255   0   0
Mark	FF FF 00	255 255   0
Highlight	B5 D5 FF	181 213 255
LinkText	00 00 EE	0   0 238
RebeccaPurple	66 33 99	102  51 153
VisitedText	55 1A 8B	85  26 139

tell me if you have any other suggestions! BrownBrun (talk) 17:01, 13 March 2023 (UTC)

made 2 minor changes: changed the title and fixed cyan (aqua)'s name BrownBrun (talk) 17:06, 13 March 2023 (UTC)