命名颜色 · #CCAA4D
Yellow Lupine
Yellow Lupine 即 #CCAA4D：rgb(204 170 77)、hsl(44 55% 55%)、oklch(0.75 0.118 89.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Yellow Lupine color name →
#CCAA4D
oklch(0.75 0.118 89.1)
颜色转换
- HEX
- #ccaa4d
- RGB
- rgb(204 170 77)
- HSL
- hsl(44 55% 55%)
- HWB
- hwb(44 30% 20%)
- OKLCH
- oklch(0.75 0.118 89.1)
- OKLab
- oklab(0.75 0.002 0.118)
- CIE Lab
- lab(71.35 5.1 51.49)
- LCH
- lch(71.35 51.74 84.3)
- CMYK
- cmyk(0% 17% 62% 20%)
浅色调 · 深色调 · 灰色调
浅色调
- D1B362
- D6BB75
- DBC487
- E0CC99
- E5D5AA
- EBDDBB
- F0E6CC
- F5EEDD
- FAF7EE
深色调
- B19342
- 977D37
- 7E682C
- 655322
- 4E3F18
- 372D0F
- 221B07
- 0F0B02
- 020100
灰色调
- C4A655
- BCA25C
- B59E62
- AD9A68
- A5956D
- 9E9171
- 968D75
- 8F8979
- 87847D
配色和谐
互补色 +180°
- CCAA4D
Yellow Lupine
- 90AAF9
≈ Kitten’s Eye
类似色 -30° +30°
- CCAA4D
Yellow Lupine
- E59B5D
≈ Coffee Whip
- A6B95E
≈ Gooseberry Fool
三角配色 +120° +240°
- CCAA4D
Yellow Lupine
- 34C2D6
≈ The Crowd Roars!
- D892D3
≈ Somewhere in a Fairytale
分裂互补色 +150° +210°
- CCAA4D
Yellow Lupine
- 5FB8F1
≈ Norfolk Sky
- B99DEE
≈ Lavender Cream
四角配色 +90° +180° +270°
- CCAA4D
Yellow Lupine
- 42C6B0
≈ Disc Jockey
- 90AAF9
≈ Kitten’s Eye
- EB8DAC
≈ Charm Pink
对比度与无障碍
Ag
Fail白底
WCAG 2.22:1 · APCA Lc 44
Ag
AAA黑底
WCAG 9.42:1 · APCA Lc 58
最佳文字颜色: #000000
WCAG 9.42:1 (AAA) · APCA Lc 58
Contrast pairs
代码片段
CSS
:root {
--yellow-lupine: #ccaa4d;
--yellow-lupine-rgb: 204 170 77;
--yellow-lupine-oklch: oklch(0.75 0.118 89.1);
}
.element {
color: var(--yellow-lupine);
background-color: hsl(44 55% 55%);
border-color: oklch(0.75 0.118 89.1);
}Tailwind CSS v4
@theme {
--color-yellow-lupine: #ccaa4d;
--color-yellow-lupine-50: #fff5cf;
--color-yellow-lupine-100: #f6e7bc;
--color-yellow-lupine-200: #e7d39a;
--color-yellow-lupine-300: #ceb66f;
--color-yellow-lupine-400: #ba9b43;
--color-yellow-lupine-500: #a58100;
--color-yellow-lupine-600: #8c6d00;
--color-yellow-lupine-700: #705704;
--color-yellow-lupine-800: #543f01;
--color-yellow-lupine-900: #3a2b02;
--color-yellow-lupine-950: #251800;
}SCSS
$yellow-lupine: #ccaa4d;
$yellow-lupine-rgb: 204, 170, 77;
$yellow-lupine-light: mix(#fff, $yellow-lupine, 20%);
$yellow-lupine-dark: mix(#000, $yellow-lupine, 20%);
.element {
color: $yellow-lupine;
box-shadow: 0 0 0 2px rgba($yellow-lupine, 0.35);
}