> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uifoundations.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors

> How to customize colors to match your brand

UI Foundations Kit starts with a default primary color that resembles a commonly seen "tech blue".

It's derived from the Tailwind `blue` color scale, and can be replaced with any other scale of colors from 50-900.

```ts theme.tsx theme={null}
const primaryColorScale = {
  50: 'hsl(214, 100%, 97%)',
  100: 'hsl(214, 95%, 93%)',
  200: 'hsl(213, 97%, 87%)',
  300: 'hsl(213, 96%, 78%)',
  400: 'hsl(213, 94%, 68%)',
  500: 'hsl(217, 91%, 60%)',
  600: 'hsl(221, 84%, 54%)',
  700: 'hsl(224, 76%, 48%)',
  800: 'hsl(226, 71%, 40%)',
  900: 'hsl(226, 65%, 34%)',
  main: 'hsl(221, 84%, 54%)',
  subtle: 'hsla(217, 83%, 70%, 0.1)',
};
```

By default it uses HSL, but you can replace these values with hex, or RGB, or another color mode.

## Preview different colors

The [live demo](https://demo.uifoundations.com/dashboard/home) allows you to preview different colors from the theme switcher, if you're interested in seeing how different palettes look.

## Additional color scales

UI Foundations Kit also adds several other color palettes that can be used in components for convenience. These include:

* `gray`
* `red`
* `yellow`
* `green`
* `blue`
* `fuchsia`
* `violet`
  ` `orange\`

You can continue to extend the theme to add even more if you feel so inclined.

## Dark mode

Dark mode palettes are created by inverting the light mode colors, and adjusting the contrast to be more readable in a dark environment. This is done automatically by the theme, and can be overridden in the `theme.tsx` file if you want finer grained control.

```tsx theme.tsx theme={null}
function invertColorScale(colorScale: ColorScale): ColorScale {
  return {
    ...colorScale,
    50: colorScale[900],
    100: colorScale[800],
    200: colorScale[700],
    300: colorScale[600],
    400: colorScale[500],
    500: colorScale[400],
    600: colorScale[300],
    700: colorScale[200],
    800: colorScale[100],
    900: colorScale[50],
    main: colorScale[500],
    subtle: colorScale.subtle,
  };
}
```