Benannte Farbe · #F5C1D5
Cherry Blossom
Cherry Blossom ist #F5C1D5: rgb(245 193 213), hsl(337 72% 86%), oklch(0.863 0.065 353.6). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Pink mean? → · Cherry Blossom color name →
#F5C1D5
oklch(0.863 0.065 353.6)
Farbumrechnungen
- HEX
- #f5c1d5
- RGB
- rgb(245 193 213)
- HSL
- hsl(337 72% 86%)
- HWB
- hwb(337 76% 4%)
- OKLCH
- oklch(0.863 0.065 353.6)
- OKLab
- oklab(0.863 0.064 -0.007)
- CIE Lab
- lab(83.22 21.43 -2.53)
- LCH
- lch(83.22 21.58 353.3)
- CMYK
- cmyk(0% 21% 13% 4%)
Tints · Shades · Tones
Tints
- F6C7D9
- F8CDDD
- F9D4E1
- FADAE6
- FBE0EA
- FCE6EE
- FDECF2
- FEF3F6
- FEF9FB
Shades
- D5A7B9
- B68F9E
- 987783
- 7B5F6A
- 5F4951
- 44343A
- 2B2024
- 150E10
- 030202
Tones
- E9BACC
- DDB4C3
- D1ADBB
- C5A7B2
- B9A0AA
- AE9AA1
- A29399
- 978D90
- 8B8688
Farbharmonien
Komplementär +180°
- F5C1D5
Cherry Blossom
- A6E0CE
≈ Meristem
Analog -30° +30°
- F5C1D5
Cherry Blossom
- E7C4EA
≈ Prom Corsage
- FAC2BE
≈ Sugarcane Dahlia
Triadisch +120° +240°
- F5C1D5
Cherry Blossom
- D1D7A7
≈ White Jade
- A8DAF6
≈ Endless Horizon
Geteilt komplementär +150° +210°
- F5C1D5
Cherry Blossom
- B9DDB7
≈ A Mann’s Mint
- 9FDFE5
≈ Charlotte
Tetradisch +90° +180° +270°
- F5C1D5
Cherry Blossom
- E6CFA2
≈ Lucent Yellow
- A6E0CE
≈ Meristem
- BCD2FD
≈ Ice Cold Stare
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.55:1 · APCA Lc 26
Ag
AAAAuf Schwarz
WCAG 13.47:1 · APCA Lc 77
Beste Textfarbe: #000000
WCAG 13.47:1 (AAA) · APCA Lc 77
Contrast pairs
Code-Snippets
CSS
:root {
--cherry-blossom: #f5c1d5;
--cherry-blossom-rgb: 245 193 213;
--cherry-blossom-oklch: oklch(0.863 0.065 353.6);
}
.element {
color: var(--cherry-blossom);
background-color: hsl(337 72% 86%);
border-color: oklch(0.863 0.065 353.6);
}Tailwind CSS v4
@theme {
--color-cherry-blossom: #f5c1d5;
--color-cherry-blossom-50: #ffeef6;
--color-cherry-blossom-100: #fbdfe9;
--color-cherry-blossom-200: #ecc9d5;
--color-cherry-blossom-300: #d3aab9;
--color-cherry-blossom-400: #be8fa1;
--color-cherry-blossom-500: #a97489;
--color-cherry-blossom-600: #8e6374;
--color-cherry-blossom-700: #724f5d;
--color-cherry-blossom-800: #543945;
--color-cherry-blossom-900: #3b2730;
--color-cherry-blossom-950: #25151c;
}SCSS
$cherry-blossom: #f5c1d5;
$cherry-blossom-rgb: 245, 193, 213;
$cherry-blossom-light: mix(#fff, $cherry-blossom, 20%);
$cherry-blossom-dark: mix(#000, $cherry-blossom, 20%);
.element {
color: $cherry-blossom;
box-shadow: 0 0 0 2px rgba($cherry-blossom, 0.35);
}