Named color · #9F7250
Cinnamon Twist
Cinnamon Twist is #9F7250: rgb(159 114 80), hsl(26 33% 47%), oklch(0.59 0.075 57.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Cinnamon Twist color name →
#9F7250
oklch(0.59 0.075 57.8)
Color conversions
- HEX
- #9f7250
- RGB
- rgb(159 114 80)
- HSL
- hsl(26 33% 47%)
- HWB
- hwb(26 31% 38%)
- OKLCH
- oklch(0.59 0.075 57.8)
- OKLab
- oklab(0.59 0.04 0.063)
- CIE Lab
- lab(52.13 15.26 26.19)
- LCH
- lch(52.13 30.31 59.8)
- CMYK
- cmyk(0% 28% 50% 38%)
Tints · Shades · Tones
Tints
- A97F61
- B28D72
- BC9B83
- C6A994
- CFB7A5
- D9C5B7
- E2D3C8
- ECE2DA
- F5F0ED
Shades
- 8A6244
- 755339
- 61442E
- 4D3624
- 3B281A
- 291B10
- 180E07
- 090402
- 010100
Tones
- 9C7455
- 99755A
- 96775F
- 937864
- 907A69
- 8D7B6E
- 8A7C72
- 877E77
- 837F7C
Color harmonies
Complementary +180°
- 9F7250
Cinnamon Twist
- 5084A4
≈ Hemisphere
Analogous -30° +30°
- 9F7250
Cinnamon Twist
- A56C64
≈ Wet Desert Clay
- 907B47
≈ Willow
Triadic +120° +240°
- 9F7250
Cinnamon Twist
- 468C7D
≈ Perky
- 8274A4
≈ Old Prune
Split-complementary +150° +210°
- 9F7250
Cinnamon Twist
- 408A94
≈ Seachange
- 6A7CAA
≈ Night Thistle
Tetradic +90° +180° +270°
- 9F7250
Cinnamon Twist
- 5E8A64
≈ Murdoch
- 5084A4
≈ Hemisphere
- 966D94
≈ Tatarian Aster
Contrast & accessibility
Ag
FailOn white
WCAG 4.20:1 · APCA Lc 69
Ag
AAOn black
WCAG 4.99:1 · APCA Lc 33
Best text color: #000000
WCAG 4.99:1 (AA) · APCA Lc 33
Contrast pairs
Code snippets
CSS
:root {
--cinnamon-twist: #9f7250;
--cinnamon-twist-rgb: 159 114 80;
--cinnamon-twist-oklch: oklch(0.59 0.075 57.8);
}
.element {
color: var(--cinnamon-twist);
background-color: hsl(26 33% 47%);
border-color: oklch(0.59 0.075 57.8);
}Tailwind CSS v4
@theme {
--color-cinnamon-twist: #9f7250;
--color-cinnamon-twist-50: #fff1e0;
--color-cinnamon-twist-100: #fbe3d0;
--color-cinnamon-twist-200: #edcdb5;
--color-cinnamon-twist-300: #d5af92;
--color-cinnamon-twist-400: #c19473;
--color-cinnamon-twist-500: #ac7a54;
--color-cinnamon-twist-600: #916747;
--color-cinnamon-twist-700: #745239;
--color-cinnamon-twist-800: #563c29;
--color-cinnamon-twist-900: #3c291b;
--color-cinnamon-twist-950: #26170c;
}SCSS
$cinnamon-twist: #9f7250;
$cinnamon-twist-rgb: 159, 114, 80;
$cinnamon-twist-light: mix(#fff, $cinnamon-twist, 20%);
$cinnamon-twist-dark: mix(#000, $cinnamon-twist, 20%);
.element {
color: $cinnamon-twist;
box-shadow: 0 0 0 2px rgba($cinnamon-twist, 0.35);
}