---
updatedAt: 2025-10-22T11:20:24.000Z
agentTools:
  projectIndex: https://docs.knack.com/v3/llms.txt
---

# How can I change the color of an element in my app?

### Native Options in the Builder

There are options for changing the colors of different elements within your app.

#### Live App

You can change the colors of the header, page menu, submit buttons, and links in your app: [Live **App Design - Custom Colors**](http://learn.knack.com/article/5lbfjnp6p2-live-app-design)**.**

#### Grid Fields

You can dynamically change the color of the background or text of a field on a grid to highlight data using display rules: **[Grid Display Rules](/docs/table-field-column-settings#display_rules#/).**

#### Calendar Events

You can change the color of events on a calendar based on specified criteria: **[Calendar - Event Colors](/docs/calendars#calendar_settings_2#/).**

#### Map Pins

You can change the color of the pins on a map based on specified criteria: **[Map Settings - Pin Colors](/docs/maps#map_settings#/).**

### Custom Code Changes

To change the color of an element that isn't available through our native options in the builder, you will need to use custom CSS.

There are a few places you can get help with writing custom code for your app:

* Our **[Developer Documentation](https://docs.knack.com/)** has some common examples that you can tweak and copy/paste into your apps.

* You can post a question to our **[Community](https://forums.knack.com)** for help from other Knack users and experts.

* For bigger projects, you can submit details on what you want customized to our **[Expert Network](https://www.knack.com/experts),** where Knack-vetted experts can help you with your project.

**Note:** The Knack support team can only assist with design elements that are native options in the Builder. It is outside our scope of support to write or troubleshoot custom code.