Named color · #ED93D7
Mayflower Orchid
Mayflower Orchid is #ED93D7: rgb(237 147 215), hsl(315 71% 75%), oklch(0.777 0.137 336.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Mayflower Orchid color name →
#ED93D7
oklch(0.777 0.137 336.4)
Color conversions
- HEX
- #ed93d7
- RGB
- rgb(237 147 215)
- HSL
- hsl(315 71% 75%)
- HWB
- hwb(315 58% 7%)
- OKLCH
- oklch(0.777 0.137 336.4)
- OKLab
- oklab(0.777 0.126 -0.055)
- CIE Lab
- lab(72.15 41.85 -20.08)
- LCH
- lch(72.15 46.42 334.4)
- CMYK
- cmyk(0% 38% 9% 7%)
Tints · Shades · Tones
Tints
- F09EDB
- F2A9DF
- F4B4E3
- F7BFE7
- F8CAEB
- FAD4EF
- FCDFF3
- FDEAF7
- FEF4FB
Shades
- CE7FBB
- B06C9F
- 935985
- 77476B
- 5C3652
- 42253B
- 2A1625
- 140811
- 030102
Tones
- E292CE
- D790C5
- CC8EBC
- C28DB4
- B78BAB
- AC89A2
- A1879A
- 968591
- 8B8288
Color harmonies
Complementary +180°
- ED93D7
Mayflower Orchid
- 61D092
≈ Van Gogh Green
Analogous -30° +30°
- ED93D7
Mayflower Orchid
- CD9EFB
≈ Hydrangea Purple
- FF8FA8
≈ Salmon Pink
Triadic +120° +240°
- ED93D7
Mayflower Orchid
- D0B63F
≈ Old Gold
- 0BCBEE
≈ Picnic Day Sky
Split-complementary +150° +210°
- ED93D7
Mayflower Orchid
- A0C660
≈ Spring Lime
- 00D2C4
≈ Turquoise Panic
Tetradic +90° +180° +270°
- ED93D7
Mayflower Orchid
- F1A34C
≈ O’Brien Orange
- 61D092
≈ Van Gogh Green
- 72BDFF
≈ Green Darner Tail
Contrast & accessibility
Ag
FailOn white
WCAG 2.15:1 · APCA Lc 42
Ag
AAAOn black
WCAG 9.75:1 · APCA Lc 60
Best text color: #000000
WCAG 9.75:1 (AAA) · APCA Lc 60
Contrast pairs
Code snippets
CSS
:root {
--mayflower-orchid: #ed93d7;
--mayflower-orchid-rgb: 237 147 215;
--mayflower-orchid-oklch: oklch(0.777 0.137 336.4);
}
.element {
color: var(--mayflower-orchid);
background-color: hsl(315 71% 75%);
border-color: oklch(0.777 0.137 336.4);
}Tailwind CSS v4
@theme {
--color-mayflower-orchid: #ed93d7;
--color-mayflower-orchid-50: #ffe7ff;
--color-mayflower-orchid-100: #ffd7f8;
--color-mayflower-orchid-200: #fcbee8;
--color-mayflower-orchid-300: #e69ccf;
--color-mayflower-orchid-400: #d17dbd;
--color-mayflower-orchid-500: #bd5ea8;
--color-mayflower-orchid-600: #a0508e;
--color-mayflower-orchid-700: #804072;
--color-mayflower-orchid-800: #5e2e55;
--color-mayflower-orchid-900: #421f3c;
--color-mayflower-orchid-950: #2a0f25;
}SCSS
$mayflower-orchid: #ed93d7;
$mayflower-orchid-rgb: 237, 147, 215;
$mayflower-orchid-light: mix(#fff, $mayflower-orchid, 20%);
$mayflower-orchid-dark: mix(#000, $mayflower-orchid, 20%);
.element {
color: $mayflower-orchid;
box-shadow: 0 0 0 2px rgba($mayflower-orchid, 0.35);
}