> For the complete documentation index, see [llms.txt](https://apidocs.onekeypayments.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apidocs.onekeypayments.com/deposits-tools/cards-sdk/with-user-interface/color-customization.md).

# Color Customization

To fine-tune the colors, simply add a `colorSchema[]` object as illustrated in the example.

{% hint style="success" %}
You don't need to send the entire object, you can include the sections you would like to change.
{% endhint %}

### `colorSchema[]` object

<pre class="language-javascript"><code class="lang-javascript"><a data-footnote-ref href="#user-content-fn-1">const</a> colorSchema = {
  //primary button is to complete the action like "Complete payment" and "Continue"
  "button": {
    "primary": {
      "background": {
        "default": "#3C5BFC",
        "hover": "#7087FF",
        "active": "#2E47C9"
      },
      "text": {
        "color": {
          "default": "#FFFFFF"
        }
      }
    },
    //this is the link button like "go back"
    "tertiary": {
      "text": {
        "color": {
          "default": "#3C5BFC"
        }
      }
    }
  },
  //This affect the inputs and select
  "input": {
    "background": {
      "default": "#FFFFFF",
      "locked": "#E6E7EB"
    },
    "border": {
      "color": {
        "default": "#373840",
        "locked": "#D5D6DE",
        "active": "#3C5BFC",
        "error": "#CF3434"
      }
    },
    "text": {
      "color": {
        "label": "#B0B3BF",
        "input": "#0B1130",
        "placeholderHint": "#B0B3BF"
      }
    }
  },
  //This affects the text that is not related to the inputs.
  "text": {
    "color": "#373840"
  },
  //This is the background color of the label on the input and select when add some value
  "label": {
    "background": "#FFFFFF"
  }
};

</code></pre>

### Visual references

In the images below you will find the visual references of the colorSchema parameters and color customization possibilities.

![](https://docs.d24.com/~gitbook/image?url=https%3A%2F%2F773174111-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-M792I7hN0PzC-Sx95CP-887967055%252Fuploads%252FK1qSimGh6A4xYUHLhGCu%252Fcc-checkout-payment-select.jpg%3Falt%3Dmedia%26token%3D59e97d75-ee7f-43c8-ad4e-206f1bd926bd\&width=768\&dpr=4\&quality=100\&sign=f2bbdee6440bff59ec6c129c08f89a7810d9d948faf0b20a1f80ff52811a4151)![](https://docs.d24.com/~gitbook/image?url=https%3A%2F%2F773174111-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-M792I7hN0PzC-Sx95CP-887967055%252Fuploads%252FuHAT4pky1FWz59PZCXJw%252Fcc-checkout-payment.jpg%3Falt%3Dmedia%26token%3D4912717c-d3d9-41a4-85d5-bad15201df36\&width=768\&dpr=4\&quality=100\&sign=a0721f72118d5604091d4638915eb556427305cd46e0453443dd682cfed0b701)![](https://docs.d24.com/~gitbook/image?url=https%3A%2F%2F773174111-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-M792I7hN0PzC-Sx95CP-887967055%252Fuploads%252FzUupkPysdC4TKfYXcEqP%252Fcc-checkout-status.jpg%3Falt%3Dmedia%26token%3Daefbc439-0dbb-4f9e-9d8c-edd225a33338\&width=768\&dpr=4\&quality=100\&sign=ebc27191c9e6672d5a1d47e42fd453c890095e0595c2b6b9661dcd02c5104452)

[^1]: