Warm palette

Terracotta Sun

Baked orange through to soft apricot, holding one hue family throughout.

Terracotta Sun swatches

5 colors · 4 of 20 pairs carry body text

Warm

#841C2C

dark vivid red

#B04534

mid soft red

#BA6B32

mid vivid orange

#DBAD5A

mid vivid orange

#E6DE87

light vivid yellow

CSS

:root {
  --terracotta_sun-1: #841c2c;
  --terracotta_sun-2: #b04534;
  --terracotta_sun-3: #ba6b32;
  --terracotta_sun-4: #dbad5a;
  --terracotta_sun-5: #e6de87;
}

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

4 of 20 pairs reach 4.5:1

Contrast ratio of every color in this palette against every other.
On ↓ / text → #841C2C#B04534#BA6B32#DBAD5A#E6DE87
#841C2C Same 1.72 2.4 4.64 6.94
#B04534 1.72 Same 1.4 2.71 4.05
#BA6B32 2.4 1.4 Same 1.94 2.9
#DBAD5A 4.64 2.71 1.94 Same 1.5
#E6DE87 6.94 4.05 2.9 1.5 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.