Named color · #E95F24
Santiago Orange
Santiago Orange is #E95F24: rgb(233 95 36), hsl(18 82% 53%), oklch(0.654 0.184 40.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Santiago Orange color name →
#E95F24
oklch(0.654 0.184 40.7)
Color conversions
- HEX
- #e95f24
- RGB
- rgb(233 95 36)
- HSL
- hsl(18 82% 53%)
- HWB
- hwb(18 14% 9%)
- OKLCH
- oklch(0.654 0.184 40.7)
- OKLab
- oklab(0.654 0.14 0.12)
- CIE Lab
- lab(58.45 52.58 58.58)
- LCH
- lch(58.45 78.71 48.1)
- CMYK
- cmyk(0% 59% 85% 9%)
Tints · Shades · Tones
Tints
- EE7142
- F28259
- F5936F
- F8A384
- FBB399
- FDC2AD
- FED1C1
- FFE1D6
- FFF0EA
Shades
- CB521E
- AD4418
- 903812
- 742C0C
- 5A2007
- 411504
- 290A02
- 130300
- 030000
Tones
- DF6534
- D66940
- CC6E4B
- C27254
- B8755C
- AD7864
- A37A6C
- 987C73
- 8C7E79
Color harmonies
Complementary +180°
- E95F24
Santiago Orange
- 00A0C3
≈ Scuba Blue
Analogous -30° +30°
- E95F24
Santiago Orange
- E95575
≈ Highlighter Pink
- C67F00
≈ Bamboo Brown
Triadic +120° +240°
- E95F24
Santiago Orange
- 00AB72
≈ Sesame Street Green
- 7F7DFD
≈ Blue Party Parrot
Split-complementary +150° +210°
- E95F24
Santiago Orange
- 00A6A1
≈ Jadestone
- 1193FB
≈ Starfleet Blue
Tetradic +90° +180° +270°
- E95F24
Santiago Orange
- 69A500
≈ Herbal Lift
- 00A0C3
≈ Scuba Blue
- B46AE2
≈ Lavender
Contrast & accessibility
Ag
FailOn white
WCAG 3.42:1 · APCA Lc 61
Ag
AAOn black
WCAG 6.12:1 · APCA Lc 41
Best text color: #000000
WCAG 6.12:1 (AA) · APCA Lc 41
Contrast pairs
Code snippets
CSS
:root {
--santiago-orange: #e95f24;
--santiago-orange-rgb: 233 95 36;
--santiago-orange-oklch: oklch(0.654 0.184 40.7);
}
.element {
color: var(--santiago-orange);
background-color: hsl(18 82% 53%);
border-color: oklch(0.654 0.184 40.7);
}Tailwind CSS v4
@theme {
--color-santiago-orange: #e95f24;
--color-santiago-orange-50: #ffe5cc;
--color-santiago-orange-100: #ffd4b7;
--color-santiago-orange-200: #ffba94;
--color-santiago-orange-300: #ff9567;
--color-santiago-orange-400: #f5713e;
--color-santiago-orange-500: #e44b00;
--color-santiago-orange-600: #c14100;
--color-santiago-orange-700: #9b3400;
--color-santiago-orange-800: #742303;
--color-santiago-orange-900: #521803;
--color-santiago-orange-950: #360700;
}SCSS
$santiago-orange: #e95f24;
$santiago-orange-rgb: 233, 95, 36;
$santiago-orange-light: mix(#fff, $santiago-orange, 20%);
$santiago-orange-dark: mix(#000, $santiago-orange, 20%);
.element {
color: $santiago-orange;
box-shadow: 0 0 0 2px rgba($santiago-orange, 0.35);
}