KC's Colour Card Widget

KC’s Colour Card is a Figma widget for documenting colours. Enter a hex value and it generates a colour card with the colour name, RGB and HSL values.

The card design is based on a colour card design by Kaci.

Try the widget in Figma · View the source on GitHub

Features

Colour names

The widget contains more than 150 named colours, including CSS named colours and Kaci’s custom palette.

When a hex value matches a known colour, its name is filled in automatically. Unknown colours are left unnamed rather than guessing.

Colour values

A hex value is validated and converted to RGB and HSL values, which are displayed directly on the card.

Manual names

The colour name can also be entered manually. A manually entered name isn’t overwritten unless the field is cleared.

Feedback

Invalid hex values trigger immediate feedback so they can be corrected before creating the card.

Development

The widget was built in TSX using the Figma Widgets API.

Rebecca Purple

The widget opens with Rebecca Purple (#663399) as its initial colour, as a nod to Eric Meyer’s daughter Rebecca. The CSS colour was named in her memory.

Jeffrey Zeldman’s explanation of the colour