Colors Palettes
All palettes

Cream

Beautiful Cream color palette.

Brand Colors 5 colors
#F4FFFF
#CEC689
#F1D6A5
#F1EEDC
#FFE2B8

Every color in Cream

HEX, RGB and HSL codes with contrast ratings. Click to copy.

623 34
#F4FFFF
Primary
#F4FFFF rgb(244, 255, 255) hsl(180, 100%, 98%)
On white 1.02:1 Fails On black 20.59:1 AAA
#CEC689
Secondary
#CEC689 rgb(206, 198, 137) hsl(53, 41%, 67%)
On white 1.74:1 Fails On black 12.06:1 AAA
#F1D6A5
Accent
#F1D6A5 rgb(241, 214, 165) hsl(39, 73%, 80%)
On white 1.41:1 Fails On black 14.90:1 AAA
#F1EEDC
Background
#F1EEDC rgb(241, 238, 220) hsl(51, 43%, 90%)
On white 1.17:1 Fails On black 18.00:1 AAA
#FFE2B8
Text
#FFE2B8 rgb(255, 226, 184) hsl(35, 100%, 86%)
On white 1.25:1 Fails On black 16.82:1 AAA

About the Cream palette

Cream has 5 colors in the Brand Colors category. Overall it reads as light and vivid, with an average lightness of 84% and an average saturation of 71%. The hues lean warm.

The strongest text and background pair is #F4FFFF with #CEC689, at a contrast ratio of 1.71:1 (Fails). No pair in this palette reaches 4.5:1, so add a very dark or very light neutral before you set body text with it.

Color harmony

Measured from this palette's real values.

Saturation
71%
Lightness
84%
Best contrast
1.7

Ideas for using it

  • Web design: use #F4FFFF for buttons and links, and keep large areas to the lighter colors.
  • Mobile apps: check each color against white and black above before you use it for text or icons.
  • Brand identity: pick one or two colors as the core and keep the rest as support.
  • Presentations: use the light colors for backgrounds and the strongest contrast pair for titles.

Use it in your project

Copy this palette as CSS variables, or export it in another format.

:root {
  --color-1: #F4FFFF; /* Primary */
  --color-2: #CEC689; /* Secondary */
  --color-3: #F1D6A5; /* Accent */
  --color-4: #F1EEDC; /* Background */
  --color-5: #FFE2B8; /* Text */
}