make color label readable

[jkl3848]

Addresses issue #16. Made all hexcodes black. Not a very fancy solution, but I thought since the active color was shown in color preview, it wasn't as necessary to maintain the colors in the hexcode.

[Kully]

Addresses issue #16. Made all hexcodes black. Not a very fancy solution, but I thought since the active color was shown in color preview, it wasn't as necessary to maintain the colors in the hexcode.

@jkl3848 Thanks for taking this on (as well as the other PR which just got submitted).

Hmm, I think this solution makes sense. I did want to have that double correspondence with coloring the text the same as what you have selected, but to your point, we do already have cues as to what color you have picked (both the white border around the selected color preview and the fact that it looks a little bigger due to picking the color)

Since this solves the problem, I'm good to mark this as complete. 👍

[Kully]

I'm close to saying that we go with the solution of just making the hex code black (or a shade of black), but now wondering if we are loosing too much correspondence to the color that is selected.

I looked at Photoshop and they do something interesting:

• overlap the their 2 color previews with the active one on top
• place a grey border, then a white border, around each color preview

I guess this is to guarantee that the color is legible?

Curious what your thoughts are.

[Kully]

@jkl3848 Okay, I made the change I suggested and committed to this branch. I hope that is okay with you.

If everything is good, I am happy to merge this PR! Thank you for the work. 👍

[jkl3848]

@Kully Yeah looks good

[jkl3848]

@Kully This is an unimportant change, but would you mind if I change the font of the hexcode? To something a little more on theme?

[Kully]

@Kully This is an unimportant change, but would you mind if I change the font of the hexcode? To something a little more on theme?

What were you thinking?

I just checked and we are using "Open Sans" for the main font and "Menlo" for the hex code and where it says alt at the bottom.

PS The rationale for Menlo (equally spaced font) is because that's the font used in text editors, and hex feels like a programmy font 🤓

[jkl3848]

PS The rationale for Menlo (equally spaced font) is because that's the font used in text editors, and hex feels like a programmy font 🤓

That makes sense. Then maybe we should switch it to font-family: Menlo, sans-serif;

Typically serif fonts are used for print, so it has kind of a dated web look. Going with sans-serif makes it look more digital, which not only looks better on screens, but also fits the pixel art aesthetic.

Another option is to add monospace too, which would give it even more of a programmy feel.