diff --git a/src/renderer/src/colorToLED.ts b/src/renderer/src/colorToLED.ts
new file mode 100644
index 0000000..b4383f3
--- /dev/null
+++ b/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)
+}
diff --git a/src/renderer/src/components/device/DeviceKeys.vue b/src/renderer/src/components/device/DeviceKeys.vue
index a9795ab..b2d5a83 100644
--- a/src/renderer/src/components/device/DeviceKeys.vue
+++ b/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: {
diff --git a/src/renderer/src/components/device/DeviceLEDRing.vue b/src/renderer/src/components/device/DeviceLEDRing.vue
index cfd3bbf..c120ef2 100644
--- a/src/renderer/src/components/device/DeviceLEDRing.vue
+++ b/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()