css_colormaps

css_colormaps.py

# https://victorpoughon.fr/css-gradients-colorcet/

import matplotlib as mpl
import colorcet as cc
import numpy as np

from collections import defaultdict

print("matplotlib version", mpl.__version__)
print("colorcet version", cc.__version__)

all_cmaps = {}
other_names = defaultdict(set)

def allowed(names):
    for n in names:
        if n.endswith("_r"):
            return False
        if "glasbey" in n:
            return False
    return True

for name, cmap in cc.cm.items():
    if allowed([name, cmap.name]):
        all_cmaps[cmap.name] = cmap
        other_names[cmap.name].update([name, cmap.name])

for name, cmap in mpl.colormaps.items():
    if allowed([name, cmap.name]):
        all_cmaps[cmap.name] = cmap
        other_names[cmap.name].update([name, cmap.name])

print(len(all_cmaps))
print(len(other_names))


def background_css(cmap, N):
    N = 101
    
    def pl(v):
        return map(int, np.round(np.array(cmap(v))*255))
    
    space = np.linspace(0, 1, N)
    domain = np.linspace(0, 1, N)
    
    s = "background: linear-gradient(90deg, "
    for i, j in zip(space, domain):
        r, g, b, a = pl(i)
        hex_str = "#{:02x}{:02x}{:02x}".format(r,g,b)
        s += f"{hex_str} {round(100*j)}%, "

    s = s[:-2]
    s += ");"

    return s

html_template = '<div class="gradient" style="{}"></div>'

total_md = """
<style>
div.gradient {
    width: 650px;
    height: 60px;
    border-radius: 3px;
    margin-bottom: 10px;
    box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.5);
    margin: 0 auto;
}
pre {
max-width: 600px;
}
</style>

"""

for name, cmap in sorted(all_cmaps.items()):
    names = list(sorted(other_names[name]))

    css = background_css(cmap, N=6)
    html = html_template.format(css)
    total_md += f'\n## {" / ".join(names)}\n'
    total_md += f'\n{html}\n'

with open("css_gradients.md", "w") as f:
    f.write(total_md)