Named color · #F6909D
Pink Geranium
Pink Geranium is #F6909D: rgb(246 144 157), hsl(352 85% 76%), oklch(0.764 0.124 12.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Pink Geranium color name →
#F6909D
oklch(0.764 0.124 12.2)
Color conversions
- HEX
- #f6909d
- RGB
- rgb(246 144 157)
- HSL
- hsl(352 85% 76%)
- HWB
- hwb(352 56% 4%)
- OKLCH
- oklch(0.764 0.124 12.2)
- OKLab
- oklab(0.764 0.121 0.026)
- CIE Lab
- lab(71.24 40.49 10.81)
- LCH
- lch(71.24 41.91 14.9)
- CMYK
- cmyk(0% 41% 36% 4%)
Tints · Shades · Tones
Tints
- F89BA6
- FAA7B0
- FCB2BA
- FDBDC3
- FEC8CD
- FFD3D7
- FFDEE1
- FFE9EB
- FFF4F5
Shades
- D67D88
- B76A73
- 98575F
- 7B454C
- 5F343A
- 452428
- 2C1518
- 150709
- 030101
Tones
- EA8F9A
- DF8E97
- D38C94
- C78B91
- BC8A8E
- B0888C
- A48689
- 988486
- 8C8283
Color harmonies
Complementary +180°
- F6909D
Pink Geranium
- 2ACBC7
≈ Mermaid Net
Analogous -30° +30°
- F6909D
Pink Geranium
- E892C8
≈ Crepe Myrtle
- F49772
≈ Orange Pecan
Triadic +120° +240°
- F6909D
Pink Geranium
- 94C36E
≈ Pistachio
- 76B7FF
≈ French Sky Blue
Split-complementary +150° +210°
- F6909D
Pink Geranium
- 5ECB9A
≈ Vegetation
- 40C3EB
≈ Clean Pool
Tetradic +90° +180° +270°
- F6909D
Pink Geranium
- C2B54F
≈ Parachute
- 2ACBC7
≈ Mermaid Net
- A6A8FF
≈ Shy Moment
Contrast & accessibility
Ag
FailOn white
WCAG 2.23:1 · APCA Lc 44
Ag
AAAOn black
WCAG 9.39:1 · APCA Lc 58
Best text color: #000000
WCAG 9.39:1 (AAA) · APCA Lc 58
Contrast pairs
Code snippets
CSS
:root {
--pink-geranium: #f6909d;
--pink-geranium-rgb: 246 144 157;
--pink-geranium-oklch: oklch(0.764 0.124 12.2);
}
.element {
color: var(--pink-geranium);
background-color: hsl(352 85% 76%);
border-color: oklch(0.764 0.124 12.2);
}Tailwind CSS v4
@theme {
--color-pink-geranium: #f6909d;
--color-pink-geranium-50: #ffe7ea;
--color-pink-geranium-100: #ffd8db;
--color-pink-geranium-200: #ffbfc4;
--color-pink-geranium-300: #f09da4;
--color-pink-geranium-400: #dd7e8b;
--color-pink-geranium-500: #ca5f70;
--color-pink-geranium-600: #ab515f;
--color-pink-geranium-700: #89414c;
--color-pink-geranium-800: #662e38;
--color-pink-geranium-900: #481f26;
--color-pink-geranium-950: #2e0f15;
}SCSS
$pink-geranium: #f6909d;
$pink-geranium-rgb: 246, 144, 157;
$pink-geranium-light: mix(#fff, $pink-geranium, 20%);
$pink-geranium-dark: mix(#000, $pink-geranium, 20%);
.element {
color: $pink-geranium;
box-shadow: 0 0 0 2px rgba($pink-geranium, 0.35);
}