Benoemde kleur · #F7D5DA
Petal Bloom
Petal Bloom is #F7D5DA: rgb(247 213 218), hsl(351 68% 90%), oklch(0.903 0.038 7.9). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Pink mean? → · Petal Bloom color name →
#F7D5DA
oklch(0.903 0.038 7.9)
Kleurconversies
- HEX
- #f7d5da
- RGB
- rgb(247 213 218)
- HSL
- hsl(351 68% 90%)
- HWB
- hwb(351 84% 3%)
- OKLCH
- oklch(0.903 0.038 7.9)
- OKLab
- oklab(0.903 0.038 0.005)
- CIE Lab
- lab(88.28 12.82 2.14)
- LCH
- lch(88.28 13 9.5)
- CMYK
- cmyk(0% 14% 12% 3%)
Tinten · Schaduwen · Tonen
Tinten
- F8D9DE
- F9DDE1
- FAE2E5
- FBE6E9
- FBEAEC
- FCEEF0
- FDF2F4
- FEF7F8
- FEFBFB
Schaduwen
- D7B9BD
- B79EA2
- 998387
- 7C6A6C
- 605154
- 453A3C
- 2C2425
- 151011
- 030202
Tonen
- EBCCD1
- DEC3C7
- D2BBBE
- C6B2B5
- BAAAAC
- AEA1A3
- A2999A
- 979091
- 8B8889
Kleurharmonieën
Complementair +180°
- F7D5DA
Petal Bloom
- C3E8E3
≈ Pool Party
Analoog -30° +30°
- F7D5DA
Petal Bloom
- F1D6E8
≈ All Made Up
- F7D7CD
≈ Strawberry Whip
Triadisch +120° +240°
- F7D5DA
Petal Bloom
- D8E4C9
≈ Lacewing
- CCE2F8
≈ Salty Ice
Gesplitst complementair +150° +210°
- F7D5DA
Petal Bloom
- CBE7D5
≈ Peppermint Patty
- C4E6F0
≈ Sapphireberry
Tetradisch +90° +180° +270°
- F7D5DA
Petal Bloom
- E5E0C3
≈ Horseradish
- C3E8E3
≈ Pool Party
- D8DDF9
≈ Nostalgia Perfume
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.35:1 · APCA Lc 17
Ag
AAAOp zwart
WCAG 15.48:1 · APCA Lc 86
Beste tekstkleur: #000000
WCAG 15.48:1 (AAA) · APCA Lc 86
Contrast pairs
Codefragmenten
CSS
:root {
--petal-bloom: #f7d5da;
--petal-bloom-rgb: 247 213 218;
--petal-bloom-oklch: oklch(0.903 0.038 7.9);
}
.element {
color: var(--petal-bloom);
background-color: hsl(351 68% 90%);
border-color: oklch(0.903 0.038 7.9);
}Tailwind CSS v4
@theme {
--color-petal-bloom: #f7d5da;
--color-petal-bloom-50: #fff1f2;
--color-petal-bloom-100: #f4e3e5;
--color-petal-bloom-200: #e4ced0;
--color-petal-bloom-300: #cab0b3;
--color-petal-bloom-400: #b4959a;
--color-petal-bloom-500: #9e7c81;
--color-petal-bloom-600: #85696d;
--color-petal-bloom-700: #6b5457;
--color-petal-bloom-800: #4f3d40;
--color-petal-bloom-900: #372a2c;
--color-petal-bloom-950: #211719;
}SCSS
$petal-bloom: #f7d5da;
$petal-bloom-rgb: 247, 213, 218;
$petal-bloom-light: mix(#fff, $petal-bloom, 20%);
$petal-bloom-dark: mix(#000, $petal-bloom, 20%);
.element {
color: $petal-bloom;
box-shadow: 0 0 0 2px rgba($petal-bloom, 0.35);
}