Benoemde kleur · #F5D6CC
Creole Pink
Creole Pink is #F5D6CC: rgb(245 214 204), hsl(15 67% 88%), oklch(0.899 0.037 38.7). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Pink mean? → · Creole Pink color name →
#F5D6CC
oklch(0.899 0.037 38.7)
Kleurconversies
- HEX
- #f5d6cc
- RGB
- rgb(245 214 204)
- HSL
- hsl(15 67% 88%)
- HWB
- hwb(15 80% 4%)
- OKLCH
- oklch(0.899 0.037 38.7)
- OKLab
- oklab(0.899 0.029 0.023)
- CIE Lab
- lab(88.06 9.98 9.13)
- LCH
- lch(88.06 13.53 42.5)
- CMYK
- cmyk(0% 13% 17% 4%)
Tinten · Schaduwen · Tonen
Tinten
- F6DAD1
- F7DED6
- F8E2DB
- F9E6E0
- FAEAE5
- FBEFEA
- FCF3F0
- FDF7F5
- FEFBFA
Schaduwen
- D5BAB1
- B69E97
- 98847E
- 7B6A65
- 5F524E
- 443B37
- 2B2522
- 15100F
- 030202
Tonen
- E9CDC4
- DDC4BC
- D1BBB5
- C5B3AD
- B9AAA5
- ADA29E
- A29996
- 96918F
- 8B8887
Kleurharmonieën
Complementair +180°
- F5D6CC
Creole Pink
- C3E4EF
≈ Skylark
Analoog -30° +30°
- F5D6CC
Creole Pink
- F5D4D9
≈ Petal Bloom
- EFDAC4
≈ Figure Stone
Triadisch +120° +240°
- F5D6CC
Creole Pink
- CAE6D5
≈ Mint Whisper
- D8DCF7
≈ Nostalgia Perfume
Gesplitst complementair +150° +210°
- F5D6CC
Creole Pink
- C3E6E3
≈ Swan Lake
- CBE1F6
≈ First Shade of Blue
Tetradisch +90° +180° +270°
- F5D6CC
Creole Pink
- D6E3C9
≈ Lacewing
- C3E4EF
≈ Skylark
- E5D8F1
≈ Pouty Purple
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 1.36:1 · APCA Lc 18
Ag
AAAOp zwart
WCAG 15.37:1 · APCA Lc 86
Beste tekstkleur: #000000
WCAG 15.37:1 (AAA) · APCA Lc 86
Contrast pairs
Codefragmenten
CSS
:root {
--creole-pink: #f5d6cc;
--creole-pink-rgb: 245 214 204;
--creole-pink-oklch: oklch(0.899 0.037 38.7);
}
.element {
color: var(--creole-pink);
background-color: hsl(15 67% 88%);
border-color: oklch(0.899 0.037 38.7);
}Tailwind CSS v4
@theme {
--color-creole-pink: #f5d6cc;
--color-creole-pink-50: #fff2ed;
--color-creole-pink-100: #f4e4df;
--color-creole-pink-200: #e3cfc8;
--color-creole-pink-300: #c9b2a9;
--color-creole-pink-400: #b3978f;
--color-creole-pink-500: #9d7e74;
--color-creole-pink-600: #856b63;
--color-creole-pink-700: #6a554f;
--color-creole-pink-800: #4e3e39;
--color-creole-pink-900: #372b27;
--color-creole-pink-950: #211815;
}SCSS
$creole-pink: #f5d6cc;
$creole-pink-rgb: 245, 214, 204;
$creole-pink-light: mix(#fff, $creole-pink, 20%);
$creole-pink-dark: mix(#000, $creole-pink, 20%);
.element {
color: $creole-pink;
box-shadow: 0 0 0 2px rgba($creole-pink, 0.35);
}