命名颜色 · #F6A694
Au Contraire
Au Contraire 即 #F6A694:rgb(246 166 148)、hsl(11 84% 77%)、oklch(0.799 0.099 33.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度,以及 CSS、Tailwind v4 和 SCSS 代码。
What does Red mean? → · Au Contraire color name →
#F6A694
oklch(0.799 0.099 33.2)
颜色转换
- HEX
- #f6a694
- RGB
- rgb(246 166 148)
- HSL
- hsl(11 84% 77%)
- HWB
- hwb(11 58% 4%)
- OKLCH
- oklch(0.799 0.099 33.2)
- OKLab
- oklab(0.799 0.083 0.054)
- CIE Lab
- lab(75.85 28.85 22.03)
- LCH
- lch(75.85 36.3 37.4)
- CMYK
- cmyk(0% 33% 40% 4%)
浅色调 · 深色调 · 灰色调
浅色调
- F8AF9F
- F9B8A9
- FBC1B4
- FCCABE
- FDD3C9
- FEDCD4
- FEE4DE
- FFEDE9
- FFF6F4
深色调
- D69080
- B77A6D
- 98655A
- 7B5148
- 5F3E36
- 452B26
- 2C1A16
- 150A08
- 030101
灰色调
- EAA292
- DE9F90
- D29B8E
- C7978D
- BB948B
- AF9089
- A38C86
- 988884
- 8C8482
配色和谐
互补色 +180°
- F6A694
Au Contraire
- 69CEE3
≈ Slick Blue
类似色 -30° +30°
- F6A694
Au Contraire
- F4A3B7
≈ Petal Power
- EBB079
≈ Yucatan
三角配色 +120° +240°
- F6A694
Au Contraire
- 8AD09F
≈ Fennel
- A8B9FE
≈ Pastel Blue
分裂互补色 +150° +210°
- F6A694
Au Contraire
- 6BD2C3
≈ Downy
- 84C5F8
≈ Nevermind Nirvana
四角配色 +90° +180° +270°
- F6A694
Au Contraire
- B1C880
≈ Sour Face
- 69CEE3
≈ Slick Blue
- CAAEF2
≈ Teasel Dipsacus
对比度与无障碍
Ag
Fail白底
WCAG 1.94:1 · APCA Lc 37
Ag
AAA黑底
WCAG 10.80:1 · APCA Lc 65
最佳文字颜色: #000000
WCAG 10.80:1 (AAA) · APCA Lc 65
Contrast pairs
代码片段
CSS
:root {
--au-contraire: #f6a694;
--au-contraire-rgb: 246 166 148;
--au-contraire-oklch: oklch(0.799 0.099 33.2);
}
.element {
color: var(--au-contraire);
background-color: hsl(11 84% 77%);
border-color: oklch(0.799 0.099 33.2);
}Tailwind CSS v4
@theme {
--color-au-contraire: #f6a694;
--color-au-contraire-50: #ffece2;
--color-au-contraire-100: #ffddd2;
--color-au-contraire-200: #fbc6b8;
--color-au-contraire-300: #e5a695;
--color-au-contraire-400: #d28978;
--color-au-contraire-500: #be6c5a;
--color-au-contraire-600: #a15c4d;
--color-au-contraire-700: #81493d;
--color-au-contraire-800: #60352d;
--color-au-contraire-900: #43241e;
--color-au-contraire-950: #2b120e;
}SCSS
$au-contraire: #f6a694;
$au-contraire-rgb: 246, 166, 148;
$au-contraire-light: mix(#fff, $au-contraire, 20%);
$au-contraire-dark: mix(#000, $au-contraire, 20%);
.element {
color: $au-contraire;
box-shadow: 0 0 0 2px rgba($au-contraire, 0.35);
}