Najbliższy nazwany kolor · #FFC2D4
#FFC2D4
Najbliższy nazwany kolor: Cherry Blossom
#FFC2D4 (rgb(255 194 212), hsl(342 100% 88%), oklch(0.874 0.073 359.3)) jest najbliższy nazwanemu kolorowi Cherry Blossom. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#FFC2D4
oklch(0.874 0.073 359.3)
Konwersje koloru
- HEX
- #ffc2d4
- RGB
- rgb(255 194 212)
- HSL
- hsl(342 100% 88%)
- HWB
- hwb(342 76% 0%)
- OKLCH
- oklch(0.874 0.073 359.3)
- OKLab
- oklab(0.874 0.073 -0.001)
- CIE Lab
- lab(84.44 24.43 -0.09)
- LCH
- lch(84.44 24.43 359.8)
- CMYK
- cmyk(0% 24% 17% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFC8D8
- FFCEDC
- FFD4E1
- FFDAE5
- FFE1E9
- FFE7EE
- FFEDF2
- FFF3F6
- FFF9FB
Odcienie ciemniejsze
- DEA8B8
- BE8F9D
- 9E7783
- 806069
- 634951
- 48343A
- 2E2024
- 160E10
- 030202
Tony
- F2BBCB
- E5B5C3
- D8AEBA
- CBA7B1
- BEA1A9
- B29AA1
- A59498
- 998D90
- 8C8688
Harmonie kolorów
Komplementarna +180°
- FFC2D4
Cherry Blossom
- A0E6D7
≈ Sea Glass Teal
Analogowa -30° +30°
- FFC2D4
Cherry Blossom
- F1C5ED
≈ Purple’s Baby Sister
- FFC6BC
≈ Your Pink
Triada +120° +240°
- FFC2D4
Cherry Blossom
- D0DDA7
≈ Lettuce Alone
- ACDDFF
≈ Droplet
Komplementarna rozszczepiona +150° +210°
- FFC2D4
Cherry Blossom
- B4E4BC
≈ Fringy Flower
- 9CE3F0
≈ Blizzard Blue
Tetrada +90° +180° +270°
- FFC2D4
Cherry Blossom
- E9D49E
≈ Hampton
- A0E6D7
≈ Sea Glass Teal
- C5D5FF
≈ Pale Phthalo Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.50:1 · APCA Lc 24
Ag
AAANa czerni
WCAG 13.91:1 · APCA Lc 79
Najlepszy kolor tekstu: #000000
WCAG 13.91:1 (AAA) · APCA Lc 79
Contrast pairs
Fragmenty kodu
CSS
:root {
--cherry-blossom: #ffc2d4;
--cherry-blossom-rgb: 255 194 212;
--cherry-blossom-oklch: oklch(0.874 0.073 359.3);
}
.element {
color: var(--cherry-blossom);
background-color: hsl(342 100% 88%);
border-color: oklch(0.874 0.073 359.3);
}Tailwind CSS v4
@theme {
--color-cherry-blossom: #ffc2d4;
--color-cherry-blossom-50: #ffedf4;
--color-cherry-blossom-100: #fedee6;
--color-cherry-blossom-200: #f0c8d2;
--color-cherry-blossom-300: #d8a8b5;
--color-cherry-blossom-400: #c38d9d;
--color-cherry-blossom-500: #ae7285;
--color-cherry-blossom-600: #936070;
--color-cherry-blossom-700: #764d5a;
--color-cherry-blossom-800: #573843;
--color-cherry-blossom-900: #3d262e;
--color-cherry-blossom-950: #26141b;
}SCSS
$cherry-blossom: #ffc2d4;
$cherry-blossom-rgb: 255, 194, 212;
$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);
}