命名颜色 · #E59752
Butternut Pizazz
Butternut Pizazz 即 #E59752：rgb(229 151 82)、hsl(28 74% 61%)、oklch(0.742 0.127 60.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Butternut Pizazz color name →
#E59752
oklch(0.742 0.127 60.3)
颜色转换
- HEX
- #e59752
- RGB
- rgb(229 151 82)
- HSL
- hsl(28 74% 61%)
- HWB
- hwb(28 32% 10%)
- OKLCH
- oklch(0.742 0.127 60.3)
- OKLab
- oklab(0.742 0.063 0.11)
- CIE Lab
- lab(69.56 25.51 48.15)
- LCH
- lch(69.56 54.49 62.1)
- CMYK
- cmyk(0% 34% 64% 10%)
浅色调 · 深色调 · 灰色调
浅色调
- E8A265
- ECAC78
- EFB789
- F2C19A
- F4CCAB
- F7D6BC
- F9E0CD
- FBEADD
- FDF5EE
深色调
- C78346
- AA6F3B
- 8E5C2F
- 724925
- 58371A
- 3F2611
- 281708
- 120802
- 030100
灰色调
- DB9559
- D1935F
- C79164
- BD8F69
- B38D6E
- A98A72
- 9F8876
- 95857A
- 8A837D
配色和谐
互补色 +180°
- E59752
Butternut Pizazz
- 57B5F3
≈ Tiān Lán Sky
类似色 -30° +30°
- E59752
Butternut Pizazz
- F08B7A
≈ Corralize
- CAA740
≈ Aniseed
三角配色 +120° +240°
- E59752
Butternut Pizazz
- 29C5AF
≈ Amazonite
- B898EF
≈ Bright Lavender
分裂互补色 +150° +210°
- E59752
Butternut Pizazz
- 11C0D8
≈ The Crowd Roars!
- 8DA6FB
≈ Widowmaker
四角配色 +90° +180° +270°
- E59752
Butternut Pizazz
- 6BC280
≈ Clover Mist
- 57B5F3
≈ Tiān Lán Sky
- D88DD1
≈ Firm Pink
对比度与无障碍
Ag
Fail白底
WCAG 2.36:1 · APCA Lc 46
Ag
AAA黑底
WCAG 8.88:1 · APCA Lc 56
最佳文字颜色: #000000
WCAG 8.88:1 (AAA) · APCA Lc 56
Contrast pairs
代码片段
CSS
:root {
--butternut-pizazz: #e59752;
--butternut-pizazz-rgb: 229 151 82;
--butternut-pizazz-oklch: oklch(0.742 0.127 60.3);
}
.element {
color: var(--butternut-pizazz);
background-color: hsl(28 74% 61%);
border-color: oklch(0.742 0.127 60.3);
}Tailwind CSS v4
@theme {
--color-butternut-pizazz: #e59752;
--color-butternut-pizazz-50: #ffeed1;
--color-butternut-pizazz-100: #ffdfbd;
--color-butternut-pizazz-200: #fcc99c;
--color-butternut-pizazz-300: #e6a972;
--color-butternut-pizazz-400: #d48b4b;
--color-butternut-pizazz-500: #c16f13;
--color-butternut-pizazz-600: #a35e15;
--color-butternut-pizazz-700: #834b11;
--color-butternut-pizazz-800: #62360c;
--color-butternut-pizazz-900: #452507;
--color-butternut-pizazz-950: #2c1300;
}SCSS
$butternut-pizazz: #e59752;
$butternut-pizazz-rgb: 229, 151, 82;
$butternut-pizazz-light: mix(#fff, $butternut-pizazz, 20%);
$butternut-pizazz-dark: mix(#000, $butternut-pizazz, 20%);
.element {
color: $butternut-pizazz;
box-shadow: 0 0 0 2px rgba($butternut-pizazz, 0.35);
}