---
title: Color
description: The ClickHouse color palette
---

Source: https://clickhouse.design/brand/color

# Color

All colors that are in the ClickHouse color palette are defined as [design tokens](/click-ui/tokens).

## Core colors

In both the brand and the product, **yellow** is the defining color, however it is used in different ways. In the brand, it is primary, designed to draw attention and differentiate ClickHouse from other companies in our industry. In the product it's used more as an accent, to draw attention to specific areas of interest but not to be overused.

#### Brand

`#FAFF69` — `color.palette.primary.300`

`#151515` — `color.palette.neutral.900`

## UI chrome colors

This range of blue-greys are used for text, background and stroke colors, with `neutral` used in the dark theme, and `slate` in the light.

#### Neutral

`#ffffFF` — `0`

`#F9F9F9` — `100`

`#dfdfdf` — `200`

`#c0c0c0` — `300`

`#a0a0a0` — `400`

`#808080` — `500`

`#606060` — `600`

`#414141` — `700`

`#282828` — `725`

`#1F1F1C` — `750`

`#1d1d1d` — `800`

`#151515` — `900`

#### Slate

`#FBFCFF` — `25`

`#F6F7FA` — `50`

`#e6e7e9` — `100`

`#cccfd3` — `200`

`#b3b6bd` — `300`

`#9a9ea7` — `400`

`#808691` — `500`

`#696e79` — `600`

`#53575f` — `700`

`#302e32` — `800`

`#161517` — `900`

## Feedback colors

These ranges of colors are typically used when we're communicating status text via alerts or badges.

#### Info

`#DAE6FC` — `50`

`#b5cdf9` — `100`

`#91b3f6` — `200`

`#6c9af3` — `300`

`#135be6` — `400`

`#0e44ad` — `500`

`#092e73` — `600`

`#09255B` — `650`

`#061d48` — `700`

`#05173a` — `800`

`#041330` — `900`

#### Success

`#e0f8e7` — `50`

`#c0f2ce` — `100`

`#a1ebb6` — `200`

`#81e59d` — `300`

`#41d76b` — `400`

`#2ac656` — `500`

`#1c8439` — `600`

`#15632b` — `700`

`#0e421d` — `800`

`#004206` — `850`

`#07210e` — `900`

#### Warning

`#ffedd8` — `50`

`#ffdbb1` — `100`

`#ffca8b` — `200`

`#ffb864` — `300`

`#ff9416` — `400`

`#ed8000` — `500`

`#c66b00` — `600`

`#9e5600` — `700`

`#4f2b00` — `800`

`#271500` — `900`

#### Danger

`#ffdddd` — `50`

`#ffbaba` — `100`

`#ff9898` — `200`

`#ff7575` — `300`

`#ff2323` — `400`

`#f10000` — `500`

`#C10000` — `600`

`#910000` — `700`

`#610000` — `800`

`#300000` — `900`

## Supporting colors

These colors are used mainly in our charting library.

#### Teal

`#e5fffb` — `50`

`#ccfff6` — `100`

`#99ffee` — `200`

`#66ffe5` — `300`

`#33ffdd` — `400`

`#00ffd4` — `500`

`#00ccaa` — `600`

`#009980` — `700`

`#006655` — `800`

`#004237` — `850`

`#00332A` — `900`

#### Indigo

`#F4F1FC` — `50`

`#e4e2e9` — `100`

`#c8c5d3` — `200`

`#ada8bd` — `300`

`#918ba7` — `400`

`#766e91` — `500`

`#5e5874` — `600`

`#474257` — `700`

`#23212c` — `800`

`#18161d` — `900`

#### Violet

`#f6e5ff` — `50`

`#eeccff` — `100`

`#dd99ff` — `200`

`#cc66ff` — `300`

`#bb33ff` — `400`

`#aa00ff` — `500`

`#8800cc` — `600`

`#660099` — `700`

`#440066` — `800`

`#33004d` — `850`

`#220033` — `900`

#### Fuchsia

`#fbeff8` — `50`

`#fbc9ef` — `100`

`#fb97e2` — `200`

`#fb64d6` — `300`

`#fb32c9` — `400`

`#fb00bc` — `500`

`#cc0099` — `600`

`#990073` — `700`

`#66004d` — `800`

`#4d0039` — `850`

`#330026` — `900`