RecolorOpen Recolor

A five-color palette

Indigo and ochre: a ochre, indigo and straw color palette

Ochre and indigo with an ink blue, straw and a pale yellow. Its hex codes are #877f2a, #47417c, #1b1e2f, #d2c981, #eae2a2. Open it in Recolor (recolor.page) to see it on a real web page, or copy the code below.

Last updated

#877f2aOlive
#47417cDark Slate Blue
#1b1e2fMidnight Blue
#d2c981Burly Wood
#eae2a2Pale Goldenrod
Computed with Recolor's own color code (culori, the WCAG 2 contrast ratio), October 8, 2026
HexNearest CSS nameOKLCHBlack text, AAWhite text, AA
#877f2aOlive (olive)oklch(58.7% 0.105 103.9)5.10:1 passes4.12:1 fails
#47417cDark Slate Blue (darkslateblue)oklch(41.1% 0.096 286.0)2.32:1 fails9.07:1 passes
#1b1e2fMidnight Blue (midnightblue)oklch(24.1% 0.033 276.0)1.27:1 fails16.49:1 passes
#d2c981Burly Wood (burlywood)oklch(82.7% 0.093 102.0)12.41:1 passes1.69:1 fails
#eae2a2Pale Goldenrod (palegoldenrod)oklch(90.4% 0.083 101.9)15.90:1 passes1.32:1 fails

Using the palette

In Recolor the order of the colors is meaning: swatch 1 takes the page's heaviest brand color, swatch 2 the next, and the page's greys take a tint of swatch 1 (how that works is in mapping). Reorder the swatches and the page reorders with them. To keep text readable, the table above says whether black or white text reaches the WCAG AA ratio of 4.5:1 on each color; #1b1e2f is the darkest of the five.

The code below is what Recolor's own Export panel writes for this palette. The Tailwind block is a Tailwind v4 @theme block, and the Coolors link opens the same colors there. To see the palette on your own site first, follow previewing a palette on a real website.

The palette as code

CSS variables

CSS
:root {
  --color-1: #877f2a;
  --color-2: #47417c;
  --color-3: #1b1e2f;
  --color-4: #d2c981;
  --color-5: #eae2a2;
  --color-primary: var(--color-1);
  --color-secondary: var(--color-2);
  --color-accent: var(--color-3);
}

Tailwind v4 @theme

CSS
@theme {
  --color-1: #877f2a;
  --color-2: #47417c;
  --color-3: #1b1e2f;
  --color-4: #d2c981;
  --color-5: #eae2a2;
  --color-primary: #877f2a;
  --color-secondary: #47417c;
  --color-accent: #1b1e2f;
}

SCSS variables

SCSS
$color-1: #877f2a;
$color-2: #47417c;
$color-3: #1b1e2f;
$color-4: #d2c981;
$color-5: #eae2a2;
$color-primary: $color-1;
$color-secondary: $color-2;
$color-accent: $color-3;

JSON

JSON
{
  "colors": [
    "#877f2a",
    "#47417c",
    "#1b1e2f",
    "#d2c981",
    "#eae2a2"
  ]
}

Hex list

Text
#877f2a
#47417c
#1b1e2f
#d2c981
#eae2a2

Coolors link

URL
https://coolors.co/877f2a-47417c-1b1e2f-d2c981-eae2a2