色名 · #E2B5BD
Heart’s Content
Heart’s Contentは#E2B5BD：rgb(226 181 189)、hsl(349 44% 80%)、oklch(0.815 0.053 6.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Heart’s Content color name →
#E2B5BD
oklch(0.815 0.053 6.4)
カラー変換
- HEX
- #e2b5bd
- RGB
- rgb(226 181 189)
- HSL
- hsl(349 44% 80%)
- HWB
- hwb(349 71% 11%)
- OKLCH
- oklch(0.815 0.053 6.4)
- OKLab
- oklab(0.815 0.053 0.006)
- CIE Lab
- lab(77.95 17.68 2.44)
- LCH
- lch(77.95 17.85 7.9)
- CMYK
- cmyk(0% 20% 16% 11%)
ティント · シェード · トーン
ティント
- E5BCC3
- E8C4CA
- EBCBD0
- EED2D7
- F1DADE
- F4E1E4
- F7E9EB
- FAF0F2
- FCF7F8
シェード
- C49DA4
- A8868C
- 8C6F74
- 71595D
- 574447
- 3E3033
- 271D1F
- 120C0D
- 030202
トーン
- D8B0B7
- CEAAB0
- C4A5AA
- BAA0A4
- B09A9E
- A79598
- 9D9092
- 938A8C
- 8A8586
カラーハーモニー
補色 +180°
- E2B5BD
Heart’s Content
- 9CCEC8
≈ Clear Cove
類似色 -30° +30°
- E2B5BD
Heart’s Content
- DAB6D0
≈ Blissfully Mine
- E2B7AB
≈ Salmon Grey
トライアド +120° +240°
- E2B5BD
Heart’s Content
- BAC9A5
≈ Seacrest
- A7C7E4
≈ Template
スプリットコンプリメンタリー +150° +210°
- E2B5BD
Heart’s Content
- A8CDB5
≈ Bird’s Egg Green
- 9CCCD9
≈ Regent St Blue
テトラード +90° +180° +270°
- E2B5BD
Heart’s Content
- CCC39C
≈ Inviting Gesture
- 9CCEC8
≈ Clear Cove
- B9C0E6
≈ Spoiled Rotten
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.81:1 · APCA Lc 34
Ag
AAA黒の上
WCAG 11.57:1 · APCA Lc 69
最適な文字色: #000000
WCAG 11.57:1 (AAA) · APCA Lc 69
Contrast pairs
コードスニペット
CSS
:root {
--heart-s-content: #e2b5bd;
--heart-s-content-rgb: 226 181 189;
--heart-s-content-oklch: oklch(0.815 0.053 6.4);
}
.element {
color: var(--heart-s-content);
background-color: hsl(349 44% 80%);
border-color: oklch(0.815 0.053 6.4);
}Tailwind CSS v4
@theme {
--color-heart-s-content: #e2b5bd;
--color-heart-s-content-50: #ffeff2;
--color-heart-s-content-100: #f9e1e4;
--color-heart-s-content-200: #eacbd0;
--color-heart-s-content-300: #d1adb2;
--color-heart-s-content-400: #bb9299;
--color-heart-s-content-500: #a57880;
--color-heart-s-content-600: #8c666d;
--color-heart-s-content-700: #705157;
--color-heart-s-content-800: #533b40;
--color-heart-s-content-900: #3a282c;
--color-heart-s-content-950: #241619;
}SCSS
$heart-s-content: #e2b5bd;
$heart-s-content-rgb: 226, 181, 189;
$heart-s-content-light: mix(#fff, $heart-s-content, 20%);
$heart-s-content-dark: mix(#000, $heart-s-content, 20%);
.element {
color: $heart-s-content;
box-shadow: 0 0 0 2px rgba($heart-s-content, 0.35);
}