Nazwany kolor · #E4C590
Bungalow Maple
Bungalow Maple to #E4C590: rgb(228 197 144), hsl(38 61% 73%), oklch(0.837 0.077 80.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Bungalow Maple color name →
#E4C590
oklch(0.837 0.077 80.7)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E7CB9B
- EAD1A7
- ECD6B2
- EFDCBD
- F2E2C8
- F4E8D3
- F7EEDE
- FAF3E9
- FCF9F4
Odcienie ciemniejsze
- C6AB7D
- A9926A
- 8D7957
- 726145
- 584B34
- 3F3524
- 282115
- 120E07
- 030201
Tony
- DABE8F
- CFB78E
- C5B08C
- BBA98B
- B1A289
- A79B88
- 9D9486
- 938E84
- 8A8782
Harmonie kolorów
Komplementarna +180°
- E4C590
Bungalow Maple
- ADCBFD
≈ Night Snow
Analogowa -30° +30°
- E4C590
Bungalow Maple
- F4BC9C
≈ Shrimp Boat
- CCCF94
≈ Corn Husk Green
Triada +120° +240°
- E4C590
Bungalow Maple
- 8BD9DE
≈ Vibrant Soft Blue
- E1BAE9
≈ Beefy Pink
Komplementarna rozszczepiona +150° +210°
- E4C590
Bungalow Maple
- 95D4F3
≈ Slightly Spritzig
- C9C2F9
≈ Light Periwinkle
Tetrada +90° +180° +270°
- E4C590
Bungalow Maple
- 96DBC3
≈ Monet Vert
- ADCBFD
≈ Night Snow
- F2B6D0
≈ Pink Marshmallow
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.65:1 · APCA Lc 29
Ag
AAANa czerni
WCAG 12.68:1 · APCA Lc 74
Najlepszy kolor tekstu: #000000
WCAG 12.68:1 (AAA) · APCA Lc 74
Contrast pairs
Fragmenty kodu
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);
}