Named color · #EFD9E1
Rosa Bonito
Rosa Bonito is #EFD9E1: rgb(239 217 225), hsl(338 41% 89%), oklch(0.905 0.026 353.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Rosa Bonito color name →
#EFD9E1
oklch(0.905 0.026 353.6)
Color conversions
- HEX
- #efd9e1
- RGB
- rgb(239 217 225)
- HSL
- hsl(338 41% 89%)
- HWB
- hwb(338 85% 6%)
- OKLCH
- oklch(0.905 0.026 353.6)
- OKLab
- oklab(0.905 0.026 -0.003)
- CIE Lab
- lab(88.69 8.84 -1.04)
- LCH
- lch(88.69 8.9 353.3)
- CMYK
- cmyk(0% 9% 6% 6%)
Tints · Shades · Tones
Tints
- F1DDE4
- F2E1E7
- F4E4EA
- F6E8ED
- F7ECF0
- F9F0F3
- FAF4F6
- FCF7F9
- FDFBFC
Shades
- D0BCC4
- B1A1A7
- 94868B
- 786C70
- 5C5356
- 423B3E
- 2A2527
- 141112
- 030202
Tones
- E3D0D7
- D8C7CD
- CCBDC3
- C1B4B9
- B6ABAF
- ABA3A6
- A09A9C
- 959193
- 8B8989
Color harmonies
Complementary +180°
- EFD9E1
Rosa Bonito
- CFE6DE
≈ Ice Dagger
Analogous -30° +30°
- EFD9E1
Rosa Bonito
- E9DAEA
≈ Princess Fairy Tale
- F1D9D7
≈ Scented Valentine
Triadic +120° +240°
- EFD9E1
Rosa Bonito
- DFE2CE
≈ Vintage Beige
- D0E3EF
≈ Soft Cloud
Split-complementary +150° +210°
- EFD9E1
Rosa Bonito
- D6E5D5
≈ Light Mystified
- CDE5E8
≈ Ivalo River
Tetradic +90° +180° +270°
- EFD9E1
Rosa Bonito
- E8DFCD
≈ Spellbound
- CFE6DE
≈ Ice Dagger
- D7E0F2
≈ Aquarelle Purple
Contrast & accessibility
Ag
FailOn white
WCAG 1.33:1 · APCA Lc 17
Ag
AAAOn black
WCAG 15.68:1 · APCA Lc 87
Best text color: #000000
WCAG 15.68:1 (AAA) · APCA Lc 87
Contrast pairs
Code snippets
CSS
:root {
--rosa-bonito: #efd9e1;
--rosa-bonito-rgb: 239 217 225;
--rosa-bonito-oklch: oklch(0.905 0.026 353.6);
}
.element {
color: var(--rosa-bonito);
background-color: hsl(338 41% 89%);
border-color: oklch(0.905 0.026 353.6);
}Tailwind CSS v4
@theme {
--color-rosa-bonito: #efd9e1;
--color-rosa-bonito-50: #fcf2f5;
--color-rosa-bonito-100: #f0e4e8;
--color-rosa-bonito-200: #ded0d5;
--color-rosa-bonito-300: #c3b2b8;
--color-rosa-bonito-400: #ac989f;
--color-rosa-bonito-500: #957f87;
--color-rosa-bonito-600: #7e6c73;
--color-rosa-bonito-700: #65565c;
--color-rosa-bonito-800: #4a3f43;
--color-rosa-bonito-900: #332b2e;
--color-rosa-bonito-950: #1f191b;
}SCSS
$rosa-bonito: #efd9e1;
$rosa-bonito-rgb: 239, 217, 225;
$rosa-bonito-light: mix(#fff, $rosa-bonito, 20%);
$rosa-bonito-dark: mix(#000, $rosa-bonito, 20%);
.element {
color: $rosa-bonito;
box-shadow: 0 0 0 2px rgba($rosa-bonito, 0.35);
}