Wizard Notes

Python, JavaScript を使った音楽信号分析の技術録、作曲活動に関する雑記

Python:数値で色をグラデーションさせて16進数カラーコードとして取得&HTML 表の自動生成 (matplotlib)

1次元の数値→16進数カラーコード

データ分析をするアプリ/プログラムでは、数値に基づいて色をグラデーションさせたいということが多々あります。

例えばPythonでは、matplotlib を使ったプロットであれば Colormapを使えば、

  • 入力: (1次元の数値, Colormap指定)
  • 出力: RGBD の4次元タプル

が簡単に取得できます。

さらに、matplotlib.colors.rgb2hex() を使えば、RGBD の4次元タプルから16進数カラーコードを取得することができます。

import numpy as np
from matplotlib.colors import rgb2hex
import matplotlib.pyplot as plt

cm = "jet"
n_samples = 20

cmap = plt.get_cmap("jet")

for k, x in enumerate(np.linspace(0.0, 1.0, n_samples)):
    colorcode = rgb2hex(cmap(x))
    print(f"{k:02d}/{n_samples}\t{x:0.3f}\t{colorcode}")

・実行例

# k     x     colorcode
00/20   0.000   #000080
01/20   0.053   #0000bb
02/20   0.105   #0000f6
03/20   0.158   #0020ff
04/20   0.211   #0054ff
05/20   0.263   #008cff
06/20   0.316   #00c0ff
07/20   0.368   #0ff8e7
08/20   0.421   #39ffbe
09/20   0.474   #66ff90
10/20   0.526   #90ff66
11/20   0.579   #beff39
12/20   0.632   #e7ff0f
13/20   0.684   #ffd300
14/20   0.737   #ffa300
15/20   0.789   #ff6f00
16/20   0.842   #ff3f00
17/20   0.895   #f60b00
18/20   0.947   #bb0000
19/20   1.000   #800000

HTML 表の自動生成

先ほどの応用例としては、PythonでHTMLのタグ・コンテンツを自動生成する例が考えられます。

以下のコードでは、要素の位置と数に応じて背景色を変えるようなHTMLの```

を自動生成しています。

手動でやるのは時間がかかり非常に面倒ですが、Pythonで自動生成すると一瞬で生成できます。

#000080 #000096 #0000ad #0000c4 #0000da
#0000f6 #0000ff #0010ff #0024ff #003cff
#0050ff #0064ff #0078ff #008cff #00a4ff
#00b8ff #00ccff #00e0fb #0ff8e7 #1fffd7
#30ffc7 #40ffb7 #50ffa7 #63ff94 #73ff83
#83ff73 #94ff63 #a7ff50 #b7ff40 #c7ff30
#d7ff1f #e7ff0f #fbf100 #ffde00 #ffcc00
#ffb900 #ffa300 #ff9100 #ff7e00 #ff6c00
#ff5900 #ff4300 #ff3000 #ff1e00 #f60b00
#da0000 #c40000 #ad0000 #960000 #800000

f:id:Kurene:20210801161141p:plain:w500

まとめ

matplotlibの関数を使って、数値で色をグラデーションさせて16進数カラーコードとして取得し、HTML 表の自動生成しました。

この例のように、Pythonwebページのコンポーネントを生成する用途でも役立ちます。