Named color · #F7AA97
Duchess Rose
Duchess Rose is #F7AA97: rgb(247 170 151), hsl(12 86% 78%), oklch(0.808 0.095 34.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Duchess Rose color name →
#F7AA97
oklch(0.808 0.095 34.4)
Color conversions
- HEX
- #f7aa97
- RGB
- rgb(247 170 151)
- HSL
- hsl(12 86% 78%)
- HWB
- hwb(12 59% 3%)
- OKLCH
- oklch(0.808 0.095 34.4)
- OKLab
- oklab(0.808 0.079 0.054)
- CIE Lab
- lab(76.91 27.48 21.87)
- LCH
- lch(76.91 35.12 38.5)
- CMYK
- cmyk(0% 31% 39% 3%)
Tints · Shades · Tones
Tints
- F9B3A1
- FABBAC
- FBC4B6
- FCCCC0
- FDD5CB
- FEDDD5
- FEE6DF
- FFEEEA
- FFF7F4
Shades
- D79383
- B77D6F
- 99685C
- 7C5349
- 603F37
- 452D26
- 2C1B17
- 150B08
- 030101
Tones
- EBA695
- DFA293
- D39E91
- C79A8E
- BB958C
- AF918A
- A48D87
- 988985
- 8C8482
Color harmonies
Complementary +180°
- F7AA97
Duchess Rose
- 71D0E6
≈ Summer Splash
Analogous -30° +30°
- F7AA97
Duchess Rose
- F5A6B8
≈ Petal Power
- ECB37E
≈ Tanaris Beige
Triadic +120° +240°
- F7AA97
Duchess Rose
- 8ED3A5
≈ Low Tide
- ADBCFE
≈ Pastel Blue
Split-complementary +150° +210°
- F7AA97
Duchess Rose
- 72D4C7
≈ Turquoise Twist
- 8AC7FA
≈ Chromis Damsel Blue
Tetradic +90° +180° +270°
- F7AA97
Duchess Rose
- B3CB86
≈ Nurgling Green
- 71D0E6
≈ Summer Splash
- CEB1F2
≈ Teasel Dipsacus
Contrast & accessibility
Ag
FailOn white
WCAG 1.88:1 · APCA Lc 36
Ag
AAAOn black
WCAG 11.15:1 · APCA Lc 67
Best text color: #000000
WCAG 11.15:1 (AAA) · APCA Lc 67
Contrast pairs
Code snippets
CSS
:root {
--duchess-rose: #f7aa97;
--duchess-rose-rgb: 247 170 151;
--duchess-rose-oklch: oklch(0.808 0.095 34.4);
}
.element {
color: var(--duchess-rose);
background-color: hsl(12 86% 78%);
border-color: oklch(0.808 0.095 34.4);
}Tailwind CSS v4
@theme {
--color-duchess-rose: #f7aa97;
--color-duchess-rose-50: #ffece2;
--color-duchess-rose-100: #ffded2;
--color-duchess-rose-200: #fac7b8;
--color-duchess-rose-300: #e3a795;
--color-duchess-rose-400: #d08a79;
--color-duchess-rose-500: #bc6e5b;
--color-duchess-rose-600: #9f5d4d;
--color-duchess-rose-700: #804a3d;
--color-duchess-rose-800: #5f352d;
--color-duchess-rose-900: #43241e;
--color-duchess-rose-950: #2b130e;
}SCSS
$duchess-rose: #f7aa97;
$duchess-rose-rgb: 247, 170, 151;
$duchess-rose-light: mix(#fff, $duchess-rose, 20%);
$duchess-rose-dark: mix(#000, $duchess-rose, 20%);
.element {
color: $duchess-rose;
box-shadow: 0 0 0 2px rgba($duchess-rose, 0.35);
}