Brightness reverted color computed. Vue component.

header.vue

<template>
  <div class="header" :style="style">
    
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    index: {
      type: Number
    },
    withButton: {
      type: Boolean,
      default: false
    },
    color: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  computed: {
    brightness () {
      let { r, g, b } = this.color
      return 0.299 * r + 0.587 * g + 0.114 * b
    },
    style () {
      if (this.color) {
        let { r, g, b } = this.color
        let background = `rgb(${r}, ${g}, ${b})`
        let shadow = `rgba(${r}, ${g}, ${b}, 0.5)`
        return {
          'background-color': background,
          'box-shadow': `0px 6px 20px ${shadow}`,
          'color': this.brightness > 180 ? '#777' : '#f3f3f3'
        }
      }
      return null
    }
  }
}
</script>

<style lang="scss">
</style>