Nazwany kolor · #A17B4D
Caramelised Pecan
Caramelised Pecan to #A17B4D: rgb(161 123 77), hsl(33 35% 47%), oklch(0.61 0.078 70.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Caramelised Pecan color name →
#A17B4D
oklch(0.61 0.078 70.8)
Konwersje koloru
- HEX
- #a17b4d
- RGB
- rgb(161 123 77)
- HSL
- hsl(33 35% 47%)
- HWB
- hwb(33 30% 37%)
- OKLCH
- oklch(0.61 0.078 70.8)
- OKLab
- oklab(0.61 0.026 0.074)
- CIE Lab
- lab(54.64 11.06 31)
- LCH
- lch(54.64 32.91 70.4)
- CMYK
- cmyk(0% 24% 52% 37%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- AA885F
- B49470
- BDA181
- C6AE93
- D0BCA4
- D9C9B6
- E3D6C8
- ECE4DA
- F6F1ED
Odcienie ciemniejsze
- 8B6A42
- 765A37
- 624A2C
- 4E3A22
- 3C2C18
- 2A1E0F
- 191007
- 090502
- 010100
Tony
- 9E7C53
- 9B7C59
- 977D5E
- 947E63
- 917E68
- 8E7F6D
- 8A7F72
- 877F77
- 83807B
Harmonie kolorów
Komplementarna +180°
- A17B4D
Caramelised Pecan
- 5F87B1
≈ Lichen Blue
Analogowa -30° +30°
- A17B4D
Caramelised Pecan
- AC735E
≈ Arizona Clay
- 8D854B
≈ Frog’s Legs
Triada +120° +240°
- A17B4D
Caramelised Pecan
- 42928E
≈ Catalan
- 9276A6
≈ Gentian
Komplementarna rozszczepiona +150° +210°
- A17B4D
Caramelised Pecan
- 478EA4
≈ Winter Time
- 7A7EB1
≈ Astro Zinger
Tetrada +90° +180° +270°
- A17B4D
Caramelised Pecan
- 569274
≈ Deep Grass Green
- 5F87B1
≈ Lichen Blue
- A37091
≈ Drama Queen
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.84:1 · APCA Lc 66
Ag
AANa czerni
WCAG 5.45:1 · APCA Lc 36
Najlepszy kolor tekstu: #000000
WCAG 5.45:1 (AA) · APCA Lc 36
Contrast pairs
Fragmenty kodu
CSS
:root {
--caramelised-pecan: #a17b4d;
--caramelised-pecan-rgb: 161 123 77;
--caramelised-pecan-oklch: oklch(0.61 0.078 70.8);
}
.element {
color: var(--caramelised-pecan);
background-color: hsl(33 35% 47%);
border-color: oklch(0.61 0.078 70.8);
}Tailwind CSS v4
@theme {
--color-caramelised-pecan: #a17b4d;
--color-caramelised-pecan-50: #fff2dd;
--color-caramelised-pecan-100: #f9e4cc;
--color-caramelised-pecan-200: #e9d0b0;
--color-caramelised-pecan-300: #d0b28b;
--color-caramelised-pecan-400: #bc976b;
--color-caramelised-pecan-500: #a77d49;
--color-caramelised-pecan-600: #8d6a3f;
--color-caramelised-pecan-700: #715532;
--color-caramelised-pecan-800: #543d23;
--color-caramelised-pecan-900: #3b2a17;
--color-caramelised-pecan-950: #251808;
}SCSS
$caramelised-pecan: #a17b4d;
$caramelised-pecan-rgb: 161, 123, 77;
$caramelised-pecan-light: mix(#fff, $caramelised-pecan, 20%);
$caramelised-pecan-dark: mix(#000, $caramelised-pecan, 20%);
.element {
color: $caramelised-pecan;
box-shadow: 0 0 0 2px rgba($caramelised-pecan, 0.35);
}