Nazwany kolor · #F8E0E7
Pork Belly
Pork Belly to #F8E0E7: rgb(248 224 231), hsl(343 63% 93%), oklch(0.928 0.028 358). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Pork Belly color name →
#F8E0E7
oklch(0.928 0.028 358)
Konwersje koloru
- HEX
- #f8e0e7
- RGB
- rgb(248 224 231)
- HSL
- hsl(343 63% 93%)
- HWB
- hwb(343 88% 3%)
- OKLCH
- oklch(0.928 0.028 358)
- OKLab
- oklab(0.928 0.028 -0.001)
- CIE Lab
- lab(91.31 9.37 -0.27)
- LCH
- lch(91.31 9.38 358.3)
- CMYK
- cmyk(0% 10% 7% 3%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F9E3E9
- FAE6EC
- FAE9EE
- FBECF1
- FCEFF3
- FCF3F5
- FDF6F8
- FEF9FA
- FEFCFD
Odcienie ciemniejsze
- D8C3C9
- B8A6AB
- 9A8A8F
- 7C7073
- 605659
- 453E40
- 2C2728
- 151213
- 030203
Tony
- EBD6DC
- DFCCD2
- D3C2C7
- C6B8BC
- BAAFB2
- AEA5A8
- A39C9E
- 979294
- 8B898A
Harmonie kolorów
Komplementarna +180°
- F8E0E7
Pork Belly
- D5EEE7
≈ Cascade
Analogowa -30° +30°
- F8E0E7
Pork Belly
- F2E1F1
≈ Sheer Lavender
- FAE1DD
≈ Peachy Ethereal
Triada +120° +240°
- F8E0E7
Pork Belly
- E5EAD6
≈ Enlightened Lime
- D7EAF8
≈ Celestial Cathedral
Komplementarna rozszczepiona +150° +210°
- F8E0E7
Pork Belly
- DBEDDD
≈ Cottage Green
- D3EDF1
≈ Sparkling River
Tetrada +90° +180° +270°
- F8E0E7
Pork Belly
- EFE7D3
≈ Grow
- D5EEE7
≈ Cascade
- DFE7FB
≈ Lavender Mist
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.24:1 · APCA Lc 12
Ag
AAANa czerni
WCAG 16.80:1 · APCA Lc 92
Najlepszy kolor tekstu: #000000
WCAG 16.80:1 (AAA) · APCA Lc 92
Contrast pairs
Fragmenty kodu
CSS
:root {
--pork-belly: #f8e0e7;
--pork-belly-rgb: 248 224 231;
--pork-belly-oklch: oklch(0.928 0.028 358);
}
.element {
color: var(--pork-belly);
background-color: hsl(343 63% 93%);
border-color: oklch(0.928 0.028 358);
}Tailwind CSS v4
@theme {
--color-pork-belly: #f8e0e7;
--color-pork-belly-50: #fdf2f5;
--color-pork-belly-100: #f0e4e7;
--color-pork-belly-200: #dfd0d4;
--color-pork-belly-300: #c4b2b7;
--color-pork-belly-400: #ad989e;
--color-pork-belly-500: #967f86;
--color-pork-belly-600: #7f6b71;
--color-pork-belly-700: #66565b;
--color-pork-belly-800: #4b3f43;
--color-pork-belly-900: #342b2e;
--color-pork-belly-950: #1f181b;
}SCSS
$pork-belly: #f8e0e7;
$pork-belly-rgb: 248, 224, 231;
$pork-belly-light: mix(#fff, $pork-belly, 20%);
$pork-belly-dark: mix(#000, $pork-belly, 20%);
.element {
color: $pork-belly;
box-shadow: 0 0 0 2px rgba($pork-belly, 0.35);
}