Benannte Farbe · #F9A7A4
Pouty Pink
Pouty Pink ist #F9A7A4: rgb(249 167 164), hsl(2 88% 81%), oklch(0.808 0.098 21.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Pink mean? → · Pouty Pink color name →
#F9A7A4
oklch(0.808 0.098 21.8)
Farbumrechnungen
- HEX
- #f9a7a4
- RGB
- rgb(249 167 164)
- HSL
- hsl(2 88% 81%)
- HWB
- hwb(2 64% 2%)
- OKLCH
- oklch(0.808 0.098 21.8)
- OKLab
- oklab(0.808 0.091 0.036)
- CIE Lab
- lab(76.7 30.84 14.61)
- LCH
- lch(76.7 34.12 25.4)
- CMYK
- cmyk(0% 33% 34% 2%)
Tints · Shades · Tones
Tints
- FAB0AD
- FCB9B6
- FDC2BF
- FECAC8
- FED3D1
- FFDCDA
- FFE5E3
- FFEEEC
- FFF6F6
Shades
- D9918E
- B97B79
- 9A6664
- 7D5250
- 613E3D
- 462C2B
- 2C1A1A
- 150A0A
- 030101
Tones
- EDA3A0
- E1A09D
- D49C99
- C89896
- BC9492
- B0908E
- A48C8B
- 988887
- 8C8484
Farbharmonien
Komplementär +180°
- F9A7A4
Pouty Pink
- 6AD3DB
≈ Throat Chakra
Analog -30° +30°
- F9A7A4
Pouty Pink
- F2A6C7
≈ Elastic Pink
- F3AE85
≈ Peach Quartz
Triadisch +120° +240°
- F9A7A4
Pouty Pink
- 9CD096
≈ Elfin Games
- 9EC1FF
≈ Pastel Blue
Geteilt komplementär +150° +210°
- F9A7A4
Pouty Pink
- 79D5B9
≈ Green Parakeet
- 7BCCF4
≈ Nevermind Nirvana
Tetradisch +90° +180° +270°
- F9A7A4
Pouty Pink
- C2C77C
≈ Soda Pop
- 6AD3DB
≈ Throat Chakra
- C1B5FB
≈ Greyish Lavender
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.89:1 · APCA Lc 36
Ag
AAAAuf Schwarz
WCAG 11.09:1 · APCA Lc 67
Beste Textfarbe: #000000
WCAG 11.09:1 (AAA) · APCA Lc 67
Contrast pairs
Code-Snippets
CSS
:root {
--pouty-pink: #f9a7a4;
--pouty-pink-rgb: 249 167 164;
--pouty-pink-oklch: oklch(0.808 0.098 21.8);
}
.element {
color: var(--pouty-pink);
background-color: hsl(2 88% 81%);
border-color: oklch(0.808 0.098 21.8);
}Tailwind CSS v4
@theme {
--color-pouty-pink: #f9a7a4;
--color-pouty-pink-50: #ffebe8;
--color-pouty-pink-100: #ffdcd8;
--color-pouty-pink-200: #fcc5c0;
--color-pouty-pink-300: #e5a49f;
--color-pouty-pink-400: #d28785;
--color-pouty-pink-500: #be6a69;
--color-pouty-pink-600: #a15a59;
--color-pouty-pink-700: #814847;
--color-pouty-pink-800: #603434;
--color-pouty-pink-900: #432324;
--color-pouty-pink-950: #2b1213;
}SCSS
$pouty-pink: #f9a7a4;
$pouty-pink-rgb: 249, 167, 164;
$pouty-pink-light: mix(#fff, $pouty-pink, 20%);
$pouty-pink-dark: mix(#000, $pouty-pink, 20%);
.element {
color: $pouty-pink;
box-shadow: 0 0 0 2px rgba($pouty-pink, 0.35);
}