Vuetify Color Picker

<!DOCTYPE html>
<html>

<body>
    <div id="app">
        <v-app>
            <v-main>
                <v-container>
                    <v-row>
                        <v-col cols="12">
                            <v-btn @click="colorPickerVisible = !colorPickerVisible">Toggle Color Picker</v-btn>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col cols="6">
                            <v-color-picker v-model="selectedColor" hide-inputs show-swatches
                                v-if="colorPickerVisible"></v-color-picker>
                        </v-col>
                        <v-col cols="6">
                            <v-card class="mt-4">
                                <v-card-text class="text-center" :style="'background-color: ' + selectedColor" dark>
                                    <h2>Vuetify Color Picker</h2>
                                    <div class="mt-2">Selected Color</div>
                                    <div class="display-1 white--text">{{ selectedColor }}</div>
                                </v-card-text>
                            </v-card>
                        </v-col>
                    </v-row>

</v-container>
            </v-main>
        </v-app>
    </div>

<script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.11/dist/vuetify.min.js"></script>

const vuetify = createVuetify()

const app = createApp({
            data() {
                return {
                    selectedColor: '#f2f2f2f2',
                    colorPickerVisible: false
                }
            },

}).use(vuetify).mount('#app');
    </script>
    <style scoped>

</style>
</body>

</html>