Benoemde kleur · #E4C590
Bungalow Maple
Bungalow Maple is #E4C590: rgb(228 197 144), hsl(38 61% 73%), oklch(0.837 0.077 80.7). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Orange mean? → · Bungalow Maple color name →
#E4C590
oklch(0.837 0.077 80.7)
Kleurconversies
- HEX
- #e4c590
- RGB
- rgb(228 197 144)
- HSL
- hsl(38 61% 73%)
- HWB
- hwb(38 56% 11%)
- OKLCH
- oklch(0.837 0.077 80.7)
- OKLab
- oklab(0.837 0.013 0.076)
- CIE Lab
- lab(81.28 5.94 30.9)
- LCH
- lch(81.28 31.47 79.1)
- CMYK
- cmyk(0% 14% 37% 11%)
Tinten · Schaduwen · Tonen
Tinten
- E7CB9B
- EAD1A7
- ECD6B2
- EFDCBD
- F2E2C8
- F4E8D3
- F7EEDE
- FAF3E9
- FCF9F4
Schaduwen
- C6AB7D
- A9926A
- 8D7957
- 726145
- 584B34
- 3F3524
- 282115
- 120E07
- 030201
Tonen
- DABE8F
- CFB78E
- C5B08C
- BBA98B
- B1A289
- A79B88
- 9D9486
- 938E84
- 8A8782
Kleurharmonieën
Complementair +180°
- E4C590
Bungalow Maple
- ADCBFD
≈ Night Snow
Analoog -30° +30°
- E4C590
Bungalow Maple
- F4BC9C
≈ Shrimp Boat
- CCCF94
≈ Corn Husk Green
Triadisch +120° +240°
- E4C590
Bungalow Maple
- 8BD9DE
≈ Vibrant Soft Blue
- E1BAE9
≈ Beefy Pink
Gesplitst complementair +150° +210°
- E4C590
Bungalow Maple
- 95D4F3
≈ Slightly Spritzig
- C9C2F9
≈ Light Periwinkle
Tetradisch +90° +180° +270°
- E4C590
Bungalow Maple
- 96DBC3
≈ Monet Vert
- ADCBFD
≈ Night Snow
- F2B6D0
≈ Pink Marshmallow
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.65:1 · APCA Lc 29
Ag
AAAOp zwart
WCAG 12.68:1 · APCA Lc 74
Beste tekstkleur: #000000
WCAG 12.68:1 (AAA) · APCA Lc 74
Contrast pairs
Codefragmenten
CSS
:root {
--bungalow-maple: #e4c590;
--bungalow-maple-rgb: 228 197 144;
--bungalow-maple-oklch: oklch(0.837 0.077 80.7);
}
.element {
color: var(--bungalow-maple);
background-color: hsl(38 61% 73%);
border-color: oklch(0.837 0.077 80.7);
}Tailwind CSS v4
@theme {
--color-bungalow-maple: #e4c590;
--color-bungalow-maple-50: #fff4dd;
--color-bungalow-maple-100: #f5e6cb;
--color-bungalow-maple-200: #e5d2af;
--color-bungalow-maple-300: #cbb48a;
--color-bungalow-maple-400: #b69a69;
--color-bungalow-maple-500: #a18147;
--color-bungalow-maple-600: #886d3d;
--color-bungalow-maple-700: #6d5731;
--color-bungalow-maple-800: #513f22;
--color-bungalow-maple-900: #382b16;
--color-bungalow-maple-950: #231908;
}SCSS
$bungalow-maple: #e4c590;
$bungalow-maple-rgb: 228, 197, 144;
$bungalow-maple-light: mix(#fff, $bungalow-maple, 20%);
$bungalow-maple-dark: mix(#000, $bungalow-maple, 20%);
.element {
color: $bungalow-maple;
box-shadow: 0 0 0 2px rgba($bungalow-maple, 0.35);
}