Every Perceptually Uniform Color Map as a CSS Gradient
29 Apr, 2025
Colormaps are functions that map from [0, 1] to colors. I love colormaps! Maybe a little too much? There is a huge amount of very serious color science behind colormaps, and also a great Python package called colorcet which implements a lot of them.
Would you ever need those as a CSS gradient? Probably not. Did I have fun writing a script to convert every 120 of them to a CSS gradient? Absolutely! Enjoy 😁
Note that these sample the actual colormap at N=101 points, and then your browser does linear interpolation to fill in the gaps. The actual colormaps are 255-entry tables . So not only is this horribly inefficient by using very verbose CSS syntax, it's also destroying a lot of the original colormap's information. This is just for fun, use the original data for anything serious.
Also, I excluded the categorical colormaps because they don't really make sense as a gradient.
Accent
Blues
BrBG
BuGn
BuPu
CMRmap
Dark2
GnBu
Greens
Grays / Greys
OrRd
Oranges
PRGn
Paired
Pastel1
Pastel2
PiYG
PuBu
PuBuGn
PuOr
PuRd
Purples
RdBu
RdGy
RdPu
RdYlBu
RdYlGn
Reds
Set1
Set2
Set3
Spectral
Wistia
YlGn
YlGnBu
YlOrBr
YlOrRd
afmhot
autumn
bgy
bgyw
binary
bjy
bkr
bky
blues
bmw
bmy
bone
brg
bwr
bwy
cet_CET_C1
cet_CET_C10
cet_CET_C10s
cet_CET_C11
cet_CET_C11s
cet_CET_C1s
cet_CET_C2
cet_CET_C2s
cet_CET_C3
cet_CET_C3s
cet_CET_C4
cet_CET_C4s
cet_CET_C5
cet_CET_C5s
cet_CET_C6
cet_CET_C6s
cet_CET_C7
cet_CET_C7s
cet_CET_C8
cet_CET_C8s
cet_CET_C9
cet_CET_C9s
cet_CET_CBC1
cet_CET_CBC2
cet_CET_CBD1
cet_CET_CBD2
cet_CET_CBL1
cet_CET_CBL2
cet_CET_CBL3
cet_CET_CBL4
cet_CET_CBTC1
cet_CET_CBTC2
cet_CET_CBTD1
cet_CET_CBTL1
cet_CET_CBTL2
cet_CET_CBTL3
cet_CET_CBTL4
cet_CET_D1
cet_CET_D10
cet_CET_D11
cet_CET_D12
cet_CET_D13
cet_CET_D1A
cet_CET_D2
cet_CET_D3
cet_CET_D4
cet_CET_D6
cet_CET_D7
cet_CET_D8
cet_CET_D9
cet_CET_I1
cet_CET_I2
cet_CET_I3
cet_CET_L1
cet_CET_L10
cet_CET_L11
cet_CET_L12
cet_CET_L13
cet_CET_L14
cet_CET_L15
cet_CET_L16
cet_CET_L17
cet_CET_L18
cet_CET_L19
cet_CET_L2
cet_CET_L20
cet_CET_L3
cet_CET_L4
cet_CET_L5
cet_CET_L6
cet_CET_L7
cet_CET_L8
cet_CET_L9
cet_CET_R1
cet_CET_R2
cet_CET_R3
cet_CET_R4
cet_bgy
cet_bgyw
cet_bjy
cet_bkr
cet_bky
cet_blues
cet_bmw
cet_bmy
cet_bwy
cet_circle_mgbm_67_c31
cet_circle_mgbm_67_c31_s25
cet_colorwheel
cet_coolwarm
cet_cwr
cet_cyclic_bgrmb_35_70_c75
cet_cyclic_bgrmb_35_70_c75_s25
cet_cyclic_grey_15_85_c0
cet_cyclic_grey_15_85_c0_s25
cet_cyclic_isoluminant
cet_cyclic_mrybm_35_75_c68
cet_cyclic_mrybm_35_75_c68_s25
cet_cyclic_mybm_20_100_c48
cet_cyclic_mybm_20_100_c48_s25
cet_cyclic_mygbm_30_95_c78
cet_cyclic_mygbm_30_95_c78_s25
cet_cyclic_mygbm_50_90_c46
cet_cyclic_mygbm_50_90_c46_s25
cet_cyclic_protanopic_deuteranopic_bwyk_16_96_c31
cet_cyclic_protanopic_deuteranopic_wywb_55_96_c33
cet_cyclic_rygcbmr_50_90_c64
cet_cyclic_rygcbmr_50_90_c64_s25
cet_cyclic_tritanopic_cwrk_40_100_c20
cet_cyclic_tritanopic_wrwc_70_100_c20
cet_cyclic_wrkbw_10_90_c43
cet_cyclic_wrkbw_10_90_c43_s25
cet_cyclic_wrwbw_40_90_c42
cet_cyclic_wrwbw_40_90_c42_s25
cet_cyclic_ymcgy_60_90_c67
cet_cyclic_ymcgy_60_90_c67_s25
cet_dimgray
cet_diverging_bkr_55_10_c35
cet_diverging_bky_60_10_c30
cet_diverging_bwg_20_95_c41
cet_diverging_bwr_20_95_c54
cet_diverging_bwr_40_95_c42
cet_diverging_bwr_55_98_c37
cet_diverging_cwm_80_100_c22
cet_diverging_gkr_60_10_c40
cet_diverging_gwr_55_95_c38
cet_diverging_gwv_55_95_c39
cet_diverging_isoluminant_cjm_75_c23
cet_diverging_isoluminant_cjm_75_c24
cet_diverging_isoluminant_cjo_70_c25
cet_diverging_linear_bjr_30_55_c53
cet_diverging_linear_bjy_30_90_c45
cet_diverging_linear_protanopic_deuteranopic_bjy_57_89_c34
cet_diverging_protanopic_deuteranopic_bwy_60_95_c32
cet_diverging_rainbow_bgymr_45_85_c67
cet_diverging_tritanopic_cwr_75_98_c20
cet_fire
cet_gouldian
cet_gray
cet_gwv
cet_isolum
cet_isoluminant_cgo_70_c39
cet_isoluminant_cgo_80_c38
cet_isoluminant_cm_70_c39
cet_kb
cet_kbc
cet_kbgyw
cet_kg
cet_kgy
cet_kr
cet_linear_bgy_10_95_c74
cet_linear_bgyw_15_100_c67
cet_linear_bgyw_15_100_c68
cet_linear_bgyw_20_98_c66
cet_linear_blue_5_95_c73
cet_linear_blue_95_50_c20
cet_linear_bmw_5_95_c86
cet_linear_bmw_5_95_c89
cet_linear_bmy_10_95_c71
cet_linear_bmy_10_95_c78
cet_linear_gow_60_85_c27
cet_linear_gow_65_90_c35
cet_linear_green_5_95_c69
cet_linear_grey_0_100_c0
cet_linear_grey_10_95_c0
cet_linear_kbc_5_95_c73
cet_linear_kbgoy_20_95_c57
cet_linear_kbgyw_10_98_c63
cet_linear_kbgyw_5_98_c62
cet_linear_kgy_5_95_c69
cet_linear_kry_0_97_c73
cet_linear_kry_5_95_c72
cet_linear_kry_5_98_c75
cet_linear_kryw_0_100_c71
cet_linear_kryw_5_100_c64
cet_linear_kryw_5_100_c67
cet_linear_protanopic_deuteranopic_kbjyw_5_95_c25
cet_linear_protanopic_deuteranopic_kbw_5_95_c34
cet_linear_protanopic_deuteranopic_kbw_5_98_c40
cet_linear_protanopic_deuteranopic_kyw_5_95_c49
cet_linear_ternary_blue_0_44_c57
cet_linear_ternary_green_0_46_c42
cet_linear_ternary_red_0_50_c52
cet_linear_tritanopic_kcw_5_95_c22
cet_linear_tritanopic_krjcw_5_95_c24
cet_linear_tritanopic_krjcw_5_98_c46
cet_linear_tritanopic_krw_5_95_c46
cet_linear_wcmr_100_45_c42
cet_linear_worb_100_25_c53
cet_linear_wyor_100_45_c55
cet_rainbow
cet_rainbow4
cet_rainbow_bgyr_10_90_c83
cet_rainbow_bgyr_35_85_c72
cet_rainbow_bgyr_35_85_c73
cet_rainbow_bgyrm_35_85_c69
cet_rainbow_bgyrm_35_85_c71
CET_C10 / circle_mgbm_67_c31
CET_C10s / circle_mgbm_67_c31_s25
cividis
colorwheel
cool
coolwarm
copper
cubehelix
cwr
CET_C11 / cyclic_bgrmb_35_70_c75
CET_C11s / cyclic_bgrmb_35_70_c75_s25
CET_C5 / cyclic_grey_15_85_c0
CET_C5s / cyclic_grey_15_85_c0_s25
cyclic_isoluminant
CET_C1 / cyclic_mrybm_35_75_c68
CET_C1s / cyclic_mrybm_35_75_c68_s25
CET_C9 / cyclic_mybm_20_100_c48
CET_C9s / cyclic_mybm_20_100_c48_s25
CET_C2 / cyclic_mygbm_30_95_c78
CET_C2s / cyclic_mygbm_30_95_c78_s25
CET_C8 / cyclic_mygbm_50_90_c46
CET_C8s / cyclic_mygbm_50_90_c46_s25
CET_CBC1 / cyclic_protanopic_deuteranopic_bwyk_16_96_c31
CET_CBC2 / cyclic_protanopic_deuteranopic_wywb_55_96_c33
CET_C6 / cyclic_rygcbmr_50_90_c64
CET_C6s / cyclic_rygcbmr_50_90_c64_s25
CET_CBTC1 / cyclic_tritanopic_cwrk_40_100_c20
CET_CBTC2 / cyclic_tritanopic_wrwc_70_100_c20
CET_C3 / cyclic_wrkbw_10_90_c43
CET_C3s / cyclic_wrkbw_10_90_c43_s25
CET_C4 / cyclic_wrwbw_40_90_c42
CET_C4s / cyclic_wrwbw_40_90_c42_s25
CET_C7 / cyclic_ymcgy_60_90_c67
CET_C7s / cyclic_ymcgy_60_90_c67_s25
dimgray
CET_D4 / diverging_bkr_55_10_c35
CET_D6 / diverging_bky_60_10_c30
CET_D13 / diverging_bwg_20_95_c41
CET_D1A / diverging_bwr_20_95_c54
CET_D1 / diverging_bwr_40_95_c42
CET_D9 / diverging_bwr_55_98_c37
CET_D10 / diverging_cwm_80_100_c22
diverging_gkr_60_10_c40
CET_D3 / diverging_gwr_55_95_c38
CET_D2 / diverging_gwv_55_95_c39
CET_D12 / diverging_isoluminant_cjm_75_c23
diverging_isoluminant_cjm_75_c24
CET_D11 / diverging_isoluminant_cjo_70_c25
CET_D8 / diverging_linear_bjr_30_55_c53
CET_D7 / diverging_linear_bjy_30_90_c45
CET_CBD2 / diverging_linear_protanopic_deuteranopic_bjy_57_89_c34
CET_CBD1 / diverging_protanopic_deuteranopic_bwy_60_95_c32
CET_R3 / diverging_rainbow_bgymr_45_85_c67
CET_CBTD1 / diverging_tritanopic_cwr_75_98_c20
fire
flag
gist_earth
gist_gray / gist_grey
gist_heat
gist_ncar
gist_rainbow
gist_stern
gist_yarg / gist_yerg
gnuplot
gnuplot2
gouldian
gray / grey
gwv
hot
hsv
inferno
isolum
CET_I1 / isoluminant_cgo_70_c39
CET_I2 / isoluminant_cgo_80_c38
CET_I3 / isoluminant_cm_70_c39
jet
kb
kbc
kbgyw
kg
kgy
kr
linear_bgy_10_95_c74
linear_bgyw_15_100_c67
linear_bgyw_15_100_c68
CET_L9 / linear_bgyw_20_98_c66
linear_blue_5_95_c73
CET_L12 / linear_blue_95_50_c20
CET_L7 / linear_bmw_5_95_c86
linear_bmw_5_95_c89
CET_L8 / linear_bmy_10_95_c71
linear_bmy_10_95_c78
CET_L10 / linear_gow_60_85_c27
CET_L11 / linear_gow_65_90_c35
linear_green_5_95_c69
CET_L1 / linear_grey_0_100_c0
CET_L2 / linear_grey_10_95_c0
CET_L6 / linear_kbc_5_95_c73
CET_L20 / linear_kbgoy_20_95_c57
linear_kbgyw_10_98_c63
CET_L16 / linear_kbgyw_5_98_c62
CET_L5 / linear_kgy_5_95_c69
CET_L4 / linear_kry_0_97_c73
linear_kry_5_95_c72
linear_kry_5_98_c75
CET_L3 / linear_kryw_0_100_c71
linear_kryw_5_100_c64
linear_kryw_5_100_c67
CET_CBL1 / linear_protanopic_deuteranopic_kbjyw_5_95_c25
CET_CBL3 / linear_protanopic_deuteranopic_kbw_5_95_c34
CET_CBL2 / linear_protanopic_deuteranopic_kbw_5_98_c40
CET_CBL4 / linear_protanopic_deuteranopic_kyw_5_95_c49
CET_L15 / linear_ternary_blue_0_44_c57
CET_L14 / linear_ternary_green_0_46_c42
CET_L13 / linear_ternary_red_0_50_c52
CET_CBTL3 / linear_tritanopic_kcw_5_95_c22
CET_CBTL2 / linear_tritanopic_krjcw_5_95_c24
CET_CBTL1 / linear_tritanopic_krjcw_5_98_c46
CET_CBTL4 / linear_tritanopic_krw_5_95_c46
CET_L19 / linear_wcmr_100_45_c42
CET_L17 / linear_worb_100_25_c53
CET_L18 / linear_wyor_100_45_c55
magma
nipy_spectral
ocean
pink
plasma
prism
rainbow
rainbow4
CET_R4 / rainbow_bgyr_10_90_c83
CET_R2 / rainbow_bgyr_35_85_c72
rainbow_bgyr_35_85_c73
CET_R1 / rainbow_bgyrm_35_85_c69
rainbow_bgyrm_35_85_c71
seismic
spring
summer
tab10
tab20
tab20b
tab20c
terrain
turbo
twilight
twilight_shifted
viridis
winter