命名颜色 · #0C6064
Beau Vert
Beau Vert 即 #0C6064：rgb(12 96 100)、hsl(183 79% 22%)、oklch(0.446 0.072 200.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Cyan mean? → · Beau Vert color name →
#0C6064
oklch(0.446 0.072 200.1)
颜色转换
- HEX
- #0c6064
- RGB
- rgb(12 96 100)
- HSL
- hsl(183 79% 22%)
- HWB
- hwb(183 5% 61%)
- OKLCH
- oklch(0.446 0.072 200.1)
- OKLab
- oklab(0.446 -0.068 -0.025)
- CIE Lab
- lab(36.44 -22.67 -9.35)
- LCH
- lch(36.44 24.52 202.4)
- CMYK
- cmyk(88% 4% 0% 61%)
浅色调 · 深色调 · 灰色调
浅色调
- 2F6F72
- 487E81
- 5F8D90
- 759D9F
- 8CADAE
- A2BDBE
- B9CDCE
- D0DEDE
- E7EEEE
深色调
- 095256
- 064548
- 04383B
- 032C2E
- 022022
- 011516
- 000A0B
- 000303
- 000000
灰色调
- 226367
- 30676A
- 3C6A6C
- 476D6F
- 517072
- 5B7475
- 647778
- 6E7A7A
- 777D7D
配色和谐
互补色 +180°
- 0C6064
Beau Vert
- 774343
≈ Cinnamon Cherry
类似色 -30° +30°
- 0C6064
Beau Vert
- 21614E
≈ Teal Drama
- 215B75
≈ Saltwater Denim
三角配色 +120° +240°
- 0C6064
Beau Vert
- 66476D
≈ Sultana
- 694F20
≈ Black Queen
分裂互补色 +150° +210°
- 0C6064
Beau Vert
- 72435A
≈ Deep Carmine
- 74482E
≈ Cape Palliser
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AAA白底
WCAG 7.30:1 · APCA Lc 85
Ag
Fail黑底
WCAG 2.87:1 · APCA Lc 17
最佳文字颜色: #FFFFFF
WCAG 7.30:1 (AAA) · APCA Lc 85
Contrast pairs
代码片段
CSS
:root {
--beau-vert: #0c6064;
--beau-vert-rgb: 12 96 100;
--beau-vert-oklch: oklch(0.446 0.072 200.1);
}
.element {
color: var(--beau-vert);
background-color: hsl(183 79% 22%);
border-color: oklch(0.446 0.072 200.1);
}Tailwind CSS v4
@theme {
--color-beau-vert: #0c6064;
--color-beau-vert-50: #defcfe;
--color-beau-vert-100: #cdf0f2;
--color-beau-vert-200: #b1dee1;
--color-beau-vert-300: #8bc3c7;
--color-beau-vert-400: #68acaf;
--color-beau-vert-500: #429599;
--color-beau-vert-600: #3a7e81;
--color-beau-vert-700: #2e6568;
--color-beau-vert-800: #204a4b;
--color-beau-vert-900: #153334;
--color-beau-vert-950: #061f20;
}SCSS
$beau-vert: #0c6064;
$beau-vert-rgb: 12, 96, 100;
$beau-vert-light: mix(#fff, $beau-vert, 20%);
$beau-vert-dark: mix(#000, $beau-vert, 20%);
.element {
color: $beau-vert;
box-shadow: 0 0 0 2px rgba($beau-vert, 0.35);
}