Editorial

Soft Clay Color Palette

Gentle clay shades for calm content layouts. Re-select individual colors or adjust brightness, saturation, and warmth across the palette.

Primary

rgb(255, 245, 240)

Secondary

rgb(244, 198, 169)

Accent

rgb(216, 140, 105)

Deep

rgb(155, 91, 70)

Light

rgb(62, 45, 47)

Adjust palette

Tune the full palette while keeping individual color choices editable.

BrightnessSaturationWarmth

Export for design and code

Download a palette image or copy CSS generated from the current adjusted colors.

Palette PNG Preview

#FFF5F0#F4C6A9#D88C69#9B5B46#3E2D2F

Linear Gradient Preview

Preview of the gradient background generated from this palette.

Soft Clay CSS

/* CSS */
.color-1 {
  color: #FFF5F0;
}
.color-2 {
  color: #F4C6A9;
}
.color-3 {
  color: #D88C69;
}
.color-4 {
  color: #9B5B46;
}
.color-5 {
  color: #3E2D2F;
}

/* CSS Variables */
:root {
  --color-1: #FFF5F0;
  --color-2: #F4C6A9;
  --color-3: #D88C69;
  --color-4: #9B5B46;
  --color-5: #3E2D2F;
}

Soft Clay Linear Gradient CSS

/* Linear Gradient */
.linear-gradient {
  background: linear-gradient(0.25turn, #FFF5F0, #F4C6A9, #D88C69, #9B5B46, #3E2D2F);
}