命名颜色 · #DFBB7E
Wheat Bread
Wheat Bread 即 #DFBB7E：rgb(223 187 126)、hsl(38 60% 68%)、oklch(0.81 0.089 80.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Orange mean? → · Wheat Bread color name →
#DFBB7E
oklch(0.81 0.089 80.2)
颜色转换
- HEX
- #dfbb7e
- RGB
- rgb(223 187 126)
- HSL
- hsl(38 60% 68%)
- HWB
- hwb(38 49% 13%)
- OKLCH
- oklch(0.81 0.089 80.2)
- OKLab
- oklab(0.81 0.015 0.087)
- CIE Lab
- lab(78.06 7.48 35.92)
- LCH
- lch(78.06 36.69 78.2)
- CMYK
- cmyk(0% 16% 43% 13%)
浅色调 · 深色调 · 灰色调
浅色调
- E2C28B
- E6C999
- E9CFA6
- ECD6B2
- EFDDBF
- F3E4CC
- F6EBD9
- F9F1E5
- FCF8F2
深色调
- C2A26D
- A58A5C
- 8A734C
- 6F5C3C
- 56462D
- 3D321F
- 271F11
- 120D05
- 020201
灰色调
- D5B57F
- CBAF80
- C2A980
- B8A381
- AF9D81
- A59881
- 9C9281
- 928C81
- 898681
配色和谐
互补色 +180°
- DFBB7E
Wheat Bread
- A0C2FB
≈ Pastel Blue
类似色 -30° +30°
- DFBB7E
Wheat Bread
- F0B18D
≈ Apricot Preserves
- C4C683
≈ Soda Pop
三角配色 +120° +240°
- DFBB7E
Wheat Bread
- 76D2D8
≈ Aruba Blue
- DBAFE5
≈ Barely Bloomed
分裂互补色 +150° +210°
- DFBB7E
Wheat Bread
- 83CCEF
≈ Airy Blue
- C0B8F7
≈ Purple Illusion
四角配色 +90° +180° +270°
- DFBB7E
Wheat Bread
- 84D4B8
≈ Tropical Trail
- A0C2FB
≈ Pastel Blue
- EEAAC9
≈ Waddles Pink
对比度与无障碍
Ag
Fail白底
WCAG 1.81:1 · APCA Lc 34
Ag
AAA黑底
WCAG 11.54:1 · APCA Lc 69
最佳文字颜色: #000000
WCAG 11.54:1 (AAA) · APCA Lc 69
Contrast pairs
代码片段
CSS
:root {
--wheat-bread: #dfbb7e;
--wheat-bread-rgb: 223 187 126;
--wheat-bread-oklch: oklch(0.81 0.089 80.2);
}
.element {
color: var(--wheat-bread);
background-color: hsl(38 60% 68%);
border-color: oklch(0.81 0.089 80.2);
}Tailwind CSS v4
@theme {
--color-wheat-bread: #dfbb7e;
--color-wheat-bread-50: #fff3d9;
--color-wheat-bread-100: #f7e6c7;
--color-wheat-bread-200: #e7d1aa;
--color-wheat-bread-300: #ceb483;
--color-wheat-bread-400: #ba9960;
--color-wheat-bread-500: #a57f3b;
--color-wheat-bread-600: #8b6c33;
--color-wheat-bread-700: #705629;
--color-wheat-bread-800: #533e1c;
--color-wheat-bread-900: #3a2b12;
--color-wheat-bread-950: #241805;
}SCSS
$wheat-bread: #dfbb7e;
$wheat-bread-rgb: 223, 187, 126;
$wheat-bread-light: mix(#fff, $wheat-bread, 20%);
$wheat-bread-dark: mix(#000, $wheat-bread, 20%);
.element {
color: $wheat-bread;
box-shadow: 0 0 0 2px rgba($wheat-bread, 0.35);
}