Named color · #E3A9A2
Coral Fountain
Coral Fountain is #E3A9A2: rgb(227 169 162), hsl(6 54% 76%), oklch(0.787 0.07 26.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Coral Fountain color name →
#E3A9A2
oklch(0.787 0.07 26.6)
Color conversions
- HEX
- #e3a9a2
- RGB
- rgb(227 169 162)
- HSL
- hsl(6 54% 76%)
- HWB
- hwb(6 64% 11%)
- OKLCH
- oklch(0.787 0.07 26.6)
- OKLab
- oklab(0.787 0.062 0.031)
- CIE Lab
- lab(74.65 21.26 12.41)
- LCH
- lch(74.65 24.62 30.3)
- CMYK
- cmyk(0% 26% 29% 11%)
Tints · Shades · Tones
Tints
- E6B2AB
- E9BAB4
- EDC3BD
- EFCBC6
- F2D4D0
- F5DCD9
- F8E5E2
- FAEEEC
- FDF6F5
Shades
- C5928C
- A87C77
- 8C6763
- 71534F
- 573F3C
- 3F2C2A
- 271B19
- 120A0A
- 030101
Tones
- D9A59F
- CFA19B
- C59D98
- BB9994
- B19591
- A7918E
- 9D8C8A
- 948887
- 8A8483
Color harmonies
Complementary +180°
- E3A9A2
Coral Fountain
- 83C7D0
≈ Not a Cloud in Sight
Analogous -30° +30°
- E3A9A2
Coral Fountain
- DFA8BA
≈ Apple Infusion
- DDAF8E
≈ Boot Hill Ghost
Triadic +120° +240°
- E3A9A2
Coral Fountain
- 9DC6A0
≈ French Market
- A5B9E7
≈ Teclis Blue
Split-complementary +150° +210°
- E3A9A2
Coral Fountain
- 89C9B8
≈ Aquastone
- 8FC1E1
≈ Moment of Grace
Tetradic +90° +180° +270°
- E3A9A2
Coral Fountain
- B6C08D
≈ Jitterbug
- 83C7D0
≈ Not a Cloud in Sight
- BDB1E2
≈ Moonraker
Contrast & accessibility
Ag
FailOn white
WCAG 2.00:1 · APCA Lc 39
Ag
AAAOn black
WCAG 10.46:1 · APCA Lc 64
Best text color: #000000
WCAG 10.46:1 (AAA) · APCA Lc 64
Contrast pairs
Code snippets
CSS
:root {
--coral-fountain: #e3a9a2;
--coral-fountain-rgb: 227 169 162;
--coral-fountain-oklch: oklch(0.787 0.07 26.6);
}
.element {
color: var(--coral-fountain);
background-color: hsl(6 54% 76%);
border-color: oklch(0.787 0.07 26.6);
}Tailwind CSS v4
@theme {
--color-coral-fountain: #e3a9a2;
--color-coral-fountain-50: #ffeeea;
--color-coral-fountain-100: #ffe0db;
--color-coral-fountain-200: #f1cac4;
--color-coral-fountain-300: #d9aba3;
--color-coral-fountain-400: #c48f89;
--color-coral-fountain-500: #b0746d;
--color-coral-fountain-600: #95635d;
--color-coral-fountain-700: #774f4a;
--color-coral-fountain-800: #583936;
--color-coral-fountain-900: #3e2725;
--color-coral-fountain-950: #271514;
}SCSS
$coral-fountain: #e3a9a2;
$coral-fountain-rgb: 227, 169, 162;
$coral-fountain-light: mix(#fff, $coral-fountain, 20%);
$coral-fountain-dark: mix(#000, $coral-fountain, 20%);
.element {
color: $coral-fountain;
box-shadow: 0 0 0 2px rgba($coral-fountain, 0.35);
}