0

I want to build a keyboard extension which looks similar to iPhone's native keyboard in both dark and light mode. However, I have a hard time finding the RGB and opacity values of keyboard keys that match iOS keyboard against both black and white backgrounds. I have pictures of the keyboard against light and dark background below. How can I find the RGB and opacity values given these two images? With color picker, I get that the color of keyboard keys against the light background is RGB(150, 150, 150) with opacity 1 and RGB(107, 107, 107) against the dark background with opacity 1. I need a single RGB and an opacity value so that under a light background it would be equivalent to RGB(150, 150, 150) and to RGB(107, 107, 107) under a dark background.

white background black background

ibayramli
  • 71
  • 5

1 Answers1

0

Assuming grayscale colours with simple alpha compositing, let...

  • Gc = gray level of composited result
  • Gb = gray level of background
  • Gk = gray level of keycap
  • Ak = alpha level of keycap

then

  • Gc = Gk + Gb * (1 - Ak)

(Here, Ae is assumed to be between 0 and 1.)

Now some known levels (as I measure in your screenshot):

For light mode,

  • Gb = 106
  • Gc = 150

For dark mode,

  • Gb = 64
  • Gc = 151

From that, we can derive:

  • 150 = Gk + 106 * (1 - Ak)
  • 106 = Gk + 43 * (1 - Ak)

From that, you can derive Ak:

  • 150 - 106 = (106 - 43) * (1 - Ak)
  • hence Ak = 0.3016

As a level from 1 to 255, Ak = 77.

And then you can derive Gk = 76.

Peter Constable
  • 2,707
  • 10
  • 23
  • nope, didn't work. This is what it looks like: https://imgur.com/a/OthHU7a – ibayramli Aug 31 '21 at 14:37
  • The background colours are a darker gray than what you showed earlier. That would affect how the keys appear. If it is simple alpha blending of grayscale tones, then Gc = Gk + Gb * (1 - Ak) should be correct. – Peter Constable Aug 31 '21 at 17:50