命名颜色 · #FA8E99
Strawberry Shortcake
Strawberry Shortcake 即 #FA8E99：rgb(250 142 153)、hsl(354 92% 77%)、oklch(0.765 0.131 14.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Strawberry Shortcake color name →
#FA8E99
oklch(0.765 0.131 14.1)
颜色转换
- HEX
- #fa8e99
- RGB
- rgb(250 142 153)
- HSL
- hsl(354 92% 77%)
- HWB
- hwb(354 56% 2%)
- OKLCH
- oklch(0.765 0.131 14.1)
- OKLab
- oklab(0.765 0.127 0.032)
- CIE Lab
- lab(71.28 42.6 13.16)
- LCH
- lch(71.28 44.58 17.2)
- CMYK
- cmyk(0% 43% 39% 2%)
浅色调 · 深色调 · 灰色调
浅色调
- FC9AA3
- FDA5AD
- FFB1B7
- FFBCC1
- FFC7CB
- FFD3D5
- FFDEE0
- FFE9EA
- FFF4F4
深色调
- D97B84
- BA6870
- 9B565D
- 7D444A
- 613438
- 462427
- 2D1517
- 150708
- 030101
灰色调
- EE8D97
- E28C94
- D68B92
- CA8A8F
- BE898D
- B2878A
- A68688
- 998485
- 8D8283
配色和谐
互补色 +180°
- FA8E99
Strawberry Shortcake
- 00CCCB
≈ Tilla Kari Mosque
类似色 -30° +30°
- FA8E99
Strawberry Shortcake
- ED8FC7
≈ Blushed Bombshell
- F7966B
≈ Autumn Arrival
三角配色 +120° +240°
- FA8E99
Strawberry Shortcake
- 8FC56D
≈ Jaunty Green
- 7AB6FF
≈ Parakeet Blue
分裂互补色 +150° +210°
- FA8E99
Strawberry Shortcake
- 52CD9C
≈ Vegetation
- 36C4F0
≈ Clean Pool
四角配色 +90° +180° +270°
- FA8E99
Strawberry Shortcake
- C0B648
≈ Parachute
- 00CCCB
≈ Tilla Kari Mosque
- A9A7FF
≈ Shy Moment
对比度与无障碍
Ag
Fail白底
WCAG 2.23:1 · APCA Lc 44
Ag
AAA黑底
WCAG 9.39:1 · APCA Lc 58
最佳文字颜色: #000000
WCAG 9.39:1 (AAA) · APCA Lc 58
Contrast pairs
代码片段
CSS
:root {
--strawberry-shortcake: #fa8e99;
--strawberry-shortcake-rgb: 250 142 153;
--strawberry-shortcake-oklch: oklch(0.765 0.131 14.1);
}
.element {
color: var(--strawberry-shortcake);
background-color: hsl(354 92% 77%);
border-color: oklch(0.765 0.131 14.1);
}Tailwind CSS v4
@theme {
--color-strawberry-shortcake: #fa8e99;
--color-strawberry-shortcake-50: #ffe7e8;
--color-strawberry-shortcake-100: #ffd7d9;
--color-strawberry-shortcake-200: #ffbec1;
--color-strawberry-shortcake-300: #f39ca0;
--color-strawberry-shortcake-400: #e07c87;
--color-strawberry-shortcake-500: #ce5c6b;
--color-strawberry-shortcake-600: #ae4f5b;
--color-strawberry-shortcake-700: #8c3f49;
--color-strawberry-shortcake-800: #682d36;
--color-strawberry-shortcake-900: #491e25;
--color-strawberry-shortcake-950: #2f0e14;
}SCSS
$strawberry-shortcake: #fa8e99;
$strawberry-shortcake-rgb: 250, 142, 153;
$strawberry-shortcake-light: mix(#fff, $strawberry-shortcake, 20%);
$strawberry-shortcake-dark: mix(#000, $strawberry-shortcake, 20%);
.element {
color: $strawberry-shortcake;
box-shadow: 0 0 0 2px rgba($strawberry-shortcake, 0.35);
}