Nearest named color · #F98F78
#F98F78
Nearest named color: Kissable
#F98F78 (rgb(249 143 120), hsl(11 91% 72%), oklch(0.758 0.133 33.2)) is closest to the named color Kissable. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#F98F78
oklch(0.758 0.133 33.2)
Color conversions
- HEX
- #f98f78
- RGB
- rgb(249 143 120)
- HSL
- hsl(11 91% 72%)
- HWB
- hwb(11 47% 2%)
- OKLCH
- oklch(0.758 0.133 33.2)
- OKLab
- oklab(0.758 0.112 0.073)
- CIE Lab
- lab(70.81 39.42 30.63)
- LCH
- lch(70.81 49.92 37.8)
- CMYK
- cmyk(0% 43% 52% 2%)
Tints · Shades · Tones
Tints
- FB9B86
- FDA693
- FEB2A0
- FFBDAE
- FFC8BB
- FFD3C9
- FFDED6
- FFE9E4
- FFF4F1
Shades
- D97C67
- B96957
- 9A5748
- 7D4539
- 61342A
- 46241D
- 2C1510
- 150705
- 030101
Tones
- ED8E79
- E18D7B
- D58C7C
- C98B7D
- BD897D
- B1887E
- A5867F
- 99847F
- 8D8280
Color harmonies
Complementary +180°
- F98F78
Kissable
- 00C6E3
≈ Caribbean Blue
Analogous -30° +30°
- F98F78
Kissable
- F68AA8
≈ Rock’n’Rose
- EB9C4D
≈ Sunflower Field
Triadic +120° +240°
- F98F78
Kissable
- 65C988
≈ Van Gogh Green
- 97AAFF
≈ Widowmaker
Split-complementary +150° +210°
- F98F78
Kissable
- 0ECBB9
≈ Pristine Oceanic
- 5CB9FE
≈ Hello Summer
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 2.27:1 · APCA Lc 45
Ag
AAAOn black
WCAG 9.22:1 · APCA Lc 58
Best text color: #000000
WCAG 9.22:1 (AAA) · APCA Lc 58
Contrast pairs
Code snippets
CSS
:root {
--kissable: #f98f78;
--kissable-rgb: 249 143 120;
--kissable-oklch: oklch(0.758 0.133 33.2);
}
.element {
color: var(--kissable);
background-color: hsl(11 91% 72%);
border-color: oklch(0.758 0.133 33.2);
}Tailwind CSS v4
@theme {
--color-kissable: #f98f78;
--color-kissable-50: #ffe8dc;
--color-kissable-100: #ffd9ca;
--color-kissable-200: #ffc0ae;
--color-kissable-300: #f39e88;
--color-kissable-400: #e27f6a;
--color-kissable-500: #cf5f48;
--color-kissable-600: #af513e;
--color-kissable-700: #8d4131;
--color-kissable-800: #692e24;
--color-kissable-900: #4a1f18;
--color-kissable-950: #300e09;
}SCSS
$kissable: #f98f78;
$kissable-rgb: 249, 143, 120;
$kissable-light: mix(#fff, $kissable, 20%);
$kissable-dark: mix(#000, $kissable, 20%);
.element {
color: $kissable;
box-shadow: 0 0 0 2px rgba($kissable, 0.35);
}