命名颜色 · #90B134
Avocado Toast
Avocado Toast 即 #90B134：rgb(144 177 52)、hsl(76 55% 45%)、oklch(0.712 0.153 123.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Avocado Toast color name →
#90B134
oklch(0.712 0.153 123.2)
颜色转换
- HEX
- #90b134
- RGB
- rgb(144 177 52)
- HSL
- hsl(76 55% 45%)
- HWB
- hwb(76 20% 31%)
- OKLCH
- oklch(0.712 0.153 123.2)
- OKLab
- oklab(0.712 -0.084 0.128)
- CIE Lab
- lab(67.97 -24.71 56.44)
- LCH
- lch(67.97 61.61 113.6)
- CMYK
- cmyk(19% 0% 71% 31%)
浅色调 · 深色调 · 灰色调
浅色调
- 9AB94F
- A5C165
- B0C97A
- BBD18E
- C6D9A1
- D1E0B4
- DCE8C7
- E8F0DA
- F3F7EC
深色调
- 7D992C
- 6A8324
- 576C1C
- 455715
- 34420E
- 242F07
- 151C03
- 070C01
- 010100
灰色调
- 8EAC41
- 8DA84C
- 8BA355
- 899E5D
- 889964
- 86946B
- 858F71
- 838A76
- 82857B
配色和谐
互补色 +180°
- 90B134
Avocado Toast
- B688F0
≈ Lilac Geode
类似色 -30° +30°
- 90B134
Avocado Toast
- C19F00
≈ Molten Bronze
- 42BD73
≈ Esmeralda
三角配色 +120° +240°
- 90B134
Avocado Toast
- 35ABF9
≈ Fantasy Console Sky
- EE7598
≈ Embarrassed
分裂互补色 +150° +210°
- 90B134
Avocado Toast
- 8499FF
≈ Periwinkle Blue
- DA7BCA
≈ Purple Kush
四角配色 +90° +180° +270°
- 90B134
Avocado Toast
- 00B6D1
≈ Ocean Sigh
- B688F0
≈ Lilac Geode
- F27A61
≈ Melon Refresher
对比度与无障碍
Ag
Fail白底
WCAG 2.46:1 · APCA Lc 48
Ag
AAA黑底
WCAG 8.52:1 · APCA Lc 54
最佳文字颜色: #000000
WCAG 8.52:1 (AAA) · APCA Lc 54
Contrast pairs
代码片段
CSS
:root {
--avocado-toast: #90b134;
--avocado-toast-rgb: 144 177 52;
--avocado-toast-oklch: oklch(0.712 0.153 123.2);
}
.element {
color: var(--avocado-toast);
background-color: hsl(76 55% 45%);
border-color: oklch(0.712 0.153 123.2);
}Tailwind CSS v4
@theme {
--color-avocado-toast: #90b134;
--color-avocado-toast-50: #ebfece;
--color-avocado-toast-100: #dcf2ba;
--color-avocado-toast-200: #c5e098;
--color-avocado-toast-300: #a5c56b;
--color-avocado-toast-400: #8dad39;
--color-avocado-toast-500: #739500;
--color-avocado-toast-600: #627e00;
--color-avocado-toast-700: #4e6500;
--color-avocado-toast-800: #3b4a00;
--color-avocado-toast-900: #283300;
--color-avocado-toast-950: #161f00;
}SCSS
$avocado-toast: #90b134;
$avocado-toast-rgb: 144, 177, 52;
$avocado-toast-light: mix(#fff, $avocado-toast, 20%);
$avocado-toast-dark: mix(#000, $avocado-toast, 20%);
.element {
color: $avocado-toast;
box-shadow: 0 0 0 2px rgba($avocado-toast, 0.35);
}