❤️
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 |
Discussion