Show calculated result of CSS color-mix()

script.vue

<script setup>
import { computed, ref, watch } from 'vue'
const color1 = ref('#ff0000')
const color2 = ref('#ffffff')
const mix = ref(50)
const hex = ref('')
const sample = ref()

const colormix = computed(() => `color-mix(in srgb, ${color1.value}, ${color2.value} ${mix.value}%`)

const updateHex = () => setTimeout(() => {
  hex.value = getComputedStyle(sample.value)
    .backgroundColor
    .replace(/.*? (.*)\)/, '$1').replace(/,/g, '')
    .split(' ')
    .map(n => Math.round(n * 255).toString(16).padStart(2, '0'))
    .join('')
}, 0)

watch([color1, color2, mix], updateHex)
updateHex()
</script>

<template>
  <div>
    <input type="color" v-model="color1">
    <input type="number" min="0" max="100" v-model="mix">
    <input type="color" v-model="color2">
  </div>
  #{{ hex }}
  <div ref="sample" class="sample"></div>
</template>

<style>
.sample {
  background-color: v-bind(colormix);
  width: 10rem;
  aspect-ratio: 1;
}
</style>

show-calculated-result-of-css-color-mix.markdown

Show calculated result of CSS color-mix()

A Pen by Kevin Hamer on CodePen.

License.