Named color · #AB662E
Autumn Surprise
Autumn Surprise is #AB662E: rgb(171 102 46), hsl(27 58% 43%), oklch(0.577 0.113 56.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Autumn Surprise color name →
#AB662E
oklch(0.577 0.113 56.7)
Color conversions
- HEX
- #ab662e
- RGB
- rgb(171 102 46)
- HSL
- hsl(27 58% 43%)
- HWB
- hwb(27 18% 33%)
- OKLCH
- oklch(0.577 0.113 56.7)
- OKLab
- oklab(0.577 0.062 0.095)
- CIE Lab
- lab(50.4 25.09 42.74)
- LCH
- lch(50.4 49.56 59.6)
- CMYK
- cmyk(0% 40% 73% 33%)
Tints · Shades · Tones
Tints
- B47545
- BD845A
- C6936F
- CFA283
- D7B197
- DFC1AC
- E7D0C0
- EFE0D5
- F7EFEA
Shades
- 945827
- 7E4A1F
- 683C18
- 542F12
- 40230B
- 2D1706
- 1B0C02
- 0B0401
- 010000
Tones
- A76939
- A36C43
- 9F6F4C
- 9B7254
- 97745C
- 937763
- 8E796B
- 8A7C72
- 857E79
Color harmonies
Complementary +180°
- AB662E
Autumn Surprise
- 2382B3
≈ Lucario Blue
Analogous -30° +30°
- AB662E
Autumn Surprise
- B35D54
≈ Giant’s Club
- 967411
≈ Glazed Chestnut
Triadic +120° +240°
- AB662E
Autumn Surprise
- 008E78
≈ Emerald Enchantment
- 806AB4
≈ Lavish Spending
Split-complementary +150° +210°
- AB662E
Autumn Surprise
- 008997
≈ Atlantic Blue
- 5B76BC
≈ Blue Android Base
Tetradic +90° +180° +270°
- AB662E
Autumn Surprise
- 478B50
≈ Medium Green
- 2382B3
≈ Lucario Blue
- 9C609C
≈ Heath Spotted Orchid
Contrast & accessibility
Ag
FailOn white
WCAG 4.49:1 · APCA Lc 71
Ag
AAOn black
WCAG 4.67:1 · APCA Lc 31
Best text color: #000000
WCAG 4.67:1 (AA) · APCA Lc 31
Contrast pairs
Code snippets
CSS
:root {
--autumn-surprise: #ab662e;
--autumn-surprise-rgb: 171 102 46;
--autumn-surprise-oklch: oklch(0.577 0.113 56.7);
}
.element {
color: var(--autumn-surprise);
background-color: hsl(27 58% 43%);
border-color: oklch(0.577 0.113 56.7);
}Tailwind CSS v4
@theme {
--color-autumn-surprise: #ab662e;
--color-autumn-surprise-50: #ffeed6;
--color-autumn-surprise-100: #ffe0c3;
--color-autumn-surprise-200: #fac9a5;
--color-autumn-surprise-300: #e3a97d;
--color-autumn-surprise-400: #d18c59;
--color-autumn-surprise-500: #be7031;
--color-autumn-surprise-600: #a05f2b;
--color-autumn-surprise-700: #814c22;
--color-autumn-surprise-800: #603718;
--color-autumn-surprise-900: #43250f;
--color-autumn-surprise-950: #2b1403;
}SCSS
$autumn-surprise: #ab662e;
$autumn-surprise-rgb: 171, 102, 46;
$autumn-surprise-light: mix(#fff, $autumn-surprise, 20%);
$autumn-surprise-dark: mix(#000, $autumn-surprise, 20%);
.element {
color: $autumn-surprise;
box-shadow: 0 0 0 2px rgba($autumn-surprise, 0.35);
}