<script>
let matrix = [
[1, 0, 0, 0, 0],
[0, 1, 0, 0, 0],
[0, 0, 1, 0, 0],
[0, 0, 0, 1, 0],
]
$: colorMatrix = matrix.map(channel => channel.join(' ')).join(' ');
const target = ['R', 'G', 'B', 'A'];
const head = ['', 'R', 'G', 'B', 'A', '1'];
</script>
<svg height="0" width="0">
<filter id="color">
<feColorMatrix
type="matrix"
values="{colorMatrix}" />
</filter>
</svg>
<div>
{#each head as val}
<span>{val}</span>
{/each}
{#each matrix as channel, idx}
<span class="row">{target[idx]}</span>
{#each channel as value}
<input type="number" step="0.1" bind:value />
{/each}
{/each}
</div>
<img src="https://alistapart.com/wp-content/uploads/2016/02/fig-08-rgb.png?w=960" alt="color wheel" />
<img src="https://lihautan.com/03b36a9f76000493.png" alt="profile" />
<style>