UPD: Match the LED colors more closely

src/renderer/src/colorToLED.ts

@@ -0,0 +1,9 @@
+import Color from 'color'
+
+export const colorToLED = (color: Color) => {
+  if (!color) return null
+  const l = color.lightness()
+  if (l < 0.5) return color.lightness(0)
+  const nl = 1 - Math.pow(l / 50 - 1, 4)
+  return color.lightness(nl * 35 + 20)
+}

src/renderer/src/components/device/DeviceKeys.vue

@@ -9,7 +9,7 @@
         'bg-black/20': keyObject.pressed
       }"
       class="flex aspect-square flex-1 items-center justify-center rounded-[2px] outline-2 transition-all"
-      :style="`box-shadow: 0 10px 40px -2px ${keyObject.color.hex()}`"
+      :style="`box-shadow: 0 10px 40px -2px ${colorToLED(keyObject.color)?.hex()}`"
       @click="$emit('select', key)"
     >
       <span
@@ -23,6 +23,7 @@
 
 <script setup>
 import Color from 'color'
+import { colorToLED } from '@renderer/colorToLED'
 
 defineProps({
   keys: {

src/renderer/src/components/device/DeviceLEDRing.vue

@@ -19,13 +19,14 @@
       :r="ledRadius"
       :cx="size / 2"
       :cy="padding + ledRadius"
-      :fill="leds[index - 1]?.hex()"
+      :fill="colorToLED(leds[index - 1])?.hex()"
     />
   </svg>
 </template>
 <script setup>
 import { computed, ref, watch } from 'vue'
 import Color from 'color'
+import { colorToLED } from '@renderer/colorToLED'
 import { useDeviceStore } from '@renderer/deviceStore'
 
 const deviceStore = useDeviceStore()