Benannte Farbe · #F7C5D1
Sullivan’s Heart
Sullivan’s Heart ist #F7C5D1: rgb(247 197 209), hsl(346 76% 87%), oklch(0.871 0.059 2.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Pink mean? → · Sullivan’s Heart color name →
#F7C5D1
oklch(0.871 0.059 2.4)
Farbumrechnungen
- HEX
- #f7c5d1
- RGB
- rgb(247 197 209)
- HSL
- hsl(346 76% 87%)
- HWB
- hwb(346 77% 3%)
- OKLCH
- oklch(0.871 0.059 2.4)
- OKLab
- oklab(0.871 0.059 0.002)
- CIE Lab
- lab(84.27 19.69 1.14)
- LCH
- lch(84.27 19.72 3.3)
- CMYK
- cmyk(0% 20% 15% 3%)
Tints · Shades · Tones
Tints
- F8CBD6
- F9D1DA
- FAD6DF
- FBDCE3
- FCE2E8
- FDE8EC
- FDEEF1
- FEF3F6
- FFF9FA
Shades
- D7ABB5
- B7929B
- 997981
- 7C6168
- 604B50
- 453539
- 2C2123
- 150E10
- 030202
Tones
- EBBEC9
- DEB7C0
- D2B0B8
- C6A9B0
- BAA2A8
- AE9BA0
- A39498
- 978E90
- 8B8788
Farbharmonien
Komplementär +180°
- F7C5D1
Sullivan’s Heart
- AAE2D7
≈ Capri Water Blue
Analog -30° +30°
- F7C5D1
Sullivan’s Heart
- EDC7E6
≈ Venetian Rose
- F9C7BC
≈ Sherbet Fruit
Triadisch +120° +240°
- F7C5D1
Sullivan’s Heart
- CDDBB1
≈ Chameleon
- B3DAF9
≈ Endless Horizon
Geteilt komplementär +150° +210°
- F7C5D1
Sullivan’s Heart
- B8E0C2
≈ Lattice Work
- A8DFEB
≈ Quiet Nook
Tetradisch +90° +180° +270°
- F7C5D1
Sullivan’s Heart
- E2D4A9
≈ Meadow Dew
- AAE2D7
≈ Capri Water Blue
- C7D3FC
≈ Pale Phthalo Blue
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.51:1 · APCA Lc 24
Ag
AAAAuf Schwarz
WCAG 13.86:1 · APCA Lc 79
Beste Textfarbe: #000000
WCAG 13.86:1 (AAA) · APCA Lc 79
Contrast pairs
Code-Snippets
CSS
:root {
--sullivan-s-heart: #f7c5d1;
--sullivan-s-heart-rgb: 247 197 209;
--sullivan-s-heart-oklch: oklch(0.871 0.059 2.4);
}
.element {
color: var(--sullivan-s-heart);
background-color: hsl(346 76% 87%);
border-color: oklch(0.871 0.059 2.4);
}Tailwind CSS v4
@theme {
--color-sullivan-s-heart: #f7c5d1;
--color-sullivan-s-heart-50: #ffeff3;
--color-sullivan-s-heart-100: #fae0e5;
--color-sullivan-s-heart-200: #ebcad1;
--color-sullivan-s-heart-300: #d3abb4;
--color-sullivan-s-heart-400: #bd909b;
--color-sullivan-s-heart-500: #a87683;
--color-sullivan-s-heart-600: #8e646f;
--color-sullivan-s-heart-700: #725058;
--color-sullivan-s-heart-800: #543a41;
--color-sullivan-s-heart-900: #3a282d;
--color-sullivan-s-heart-950: #24161a;
}SCSS
$sullivan-s-heart: #f7c5d1;
$sullivan-s-heart-rgb: 247, 197, 209;
$sullivan-s-heart-light: mix(#fff, $sullivan-s-heart, 20%);
$sullivan-s-heart-dark: mix(#000, $sullivan-s-heart, 20%);
.element {
color: $sullivan-s-heart;
box-shadow: 0 0 0 2px rgba($sullivan-s-heart, 0.35);
}