KC's Colour Card Widget

I’m excited to introduce KC’s Colour Card widget, a tool designed to help designers and developers document colours more effectively in Figma. This widget saves time by allowing users to enter one colour value (hex) and get a nice card showing the colour name and its RGB and HSL values.

Design of the widget’s card is by Kaci. Check out her figma profile.

Features of KC’s Colour Card Widget

Smart colour Name Handling

One of the main features is how the widget handles colour names. When you input a hex code, the widget automatically updates the colour name if it matches one from an extensive list (150+), which includes standard CSS colours and Kaci’s palette. If the hex code doesn’t match a known colour, the name field stays empty, avoiding any confusion.

Integrating Kaci’s colour Palette

The widget includes a custom colour palette from designer Kaci, adding a unique touch to the tool. Here are a few examples:

• Apricot: #F77B55
• Violet: #E9DFEA
• Tropicana: #6CBFC3
• And many more…

Including CSS Named colours

To make the widget even more versatile, I’ve included the full list of CSS named colours. Now, if you enter “aliceblue” (#F0F8FF) or “darkorchid” (#9932CC), the widget recognizes these and updates the colour name field accordingly.

Development Insights

Working on KC’s Colour Card widget has been a fascinating dive into JSX and the capabilities of Figma widgets. Here’s a brief overview of how the main functionalities were implemented:

1. Hex Code Input Handling: The widget allows users to input a hex code, which is then validated and converted into RGB and HSL formats.
2. Automatic colour Name Detection: If the hex code matches a recognized colour, the widget updates the colour name field automatically.
3. Manual Override: Users can manually enter a colour name, which won’t be overwritten unless the field is cleared.
4. Real-time Feedback: Any invalid hex codes trigger an immediate notification, helping users correct errors quickly.

Developing the KC’s Colour Card widget has been a rewarding journey, blending creativity with technical challenges. I hope this widget makes your design process smoother and more enjoyable. If you’re interested in trying it out, you can find the widget in Figma.

I’d love to hear your feedback and thoughts on the widget. Happy designing!

Final Thoughts

As a nod of respect to Eric Meyer, the initial colour is set to Rebecca Purple (#663399) when you first open the widget. This colour was named in memory of Eric Meyer’s daughter, Rebecca. You can read more about the tragic event that led to this particular CSS colour in Jeffrey Zeldman’s blog post.