Cor nomeada · #F2D6DA
Summer Crush
Summer Crush é #F2D6DA: rgb(242 214 218), hsl(351 52% 89%), oklch(0.9 0.032 8). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Summer Crush color name →
#F2D6DA
oklch(0.9 0.032 8)
Conversões de cor
- HEX
- #f2d6da
- RGB
- rgb(242 214 218)
- HSL
- hsl(351 52% 89%)
- HWB
- hwb(351 84% 5%)
- OKLCH
- oklch(0.9 0.032 8)
- OKLab
- oklab(0.9 0.031 0.004)
- CIE Lab
- lab(88.07 10.52 1.78)
- LCH
- lch(88.07 10.67 9.6)
- CMYK
- cmyk(0% 12% 10% 5%)
Tons claros · Sombras · Tons
Tons claros
- F3DADE
- F5DEE1
- F6E2E5
- F7E6E9
- F9EAEC
- FAEFF0
- FBF3F4
- FDF7F8
- FEFBFB
Sombras
- D2BABD
- B49EA2
- 968487
- 796A6C
- 5E5254
- 433B3C
- 2B2525
- 141011
- 030202
Tons
- E6CDD1
- DAC4C7
- CFBBBE
- C3B3B5
- B8AAAC
- ACA1A3
- A1999A
- 969191
- 8B8889
Harmonias de cor
Complementar +180°
- F2D6DA
Summer Crush
- C8E5E2
≈ Swan Lake
Análoga -30° +30°
- F2D6DA
Summer Crush
- EDD7E5
≈ All Made Up
- F2D8CF
≈ Pink Zest
Tríade +120° +240°
- F2D6DA
Summer Crush
- D8E2CC
≈ Gratifying Green
- CEE1F3
≈ Hint of Blue
Complementar dividida +150° +210°
- F2D6DA
Summer Crush
- CEE5D6
≈ Peppermint Patty
- C8E4EC
≈ Azul Cielito Lindo
Tétrade +90° +180° +270°
- F2D6DA
Summer Crush
- E3DFC7
≈ Bamboo
- C8E5E2
≈ Swan Lake
- D9DDF4
≈ Chinese Silver
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.36:1 · APCA Lc 18
Ag
AAASobre preto
WCAG 15.40:1 · APCA Lc 86
Melhor cor de texto: #000000
WCAG 15.40:1 (AAA) · APCA Lc 86
Contrast pairs
Trechos de código
CSS
:root {
--summer-crush: #f2d6da;
--summer-crush-rgb: 242 214 218;
--summer-crush-oklch: oklch(0.9 0.032 8);
}
.element {
color: var(--summer-crush);
background-color: hsl(351 52% 89%);
border-color: oklch(0.9 0.032 8);
}Tailwind CSS v4
@theme {
--color-summer-crush: #f2d6da;
--color-summer-crush-50: #fef2f3;
--color-summer-crush-100: #f2e4e5;
--color-summer-crush-200: #e1cfd1;
--color-summer-crush-300: #c7b1b4;
--color-summer-crush-400: #b0979b;
--color-summer-crush-500: #9a7e82;
--color-summer-crush-600: #826b6e;
--color-summer-crush-700: #685558;
--color-summer-crush-800: #4c3e41;
--color-summer-crush-900: #352b2d;
--color-summer-crush-950: #20181a;
}SCSS
$summer-crush: #f2d6da;
$summer-crush-rgb: 242, 214, 218;
$summer-crush-light: mix(#fff, $summer-crush, 20%);
$summer-crush-dark: mix(#000, $summer-crush, 20%);
.element {
color: $summer-crush;
box-shadow: 0 0 0 2px rgba($summer-crush, 0.35);
}