tabler/docs/base/colors.mdx

---
title: Colors
description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
bootstrapLink: utilities/colors/
---

import config from '../config.json'

## Base colors

Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.

<ColorsTable colors={config.colors.base} />

## Light colors

All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-cathing designs.

<ColorsTable colors={config.colors.light} />

## Gray palette

<ColorsTable colors={config.colors.grays} />

## Social colors

<ColorsTable colors={config.colors.social} />