Implementing this feature is a 3 step process:
1 - Index your colors data on your products
To achieve the necessary functionality, you will need to create a new attribute that you can pass an object with the following data structure:
To create this attribute you can use Shopify metafields. Here is the documentation to implement metafields in Algolia: https://www.algolia.com/doc/integration/shopify/sending-and-managing-data/metafields/?client=ruby
You can refer to the JSON Encoded string for indexing an object: https://www.algolia.com/doc/integration/shopify/sending-and-managing-data/metafields/?client=ruby#type-conversion
2 - InstantSearch implementation
The widget that you need to use for this functionality is the refinementList. This widget provides the templates option, where you can modify the HTML output of your facet values.
In this case, you will need to create a new HTML template for your facet values. You can refer to the following code sandbox where this is implemented in vanilla JS: https://codesandbox.io/s/algolia-instantsearch-color-refinementlist-vanillajs-e0p1oo?file=/src/app.js:1161-1739
3 - Create a custom widget
To implement this in Shopify, you will need to create a custom widget. You can find the instructions for doing this in the following document: https://www.algolia.com/doc/integration/shopify/advanced-customization/customizing-instant-search/?client=ruby#adding-a-custom-widget