Warm palette

Citrus Peel

Rind and pith: deep red through zest to the pale inside.

Citrus Peel swatches

5 colors · 6 of 20 pairs carry body text

Warm

#7F0000

dark intense red

#A62B00

dark intense orange

#BB7C00

dark intense orange

#C3B700

mid intense yellow

#E7EFBA

very light vivid yellow

CSS

:root {
  --citrus_peel-1: #7f0000;
  --citrus_peel-2: #a62b00;
  --citrus_peel-3: #bb7c00;
  --citrus_peel-4: #c3b700;
  --citrus_peel-5: #e7efba;
}

Drop these into :root and reference them anywhere. The names follow the palette so a second palette will not collide with this one.

Take it further

This palette is a starting point. Open it in the generator to change the harmony rule, lock the colors you like and shuffle the rest.

Open in the palette generator Check the first pair for contrast

Which color can sit on which

6 of 20 pairs reach 4.5:1

Contrast ratio of every color in this palette against every other.
On ↓ / text → #7F0000#A62B00#BB7C00#C3B700#E7EFBA
#7F0000 Same 1.56 3.15 5.31 9.17
#A62B00 1.56 Same 2.02 3.4 5.88
#BB7C00 3.15 2.02 Same 1.68 2.91
#C3B700 5.31 3.4 1.68 Same 1.73
#E7EFBA 9.17 5.88 2.91 1.73 Same

Read a row as the background and a column as the text on it. Anything at 4.5:1 or above carries body text; 3:1 covers large text and interface parts.