Named color · #FFB3F0
Hermosa Pink
Hermosa Pink is #FFB3F0: rgb(255 179 240), hsl(312 100% 85%), oklch(0.857 0.117 333.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Pink mean? → · Hermosa Pink color name →
#FFB3F0
oklch(0.857 0.117 333.8)
Color conversions
- HEX
- #ffb3f0
- RGB
- rgb(255 179 240)
- HSL
- hsl(312 100% 85%)
- HWB
- hwb(312 70% 0%)
- OKLCH
- oklch(0.857 0.117 333.8)
- OKLab
- oklab(0.857 0.105 -0.052)
- CIE Lab
- lab(81.76 35.24 -18.96)
- LCH
- lch(81.76 40.02 331.7)
- CMYK
- cmyk(0% 30% 6% 0%)
Tints · Shades · Tones
Tints
- FFBBF2
- FFC3F3
- FFCAF5
- FFD2F6
- FFD9F8
- FFE1F9
- FFE9FB
- FFF0FC
- FFF8FE
Shades
- DE9BD1
- BE84B2
- 9E6E95
- 805878
- 63435D
- 482F43
- 2E1D2A
- 160C14
- 030103
Tones
- F2AEE4
- E5A9D9
- D8A4CD
- CB9FC2
- BF9AB7
- B295AC
- A590A0
- 998A96
- 8C858B
Color harmonies
Complementary +180°
- FFB3F0
Hermosa Pink
- 90E7AD
≈ Hospital Green
Analogous -30° +30°
- FFB3F0
Hermosa Pink
- DCC2FF
≈ Neon Boneyard
- FFBACA
≈ Rosie
Triadic +120° +240°
- FFB3F0
Hermosa Pink
- E9CF72
≈ Golden Sand
- 65E4FE
≈ Athena Blue
Split-complementary +150° +210°
- FFB3F0
Hermosa Pink
- C0DD86
≈ Green Chalk
- 68E9D8
≈ Turquoise Chalk
Tetradic +90° +180° +270°
- FFB3F0
Hermosa Pink
- FFC289
≈ Buttery
- 90E7AD
≈ Hospital Green
- A5D6FF
≈ Malmö FF
Contrast & accessibility
Ag
FailOn white
WCAG 1.62:1 · APCA Lc 28
Ag
AAAOn black
WCAG 12.95:1 · APCA Lc 75
Best text color: #000000
WCAG 12.95:1 (AAA) · APCA Lc 75
Contrast pairs
Code snippets
CSS
:root {
--hermosa-pink: #ffb3f0;
--hermosa-pink-rgb: 255 179 240;
--hermosa-pink-oklch: oklch(0.857 0.117 333.8);
}
.element {
color: var(--hermosa-pink);
background-color: hsl(312 100% 85%);
border-color: oklch(0.857 0.117 333.8);
}Tailwind CSS v4
@theme {
--color-hermosa-pink: #ffb3f0;
--color-hermosa-pink-50: #ffe9ff;
--color-hermosa-pink-100: #ffdaf7;
--color-hermosa-pink-200: #f5c2e8;
--color-hermosa-pink-300: #dea1ce;
--color-hermosa-pink-400: #c884bb;
--color-hermosa-pink-500: #b466a6;
--color-hermosa-pink-600: #98578c;
--color-hermosa-pink-700: #7a4571;
--color-hermosa-pink-800: #593254;
--color-hermosa-pink-900: #3f223b;
--color-hermosa-pink-950: #281125;
}SCSS
$hermosa-pink: #ffb3f0;
$hermosa-pink-rgb: 255, 179, 240;
$hermosa-pink-light: mix(#fff, $hermosa-pink, 20%);
$hermosa-pink-dark: mix(#000, $hermosa-pink, 20%);
.element {
color: $hermosa-pink;
box-shadow: 0 0 0 2px rgba($hermosa-pink, 0.35);
}