[ Back to main ] [ Back to colors page ] GRAYSCALE Palette Collection ═════════════╤══════════════════╤════════╤══════════════════════ Name │ Visual │ dE2000 │ Download ─────────────┼──────────────────┼────────┼────────────────────── GRAYSCALE 2 │ ██ │ 100.00 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 3 │ ███ │ 36.49 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 4 │ ████ │ 25.34 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 5 │ █████ │ 18.54 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 6 │ ██████ │ 14.98 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 7 │ ███████ │ 12.36 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 8 │ ████████ │ 10.65 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 9 │ █████████ │ 9.25 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 10 │ ██████████ │ 8.22 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 11 │ ███████████ │ 7.39 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 12 │ ████████████ │ 6.72 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 13 │ █████████████ │ 6.15 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 14 │ ██████████████ │ 5.67 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 15 │ ███████████████ │ 5.21 │ HEX PAL PNG-1x-8x-32x GRAYSCALE 16 │ ████████████████ │ 4.82 │ HEX PAL PNG-1x-8x-32x ═════════════╧══════════════════╧════════╧══════════════════════ About The GRAYSCALE palettes have the highest possible perceived dif- ference property in the sRGB color space for the number of grays they represent. In this regard, these palettes are superior to commonly used linear grayscales which might interest designers and artists. The palettes contain increasing number of gray colors from black to white inclusive. The intermediate colors are evaluated using an industry standard method to maximize the perceived difference of the palettes. In addition, custom palettes for any two edge grays can be made with a close to optimal result using the provided function plot and formula. Remarks The above grayscale palettes are the products of an intermediate state of my colorblind friendly palette generation project named as CVD. I was not satisfied with the available palettes. Being a deuteranop myself, I did not wanted to make anyone getting hand- icapped only because of an uncommon color vision. Despite this project took more time than was planned, I am satisfied with the results. As there are some few people with true colorblind vision who see the world really in grayscale, the bottleneck of any colorblind friendly palette is its grayscale difference value. This lead to the birth of the GRAYSCALE palettes. For valuing I picked the Delta-E 2000 (dE2000) method, which has became the industry standard formula to use. It is recommended for all calculations except textiles which still use dE-CMC. As for certain kind of products (videogames, diagrams, etc.) the perceived difference of the different objects is usually impor- tant, I really hope that the GRAYSCALE and CVD palette sets will be used by some people. As I mentioned above, the basis of any color vision deficiency friendly palette is the difference value of its grayscale coun- terpart. At least if you also care about people with achromatop- sia as I do. I found that for effective differentiation the dE2000 value must be 10 or more. You can make your own judgement by looking at the GRAYSCALE palettes and their Delta E values. However, please be aware that adjacency helps differentiation. I recommend you to test your differentiation ability in various spatial setups and light conditions. My point is that one should not trust a palette being tagged as colorblind friendly if it contains more than 8 colors. Technical In order to determine the palette with highest perceived differ- ence, I have to be able to assign a value to any given grayscale palette which represents that. Once I have this, I can pick the palette with the highest value from the candidates. I used Delta E 2000 (dE2000) for perceived difference measure- ment. As this value can be calculated on the CIELAB color space, in the first step all sRGB colors of the palette are converted to L*a*b*. Second, dE2000 values are determined for all possible color pairs. For N number of colors, the number of P pairs is P = N * (N-1) / 2, thus the cardinality grows quadratically. The dE2000 value of the palette is the array of the increasingly or- dered dE2000 values of the color pairs. Example for GRAYSCALE 4: ════════╤═════════╤═══════ Color 1 │ Color 2 │ dE2000 ────────┼─────────┼─────── #989898 │ #FFFFFF │ 25.34 #585858 │ #989898 │ 25.44 #000000 │ #585858 │ 25.54 #585858 │ #FFFFFF │ 49.18 #000000 │ #989898 │ 49.45 #000000 │ #FFFFFF │ 100.00 ════════╧═════════╧═══════ The next problem is to overcome the cardinality of the palette candidates. For N number of colors, the number of C candidates is the N-2 combination of 256-2=254 elements. Note that 2 edge elements are fixed, black and white, hence the substraction. For 16 colors there would be 37054233830964389244975 palette candi- dates which is unmanageable. Hence a solver was made. First it determines the guess palette. For low number of colors I used the linear function Y = round(X) where X = {255*n/(N-1))}, n = {0,…,N-1}. However, for higher N number of colors this is too inaccurate which again results too high count of candidates, thus it got replaced with the 5th or- der polynomial regression function which was fitted on the re- sult of the previous level. Curve fitting was done only for the intermediate colors as black and white are fixed on the bounds. For example for GRAYSCALE 4 the linear function results the fol- lowing guess palette: #000000 #555555 #AAAAAA #FFFFFF However, for this demonstration I rather start with the initial palette of the final polynomial function I got after curve fit- ting of GRAYSCALE 16 results: Y = 9.01889824926381081760 + 0.82592783724614506785X + + 0.00418862809152376355X^2 - 0.00005902279731056096X^3 + + 0.00000027548158813178X^4 - 0.00000000039293428346X^5Plot 1. Fitted curve on GRAYSCALE 16 Note that Plot 1 is 1:1 scale and its origin is on its top left so you can translate from X to Y by using it out of the box. Its initial guess is: #000000 #565656 #9B9B9B #FFFFFF ════════════════════════════════╤════════════════ Palette Candidate │ dE2000 ────────────────────────────────┼──────────────── #000000 #565656 #9B9B9B #FFFFFF │ 24.42, 24.86, … ════════════════════════════════╧════════════════ Second, the solver extends the range of intermediate colors to- wards both directions: #555555 #9A9A9A #000000 #565656 #9B9B9B #FFFFFF #575757 #9C9C9C The first round of palette candidates are result the cartesian product of the above sets. They are evaluated as shown in the following table orderd lexicographically by their dE2000 arrays: ════════════════════════════════╤════════════════ Palette Candidate │ dE2000 ────────────────────────────────┼──────────────── #000000 #575757 #9A9A9A #FFFFFF │ 24.72, 25.20, … #000000 #565656 #9A9A9A #FFFFFF │ 24.72, 24.86, … #000000 #555555 #9A9A9A #FFFFFF │ 24.52, 24.72, … #000000 #575757 #9B9B9B #FFFFFF │ 24.42, 25.20, … #000000 #565656 #9B9B9B #FFFFFF │ 24.42, 24.86, … #000000 #555555 #9B9B9B #FFFFFF │ 24.42, 24.52, … #000000 #575757 #9C9C9C #FFFFFF │ 24.11, 25.20, … #000000 #565656 #9C9C9C #FFFFFF │ 24.11, 24.86, … #000000 #555555 #9C9C9C #FFFFFF │ 24.11, 24.52, … ════════════════════════════════╧════════════════ The process continues until any new palette candidate has better dE2000 array than the best candidate of the previous step. #999999 #555555 #9A9A9A #000000 #565656 #9B9B9B #FFFFFF #575757 #9C9C9C #585858 ════════════════════════════════╤════════════════ Palette Candidate │ dE2000 ────────────────────────────────┼──────────────── #000000 #585858 #999999 #FFFFFF │ 25.03, 25.54, … #000000 #575757 #999999 #FFFFFF │ 25.03, 25.20, … #000000 #565656 #999999 #FFFFFF │ 24.86, 25.03, … #000000 #585858 #9A9A9A #FFFFFF │ 24.72, 25.54, … #000000 #555555 #999999 #FFFFFF │ 24.52, 25.03, … #000000 #585858 #9B9B9B #FFFFFF │ 24.42, 25.54, … #000000 #585858 #9C9C9C #FFFFFF │ 24.11, 25.54, … ════════════════════════════════╧════════════════ 25.03 is higher than 24.72, thus the solver goes to round 3: #989898 #999999 #555555 #9A9A9A #000000 #565656 #9B9B9B #FFFFFF #575757 #9C9C9C #585858 #595959 ════════════════════════════════╤════════════════ Palette Candidate │ dE2000 ────────────────────────────────┼──────────────── #000000 #585858 #989898 #FFFFFF │ 25.34, 25.44, … #000000 #575757 #989898 #FFFFFF │ 25.20, 25.34, … #000000 #595959 #999999 #FFFFFF │ 25.03, 25.38, … #000000 #595959 #989898 #FFFFFF │ 25.01, 25.34, … #000000 #565656 #989898 #FFFFFF │ 24.86, 25.34, … #000000 #595959 #9A9A9A #FFFFFF │ 24.72, 25.73, … #000000 #555555 #989898 #FFFFFF │ 24.52, 25.34, … #000000 #595959 #9B9B9B #FFFFFF │ 24.42, 25.88, … #000000 #595959 #9C9C9C #FFFFFF │ 24.11, 25.88, … ════════════════════════════════╧════════════════ Round 4: #979797 #989898 #999999 #555555 #9A9A9A #000000 #565656 #9B9B9B #FFFFFF #575757 #9C9C9C #585858 #595959 ════════════════════════════════╤════════════════ Palette Candidate │ dE2000 ────────────────────────────────┼──────────────── #000000 #575757 #979797 #FFFFFF │ 25.20, 25.47, … #000000 #585858 #979797 #FFFFFF │ 25.06, 25.54, … #000000 #565656 #979797 #FFFFFF │ 24.86, 25.64, … #000000 #595959 #979797 #FFFFFF │ 24.64, 25.64, … #000000 #555555 #979797 #FFFFFF │ 24.52, 25.64, … ════════════════════════════════╧════════════════ As the highest valued candidate is inferior to round 3's, the process is done and the final palette is: #000000 #585858 #989898 #FFFFFF You can find the GRAYSCALE and CVD palette projects on GitHub.