Benoemde kleur · #F2A9BA
Pink Blessing
Pink Blessing is #F2A9BA: rgb(242 169 186), hsl(346 74% 81%), oklch(0.809 0.088 3.9). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Pink mean? → · Pink Blessing color name →
#F2A9BA
oklch(0.809 0.088 3.9)
Kleurconversies
- HEX
- #f2a9ba
- RGB
- rgb(242 169 186)
- HSL
- hsl(346 74% 81%)
- HWB
- hwb(346 66% 5%)
- OKLCH
- oklch(0.809 0.088 3.9)
- OKLab
- oklab(0.809 0.088 0.006)
- CIE Lab
- lab(76.78 29.34 2.66)
- LCH
- lch(76.78 29.46 5.2)
- CMYK
- cmyk(0% 30% 23% 5%)
Tinten · Schaduwen · Tonen
Tinten
- F4B2C1
- F6BAC7
- F7C3CE
- F9CBD5
- FAD4DC
- FCDDE3
- FDE5EA
- FEEEF1
- FEF6F8
Schaduwen
- D292A1
- B47C89
- 966772
- 79535C
- 5E3F46
- 432C32
- 2B1B1E
- 140A0D
- 030102
Tonen
- E6A5B4
- DBA1AE
- CF9DA8
- C499A2
- B9959D
- AD9197
- A28D91
- 97888B
- 8B8486
Kleurharmonieën
Complementair +180°
- F2A9BA
Pink Blessing
- 7AD4C7
≈ Shore
Analoog -30° +30°
- F2A9BA
Pink Blessing
- E4ACD8
≈ Pink Plunge
- F4AC9B
≈ Rosy Outlook
Triadisch +120° +240°
- F2A9BA
Pink Blessing
- B5CB8B
≈ Marsh Fern
- 8FC7F6
≈ Sail to the Sea
Gesplitst complementair +150° +210°
- F2A9BA
Pink Blessing
- 93D2A7
≈ Low Tide
- 79D0E3
≈ Summer Splash
Tetradisch +90° +180° +270°
- F2A9BA
Pink Blessing
- D3C07E
≈ Winter Hazel
- 7AD4C7
≈ Shore
- AEBDFA
≈ Pastel Blue
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.88:1 · APCA Lc 36
Ag
AAAOp zwart
WCAG 11.15:1 · APCA Lc 67
Beste tekstkleur: #000000
WCAG 11.15:1 (AAA) · APCA Lc 67
Contrast pairs
Codefragmenten
CSS
:root {
--pink-blessing: #f2a9ba;
--pink-blessing-rgb: 242 169 186;
--pink-blessing-oklch: oklch(0.809 0.088 3.9);
}
.element {
color: var(--pink-blessing);
background-color: hsl(346 74% 81%);
border-color: oklch(0.809 0.088 3.9);
}Tailwind CSS v4
@theme {
--color-pink-blessing: #f2a9ba;
--color-pink-blessing-50: #ffebf1;
--color-pink-blessing-100: #ffdce3;
--color-pink-blessing-200: #f7c5ce;
--color-pink-blessing-300: #e0a5b0;
--color-pink-blessing-400: #cb8998;
--color-pink-blessing-500: #b76c7f;
--color-pink-blessing-600: #9b5c6c;
--color-pink-blessing-700: #7c4956;
--color-pink-blessing-800: #5c3540;
--color-pink-blessing-900: #40242c;
--color-pink-blessing-950: #291319;
}SCSS
$pink-blessing: #f2a9ba;
$pink-blessing-rgb: 242, 169, 186;
$pink-blessing-light: mix(#fff, $pink-blessing, 20%);
$pink-blessing-dark: mix(#000, $pink-blessing, 20%);
.element {
color: $pink-blessing;
box-shadow: 0 0 0 2px rgba($pink-blessing, 0.35);
}