命名颜色 · #C2A585
Light Pumpkin Brown
Light Pumpkin Brown 即 #C2A585：rgb(194 165 133)、hsl(31 33% 64%)、oklch(0.739 0.056 69.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Light Pumpkin Brown color name →
#C2A585
oklch(0.739 0.056 69.6)
颜色转换
- HEX
- #c2a585
- RGB
- rgb(194 165 133)
- HSL
- hsl(31 33% 64%)
- HWB
- hwb(31 52% 24%)
- OKLCH
- oklch(0.739 0.056 69.6)
- OKLab
- oklab(0.739 0.019 0.052)
- CIE Lab
- lab(69.75 7.49 20.8)
- LCH
- lch(69.75 22.1 70.2)
- CMYK
- cmyk(0% 15% 31% 24%)
浅色调 · 深色调 · 灰色调
浅色调
- C8AE91
- CEB79D
- D4BFA9
- DAC8B5
- E1D1C1
- E7DACD
- EDE3DA
- F3EDE6
- F9F6F2
深色调
- A88F73
- 8F7961
- 776550
- 605140
- 493D30
- 342B21
- 201A13
- 0E0A06
- 020101
灰色调
- BBA185
- B59E84
- AE9A84
- A79684
- A19283
- 9A8F83
- 948B82
- 8D8781
- 868481
配色和谐
互补色 +180°
- C2A585
Light Pumpkin Brown
- 90AECD
≈ Chambray Blue
类似色 -30° +30°
- C2A585
Light Pumpkin Brown
- CA9F91
≈ Adobe Glow
- B3AC84
≈ Tarragon Tease
三角配色 +120° +240°
- C2A585
Light Pumpkin Brown
- 82B6B2
≈ Cold Front Green
- B5A1C6
≈ Berry Frappé
分裂互补色 +150° +210°
- C2A585
Light Pumpkin Brown
- 83B4C3
≈ Crystal Lake
- A3A8CE
≈ Blossom Mauve
四角配色 +90° +180° +270°
- C2A585
Light Pumpkin Brown
- 8DB69E
≈ Summer Green
- 90AECD
≈ Chambray Blue
- C39DB6
≈ Lily
对比度与无障碍
Ag
Fail白底
WCAG 2.32:1 · APCA Lc 46
Ag
AAA黑底
WCAG 9.01:1 · APCA Lc 56
最佳文字颜色: #000000
WCAG 9.01:1 (AAA) · APCA Lc 56
Contrast pairs
代码片段
CSS
:root {
--light-pumpkin-brown: #c2a585;
--light-pumpkin-brown-rgb: 194 165 133;
--light-pumpkin-brown-oklch: oklch(0.739 0.056 69.6);
}
.element {
color: var(--light-pumpkin-brown);
background-color: hsl(31 33% 64%);
border-color: oklch(0.739 0.056 69.6);
}Tailwind CSS v4
@theme {
--color-light-pumpkin-brown: #c2a585;
--color-light-pumpkin-brown-50: #fff3e4;
--color-light-pumpkin-brown-100: #f4e5d4;
--color-light-pumpkin-brown-200: #e4d1bb;
--color-light-pumpkin-brown-300: #cab399;
--color-light-pumpkin-brown-400: #b4997b;
--color-light-pumpkin-brown-500: #9e805e;
--color-light-pumpkin-brown-600: #866c50;
--color-light-pumpkin-brown-700: #6b573f;
--color-light-pumpkin-brown-800: #4f3f2e;
--color-light-pumpkin-brown-900: #372b1f;
--color-light-pumpkin-brown-950: #22190f;
}SCSS
$light-pumpkin-brown: #c2a585;
$light-pumpkin-brown-rgb: 194, 165, 133;
$light-pumpkin-brown-light: mix(#fff, $light-pumpkin-brown, 20%);
$light-pumpkin-brown-dark: mix(#000, $light-pumpkin-brown, 20%);
.element {
color: $light-pumpkin-brown;
box-shadow: 0 0 0 2px rgba($light-pumpkin-brown, 0.35);
}