Nazwany kolor · #AD5A28
Caramelised Maple
Caramelised Maple to #AD5A28: rgb(173 90 40), hsl(23 62% 42%), oklch(0.558 0.125 48.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Brown mean? → · Caramelised Maple color name →
#AD5A28
oklch(0.558 0.125 48.7)
Konwersje koloru
- HEX
- #ad5a28
- RGB
- rgb(173 90 40)
- HSL
- hsl(23 62% 42%)
- HWB
- hwb(23 16% 32%)
- OKLCH
- oklch(0.558 0.125 48.7)
- OKLab
- oklab(0.558 0.083 0.094)
- CIE Lab
- lab(47.95 32 43.35)
- LCH
- lch(47.95 53.88 53.6)
- CMYK
- cmyk(0% 48% 77% 32%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B66B40
- BF7B56
- C88B6B
- D19C80
- D9AC94
- E1BCA9
- E9CDBE
- F1DDD4
- F8EEE9
Odcienie ciemniejsze
- 964D21
- 7F411B
- 6A3515
- 55290F
- 411E09
- 2D1304
- 1B0902
- 0B0301
- 010000
Tony
- A95F34
- A5633E
- A16748
- 9D6B51
- 996F59
- 947361
- 907669
- 8B7A71
- 867D79
Harmonie kolorów
Komplementarna +180°
- AD5A28
Caramelised Maple
- 007FA7
≈ Advertising Blue
Analogowa -30° +30°
- AD5A28
Caramelised Maple
- B15157
≈ Mineral Red
- 986A00
≈ Balor Brown
Triada +120° +240°
- AD5A28
Caramelised Maple
- 008868
≈ Celtic Queen
- 7266B8
≈ Ultra Violet
Komplementarna rozszczepiona +150° +210°
- AD5A28
Caramelised Maple
- 008489
≈ Precious Blue
- 4473BC
≈ Sinatra
Tetrada +90° +180° +270°
- AD5A28
Caramelised Maple
- 4B8538
≈ Level Up
- 007FA7
≈ Advertising Blue
- 935AA2
≈ Empire Violet
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.91:1 · APCA Lc 74
Ag
FailNa czerni
WCAG 4.26:1 · APCA Lc 28
Najlepszy kolor tekstu: #FFFFFF
WCAG 4.91:1 (AA) · APCA Lc 74
Contrast pairs
Fragmenty kodu
CSS
:root {
--caramelised-maple: #ad5a28;
--caramelised-maple-rgb: 173 90 40;
--caramelised-maple-oklch: oklch(0.558 0.125 48.7);
}
.element {
color: var(--caramelised-maple);
background-color: hsl(23 62% 42%);
border-color: oklch(0.558 0.125 48.7);
}Tailwind CSS v4
@theme {
--color-caramelised-maple: #ad5a28;
--color-caramelised-maple-50: #ffecd6;
--color-caramelised-maple-100: #ffddc3;
--color-caramelised-maple-200: #ffc6a4;
--color-caramelised-maple-300: #eba57c;
--color-caramelised-maple-400: #da8759;
--color-caramelised-maple-500: #c76931;
--color-caramelised-maple-600: #a8592b;
--color-caramelised-maple-700: #874722;
--color-caramelised-maple-800: #653318;
--color-caramelised-maple-900: #472310;
--color-caramelised-maple-950: #2e1103;
}SCSS
$caramelised-maple: #ad5a28;
$caramelised-maple-rgb: 173, 90, 40;
$caramelised-maple-light: mix(#fff, $caramelised-maple, 20%);
$caramelised-maple-dark: mix(#000, $caramelised-maple, 20%);
.element {
color: $caramelised-maple;
box-shadow: 0 0 0 2px rgba($caramelised-maple, 0.35);
}