Nazwany kolor · #F092D6
Bubblegum Kisses
Bubblegum Kisses to #F092D6: rgb(240 146 214), hsl(317 76% 76%), oklch(0.778 0.14 337.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Bubblegum Kisses color name →
#F092D6
oklch(0.778 0.14 337.9)
Konwersje koloru
- HEX
- #f092d6
- RGB
- rgb(240 146 214)
- HSL
- hsl(317 76% 76%)
- HWB
- hwb(317 57% 6%)
- OKLCH
- oklch(0.778 0.14 337.9)
- OKLab
- oklab(0.778 0.13 -0.053)
- CIE Lab
- lab(72.28 43.23 -19.3)
- LCH
- lch(72.28 47.34 335.9)
- CMYK
- cmyk(0% 39% 11% 6%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F29DDA
- F5A8DE
- F7B3E3
- F9BEE7
- FAC9EB
- FCD4EF
- FDDFF3
- FEEAF7
- FFF4FB
Odcienie ciemniejsze
- D17EBA
- B26B9E
- 955884
- 78466A
- 5D3552
- 43253B
- 2A1625
- 140810
- 030102
Tony
- E591CD
- DA8FC4
- CF8EBC
- C38CB3
- B88BAA
- AD89A2
- A28799
- 978591
- 8B8288
Harmonie kolorów
Komplementarna +180°
- F092D6
Bubblegum Kisses
- 5AD294
≈ Van Gogh Green
Analogowa -30° +30°
- F092D6
Bubblegum Kisses
- D09DFC
≈ Plasma Trail
- FF90A6
≈ Salmon Pink
Triada +120° +240°
- F092D6
Bubblegum Kisses
- CFB73B
≈ Yellowstone
- 00CBF2
≈ Picnic Day Sky
Komplementarna rozszczepiona +150° +210°
- F092D6
Bubblegum Kisses
- 9DC860
≈ Spring Lime
- 00D2C7
≈ Turquoise Panic
Tetrada +90° +180° +270°
- F092D6
Bubblegum Kisses
- F1A447
≈ O’Brien Orange
- 5AD294
≈ Van Gogh Green
- 76BDFF
≈ Cooler Than Ever
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.14:1 · APCA Lc 42
Ag
AAANa czerni
WCAG 9.78:1 · APCA Lc 60
Najlepszy kolor tekstu: #000000
WCAG 9.78:1 (AAA) · APCA Lc 60
Contrast pairs
Fragmenty kodu
CSS
:root {
--bubblegum-kisses: #f092d6;
--bubblegum-kisses-rgb: 240 146 214;
--bubblegum-kisses-oklch: oklch(0.778 0.14 337.9);
}
.element {
color: var(--bubblegum-kisses);
background-color: hsl(317 76% 76%);
border-color: oklch(0.778 0.14 337.9);
}Tailwind CSS v4
@theme {
--color-bubblegum-kisses: #f092d6;
--color-bubblegum-kisses-50: #ffe6ff;
--color-bubblegum-kisses-100: #ffd6f7;
--color-bubblegum-kisses-200: #febde7;
--color-bubblegum-kisses-300: #e89bce;
--color-bubblegum-kisses-400: #d37cbb;
--color-bubblegum-kisses-500: #bf5ca6;
--color-bubblegum-kisses-600: #a24f8c;
--color-bubblegum-kisses-700: #823f71;
--color-bubblegum-kisses-800: #5f2d55;
--color-bubblegum-kisses-900: #431f3b;
--color-bubblegum-kisses-950: #2b0e25;
}SCSS
$bubblegum-kisses: #f092d6;
$bubblegum-kisses-rgb: 240, 146, 214;
$bubblegum-kisses-light: mix(#fff, $bubblegum-kisses, 20%);
$bubblegum-kisses-dark: mix(#000, $bubblegum-kisses, 20%);
.element {
color: $bubblegum-kisses;
box-shadow: 0 0 0 2px rgba($bubblegum-kisses, 0.35);
}