Named color · #FFC0C6
Piglet
Piglet is #FFC0C6: rgb(255 192 198), hsl(354 100% 88%), oklch(0.866 0.073 12.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Piglet color name →
#FFC0C6
oklch(0.866 0.073 12.3)
Color conversions
- HEX
- #ffc0c6
- RGB
- rgb(255 192 198)
- HSL
- hsl(354 100% 88%)
- HWB
- hwb(354 75% 0%)
- OKLCH
- oklch(0.866 0.073 12.3)
- OKLab
- oklab(0.866 0.071 0.016)
- CIE Lab
- lab(83.68 23.91 6.27)
- LCH
- lch(83.68 24.72 14.7)
- CMYK
- cmyk(0% 25% 22% 0%)
Tints · Shades · Tones
Tints
- FFC6CC
- FFCDD1
- FFD3D7
- FFD9DD
- FFE0E2
- FFE6E8
- FFECEE
- FFF2F3
- FFF9F9
Shades
- DEA7AC
- BE8E92
- 9E767A
- 805F62
- 63494B
- 483435
- 2E2021
- 160E0E
- 030202
Tones
- F2BABF
- E5B3B8
- D8ADB0
- CBA6A9
- BEA0A2
- B2999B
- A59394
- 998D8E
- 8C8687
Color harmonies
Complementary +180°
- FFC0C6
Piglet
- 9AE3E0
≈ Aqua Fiesta
Analogous -30° +30°
- FFC0C6
Piglet
- F6C1E0
≈ Rosy Nectar
- FDC4AE
≈ Gadabout
Triadic +120° +240°
- FFC0C6
Piglet
- C1DEAD
≈ Bowling Green
- B4D7FF
≈ Malmö FF
Split-complementary +150° +210°
- FFC0C6
Piglet
- A8E3C5
≈ Reef Green
- 9EDEF6
≈ Non-Photo Blue
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.54:1 · APCA Lc 25
Ag
AAAOn black
WCAG 13.60:1 · APCA Lc 78
Best text color: #000000
WCAG 13.60:1 (AAA) · APCA Lc 78
Contrast pairs
Code snippets
CSS
:root {
--piglet: #ffc0c6;
--piglet-rgb: 255 192 198;
--piglet-oklch: oklch(0.866 0.073 12.3);
}
.element {
color: var(--piglet);
background-color: hsl(354 100% 88%);
border-color: oklch(0.866 0.073 12.3);
}Tailwind CSS v4
@theme {
--color-piglet: #ffc0c6;
--color-piglet-50: #ffedef;
--color-piglet-100: #ffdfe0;
--color-piglet-200: #f2c8cb;
--color-piglet-300: #daa9ac;
--color-piglet-400: #c58d93;
--color-piglet-500: #b17279;
--color-piglet-600: #956166;
--color-piglet-700: #784d52;
--color-piglet-800: #59383c;
--color-piglet-900: #3e2629;
--color-piglet-950: #271417;
}SCSS
$piglet: #ffc0c6;
$piglet-rgb: 255, 192, 198;
$piglet-light: mix(#fff, $piglet, 20%);
$piglet-dark: mix(#000, $piglet, 20%);
.element {
color: $piglet;
box-shadow: 0 0 0 2px rgba($piglet, 0.35);
}