命名颜色 · #E24736
Sour Cherry
Sour Cherry 即 #E24736：rgb(226 71 54)、hsl(6 75% 55%)、oklch(0.616 0.194 29.9)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Sour Cherry color name →
#E24736
oklch(0.616 0.194 29.9)
颜色转换
- HEX
- #e24736
- RGB
- rgb(226 71 54)
- HSL
- hsl(6 75% 55%)
- HWB
- hwb(6 21% 11%)
- OKLCH
- oklch(0.616 0.194 29.9)
- OKLab
- oklab(0.616 0.169 0.097)
- CIE Lab
- lab(53.67 60.13 45.38)
- LCH
- lch(53.67 75.34 37)
- CMYK
- cmyk(0% 69% 76% 11%)
浅色调 · 深色调 · 灰色调
浅色调
- E85E4C
- ED7260
- F18574
- F59788
- F9A99B
- FBBAAF
- FDCCC3
- FFDDD7
- FFEEEB
深色调
- C43D2E
- A83225
- 8C281E
- 711F16
- 57160F
- 3E0D08
- 270603
- 120201
- 030000
灰色调
- DA5140
- D15949
- C86051
- BF6658
- B66B60
- AC7066
- A2756D
- 977974
- 8C7D7A
配色和谐
互补色 +180°
- E24736
Sour Cherry
- 0096A8
≈ Brilliant
类似色 -30° +30°
- E24736
Sour Cherry
- DB4381
≈ Pickled Pink
- C26C00
≈ Thai Curry
三角配色 +120° +240°
- E24736
Sour Cherry
- 00A048
≈ Link Green
- 5977F8
≈ Blue Öyster Cult
分裂互补色 +150° +210°
- E24736
Sour Cherry
- 009B87
≈ Flamboyant Teal
- 008ED0
≈ Zürich Blue
四角配色 +90° +180° +270°
- E24736
Sour Cherry
- 7B9100
≈ Canopy
- 0096A8
≈ Brilliant
- 9962E6
≈ Forgotten Kyawthuite
对比度与无障碍
Ag
Fail白底
WCAG 4.04:1 · APCA Lc 67
Ag
AA黑底
WCAG 5.18:1 · APCA Lc 35
最佳文字颜色: #000000
WCAG 5.18:1 (AA) · APCA Lc 35
Contrast pairs
代码片段
CSS
:root {
--sour-cherry: #e24736;
--sour-cherry-rgb: 226 71 54;
--sour-cherry-oklch: oklch(0.616 0.194 29.9);
}
.element {
color: var(--sour-cherry);
background-color: hsl(6 75% 55%);
border-color: oklch(0.616 0.194 29.9);
}Tailwind CSS v4
@theme {
--color-sour-cherry: #e24736;
--color-sour-cherry-50: #ffe1d3;
--color-sour-cherry-100: #ffd0c0;
--color-sour-cherry-200: #ffb4a0;
--color-sour-cherry-300: #ff8e77;
--color-sour-cherry-400: #fc6855;
--color-sour-cherry-500: #eb3c2b;
--color-sour-cherry-600: #c63526;
--color-sour-cherry-700: #a02a1e;
--color-sour-cherry-800: #771c18;
--color-sour-cherry-900: #54130f;
--color-sour-cherry-950: #380303;
}SCSS
$sour-cherry: #e24736;
$sour-cherry-rgb: 226, 71, 54;
$sour-cherry-light: mix(#fff, $sour-cherry, 20%);
$sour-cherry-dark: mix(#000, $sour-cherry, 20%);
.element {
color: $sour-cherry;
box-shadow: 0 0 0 2px rgba($sour-cherry, 0.35);
}