Named color · #EBB367
Salted Caramel
Salted Caramel is #EBB367: rgb(235 179 103), hsl(35 77% 66%), oklch(0.803 0.114 73.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Salted Caramel color name →
#EBB367
oklch(0.803 0.114 73.4)
Color conversions
- HEX
- #ebb367
- RGB
- rgb(235 179 103)
- HSL
- hsl(35 77% 66%)
- HWB
- hwb(35 40% 8%)
- OKLCH
- oklch(0.803 0.114 73.4)
- OKLab
- oklab(0.803 0.033 0.109)
- CIE Lab
- lab(77.05 14.89 46.59)
- LCH
- lch(77.05 48.91 72.3)
- CMYK
- cmyk(0% 24% 56% 8%)
Tints · Shades · Tones
Tints
- EDBB78
- F0C388
- F2CA97
- F4D2A6
- F6D9B5
- F8E1C4
- FAE9D3
- FCF0E2
- FDF8F0
Shades
- CC9B59
- AE844B
- 916E3D
- 755830
- 5B4323
- 412F17
- 291D0C
- 130C04
- 030100
Tones
- E0AE6B
- D5A96F
- CAA472
- BF9F75
- B59A78
- AA957A
- A0907C
- 958A7D
- 8A857F
Color harmonies
Complementary +180°
- EBB367
Salted Caramel
- 90C2FF
≈ Truesky Gloxym
Analogous -30° +30°
- EBB367
Salted Caramel
- FDA682
≈ Peach Fizz
- CBC267
≈ Powdered Green Tea
Triadic +120° +240°
- EBB367
Salted Caramel
- 51D6D3
≈ Medium Turquoise
- D9A9F3
≈ Petal Plush
Split-complementary +150° +210°
- EBB367
Salted Caramel
- 5FCFF4
≈ Libra Blue Morpho
- B5B6FF
≈ Greyish Lavender
Tetradic +90° +180° +270°
- EBB367
Salted Caramel
- 72D6AA
≈ Tadorna Teal
- 90C2FF
≈ Truesky Gloxym
- F2A1D1
≈ Violet Kiss
Contrast & accessibility
Ag
FailOn white
WCAG 1.87:1 · APCA Lc 35
Ag
AAAOn black
WCAG 11.17:1 · APCA Lc 67
Best text color: #000000
WCAG 11.17:1 (AAA) · APCA Lc 67
Contrast pairs
Code snippets
CSS
:root {
--salted-caramel: #ebb367;
--salted-caramel-rgb: 235 179 103;
--salted-caramel-oklch: oklch(0.803 0.114 73.4);
}
.element {
color: var(--salted-caramel);
background-color: hsl(35 77% 66%);
border-color: oklch(0.803 0.114 73.4);
}Tailwind CSS v4
@theme {
--color-salted-caramel: #ebb367;
--color-salted-caramel-50: #fff1d2;
--color-salted-caramel-100: #ffe3be;
--color-salted-caramel-200: #f1ce9e;
--color-salted-caramel-300: #daaf74;
--color-salted-caramel-400: #c7934c;
--color-salted-caramel-500: #b37916;
--color-salted-caramel-600: #976617;
--color-salted-caramel-700: #795213;
--color-salted-caramel-800: #5b3b0c;
--color-salted-caramel-900: #3f2807;
--color-salted-caramel-950: #281600;
}SCSS
$salted-caramel: #ebb367;
$salted-caramel-rgb: 235, 179, 103;
$salted-caramel-light: mix(#fff, $salted-caramel, 20%);
$salted-caramel-dark: mix(#000, $salted-caramel, 20%);
.element {
color: $salted-caramel;
box-shadow: 0 0 0 2px rgba($salted-caramel, 0.35);
}