#A3836F — Orange

#A3836F is a orange in the Orange family. In practice it looks like an earthy, muted medium taupe, and it is also commonly known as Taupe, Warm Gray. Below are all of its color space values, an 11-step scale, harmony palettes and accessibility data.

#A3836F color swatch, orange#A3836F
CSS Namegray (closest)

Tints and shades (50–950)

50#f7f5f3
100#eee9e5
200#e2d7d0
300#d0bcaf
400#b89b8a
500#a5836e
600#92725e
700#7b5e4b
800#674d3e
900#574133
950#34261d

Accessibility

Contrast on white
3.48:1
Contrast on black
6.03:1
  • AA (4.5:1) on whiteFail
  • AA Large (3:1) on whitePass
  • AAA (7:1) on whiteFail
  • AAA Large (4.5:1) on whiteFail
  • UI components (3:1) on whitePass

Need a passing variant? Repair this color in the contrast checker.

Complementary palette

Analogous palette

Triadic palette

Copy-ready CSS

brand-scale.css
:root {
  --brand-50: oklch(0.971 0.004 53.6); /* #f7f5f3 */
  --brand-100: oklch(0.936 0.008 53.6); /* #eee9e5 */
  --brand-200: oklch(0.885 0.016 53.6); /* #e2d7d0 */
  --brand-300: oklch(0.808 0.029 53.6); /* #d0bcaf */
  --brand-400: oklch(0.712 0.043 53.6); /* #b89b8a */
  --brand-500: oklch(0.637 0.051 53.6); /* #a5836e */
  --brand-600: oklch(0.577 0.05 53.6); /* #92725e */
  --brand-700: oklch(0.505 0.047 53.6); /* #7b5e4b */
  --brand-800: oklch(0.444 0.042 53.6); /* #674d3e */
  --brand-900: oklch(0.396 0.038 53.6); /* #574133 */
  --brand-950: oklch(0.281 0.027 53.6); /* #34261d */
}

Explore other colors