---
title: Colors and Color Codes
description: How Luigi's Box handles color attributes and hex codes in product tiles and facets.
slug: solutions/colors-and-hex-codes
docKind: solution
hub: solutions
---

If you have a color attribute in your product data, there is a chance that you want to show this color in some way on the frontend.
We treat color product attributes a bit extra so that you can easily render interface elements using an appropriate color.

In general, there are two cases which need to be covered:

1. Presence of product color code(s) in product fields so that it can be used when rendering product tile
2. Presence of color code information in facet data response so that it can be used when rendering facet values

## Color in product tiles

If your product attributes contain an attribute which includes the term `color`, Luigi's Box will assume that it holds
the color label (its human readable name) and will automatically add `color_code` attribute to the response with a matching hex code.
It will not overwrite any existing `color_code` though. So, if you are using custom color codes for your colors, make sure
to include them in the product data.

## Color in facets

If you ask for a facet for an attribute which includes the term `color`, Luigi's Box will, apart from ordinary `value` and `hits_count`, also include `color_code` for each facet value.

```json
"facets": [
  {
    "name": "color",
    "type": "text",
    "values": [
      {
        "value": "Black",
        "hits_count": 12184,
        "color_code": "#3d2b1f"
      },
      {
        "value": "White",
        "hits_count": 2310,
        "color_code": "#ffffff"
      },
      {
        "value": "Blue",
        "hits_count": 2070,
        "color_code": "#006fdf"
      }
    ]
  }
]
```

If you are using your custom color codes and would like to have these available in facets, then the approach is bit more complex:

1. Create a field combining facet label and its code. Make sure that it contains the term `color` in its name. For instance, `color_with_hex` is a good name.
2. Values of this field should be in a form `label~code`, using `~` as a separator between color label (name) and its code. Take `gray~a9aeba` as a good example.
3. Ask for `color_with_hex` as your color facet in your search request.
4. The response will contain `label` in addition to `color_code`, `hits_count` and `value` for each facet value. See an example below.
5. Make sure to display `label` and color based on the `color_code` to your visitors, but filter using `value` when doing requests to Luigi's Box search backend. If you are using Luigi's Box search.js library, this works out of the box.

```json
"facets": [
  {
    "name": "color_with_hex",
    "type": "text",
    "values": [
      {
        "value": "gray~a9aeba",
        "hits_count": 240,
        "color_code": "#a9aeba",
        "label": "gray"
      },
      {
        "value": "white~ffffff",
        "hits_count": 250,
        "color_code": "#ffffff",
        "label": "white"
      }
    ]
  }
]
```