User:CactusJack/weatherbox color proposal
![](http://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/CIExy1931_MacAdam.png/220px-CIExy1931_MacAdam.png)
The RGB color space is not perceptually uniform. Because of the particulars of human color perception, the result of this is that shades of green with a given RGB distance between them (let's call this distance X) appear far more similar to the human eye than shades of red, blue, or any other color that differ by a distance of X. Here is a demonstration of this:
Hue | Color 1 | Color 2 | Example text | Contrast ratio |
---|---|---|---|---|
Blue | #8888FF | #0000FF | The quick brown fox jumped over the lazy dog. | 2.87 |
Red | #FF8888 | #FF0000 | The quick brown fox jumped over the lazy dog. | 1.74 |
Green | #88FF88 | #00FF00 | The quick brown fox jumped over the lazy dog. | 1.09 |
Because of this effect, the green precipitation scale in this template includes a very wide range of colors which appear basically identical to the human eye. For equally distant input values, the contrast ratios vary massively across the color scale.
Input 1 | Input 2 | Output 1 | Output 2 | Contrast ratio | Effective contrast[a] |
---|---|---|---|---|---|
0 | 10 | #FFFFFF | #F0FFF0 | 1.036 | 36 |
10 | 20 | #F0FFF0 | #E1FFE1 | 1.034 | 34 |
20 | 30 | #E1FFE1 | #D2FFD2 | 1.033 | 33 |
30 | 40 | #D2FFD2 | #C3FFC3 | 1.031 | 31 |
40 | 50 | #C3FFC3 | #B4FFB4 | 1.028 | 28 |
50 | 60 | #B4FFB4 | #A5FFA5 | 1.026 | 26 |
60 | 70 | #A5FFA5 | #96FF96 | 1.024 | 24 |
70 | 80 | #96FF96 | #87FF87 | 1.021 | 21 |
80 | 90 | #87FF87 | #78FF78 | 1.019 | 19 |
90 | 100 | #78FF78 | #69FF69 | 1.016 | 16 |
100 | 110 | #69FF69 | #5BFF5B | 1.013 | 13 |
110 | 120 | #5BFF5B | #4CFF4C | 1.012 | 12 |
120 | 230 | #4CFF4C | #3DFF3D | 1.009 | 9 |
130 | 140 | #3DFF3D | #2EFF2E | 1.007 | 7 |
140 | 150 | #2EFF2E | #1FFF1F | 1.005 | 5 |
150 | 160 | #1FFF1F | #10FF10 | 1.003 | 3 |
160 | 170 | #10FF10 | #01FF01 | 1.002 | 2 |
170 | 180 | #01FF01 | #00F100 | 1.127 | 127 |
180 | 190 | #00F100 | #00E200 | 1.143 | 143 |
190 | 200 | #00E200 | #00D300 | 1.151 | 151 |
200 | 210 | #00D300 | #00C500 | 1.148 | 148 |
210 | 220 | #00C500 | #00B600 | 1.168 | 168 |
220 | 230 | #00B600 | #00A700 | 1.178 | 178 |
230 | 240 | #00A700 | #009800 | 1.189 | 189 |
240 | 250 | #009800 | #008900 | 1.199 | 199 |
250 | 260 | #008900 | #007A00 | 1.21 | 210 |
260 | 270 | #007A00 | #006B00 | 1.219 | 219 |
270 | 280 | #006B00 | #005C00 | 1.226 | 226 |
280 | 290 | #005C00 | #004D00 | 1.228 | 228 |
290 | 300 | #004D00 | #003E00 | 1.221 | 221 |
300 | 310 | #003E00 | #003000 | 1.187 | 187 |
I've used an online tool to produce this color scale. NOTE: This scale has 621 color points and will take a few moments to generate. It may crash slower computers. A lower-resolution version of the same scale, with only 32 color points, can be viewed here. The scale has a resolution of 0.5 millimeters per 31-day month. If you imagine the scale as a zero-indexed array, the color displayed for a 31-day month with n millimeters of precipitation per month is the color at index 2n of the array.
Here are the contrast ratios across my proposed scale:
Input 1 | Input 2 | Output 1 | Output 2 | Contrast ratio | Effective contrast[b] |
---|---|---|---|---|---|
0 | 10 | #FFFFFF | #F2FFEC | 1.035 | 35 |
10 | 20 | #F2FFEC | #E4FFDA | 1.034 | 34 |
20 | 30 | #E4FFDA | #D6FDC9 | 1.046 | 46 |
30 | 40 | #D6FDC9 | #C9FAB9 | 1.05 | 50 |
40 | 50 | #C9FAB9 | #BCF7A9 | 1.05 | 50 |
50 | 60 | #BCF7A9 | #AEF29B | 1.065 | 65 |
60 | 70 | #AEF29B | #A2ED8D | 1.062 | 62 |
70 | 80 | #A2ED8D | #95E77F | 1.073 | 73 |
80 | 90 | #95E77F | #88E173 | 1.073 | 73 |
90 | 100 | #88E173 | #7CDA67 | 1.081 | 81 |
100 | 110 | #7CDA67 | #71D25C | 1.091 | 91 |
110 | 120 | #71D25C | #66CA52 | 1.093 | 93 |
120 | 230 | #66CA52 | #5BC248 | 1.095 | 95 |
130 | 140 | #5BC248 | #51BA3F | 1.096 | 96 |
140 | 150 | #51BA3F | #47B137 | 1.109 | 109 |
150 | 160 | #47B137 | #3DA82F | 1.113 | 113 |
160 | 170 | #3DA82F | #349F28 | 1.115 | 115 |
170 | 180 | #349F28 | #2C9622 | 1.117 | 117 |
180 | 190 | #2C9622 | #248D1C | 1.121 | 121 |
190 | 200 | #248D1C | #1D8417 | 1.123 | 123 |
200 | 210 | #1D8417 | #167B12 | 1.126 | 126 |
210 | 220 | #167B12 | #10730E | 1.114 | 114 |
220 | 230 | #10730E | #0A6A0B | 1.13 | 130 |
230 | 240 | #0A6A0B | #056209 | 1.117 | 117 |
240 | 250 | #056209 | #025A07 | 1.117 | 117 |
250 | 260 | #025A07 | #005206 | 1.117 | 117 |
260 | 270 | #005206 | #004A05 | 1.115 | 115 |
270 | 280 | #004A05 | #004304 | 1.098 | 98 |
280 | 290 | #004304 | #003C03 | 1.095 | 95 |
290 | 300 | #003C03 | #003602 | 1.078 | 78 |
300 | 310 | #003602 | #003000 | 1.074 | 74 |