色名 · #F2D6DA
Summer Crush
Summer Crushは#F2D6DA：rgb(242 214 218)、hsl(351 52% 89%)、oklch(0.9 0.032 8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Summer Crush color name →
#F2D6DA
oklch(0.9 0.032 8)
カラー変換
- 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%)
ティント · シェード · トーン
ティント
- F3DADE
- F5DEE1
- F6E2E5
- F7E6E9
- F9EAEC
- FAEFF0
- FBF3F4
- FDF7F8
- FEFBFB
シェード
- D2BABD
- B49EA2
- 968487
- 796A6C
- 5E5254
- 433B3C
- 2B2525
- 141011
- 030202
トーン
- E6CDD1
- DAC4C7
- CFBBBE
- C3B3B5
- B8AAAC
- ACA1A3
- A1999A
- 969191
- 8B8889
カラーハーモニー
補色 +180°
- F2D6DA
Summer Crush
- C8E5E2
≈ Swan Lake
類似色 -30° +30°
- F2D6DA
Summer Crush
- EDD7E5
≈ All Made Up
- F2D8CF
≈ Pink Zest
トライアド +120° +240°
- F2D6DA
Summer Crush
- D8E2CC
≈ Gratifying Green
- CEE1F3
≈ Hint of Blue
スプリットコンプリメンタリー +150° +210°
- F2D6DA
Summer Crush
- CEE5D6
≈ Peppermint Patty
- C8E4EC
≈ Azul Cielito Lindo
テトラード +90° +180° +270°
- F2D6DA
Summer Crush
- E3DFC7
≈ Bamboo
- C8E5E2
≈ Swan Lake
- D9DDF4
≈ Chinese Silver
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.36:1 · APCA Lc 18
Ag
AAA黒の上
WCAG 15.40:1 · APCA Lc 86
最適な文字色: #000000
WCAG 15.40:1 (AAA) · APCA Lc 86
Contrast pairs
コードスニペット
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);
}