Najbliższy nazwany kolor · #F9B7FD
#F9B7FD
Najbliższy nazwany kolor: Strawberry Buttercream
#F9B7FD (rgb(249 183 253), hsl(297 95% 85%), oklch(0.862 0.118 324.6)) jest najbliższy nazwanemu kolorowi Strawberry Buttercream. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#F9B7FD
oklch(0.862 0.118 324.6)
Konwersje koloru
- HEX
- #f9b7fd
- RGB
- rgb(249 183 253)
- HSL
- hsl(297 95% 85%)
- HWB
- hwb(297 72% 1%)
- OKLCH
- oklch(0.862 0.118 324.6)
- OKLab
- oklab(0.862 0.096 -0.068)
- CIE Lab
- lab(82.37 32.95 -25.05)
- LCH
- lch(82.37 41.39 322.8)
- CMYK
- cmyk(2% 28% 0% 1%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FABEFD
- FBC6FE
- FCCDFE
- FCD4FE
- FDDBFF
- FEE3FF
- FEEAFF
- FEF1FF
- FFF8FF
Odcienie ciemniejsze
- D99FDC
- B987BC
- 9A709D
- 7D5A7F
- 614562
- 463147
- 2C1E2D
- 150C16
- 030203
Tony
- ECB2F0
- E0ACE3
- D4A7D6
- C8A1CA
- BB9CBD
- AF96B1
- A391A4
- 988B98
- 8C868C
Harmonie kolorów
Komplementarna +180°
- F9B7FD
Strawberry Buttercream
- A1E6A1
≈ Grape Green
Analogowa -30° +30°
- F9B7FD
Strawberry Buttercream
- D4C9FF
≈ Innocent Snowdrop
- FFBBD5
≈ Cotton Candy
Triada +120° +240°
- F9B7FD
Strawberry Buttercream
- F6CC72
≈ Naked Noodle
- 61E8F6
≈ Shimmering Expanse Cyan
Komplementarna rozszczepiona +150° +210°
- F9B7FD
Strawberry Buttercream
- D0DB7E
≈ Fresh Pear
- 73EBCD
≈ Tiffany Blue
Tetrada +90° +180° +270°
- F9B7FD
Strawberry Buttercream
- FFC39C
≈ Esprit Peach
- A1E6A1
≈ Grape Green
- 9EDBFF
≈ Shiva Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.58:1 · APCA Lc 27
Ag
AAANa czerni
WCAG 13.21:1 · APCA Lc 76
Najlepszy kolor tekstu: #000000
WCAG 13.21:1 (AAA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--strawberry-buttercream: #f9b7fd;
--strawberry-buttercream-rgb: 249 183 253;
--strawberry-buttercream-oklch: oklch(0.862 0.118 324.6);
}
.element {
color: var(--strawberry-buttercream);
background-color: hsl(297 95% 85%);
border-color: oklch(0.862 0.118 324.6);
}Tailwind CSS v4
@theme {
--color-strawberry-buttercream: #f9b7fd;
--color-strawberry-buttercream-50: #ffeaff;
--color-strawberry-buttercream-100: #fedbfd;
--color-strawberry-buttercream-200: #f0c3ef;
--color-strawberry-buttercream-300: #d8a2d7;
--color-strawberry-buttercream-400: #c186c5;
--color-strawberry-buttercream-500: #ac69b1;
--color-strawberry-buttercream-600: #925996;
--color-strawberry-buttercream-700: #754778;
--color-strawberry-buttercream-800: #55335a;
--color-strawberry-buttercream-900: #3c233f;
--color-strawberry-buttercream-950: #251228;
}SCSS
$strawberry-buttercream: #f9b7fd;
$strawberry-buttercream-rgb: 249, 183, 253;
$strawberry-buttercream-light: mix(#fff, $strawberry-buttercream, 20%);
$strawberry-buttercream-dark: mix(#000, $strawberry-buttercream, 20%);
.element {
color: $strawberry-buttercream;
box-shadow: 0 0 0 2px rgba($strawberry-buttercream, 0.35);
}