Color detection is used to identify colors from uploaded images or logos. This feature detects the prominent colors, nearby shades, from the set of colors and passes them as a JSON object after the item is added to the cart. Hex codes are included in the JSON so they can be used for printing purposes.

Designer

1. When a user uploads a logo, selects a logo from "My Art," or chooses a clipart, Artifi detects the colors present in the image.

2. The list of detected colors are displayed in the designer.

3. If it detects multiple shades of the same color, it is blended into a single color(according to the default setting of the Auto Color Detection settings in the admin, which can be altered if required). 
   

4. Once the product is added to the cart, the detected color Hex codes are included in the Cart JSON.

How to enable Auto Color Detection:

1. Go to Admin >> Website >> Settings >> Advance Features
   

2. Select Auto Color Detection highlighted on the above screen.

3. This will enable the Auto Color Detection functionality with the default settings.

4. To alter the default settings of Auto Color Detection, go to the Settings in Action column.
   

5. Below screen will appear with the color detection settings.
   

6. Artifi's color detection relies on four key parameters. The explanation of each field is provided below.

   1. Color Blending Delta

      1. It blends similar shades of a particular color and represents them as a single color.

      2. The blending value ranges from 0 to 100.

      3. Default Value: 11 - This value is suggested to accurately detect the primary colors of a logo/image.

      4. Artifi's color detection feature groups similar shades of a color, like different shares of red in a logo, treating them as one. This happens when the delta values, which measure the difference between shades, range from 0 to 11. In essence, it blends these minor variations into a single cohesive color representation.

   2. Pixel Percentage

      1. This is the threshold value to detect the color. Colors that occupy more than defined pixel percentage of the total pixels detected in the logo will be detected; colors below this threshold will be ignored. This helps eliminate insignificant or noise colors from the detection process.

      2. Default Value: 0.8% 

   3. Maximum Color Limit

      1. This parameter represents the maximum number of detectable colors. The list will be generated based on the most frequently used colors in the image or logo.

      2. Default Value: 10 - Updating this value will increase or decrease the number of colors displayed in the designer based on the limit set.

   4. Image Quality

      1. The quality value determines how many pixels are skipped when sampling the image.

      2. A lower value means more pixels are analyzed, resulting in higher accuracy but slower performance.

      3. A higher value means fewer pixels are sampled, which is faster, but can result in less accurate colors.

      4. To maintain the detected color quality the value should be between 10-20.

How to Integrate Color Detection Component

1. The Color Detection component must be injected into the eCommerce platform, in the PDP page at the desired location. 

2. To include the component, follow the instructions provided in Integration Component Details, point #2.11 - Color Detection.

3. Additionally, as a prerequisite, the Editor Components must be added along with either the Upload component, the Clipart component, or both, for the Color Detection feature to function properly. 

Limitations

1. This feature is implemented only for selected layouts. This can be incorporated as per request.

2. Detected colors are the closest match to the set of imprint colors. It's not the exact hex code.

3. It only works for Iframe and Headless components. It is not yet implemented for GetImage.