Couleur nommée · #F2BDDF
Pink Heath
Pink Heath correspond à #F2BDDF : rgb(242 189 223), hsl(322 67% 85%), oklch(0.856 0.075 340.1). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Pink mean? → · Pink Heath color name →
#F2BDDF
oklch(0.856 0.075 340.1)
Conversions de couleur
- HEX
- #f2bddf
- RGB
- rgb(242 189 223)
- HSL
- hsl(322 67% 85%)
- HWB
- hwb(322 74% 5%)
- OKLCH
- oklch(0.856 0.075 340.1)
- OKLab
- oklab(0.856 0.07 -0.025)
- CIE Lab
- lab(82.22 23.58 -9.37)
- LCH
- lch(82.22 25.37 338.3)
- CMYK
- cmyk(0% 22% 8% 5%)
Teintes · Ombres · Tons
Teintes
- F4C4E2
- F5CAE5
- F7D1E9
- F8D7EC
- F9DEEF
- FBE5F2
- FCEBF5
- FDF2F9
- FEF8FC
Ombres
- D2A4C2
- B48CA5
- 96748A
- 795D6F
- 5E4756
- 43333D
- 2B1F27
- 140D12
- 030202
Tons
- E6B7D5
- DBB1CB
- CFABC2
- C3A4B8
- B89EAE
- AD98A5
- A1929C
- 968C92
- 8B8689
Harmonies de couleurs
Complémentaire +180°
- F2BDDF
Pink Heath
- A5DFBF
≈ Mountain Mint
Analogue -30° +30°
- F2BDDF
Pink Heath
- DFC3F5
≈ Neon Boneyard
- FCBCC4
≈ A Lot of Love
Triadique +120° +240°
- F2BDDF
Pink Heath
- DAD199
≈ Bongo Skin
- 97DCF2
≈ Sora Blue
Complémentaire divisée +150° +210°
- F2BDDF
Pink Heath
- BFDAA7
≈ Embroidered Silk
- 95E0DA
≈ Pale Beryl
Tétradique +90° +180° +270°
- F2BDDF
Pink Heath
- F0C89A
≈ Sheer Apricot
- A5DFBF
≈ Mountain Mint
- ABD4FF
≈ Malmö FF
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.60:1 · APCA Lc 27
Ag
AAASur noir
WCAG 13.12:1 · APCA Lc 76
Meilleure couleur de texte: #000000
WCAG 13.12:1 (AAA) · APCA Lc 76
Contrast pairs
Extraits de code
CSS
:root {
--pink-heath: #f2bddf;
--pink-heath-rgb: 242 189 223;
--pink-heath-oklch: oklch(0.856 0.075 340.1);
}
.element {
color: var(--pink-heath);
background-color: hsl(322 67% 85%);
border-color: oklch(0.856 0.075 340.1);
}Tailwind CSS v4
@theme {
--color-pink-heath: #f2bddf;
--color-pink-heath-50: #ffedfb;
--color-pink-heath-100: #fbdfef;
--color-pink-heath-200: #ecc8dd;
--color-pink-heath-300: #d3a9c2;
--color-pink-heath-400: #bd8dac;
--color-pink-heath-500: #a87296;
--color-pink-heath-600: #8e617f;
--color-pink-heath-700: #724e65;
--color-pink-heath-800: #54384b;
--color-pink-heath-900: #3a2634;
--color-pink-heath-950: #241520;
}SCSS
$pink-heath: #f2bddf;
$pink-heath-rgb: 242, 189, 223;
$pink-heath-light: mix(#fff, $pink-heath, 20%);
$pink-heath-dark: mix(#000, $pink-heath, 20%);
.element {
color: $pink-heath;
box-shadow: 0 0 0 2px rgba($pink-heath, 0.35);
}