<template>
    <div id="app">
        <p>RGB: {{RGB}}</p>
        <p>Hex: {{Hex}}</p>
        <CanvasColorDisc
            id="0"
            :color="RGB"
            :width="300"
            :height="240"
            @change="changeColor"></CanvasColorDisc>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            // RGB: { r: 255, g:255, b:255 },
            RGB: '#ff0000',
            Hex: '',
        }
    },
    methods: {
        changeColor(newRgb, utils) {
            this.RGB = newRgb
            this.Hex = `#${utils.RGBToHex(`(${newRgb.r}, ${newRgb.g}, ${newRgb.b})`)}`.toUpperCase()
        },
    },
}
</script>

<style>
    html {
        font-family: "Microsoft Sans Serif", Arial, Helvetica, sans-serif
    }
</style>