Nazwany kolor · #F56F88
Pink Explosion
Pink Explosion to #F56F88: rgb(245 111 136), hsl(349 87% 70%), oklch(0.709 0.165 10.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Pink Explosion color name →
#F56F88
oklch(0.709 0.165 10.7)
Konwersje koloru
- HEX
- #f56f88
- RGB
- rgb(245 111 136)
- HSL
- hsl(349 87% 70%)
- HWB
- hwb(349 44% 4%)
- OKLCH
- oklch(0.709 0.165 10.7)
- OKLab
- oklab(0.709 0.162 0.031)
- CIE Lab
- lab(64.33 54.01 12.97)
- LCH
- lch(64.33 55.55 13.5)
- CMYK
- cmyk(0% 55% 44% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F87F93
- FB8E9F
- FD9DAA
- FFABB6
- FFB9C2
- FFC7CE
- FFD5DA
- FFE3E6
- FFF1F3
Odcienie ciemniejsze
- D56075
- B65163
- 984252
- 7B3441
- 5F2731
- 441A22
- 2B0E13
- 150406
- 030101
Tony
- EA7287
- DF7587
- D47786
- C87A85
- BD7B84
- B17D83
- A67E83
- 997F82
- 8D8081
Harmonie kolorów
Komplementarna +180°
- F56F88
Pink Explosion
- 00B9B3
≈ Jade Gravel
Analogowa -30° +30°
- F56F88
Pink Explosion
- E373C0
≈ Explicit Pink
- F47848
≈ Mandarin
Triada +120° +240°
- F56F88
Pink Explosion
- 7CB538
≈ Sparkling Apple
- 4AA5FF
≈ Xed
Komplementarna rozszczepiona +150° +210°
- F56F88
Pink Explosion
- 00BE7F
≈ Fennel Fiesta
- 00B3D9
≈ Blue Atoll
Tetrada +90° +180° +270°
- F56F88
Pink Explosion
- B6A200
≈ Snakebite Leather
- 00B9B3
≈ Jade Gravel
- 9193FF
≈ Periwinkle Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.79:1 · APCA Lc 53
Ag
AAANa czerni
WCAG 7.51:1 · APCA Lc 49
Najlepszy kolor tekstu: #000000
WCAG 7.51:1 (AAA) · APCA Lc 49
Contrast pairs
Fragmenty kodu
CSS
:root {
--pink-explosion: #f56f88;
--pink-explosion-rgb: 245 111 136;
--pink-explosion-oklch: oklch(0.709 0.165 10.7);
}
.element {
color: var(--pink-explosion);
background-color: hsl(349 87% 70%);
border-color: oklch(0.709 0.165 10.7);
}Tailwind CSS v4
@theme {
--color-pink-explosion: #f56f88;
--color-pink-explosion-50: #ffe3e8;
--color-pink-explosion-100: #ffd2d8;
--color-pink-explosion-200: #ffb7c0;
--color-pink-explosion-300: #ff92a0;
--color-pink-explosion-400: #ee7087;
--color-pink-explosion-500: #dc4a6b;
--color-pink-explosion-600: #ba405b;
--color-pink-explosion-700: #963349;
--color-pink-explosion-800: #6f2437;
--color-pink-explosion-900: #4e1825;
--color-pink-explosion-950: #340814;
}SCSS
$pink-explosion: #f56f88;
$pink-explosion-rgb: 245, 111, 136;
$pink-explosion-light: mix(#fff, $pink-explosion, 20%);
$pink-explosion-dark: mix(#000, $pink-explosion, 20%);
.element {
color: $pink-explosion;
box-shadow: 0 0 0 2px rgba($pink-explosion, 0.35);
}