# The PostHog color palette

> PostHog's brand colors, with hex values for each core, lighter and darker tone and its gradient. Click to copy, or use them as CSS custom properties and typed JS tokens.

HTML version: https://brand.posthog.com/colors · All docs for agents: https://brand.posthog.com/llms.txt

| Color | Core | Lighter | Darker | Gradient | CSS variable |
| --- | --- | --- | --- | --- | --- |
| blue | `#1490E8` | `#A1D3F7` | `#106FB2` | `#1490E8` → `#106FB2` | `var(--posthog-blue)` |
| cobalt | `#0457FF` | `#99BBFF` | `#0045D1` | `#0457FF` → `#0045D1` | `var(--posthog-cobalt)` |
| coral | `#FF474D` | `#FFB8BA` | `#F00008` | `#FF474D` → `#F00008` | `var(--posthog-coral)` |
| corn blue | `#2BB3DF` | `#ABE1F2` | `#1A89AD` | `#2BB3DF` → `#1A89AD` | `var(--posthog-corn-blue)` |
| green | `#47C861` | `#B8EAC2` | `#35B14E` | `#47C861` → `#35B14E` | `var(--posthog-green)` |
| lemon | `#FFCE1C` | `#FFEBA3` | `#F0BC00` | `#FFCE1C` → `#F0BC00` | `var(--posthog-lemon)` |
| lime | `#A0CA21` | `#D8EE96` | `#8BAF1D` | `#A0CA21` → `#8BAF1D` | `var(--posthog-lime)` |
| purple | `#A737D2` | `#DCB0ED` | `#8927AF` | `#A737D2` → `#8927AF` | `var(--posthog-purple)` |
| tangerine | `#FF5C1C` | `#FFBDA3` | `#FF4800` | `#FF5C1C` → `#FF4800` | `var(--posthog-tangerine)` |
| teal | `#43DAB3` | `#B2F0E0` | `#25BC95` | `#43DAB3` → `#25BC95` | `var(--posthog-teal)` |
| violet | `#6D4FFF` | `#C4B8FF` | `#512EFF` | `#6D4FFF` → `#512EFF` | `var(--posthog-violet)` |
| yellow | `#FFA81C` | `#FFDCA3` | `#E58E00` | `#FFA81C` → `#E58E00` | `var(--posthog-yellow)` |

Each color also has `-lighter`, `-darker` and `-gradient` variables, e.g. `--posthog-blue-lighter`.

## In code

```ts
import { colors } from "@posthog/brand/colors"
colors.blue.core // "#1490E8"

import { colorsCss } from "@posthog/brand/colors/css" // a :root { --posthog-… } block
```

## Files

- https://brand.posthog.com/colors.json: the palette as JSON
- https://brand.posthog.com/colors.css: the CSS custom properties