Nearest named color · #F8DCB3
#F8DCB3
Nearest named color: Lion’s Roar
#F8DCB3 (rgb(248 220 179), hsl(36 83% 84%), oklch(0.908 0.062 77.2)) is closest to the named color Lion’s Roar. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#F8DCB3
oklch(0.908 0.062 77.2)
Color conversions
- HEX
- #f8dcb3
- RGB
- rgb(248 220 179)
- HSL
- hsl(36 83% 84%)
- HWB
- hwb(36 70% 3%)
- OKLCH
- oklch(0.908 0.062 77.2)
- OKLab
- oklab(0.908 0.014 0.06)
- CIE Lab
- lab(89.36 5.58 23.96)
- LCH
- lch(89.36 24.6 76.9)
- CMYK
- cmyk(0% 11% 28% 3%)
Tints · Shades · Tones
Tints
- F9E0BB
- FAE3C2
- FAE7CA
- FBEAD2
- FCEED9
- FCF1E1
- FDF5E8
- FEF8F0
- FEFCF7
Shades
- D8BF9B
- B8A384
- 9A886E
- 7C6E58
- 605443
- 453C2F
- 2C261D
- 15110C
- 030201
Tones
- EBD2AE
- DFC9A9
- D3C0A4
- C6B69F
- BAAD9A
- AEA495
- A39B90
- 97928A
- 8B8985
Color harmonies
Complementary +180°
- F8DCB3
Lion’s Roar
- CEE2FF
≈ Arc Light
Analogous -30° +30°
- F8DCB3
Lion’s Roar
- FFD7C3
≈ Friendship
- E4E4B5
≈ Schabziger Green
Triadic +120° +240°
- F8DCB3
Lion’s Roar
- B0EEEF
≈ Mint Macaron
- F2D4FC
≈ Rose Dragée
Split-complementary +150° +210°
- F8DCB3
Lion’s Roar
- B9E9FF
≈ Blue Java Banana
- DEDCFF
≈ Transparent Blue
Tetradic +90° +180° +270°
- F8DCB3
Lion’s Roar
- BAEED8
≈ Salome
- CEE2FF
≈ Arc Light
- FFD2E8
≈ Poplar Pink
Contrast & accessibility
Ag
FailOn white
WCAG 1.32:1 · APCA Lc 16
Ag
AAAOn black
WCAG 15.87:1 · APCA Lc 88
Best text color: #000000
WCAG 15.87:1 (AAA) · APCA Lc 88
Contrast pairs
Code snippets
CSS
:root {
--lion-s-roar: #f8dcb3;
--lion-s-roar-rgb: 248 220 179;
--lion-s-roar-oklch: oklch(0.908 0.062 77.2);
}
.element {
color: var(--lion-s-roar);
background-color: hsl(36 83% 84%);
border-color: oklch(0.908 0.062 77.2);
}Tailwind CSS v4
@theme {
--color-lion-s-roar: #f8dcb3;
--color-lion-s-roar-50: #fff4e2;
--color-lion-s-roar-100: #f3e6d1;
--color-lion-s-roar-200: #e3d2b7;
--color-lion-s-roar-300: #c9b494;
--color-lion-s-roar-400: #b39a75;
--color-lion-s-roar-500: #9d8157;
--color-lion-s-roar-600: #856d4a;
--color-lion-s-roar-700: #6b573b;
--color-lion-s-roar-800: #4f3f2a;
--color-lion-s-roar-900: #372c1c;
--color-lion-s-roar-950: #22190c;
}SCSS
$lion-s-roar: #f8dcb3;
$lion-s-roar-rgb: 248, 220, 179;
$lion-s-roar-light: mix(#fff, $lion-s-roar, 20%);
$lion-s-roar-dark: mix(#000, $lion-s-roar, 20%);
.element {
color: $lion-s-roar;
box-shadow: 0 0 0 2px rgba($lion-s-roar, 0.35);
}