Nächste benannte Farbe · #F1BCD1
#F1BCD1
Nächste benannte Farbe: Cherry Blossom
#F1BCD1 (rgb(241 188 209), hsl(336 65% 84%), oklch(0.849 0.066 353)) liegt am nächsten an der benannten Farbe Cherry Blossom. Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
#F1BCD1
oklch(0.849 0.066 353)
Farbumrechnungen
- HEX
- #f1bcd1
- RGB
- rgb(241 188 209)
- HSL
- hsl(336 65% 84%)
- HWB
- hwb(336 74% 5%)
- OKLCH
- oklch(0.849 0.066 353)
- OKLab
- oklab(0.849 0.066 -0.008)
- CIE Lab
- lab(81.56 22.01 -2.87)
- LCH
- lch(81.56 22.19 352.6)
- CMYK
- cmyk(0% 22% 13% 5%)
Tints · Shades · Tones
Tints
- F3C3D6
- F4C9DA
- F6D0DF
- F8D7E3
- F9DDE8
- FAE4EC
- FCEBF1
- FDF2F6
- FEF8FA
Shades
- D2A3B5
- B38B9B
- 957381
- 795D68
- 5D4750
- 433239
- 2B1F23
- 140D10
- 030202
Tones
- E5B6C9
- DAB0C0
- CEAAB8
- C3A4B0
- B89EA8
- AC98A0
- A19298
- 968C90
- 8B8688
Farbharmonien
Komplementär +180°
- F1BCD1
Cherry Blossom
- A1DCC9
≈ Tropical Freeze
Analog -30° +30°
- F1BCD1
Cherry Blossom
- E3BFE7
≈ Blackberry Yoghurt
- F6BDB9
≈ Rainbow
Triadisch +120° +240°
- F1BCD1
Cherry Blossom
- CDD2A1
≈ True to You
- A2D5F2
≈ Juzcar Blue
Geteilt komplementär +150° +210°
- F1BCD1
Cherry Blossom
- B5D9B2
≈ Bleached Spruce
- 99DBE0
≈ Exotic Escape
Tetradisch +90° +180° +270°
- F1BCD1
Cherry Blossom
- E3CA9C
≈ Frozen Fruit
- A1DCC9
≈ Tropical Freeze
- B7CEFA
≈ Ice Cold Stare
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.63:1 · APCA Lc 28
Ag
AAAAuf Schwarz
WCAG 12.85:1 · APCA Lc 75
Beste Textfarbe: #000000
WCAG 12.85:1 (AAA) · APCA Lc 75
Contrast pairs
Code-Snippets
CSS
:root {
--cherry-blossom: #f1bcd1;
--cherry-blossom-rgb: 241 188 209;
--cherry-blossom-oklch: oklch(0.849 0.066 353);
}
.element {
color: var(--cherry-blossom);
background-color: hsl(336 65% 84%);
border-color: oklch(0.849 0.066 353);
}Tailwind CSS v4
@theme {
--color-cherry-blossom: #f1bcd1;
--color-cherry-blossom-50: #ffeef6;
--color-cherry-blossom-100: #fbdfe9;
--color-cherry-blossom-200: #edc9d6;
--color-cherry-blossom-300: #d4aab9;
--color-cherry-blossom-400: #be8fa2;
--color-cherry-blossom-500: #a9748a;
--color-cherry-blossom-600: #8f6275;
--color-cherry-blossom-700: #734e5d;
--color-cherry-blossom-800: #543945;
--color-cherry-blossom-900: #3b2730;
--color-cherry-blossom-950: #25151c;
}SCSS
$cherry-blossom: #f1bcd1;
$cherry-blossom-rgb: 241, 188, 209;
$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);
}