Named color · #FF88BB
Cochonnet
Cochonnet is #FF88BB: rgb(255 136 187), hsl(334 100% 77%), oklch(0.772 0.154 354.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Cochonnet color name →
#FF88BB
oklch(0.772 0.154 354.2)
Color conversions
- HEX
- #ff88bb
- RGB
- rgb(255 136 187)
- HSL
- hsl(334 100% 77%)
- HWB
- hwb(334 53% 0%)
- OKLCH
- oklch(0.772 0.154 354.2)
- OKLab
- oklab(0.772 0.153 -0.015)
- CIE Lab
- lab(71.49 50.2 -5.3)
- LCH
- lch(71.49 50.48 354)
- CMYK
- cmyk(0% 47% 27% 0%)
Tints · Shades · Tones
Tints
- FF95C2
- FFA1C8
- FFADCF
- FFB9D6
- FFC5DD
- FFD1E3
- FFDCEA
- FFE8F1
- FFF3F8
Shades
- DE75A2
- BE638A
- 9E5273
- 80415C
- 633146
- 482232
- 2E131F
- 16060D
- 030102
Tones
- F388B5
- E688AF
- DA88A9
- CD87A3
- C1869D
- B48597
- A78491
- 9A838B
- 8D8286
Color harmonies
Complementary +180°
- FF88BB
Cochonnet
- 00D2AE
≈ Mint Leaf
Analogous -30° +30°
- FF88BB
Cochonnet
- E590EB
≈ Bright Lilac
- FF918A
≈ Prime Pink
Triadic +120° +240°
- FF88BB
Cochonnet
- B4BF38
≈ Spring Forward
- 46C2FF
≈ Shovel Knight
Split-complementary +150° +210°
- FF88BB
Cochonnet
- 71CE73
≈ Snow Pea
- 00CCDB
≈ Jade Glass
Tetradic +90° +180° +270°
- FF88BB
Cochonnet
- E2AB17
≈ Urobilin
- 00D2AE
≈ Mint Leaf
- 8FB4FF
≈ Carolina Blue
Contrast & accessibility
Ag
FailOn white
WCAG 2.21:1 · APCA Lc 43
Ag
AAAOn black
WCAG 9.49:1 · APCA Lc 59
Best text color: #000000
WCAG 9.49:1 (AAA) · APCA Lc 59
Contrast pairs
Code snippets
CSS
:root {
--cochonnet: #ff88bb;
--cochonnet-rgb: 255 136 187;
--cochonnet-oklch: oklch(0.772 0.154 354.2);
}
.element {
color: var(--cochonnet);
background-color: hsl(334 100% 77%);
border-color: oklch(0.772 0.154 354.2);
}Tailwind CSS v4
@theme {
--color-cochonnet: #ff88bb;
--color-cochonnet-50: #ffe4f6;
--color-cochonnet-100: #ffd3e9;
--color-cochonnet-200: #ffb9d6;
--color-cochonnet-300: #f695ba;
--color-cochonnet-400: #e374a4;
--color-cochonnet-500: #d0528d;
--color-cochonnet-600: #b04677;
--color-cochonnet-700: #8d385f;
--color-cochonnet-800: #682848;
--color-cochonnet-900: #4a1b32;
--color-cochonnet-950: #300a1e;
}SCSS
$cochonnet: #ff88bb;
$cochonnet-rgb: 255, 136, 187;
$cochonnet-light: mix(#fff, $cochonnet, 20%);
$cochonnet-dark: mix(#000, $cochonnet, 20%);
.element {
color: $cochonnet;
box-shadow: 0 0 0 2px rgba($cochonnet, 0.35);
}