Set Random Text & Background Color on Page Load

In this tutorial, you will learn how to select random text and random background color from a specific color palette on every page load with Vue.js. The tutorial also includes generating a random hex color. Watch the video below for a detailed tutorial.


    <div id="app">

        var app = new Vue({
            el: '#app',
            data: {
                bgColors: ['#999B84', '#F4EEEC', '#EFD9D1', '#DDB7AB'],
                bgColor: '',
                textColors: ['#302A27', '#4E4B44', '#A0816C', '#000000'],
                textColor: '',
            mounted() {
            methods: {
                setColors: function(e) {
                    this.bgColor = this.bgColors[Math.floor(Math.random() * this.bgColors.length)]
                    this.textColor = this.textColors[Math.floor(Math.random() * this.textColors.length)]

                    this.randomColor = '#' + (Math.random().toString(16)+'00000').slice(2,8);

           = this.bgColor;
           = this.textColor;


body {
    font-family: 'Roboto', sans-serif;
    font-size: 3em;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;