色名 · #E4D3C8
Bungalow White
Bungalow Whiteは#E4D3C8：rgb(228 211 200)、hsl(24 34% 84%)、oklch(0.878 0.024 55.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Bungalow White color name →
#E4D3C8
oklch(0.878 0.024 55.2)
カラー変換
- HEX
- #e4d3c8
- RGB
- rgb(228 211 200)
- HSL
- hsl(24 34% 84%)
- HWB
- hwb(24 78% 11%)
- OKLCH
- oklch(0.878 0.024 55.2)
- OKLab
- oklab(0.878 0.014 0.02)
- CIE Lab
- lab(85.74 4.74 7.7)
- LCH
- lch(85.74 9.04 58.4)
- CMYK
- cmyk(0% 7% 12% 11%)
ティント · シェード · トーン
ティント
- E7D7CD
- E9DCD3
- ECE0D8
- EFE4DE
- F2E9E3
- F4EDE9
- F7F2EE
- FAF6F4
- FCFBF9
シェード
- C6B7AE
- A99C94
- 8D827B
- 726963
- 58514C
- 3F3A36
- 282421
- 12100F
- 030202
トーン
- DACAC1
- CFC2B9
- C5B9B2
- BBB1AB
- B1A9A3
- A7A09C
- 9D9895
- 93908E
- 8A8887
カラーハーモニー
補色 +180°
- E4D3C8
Bungalow White
- C8DAE5
≈ Simple Serenity
類似色 -30° +30°
- E4D3C8
Bungalow White
- E6D1CF
≈ Mauve Chalk
- DED6C5
≈ Canvas Tan
トライアド +120° +240°
- E4D3C8
Bungalow White
- C7DCD6
≈ Ocean Silk
- D7D4E5
≈ Light Gregorio Garden
スプリットコンプリメンタリー +150° +210°
- E4D3C8
Bungalow White
- C5DCDE
≈ Byte Blue
- CFD7E7
≈ Jewellery White
テトラード +90° +180° +270°
- E4D3C8
Bungalow White
- CDDBCD
≈ Transparent White
- C8DAE5
≈ Simple Serenity
- DFD2E0
≈ Ametrine Quartz
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.45:1 · APCA Lc 22
Ag
AAA黒の上
WCAG 14.45:1 · APCA Lc 82
最適な文字色: #000000
WCAG 14.45:1 (AAA) · APCA Lc 82
Contrast pairs
コードスニペット
CSS
:root {
--bungalow-white: #e4d3c8;
--bungalow-white-rgb: 228 211 200;
--bungalow-white-oklch: oklch(0.878 0.024 55.2);
}
.element {
color: var(--bungalow-white);
background-color: hsl(24 34% 84%);
border-color: oklch(0.878 0.024 55.2);
}Tailwind CSS v4
@theme {
--color-bungalow-white: #e4d3c8;
--color-bungalow-white-50: #fbf4ef;
--color-bungalow-white-100: #eee6e0;
--color-bungalow-white-200: #ddd2ca;
--color-bungalow-white-300: #c1b5ac;
--color-bungalow-white-400: #aa9b91;
--color-bungalow-white-500: #938277;
--color-bungalow-white-600: #7d6e65;
--color-bungalow-white-700: #645851;
--color-bungalow-white-800: #49403b;
--color-bungalow-white-900: #332c28;
--color-bungalow-white-950: #1f1916;
}SCSS
$bungalow-white: #e4d3c8;
$bungalow-white-rgb: 228, 211, 200;
$bungalow-white-light: mix(#fff, $bungalow-white, 20%);
$bungalow-white-dark: mix(#000, $bungalow-white, 20%);
.element {
color: $bungalow-white;
box-shadow: 0 0 0 2px rgba($bungalow-white, 0.35);
}