JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
  <ul>
    <li v-for="color in colors" :style="`color: ${fg(color)}; background: ${color};`" v-text="color"></li>
  </ul>
</main>

SCSS

ul {
  display: flex;
  list-style: none;
}
li {
  width: 100px;
  line-height: 100px;
  margin: 10px;
  text-align: center;
}

JavaScript

new Vue({
	el: 'main',
  
  data: {
  	colors: ['#ff0000', '#0f0', '#00f'],
  },
  
  methods: {
  	fg(color) {
    	let total = color
        .match(/#?([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})$/)
        .slice(1)
        .map(h => parseInt(h, 16))
      console.log(total);
      return total > 384 ? '#000' : '#fff';
    },
  },
});