最接近的命名颜色 · #F98F78
#F98F78
最接近的命名颜色: Kissable
#F98F78（rgb(249 143 120)、hsl(11 91% 72%)、oklch(0.758 0.133 33.2)）最接近命名颜色 Kissable。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#F98F78
oklch(0.758 0.133 33.2)
颜色转换
- 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%)
浅色调 · 深色调 · 灰色调
浅色调
- FB9B86
- FDA693
- FEB2A0
- FFBDAE
- FFC8BB
- FFD3C9
- FFDED6
- FFE9E4
- FFF4F1
深色调
- D97C67
- B96957
- 9A5748
- 7D4539
- 61342A
- 46241D
- 2C1510
- 150705
- 030101
灰色调
- ED8E79
- E18D7B
- D58C7C
- C98B7D
- BD897D
- B1887E
- A5867F
- 99847F
- 8D8280
配色和谐
互补色 +180°
- F98F78
Kissable
- 00C6E3
≈ Caribbean Blue
类似色 -30° +30°
- F98F78
Kissable
- F68AA8
≈ Rock’n’Rose
- EB9C4D
≈ Sunflower Field
三角配色 +120° +240°
- F98F78
Kissable
- 65C988
≈ Van Gogh Green
- 97AAFF
≈ Widowmaker
分裂互补色 +150° +210°
- F98F78
Kissable
- 0ECBB9
≈ Pristine Oceanic
- 5CB9FE
≈ Hello Summer
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 2.27:1 · APCA Lc 45
Ag
AAA黑底
WCAG 9.22:1 · APCA Lc 58
最佳文字颜色: #000000
WCAG 9.22:1 (AAA) · APCA Lc 58
Contrast pairs
代码片段
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);
}