You need to override "Magento\Catalog\Block\Product\ListProduct" class to show total no of color for a particular configurable product on listing page as below.
Create a simple module with registaration.php and etc/module.xml.
step 1. create di.xml under app/[company]/[module]/etc/di.xml and write below code.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Block\Product\ListProduct" type="company\module\Block\Product\ListProduct" />
</config>
step 2. create ListProduct.php under app/[company]/[module]/Block/Product/ and write below code.
<?php
namespace [company]\[module]\Block\Product;
class ListProduct extends \Magento\Catalog\Block\Product\ListProduct {
public function getProductDetailsHtml(\Magento\Catalog\Model\Product $product) {
$html = '';
$renderer = $this->getDetailsRenderer($product->getTypeId());
if ($renderer) {
if ($product->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE) {
$options = array();
$productColor = array();
foreach ($data as $attr) {
foreach ($attr as $p) {
if ($p['attribute_code'] == 'color') {
if (!in_array($p['option_title'], $productColor)) {
$productColor[] = $p['option_title'];
}
}
}
}
$html = "Total No of colors is " . count($productColor);
}
$renderer->setProduct($product);
return $html . $renderer->toHtml();
}
return '';
}
}