Named color · #F8CDAA
Allspice
Allspice is #F8CDAA: rgb(248 205 170), hsl(27 85% 82%), oklch(0.877 0.067 60.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Allspice color name →
#F8CDAA
oklch(0.877 0.067 60.9)
Color conversions
- HEX
- #f8cdaa
- RGB
- rgb(248 205 170)
- HSL
- hsl(27 85% 82%)
- HWB
- hwb(27 67% 3%)
- OKLCH
- oklch(0.877 0.067 60.9)
- OKLab
- oklab(0.877 0.033 0.059)
- CIE Lab
- lab(85.55 12.08 23.48)
- LCH
- lch(85.55 26.4 62.8)
- CMYK
- cmyk(0% 17% 31% 3%)
Tints · Shades · Tones
Tints
- F9D2B3
- FAD7BB
- FBDCC4
- FBE1CC
- FCE6D5
- FDEBDD
- FDF0E6
- FEF5EE
- FFFAF7
Shades
- D8B293
- B8987D
- 9A7E68
- 7C6653
- 604E3F
- 45382D
- 2C231B
- 150F0B
- 030201
Tones
- ECC5A6
- DFBDA2
- D3B59E
- C7AE9A
- BBA695
- AF9E91
- A3978D
- 978F89
- 8C8784
Color harmonies
Complementary +180°
- F8CDAA
Allspice
- B0DDFF
≈ Droplet
Analogous -30° +30°
- F8CDAA
Allspice
- FFC7BC
≈ Peach Fuzz
- E7D6A4
≈ Hampton
Triadic +120° +240°
- F8CDAA
Allspice
- A5E6D9
≈ Sea Glass Teal
- DECDFD
≈ Pale Lavender
Split-complementary +150° +210°
- F8CDAA
Allspice
- A2E3F0
≈ Blizzard Blue
- C7D5FF
≈ Pale Phthalo Blue
Tetradic +90° +180° +270°
- F8CDAA
Allspice
- B7E4C0
≈ Lime Sorbet
- B0DDFF
≈ Droplet
- F1C7EB
≈ Sugar High
Contrast & accessibility
Ag
FailOn white
WCAG 1.46:1 · APCA Lc 22
Ag
AAAOn black
WCAG 14.30:1 · APCA Lc 81
Best text color: #000000
WCAG 14.30:1 (AAA) · APCA Lc 81
Contrast pairs
Code snippets
CSS
:root {
--allspice: #f8cdaa;
--allspice-rgb: 248 205 170;
--allspice-oklch: oklch(0.877 0.067 60.9);
}
.element {
color: var(--allspice);
background-color: hsl(27 85% 82%);
border-color: oklch(0.877 0.067 60.9);
}Tailwind CSS v4
@theme {
--color-allspice: #f8cdaa;
--color-allspice-50: #fff1e2;
--color-allspice-100: #f9e4d1;
--color-allspice-200: #eacfb7;
--color-allspice-300: #d1b194;
--color-allspice-400: #bc9676;
--color-allspice-500: #a77c58;
--color-allspice-600: #8d694b;
--color-allspice-700: #71543b;
--color-allspice-800: #543d2b;
--color-allspice-900: #3b2a1d;
--color-allspice-950: #25170d;
}SCSS
$allspice: #f8cdaa;
$allspice-rgb: 248, 205, 170;
$allspice-light: mix(#fff, $allspice, 20%);
$allspice-dark: mix(#000, $allspice, 20%);
.element {
color: $allspice;
box-shadow: 0 0 0 2px rgba($allspice, 0.35);
}