色名 · #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);
}