YouTube Live スーパーチャットのカラーコードまとめ

探したけどまとまってるサイトとかが無かったのでまとめておきます.

RGBA が元の CSS の値です. 一応下記の関数 (JavaScript) で RGBA を HEXA に変換して併記しました.

function rgba2hexa(rgba) {
  const [ r, g, b, a ] = rgba.slice(5, -1).replace(/ /g, '').split(',')
  const dec2hex = dec => ('0' + Number(dec).toString(16)).slice(-2)
  const hex_r = dec2hex(r)
  const hex_g = dec2hex(g)
  const hex_b = dec2hex(b)
  const hex_a = dec2hex(Math.round(255 * a))
  return `#${hex_r}${hex_g}${hex_b}${hex_a}`
}

Primary が Message 部分の背景色, Secondary が Author Name や Header の背景色に使われています.

色	金額 (円)	Primary	Secondary	Header	Author Name	Timestamp	Message
青	100 - 199	rgba(30,136,229,1) #1e88e5ff	rgba(21,101,192,1) #1565c0ff	rgba(255,255,255,1) #ffffffff	rgba(255,255,255,0.701961) #ffffffb3	rgba(255,255,255,0.501961) #ffffff80	rgba(255,255,255,1) #ffffffff
水	200 - 499	rgba(0,229,255,1) #00e5ffff	rgba(0,184,212,1) #00b8d4ff	rgba(0,0,0,1) #000000ff	rgba(0,0,0,0.701961) #000000b3	rgba(0,0,0,0.501961) #00000080	rgba(0,0,0,1) #000000ff
黄緑	500 - 999	rgba(29,233,182,1) #1de9b6ff	rgba(0,191,165,1) #00bfa5ff	rgba(0,0,0,1) #000000ff	rgba(0,0,0,0.541176) #0000008a	rgba(0,0,0,0.501961) #00000080	rgba(0,0,0,1) #000000ff
黄	1,000 - 1,999	rgba(255,202,40,1) #ffca28ff	rgba(255,179,0,1) #ffb300ff	rgba(0,0,0,0.87451) #000000df	rgba(0,0,0,0.541176) #0000008a	rgba(0,0,0,0.501961) #00000080	rgba(0,0,0,0.87451) #000000df
橙	2,000 - 4,999	rgba(245,124,0,1) #f57c00ff	rgba(230,81,0,1) #e65100ff	rgba(255,255,255,0.87451) #ffffffdf	rgba(255,255,255,0.701961) #ffffffb3	rgba(255,255,255,0.501961) #ffffff80	rgba(255,255,255,0.87451) #ffffffdf
マゼンタ	5,000 - 9,999	rgba(233,30,99,1) #e91e63ff	rgba(194,24,91,1) #c2185bff	rgba(255,255,255,1) #ffffffff	rgba(255,255,255,0.701961) #ffffffb3	rgba(255,255,255,0.501961) #ffffff80	rgba(255,255,255,1) #ffffffff
赤	10,000 - 50,000	rgba(230,33,23,1) #e62117ff	rgba(208,0,0,1) #d00000ff	rgba(255,255,255,1) #ffffffff	rgba(255,255,255,0.701961) #ffffffb3	rgba(255,255,255,0.501961) #ffffff80	rgba(255,255,255,1) #ffffffff