svg-color
https://github.com/daiiz/svg-color
指定色で塗りつぶしたrect要素だけ描いたSVG画像を返す
code:svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
<rect x="0" y="0" width="${width}" height="${height}" fill="${color}"></rect>
</svg>
Vercelにデプロイした
https://gyazo.com/ead048a8dac97b6d7a2f5f76fe8a395b
アップデート
●▲▼★ に対応 2024/4/1
https://svg-color.vercel.app/hex/000000.●.svg https://svg-color.vercel.app/hex/000000.●.svg
https://svg-color.vercel.app/r/0/g/0/b/0.▲.svg https://svg-color.vercel.app/r/0/g/0/b/0.▲.svg
https://svg-color.vercel.app/h/0/s/0/l/0.★.svg https://svg-color.vercel.app/h/0/s/0/l/0.★.svg
https://svg-color.vercel.app/c/100/m/100/y/100/k/100.▼.svg https://svg-color.vercel.app/c/100/m/100/y/100/k/100.▼.svg
例
RGB、RGBA
https://svg-color.vercel.app/r/255/g/0/b/0.svg https://svg-color.vercel.app/r/255/g/0/b/0.svg
https://svg-color.vercel.app/r/0/g/0/b/0/a/0.1.svg https://svg-color.vercel.app/r/0/g/0/b/0/a/0.1.svg
Colors HEX
RGB 16進表記
https://svg-color.vercel.app/hex/ffd500.svg https://svg-color.vercel.app/hex/ffd500.svg
HSL、HSLA
https://svg-color.vercel.app/h/50/s/100/l/50/a/0.3.svg https://svg-color.vercel.app/h/50/s/100/l/50/a/0.3.svg (50, 100%, 50%, 0.3)
CMYK
https://svg-color.vercel.app/c/100/m/0/y/0/k/0.svg https://svg-color.vercel.app/c/100/m/0/y/0/k/0.svg (100%, 0%, 0%, 0%)
https://svg-color.vercel.app/c/0/m/0/y/100/k/0.svg https://svg-color.vercel.app/c/0/m/0/y/100/k/0.svg
利用事例
身の回りの色を集めるのCosenseページの扉画像
? (RGBA|HEX|HSLA|CMYK)で指定した色をSVG画像として返す