# @leafygreen-ui/palette

> LeafyGreen UI Palettes

Latest version **5.0.3** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @leafygreen-ui/palette
pnpm add @leafygreen-ui/palette
yarn add @leafygreen-ui/palette
bun add @leafygreen-ui/palette
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.3 |
| Published | 2026-10-02 |
| First published | 2019-06-14 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 53.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |

## Links

- npm: https://www.npmjs.com/package/@leafygreen-ui/palette
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/palette
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/palette

## Recent versions

- 5.0.3 (latest) — 2026-10-02
- 4.0.5 (beta) — 2023-07-26
- 5.0.0-alpha.1 (alpha) — 2023-07-20
- 3.4.3-test.0 (test) — 2022-09-22
- 3.4.3-next.2 (next) — 2022-09-19
- 5.0.2 — 2025-09-10
- 5.0.1 — 2025-09-03
- 5.0.0 — 2025-05-29
- 4.1.4 — 2025-03-03
- 4.1.3 — 2025-01-21
- 4.1.2 — 2025-01-18
- 4.1.1 — 2024-07-10
- 4.1.0 — 2024-07-01
- 4.0.10 — 2024-04-04
- 4.0.9 — 2024-03-26
- … 41 more at https://npm.io/package/@leafygreen-ui/palette/versions

## README

# Palette

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/palette.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/palette/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/palette
```

### Yarn

```shell
yarn add @leafygreen-ui/palette
```

### NPM

```shell
npm install @leafygreen-ui/palette
```

This package contains the brand-supported MongoDB UI color palette.

## UI Palette

### Usage

```shell
npm install @leafygreen-ui/palette
```

```js
import { palette } from '@leafygreen-ui/palette';

/**
 * palette = {
 * 	 black,
 *   white,
 *   gray: {
 *     dark3,
 *     dark2,
 *     dark1,
 *     base,
 *     light1,
 *     light2,
 *     light3,
 *   },
 *   green: {
 *     dark3,
 *     dark2,
 *     dark1,
 *     base,
 *     light1,
 *     light2,
 *     light3,
 *   },
 *   blue: {
 *     dark3,
 *     dark2,
 *     dark1,
 *     base,
 *     light1,
 *     light2,
 *     light3,
 *   },
 *   yellow: {
 *     dark3,
 *     dark2,
 *     base,
 *     light2,
 *     light3,
 *   },
 *   red: {
 *     dark3,
 *     dark2,
 *     base,
 *     light1,
 *     light2,
 *     light3,
 *   },
 * }
 */

const example = () => (
  <span style={{ color: palette.gray.dark1 }}>Hello World</span>
);
```

```less
@import '<path to node_modules>/@leafygreen-ui/palette/dist/palette.less';

/* 
 * @palette__white: #ffffff;
 * @palette__black: #001E2B;
 * 
 * @palette__gray--dark-3: #21313C;
 * @palette__gray--dark-2: #3D4F58;
 * @palette__gray--dark-1: #5C6C75;
 * @palette__gray--base: #889397;
 * @palette__gray--light-1: #C1C7C6;
 * @palette__gray--light-2: #E8EDEB;
 * @palette__gray--light-3: #F9FBFA;
 * 
 * @palette__green--dark-3: #023430;
 * @palette__green--dark-2: #00684A;
 * @palette__green--dark-1: #00A35C;
 * @palette__green--base: #00ED64;
 * @palette__green--light-1: #71F6BA;
 * @palette__green--light-2: #C0FAE6;
 * @palette__green--light-3: #E3FCF7;
 * 
 * @palette__purple--dark-3: #2D0B59;
 * @palette__purple--dark-2: #5E0C9E;
 * @palette__purple--base: #B45AF2;
 * @palette__purple--light-2: #F1D4FD;
 * @palette__purple--light-3: #F9EBFF;
 * 
 * @palette__blue--dark-3: #0C2657;
 * @palette__blue--dark-2: #083C90;
 * @palette__blue--dark-1: #1254B7;
 * @palette__blue--base: #016BF8;
 * @palette__blue--light-1: #0498EC;
 * @palette__blue--light-2: #C3E7FE;
 * @palette__blue--light-3: #E1F7FF;
 * 
 * @palette__yellow--dark-3: #4C2100;
 * @palette__yellow--dark-2: #944F01;
 * @palette__yellow--base: #FFC010;
 * @palette__yellow--light-2: #FFEC9E;
 * @palette__yellow--light-3: #FEF7DB;
 * 
 * @palette__red--dark-3: #5B0000;
 * @palette__red--dark-2: #970606;
 * @palette__red--base: #DB3030;
 * @palette__red--light-1: #EF5752;
 * @palette__red--light-2: #FFCDC7;
 * @palette__red--light-3: #FFEAE5;
*/
```

---
_Source: https://npm.io/package/@leafygreen-ui/palette · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._