# Color

> The Renovaré palette with HEX, RGB, CSS variables, roles, and former names.

*Evergreen leads. Neutrals carry. Accents punctuate.*

## Core Colors

Most layouts need only these five: Primary 500 leads, Primary 400 and 700 support it, and warm neutrals carry the page and the text. Click any swatch to copy its hex code.

| Core color | HEX | RGB | CSS variable | Role |
|---|---|---|---|---|
| Primary 500 | `#106E46` | 16, 110, 70 | `--color-primary-500` | Core brand |
| Primary 400 | `#19AD6E` | 25, 173, 110 | `--color-primary-400` | Bright accent / on dark |
| Primary 700 | `#18412F` | 24, 65, 47 | `--color-primary-700` | Dark surface |
| Neutral 200 | `#F2F0ED` | 242, 240, 237 | `--color-neutral-200` | Page background |
| Neutral 800 | `#2B2722` | 43, 39, 34 | `--color-neutral-800` | Body text |

## Full Palette

### Primary — Evergreen

Evergreen. Green represents growth and life. Lead with 500; use tints and deep shades for backgrounds and dark sections.

| Name | HEX | RGB | CSS variable | Role | Usage notes | Formerly called |
|---|---|---|---|---|---|---|
| Primary 100 | `#E8F5EF` | 232, 245, 239 | `--color-primary-100` | Tinted surface | Tint for soft backgrounds. |  |
| Primary 200 | `#BCE2D1` | 188, 226, 209 | `--color-primary-200` | Soft tint | Soft tint for borders and panels on light; light text on dark green. Perceptual midpoint of 100 and 300. |  |
| Primary 300 | `#8FCFB4` | 143, 207, 180 | `--color-primary-300` | Accent on dark | Accents and text on dark green. |  |
| Primary 400 | `#19AD6E` | 25, 173, 110 | `--color-primary-400` | Bright accent / on dark | Bright green. Replaces 500 on dark backgrounds; hover, focus, selection. Too light for text on light backgrounds (2.6:1). | 500 / dark |
| Primary 500 | `#106E46` | 16, 110, 70 | `--color-primary-500` | Core brand | Core brand green. Default for brand color, buttons and links on light backgrounds. | 500 / light |
| Primary 600 | `#0D5738` | 13, 87, 56 | `--color-primary-600` | Pressed | Hover / pressed state for 500. |  |
| Primary 700 | `#18412F` | 24, 65, 47 | `--color-primary-700` | Dark surface | Deep field for dark sections, footer and newsletter panels. |  |
| Primary 800 | `#0F3724` | 15, 55, 36 | `--color-primary-800` | Darker surface | Dark hero band. |  |
| Primary 900 | `#041D13` | 4, 29, 19 | `--color-primary-900` | Near-black | Near-black green; button borders. |  |

CMYK and Pantone values: not yet specified.

### Neutrals — Warm Gray

Warm gray. Neutrals carry most pages: off-white backgrounds, hairline borders, near-black text. They should feel almost invisible.

| Name | HEX | RGB | CSS variable | Role | Usage notes | Formerly called |
|---|---|---|---|---|---|---|
| White | `#FFFFFF` | 255, 255, 255 | `--color-neutral-white` | Card surface | Cards and panels on the page background. | Neutral 100 (palette sheet) |
| Neutral 100 | `#FAF7F5` | 250, 247, 245 | `--color-neutral-100` | Raised surface | Lighter band / raised surface. | Neutral 200 (palette sheet) |
| Neutral 200 | `#F2F0ED` | 242, 240, 237 | `--color-neutral-200` | Page background | Default page background. | Neutral BG (palette sheet) |
| Neutral 300 | `#E7E4E0` | 231, 228, 224 | `--color-neutral-300` | Border | Hairline borders, CTA panels. |  |
| Neutral 400 | `#CFCAC5` | 207, 202, 197 | `--color-neutral-400` | Strong border | Strong borders, rules. |  |
| Neutral 500 | `#A6A09A` | 166, 160, 154 | `--color-neutral-500` | Decorative | Disabled and decorative only; not for text. |  |
| Neutral 600 | `#7D7771` | 125, 119, 113 | `--color-neutral-600` | Muted text (large) | Muted text at large sizes. Fails AA for body text on the page background (3.9:1). |  |
| Neutral 700 | `#4D4741` | 77, 71, 65 | `--color-neutral-700` | Secondary text | Secondary text. |  |
| Neutral 800 | `#2B2722` | 43, 39, 34 | `--color-neutral-800` | Body text | Body text. |  |
| Neutral 900 | `#080605` | 8, 6, 5 | `--color-neutral-900` | Heading text | Headings, near-black. |  |

CMYK and Pantone values: not yet specified.

### Secondary — Accents

Secondary accents. Decorative only; they carry no meaning. Use sparingly, in the rotation order, for panels, icon tiles and bands. Light accents (ochre, amber, teal, periwinkle) work as fills or with dark text, never as text on white.

| Name | HEX | RGB | CSS variable | Role | Usage notes | Formerly called |
|---|---|---|---|---|---|---|
| Ochre | `#D1A84C` | 209, 168, 76 | `--color-accent-ochre` | Accent fill |  | Yellow 1, yellow (site), --gold |
| Rust | `#993E17` | 153, 62, 23 | `--color-accent-rust` | Accent fill |  | Yellow 2, yellow-dark (site), --gold-deep |
| Amber | `#CC7829` | 204, 120, 41 | `--color-accent-amber` | Accent fill |  | Orange 1, orange (site) |
| Brick | `#A43939` | 164, 57, 57 | `--color-accent-brick` | Errors | The only accent with a meaning: errors. Avoid it for decoration. | Orange 2, orange-dark (site), --orange-deep |
| Teal | `#558E99` | 85, 142, 153 | `--color-accent-teal` | Accent fill |  | Blue 1, blue (site) |
| Navy | `#334657` | 51, 70, 87 | `--color-accent-navy` | Accent fill; blue band |  | Blue 2, blue-dark (site) |
| Periwinkle | `#6E8ACC` | 110, 138, 204 | `--color-accent-periwinkle` | Accent fill |  | Purple 1, Purple 100, purple-lighter (site), --purple (_ds) |
| Plum | `#592E46` | 89, 46, 70 | `--color-accent-plum` | Accent fill; purple band |  | Purple 2, Purple 300, purple (site), --purple-deep (_ds) |

CMYK and Pantone values: not yet specified.

**Former names.** The accent colors were renamed in October 2026 so each name describes the color you get. Ochre, Rust, Amber, Brick, Teal, Navy, Periwinkle, and Plum were previously Yellow 1/2, Orange 1/2, Blue 1/2, and Purple 1/2. Bright green #19AD6E, once labeled “500 / dark,” is now Primary 400. Neutrals follow renovare.org’s numbering: the page background #F2F0ED (once “Neutral BG”) is Neutral 200, #FAF7F5 is Neutral 100, and white is simply White.