Named color · #D5933D
Hint of Caramel
Hint of Caramel is #D5933D: rgb(213 147 61), hsl(34 64% 54%), oklch(0.713 0.128 70). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Hint of Caramel color name →
#D5933D
oklch(0.713 0.128 70)
Color conversions
- HEX
- #d5933d
- RGB
- rgb(213 147 61)
- HSL
- hsl(34 64% 54%)
- HWB
- hwb(34 24% 16%)
- OKLCH
- oklch(0.713 0.128 70)
- OKLab
- oklab(0.713 0.044 0.12)
- CIE Lab
- lab(66.52 20.03 54.02)
- LCH
- lch(66.52 57.61 69.7)
- CMYK
- cmyk(0% 31% 71% 16%)
Tints · Shades · Tones
Tints
- DA9E55
- DEA96A
- E3B47D
- E7BF90
- ECC9A3
- F0D4B5
- F4DFC8
- F8EADA
- FBF4ED
Shades
- B97F34
- 9E6C2B
- 835922
- 6A471A
- 513612
- 3A250A
- 241604
- 100801
- 020100
Tones
- CD9248
- C49051
- BC8E59
- B38D60
- AB8B66
- A2896C
- 9A8772
- 918577
- 89827B
Color harmonies
Complementary +180°
- D5933D
Hint of Caramel
- 60A7EF
≈ Cerulean
Analogous -30° +30°
- D5933D
Hint of Caramel
- E58563
≈ Brewed Mustard
- B5A436
≈ Grassy Ochre
Triadic +120° +240°
- D5933D
Hint of Caramel
- 00BBB4
≈ Super Rare Jade
- BB8BDE
≈ Luminous Lavender
Split-complementary +150° +210°
- D5933D
Hint of Caramel
- 10B4D9
≈ Ocean Sigh
- 9399F1
≈ Periwinkle Blue
Tetradic +90° +180° +270°
- D5933D
Hint of Caramel
- 4CBB87
≈ Aragon Green
- 60A7EF
≈ Cerulean
- D781BC
≈ Pink Punk
Contrast & accessibility
Ag
FailOn white
WCAG 2.60:1 · APCA Lc 51
Ag
AAAOn black
WCAG 8.07:1 · APCA Lc 51
Best text color: #000000
WCAG 8.07:1 (AAA) · APCA Lc 51
Contrast pairs
Code snippets
CSS
:root {
--hint-of-caramel: #d5933d;
--hint-of-caramel-rgb: 213 147 61;
--hint-of-caramel-oklch: oklch(0.713 0.128 70);
}
.element {
color: var(--hint-of-caramel);
background-color: hsl(34 64% 54%);
border-color: oklch(0.713 0.128 70);
}Tailwind CSS v4
@theme {
--color-hint-of-caramel: #d5933d;
--color-hint-of-caramel-50: #fff0ce;
--color-hint-of-caramel-100: #ffe2ba;
--color-hint-of-caramel-200: #f7cc98;
--color-hint-of-caramel-300: #e0ad6b;
--color-hint-of-caramel-400: #ce9040;
--color-hint-of-caramel-500: #bb7400;
--color-hint-of-caramel-600: #9e6300;
--color-hint-of-caramel-700: #7f4f00;
--color-hint-of-caramel-800: #5f3800;
--color-hint-of-caramel-900: #422702;
--color-hint-of-caramel-950: #2b1500;
}SCSS
$hint-of-caramel: #d5933d;
$hint-of-caramel-rgb: 213, 147, 61;
$hint-of-caramel-light: mix(#fff, $hint-of-caramel, 20%);
$hint-of-caramel-dark: mix(#000, $hint-of-caramel, 20%);
.element {
color: $hint-of-caramel;
box-shadow: 0 0 0 2px rgba($hint-of-caramel, 0.35);
}