Color con nombre · #A37D5A
Cinnamon Crunch
Cinnamon Crunch es #A37D5A: rgb(163 125 90), hsl(29 29% 50%), oklch(0.618 0.068 63.7). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Orange mean? → · Cinnamon Crunch color name →
#A37D5A
oklch(0.618 0.068 63.7)
Conversiones de color
- HEX
- #a37d5a
- RGB
- rgb(163 125 90)
- HSL
- hsl(29 29% 50%)
- HWB
- hwb(29 35% 36%)
- OKLCH
- oklch(0.618 0.068 63.7)
- OKLab
- oklab(0.618 0.03 0.061)
- CIE Lab
- lab(55.55 11.81 25.05)
- LCH
- lch(55.55 27.69 64.8)
- CMYK
- cmyk(0% 23% 45% 36%)
Tintes · Sombras · Tonos
Tintes
- AC896A
- B5967A
- BFA38A
- C8B09A
- D1BCAA
- DACABB
- E3D7CC
- EDE4DD
- F6F1EE
Sombras
- 8D6C4D
- 785B41
- 634B35
- 4F3B29
- 3C2C1E
- 2A1E13
- 191109
- 0A0503
- 010100
Tonos
- A07D5E
- 9C7E62
- 997E66
- 957F6A
- 927F6E
- 8E7F72
- 8B7F75
- 878079
- 84807D
Armonías de color
Complementario +180°
- A37D5A
Cinnamon Crunch
- 618BAC
≈ Gunjō Blue
Análogo -30° +30°
- A37D5A
Cinnamon Crunch
- AB776B
≈ Sawshark
- 938555
≈ Mountain Olive
Triádico +120° +240°
- A37D5A
Cinnamon Crunch
- 53938A
≈ Green Agate
- 8E7CA8
≈ Trumpeter
Complementario dividido +150° +210°
- A37D5A
Cinnamon Crunch
- 52919F
≈ Teal Trinket
- 7883AF
≈ Corsican Purple
Tetrádico +90° +180° +270°
- A37D5A
Cinnamon Crunch
- 659273
≈ Spring Forest
- 618BAC
≈ Gunjō Blue
- 9F7697
≈ Screen Gem
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 3.72:1 · APCA Lc 65
Ag
AASobre negro
WCAG 5.63:1 · APCA Lc 37
Mejor color de texto: #000000
WCAG 5.63:1 (AA) · APCA Lc 37
Contrast pairs
Fragmentos de código
CSS
:root {
--cinnamon-crunch: #a37d5a;
--cinnamon-crunch-rgb: 163 125 90;
--cinnamon-crunch-oklch: oklch(0.618 0.068 63.7);
}
.element {
color: var(--cinnamon-crunch);
background-color: hsl(29 29% 50%);
border-color: oklch(0.618 0.068 63.7);
}Tailwind CSS v4
@theme {
--color-cinnamon-crunch: #a37d5a;
--color-cinnamon-crunch-50: #fff2e1;
--color-cinnamon-crunch-100: #f8e4d1;
--color-cinnamon-crunch-200: #e9cfb6;
--color-cinnamon-crunch-300: #d0b193;
--color-cinnamon-crunch-400: #bc9674;
--color-cinnamon-crunch-500: #a67d56;
--color-cinnamon-crunch-600: #8d6a49;
--color-cinnamon-crunch-700: #71543a;
--color-cinnamon-crunch-800: #543d2a;
--color-cinnamon-crunch-900: #3a2a1c;
--color-cinnamon-crunch-950: #24170c;
}SCSS
$cinnamon-crunch: #a37d5a;
$cinnamon-crunch-rgb: 163, 125, 90;
$cinnamon-crunch-light: mix(#fff, $cinnamon-crunch, 20%);
$cinnamon-crunch-dark: mix(#000, $cinnamon-crunch, 20%);
.element {
color: $cinnamon-crunch;
box-shadow: 0 0 0 2px rgba($cinnamon-crunch, 0.35);
}