❤️

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

2021/09/20に公開

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

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

Discussion

ログインするとコメントできます