Named color · #DDBBAA
Pickled Pork
Pickled Pork is #DDBBAA: rgb(221 187 170), hsl(20 43% 77%), oklch(0.817 0.046 48.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Pickled Pork color name →
#DDBBAA
oklch(0.817 0.046 48.1)
Color conversions
- HEX
- #ddbbaa
- RGB
- rgb(221 187 170)
- HSL
- hsl(20 43% 77%)
- HWB
- hwb(20 67% 13%)
- OKLCH
- oklch(0.817 0.046 48.1)
- OKLab
- oklab(0.817 0.031 0.034)
- CIE Lab
- lab(78.55 10.66 13.41)
- LCH
- lch(78.55 17.13 51.5)
- CMYK
- cmyk(0% 15% 23% 13%)
Tints · Shades · Tones
Tints
- E1C2B2
- E4C8BB
- E8CFC3
- EBD6CB
- EEDDD4
- F2E4DC
- F5EAE5
- F8F1EE
- FCF8F6
Shades
- C0A293
- A48A7D
- 887368
- 6E5C53
- 55463F
- 3D322D
- 261F1B
- 110D0B
- 020201
Tones
- D3B5A6
- CAAFA2
- C0A99D
- B7A399
- AE9D95
- A49791
- 9B918D
- 928C88
- 898684
Color harmonies
Complementary +180°
- DDBBAA
Pickled Pork
- A5CADB
≈ Vast Sky
Analogous -30° +30°
- DDBBAA
Pickled Pork
- DFB8B8
≈ O Fortuna
- D4C0A3
≈ Dune
Triadic +120° +240°
- DDBBAA
Pickled Pork
- A7CDBE
≈ Greywacke
- C1BFE0
≈ Purple Dragon
Split-complementary +150° +210°
- DDBBAA
Pickled Pork
- A1CDCE
≈ Mystery
- B1C5E1
≈ Simply Sparkling
Tetradic +90° +180° +270°
- DDBBAA
Pickled Pork
- B5CBAE
≈ Relish
- A5CADB
≈ Vast Sky
- D0BAD7
≈ Petite Purple
Contrast & accessibility
Ag
FailOn white
WCAG 1.78:1 · APCA Lc 33
Ag
AAAOn black
WCAG 11.76:1 · APCA Lc 70
Best text color: #000000
WCAG 11.76:1 (AAA) · APCA Lc 70
Contrast pairs
Code snippets
CSS
:root {
--pickled-pork: #ddbbaa;
--pickled-pork-rgb: 221 187 170;
--pickled-pork-oklch: oklch(0.817 0.046 48.1);
}
.element {
color: var(--pickled-pork);
background-color: hsl(20 43% 77%);
border-color: oklch(0.817 0.046 48.1);
}Tailwind CSS v4
@theme {
--color-pickled-pork: #ddbbaa;
--color-pickled-pork-50: #fff2ea;
--color-pickled-pork-100: #f5e4db;
--color-pickled-pork-200: #e5cfc3;
--color-pickled-pork-300: #ccb1a3;
--color-pickled-pork-400: #b69787;
--color-pickled-pork-500: #a07d6c;
--color-pickled-pork-600: #876a5c;
--color-pickled-pork-700: #6c5549;
--color-pickled-pork-800: #503e35;
--color-pickled-pork-900: #382a24;
--color-pickled-pork-950: #221813;
}SCSS
$pickled-pork: #ddbbaa;
$pickled-pork-rgb: 221, 187, 170;
$pickled-pork-light: mix(#fff, $pickled-pork, 20%);
$pickled-pork-dark: mix(#000, $pickled-pork, 20%);
.element {
color: $pickled-pork;
box-shadow: 0 0 0 2px rgba($pickled-pork, 0.35);
}