Color con nombre · #F7CDCE
Strawberry Ripple
Strawberry Ripple es #F7CDCE: rgb(247 205 206), hsl(359 72% 89%), oklch(0.885 0.048 16.5). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Pink mean? → · Strawberry Ripple color name →
#F7CDCE
oklch(0.885 0.048 16.5)
Conversiones de color
- HEX
- #f7cdce
- RGB
- rgb(247 205 206)
- HSL
- hsl(359 72% 89%)
- HWB
- hwb(359 80% 3%)
- OKLCH
- oklch(0.885 0.048 16.5)
- OKLab
- oklab(0.885 0.046 0.013)
- CIE Lab
- lab(86.11 15.38 5.35)
- LCH
- lch(86.11 16.28 19.2)
- CMYK
- cmyk(0% 17% 17% 3%)
Tintes · Sombras · Tonos
Tintes
- F8D2D3
- F9D7D8
- FADCDD
- FBE1E1
- FCE6E6
- FCEBEB
- FDF0F0
- FEF5F5
- FEFAFA
Sombras
- D7B2B3
- B79898
- 997E7F
- 7C6666
- 604E4E
- 453838
- 2C2323
- 150F0F
- 030202
Tonos
- EBC5C6
- DEBDBE
- D2B5B6
- C6AEAE
- BAA6A6
- AE9E9E
- A39797
- 978F8F
- 8B8787
Armonías de color
Complementario +180°
- F7CDCE
Strawberry Ripple
- B5E3E3
≈ Seascape Green
Análogo -30° +30°
- F7CDCE
Strawberry Ripple
- F2CDDF
≈ Minimal Rose
- F5D0BF
≈ Sand Island
Triádico +120° +240°
- F7CDCE
Strawberry Ripple
- CBE1C2
≈ Chayote
- C5DBF9
≈ Fly a Kite
Complementario dividido +150° +210°
- F7CDCE
Strawberry Ripple
- BCE4D2
≈ Beru
- B9E0F1
≈ Bellagio Fountains
Tetrádico +90° +180° +270°
- F7CDCE
Strawberry Ripple
- DCDCB8
≈ Beach Grass
- B5E3E3
≈ Seascape Green
- D6D5F8
≈ Flax Bloom
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 1.44:1 · APCA Lc 21
Ag
AAASobre negro
WCAG 14.57:1 · APCA Lc 82
Mejor color de texto: #000000
WCAG 14.57:1 (AAA) · APCA Lc 82
Contrast pairs
Fragmentos de código
CSS
:root {
--strawberry-ripple: #f7cdce;
--strawberry-ripple-rgb: 247 205 206;
--strawberry-ripple-oklch: oklch(0.885 0.048 16.5);
}
.element {
color: var(--strawberry-ripple);
background-color: hsl(359 72% 89%);
border-color: oklch(0.885 0.048 16.5);
}Tailwind CSS v4
@theme {
--color-strawberry-ripple: #f7cdce;
--color-strawberry-ripple-50: #fff0f0;
--color-strawberry-ripple-100: #f8e2e2;
--color-strawberry-ripple-200: #e8cdcc;
--color-strawberry-ripple-300: #cfaeae;
--color-strawberry-ripple-400: #b99495;
--color-strawberry-ripple-500: #a37a7b;
--color-strawberry-ripple-600: #8a6768;
--color-strawberry-ripple-700: #6f5253;
--color-strawberry-ripple-800: #523c3d;
--color-strawberry-ripple-900: #39292a;
--color-strawberry-ripple-950: #231718;
}SCSS
$strawberry-ripple: #f7cdce;
$strawberry-ripple-rgb: 247, 205, 206;
$strawberry-ripple-light: mix(#fff, $strawberry-ripple, 20%);
$strawberry-ripple-dark: mix(#000, $strawberry-ripple, 20%);
.element {
color: $strawberry-ripple;
box-shadow: 0 0 0 2px rgba($strawberry-ripple, 0.35);
}