Template talk:Color chart X11
 | This template was considered for deletion on 2016 February 6. The result of the discussion was "keep". |
Spacing & Layout
[edit]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
[edit]@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
[edit]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
[edit]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
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
[edit]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)
- @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)
- 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
[edit]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)