Let's talk about colors! 💜💙💛❤️
When I was working on “Figma Fun”, I needed a color, and I thought why not choose a color for my personal brand? I really like pink, and in my opinion it's one of the rarest colors in the digital world.
I created a page which contains some of the fun stuff that I've been making in Figma but almost never showing it: https://figma-fun.glitch.me/
But which pink? There are thousands of different pink colors! I based my choice on two factors:
- Personal vision: I wanted it to be soft and warm. It should be bright but not vivid. Not painful to look at; pleasing to the eyes.
- Accessibility: it should have good contrast with white to be used for headings. Chrome's accessibility tool helped me with that. The contrast ratio I chose is almost the minimum recommended for body text and since I'm using it only for large headings — it is accessible.
So after many iterations, of picking a color, applying it to some objects in Figma and seeing how it looks, then jumping into Chrome and seeing how accessible it is — I was able to finally come to the one that I'm happy with! #FF619B
Here are some of the pinks that I tried before finding the one I was looking for. But that's not the end...
By the way, one of these colors is my pink, can you spot it?
Moreover, I needed a pink color with good accessibility for body text (for links), so I used HSL color model to find one easily: the original pink was made slightly darker and more saturated, and since it was getting close to red, I shifted the hue to make it look more “pink”.
Obviously I also needed a light pink to use for backgrounds. Based on previous experience, this one wasn't too difficult to find, especially because it only needed to have enough contrast with black text, and black has good contrast with all light colors.
In the end, I've got three beautiful colors that I will use where appropriate. Yay!
It was my thread on Twitter.