Named color · #F9E6D3
Warm Bread
Warm Bread is #F9E6D3: rgb(249 230 211), hsl(30 76% 90%), oklch(0.935 0.033 67.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Warm Bread color name →
#F9E6D3
oklch(0.935 0.033 67.4)
Color conversions
- HEX
- #f9e6d3
- RGB
- rgb(249 230 211)
- HSL
- hsl(30 76% 90%)
- HWB
- hwb(30 83% 2%)
- OKLCH
- oklch(0.935 0.033 67.4)
- OKLab
- oklab(0.935 0.013 0.03)
- CIE Lab
- lab(92.47 4.45 11.75)
- LCH
- lch(92.47 12.57 69.3)
- CMYK
- cmyk(0% 8% 15% 2%)
Tints · Shades · Tones
Tints
- FAE9D7
- FAEBDC
- FBEEE0
- FCF0E5
- FCF3E9
- FDF5ED
- FDF8F2
- FEFAF6
- FEFDFB
Shades
- D9C8B7
- B9AB9C
- 9A8E82
- 7D7369
- 615951
- 46403A
- 2C2824
- 151310
- 030302
Tones
- ECDBCA
- E0D1C2
- D3C6B9
- C7BCB1
- BBB2A9
- AFA8A0
- A39D98
- 979490
- 8B8A88
Color harmonies
Complementary +180°
- F9E6D3
Warm Bread
- D9ECFF
≈ Hoarfrost
Analogous -30° +30°
- F9E6D3
Warm Bread
- FEE3DA
≈ Peach Cloud
- EFEAD2
≈ Golden Fog
Triadic +120° +240°
- F9E6D3
Warm Bread
- D2F1ED
≈ Icy Wind
- EFE4FB
≈ Minute Mauve
Split-complementary +150° +210°
- F9E6D3
Warm Bread
- D2F0F8
≈ Frostproof
- E4E8FF
≈ Glitter
Tetradic +90° +180° +270°
- F9E6D3
Warm Bread
- D9F1E1
≈ Green Brocade
- D9ECFF
≈ Hoarfrost
- F9E2F1
≈ Spun Sugar
Contrast & accessibility
Ag
FailOn white
WCAG 1.21:1 · APCA Lc 11
Ag
AAAOn black
WCAG 17.28:1 · APCA Lc 94
Best text color: #000000
WCAG 17.28:1 (AAA) · APCA Lc 94
Contrast pairs
Code snippets
CSS
:root {
--warm-bread: #f9e6d3;
--warm-bread-rgb: 249 230 211;
--warm-bread-oklch: oklch(0.935 0.033 67.4);
}
.element {
color: var(--warm-bread);
background-color: hsl(30 76% 90%);
border-color: oklch(0.935 0.033 67.4);
}Tailwind CSS v4
@theme {
--color-warm-bread: #f9e6d3;
--color-warm-bread-50: #fcf4eb;
--color-warm-bread-100: #efe6dc;
--color-warm-bread-200: #ded2c6;
--color-warm-bread-300: #c3b5a6;
--color-warm-bread-400: #ac9b8a;
--color-warm-bread-500: #95826f;
--color-warm-bread-600: #7e6e5f;
--color-warm-bread-700: #65584b;
--color-warm-bread-800: #4a4037;
--color-warm-bread-900: #342c25;
--color-warm-bread-950: #1f1914;
}SCSS
$warm-bread: #f9e6d3;
$warm-bread-rgb: 249, 230, 211;
$warm-bread-light: mix(#fff, $warm-bread, 20%);
$warm-bread-dark: mix(#000, $warm-bread, 20%);
.element {
color: $warm-bread;
box-shadow: 0 0 0 2px rgba($warm-bread, 0.35);
}