色名 · #E7BFB6
Positively Pink
Positively Pinkは#E7BFB6：rgb(231 191 182)、hsl(11 51% 81%)、oklch(0.837 0.048 32.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Positively Pink color name →
#E7BFB6
oklch(0.837 0.048 32.8)
カラー変換
- HEX
- #e7bfb6
- RGB
- rgb(231 191 182)
- HSL
- hsl(11 51% 81%)
- HWB
- hwb(11 71% 9%)
- OKLCH
- oklch(0.837 0.048 32.8)
- OKLab
- oklab(0.837 0.04 0.026)
- CIE Lab
- lab(80.72 13.74 10.2)
- LCH
- lch(80.72 17.11 36.6)
- CMYK
- cmyk(0% 17% 21% 9%)
ティント · シェード · トーン
ティント
- EAC5BD
- ECCCC4
- EFD2CC
- F1D8D3
- F4DFDA
- F6E5E1
- F8ECE9
- FBF2F0
- FDF9F8
シェード
- C9A69E
- AB8D86
- 8F756F
- 735E59
- 594844
- 403330
- 281F1D
- 130D0C
- 030202
トーン
- DCB9B0
- D2B2AB
- C7ACA6
- BDA5A0
- B39F9B
- A89995
- 9E9390
- 948C8B
- 8A8685
カラーハーモニー
補色 +180°
- E7BFB6
Positively Pink
- A7D2DC
≈ Midwinter Mist
類似色 -30° +30°
- E7BFB6
Positively Pink
- E6BDC7
≈ Soap Pink
- E1C3AA
≈ Tailor’s Buff
トライアド +120° +240°
- E7BFB6
Positively Pink
- B3D3BB
≈ Frosted Fir
- BFC8EA
≈ Cuddle
スプリットコンプリメンタリー +150° +210°
- E7BFB6
Positively Pink
- A8D4CC
≈ Sinbad
- AFCEE7
≈ Frosty Snow Cap
テトラード +90° +180° +270°
- E7BFB6
Positively Pink
- C4CFAD
≈ Bamboo White
- A7D2DC
≈ Midwinter Mist
- CFC3E4
≈ Party Hat
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.67:1 · APCA Lc 30
Ag
AAA黒の上
WCAG 12.52:1 · APCA Lc 73
最適な文字色: #000000
WCAG 12.52:1 (AAA) · APCA Lc 73
Contrast pairs
コードスニペット
CSS
:root {
--positively-pink: #e7bfb6;
--positively-pink-rgb: 231 191 182;
--positively-pink-oklch: oklch(0.837 0.048 32.8);
}
.element {
color: var(--positively-pink);
background-color: hsl(11 51% 81%);
border-color: oklch(0.837 0.048 32.8);
}Tailwind CSS v4
@theme {
--color-positively-pink: #e7bfb6;
--color-positively-pink-50: #fff1ec;
--color-positively-pink-100: #f7e3dd;
--color-positively-pink-200: #e8cec7;
--color-positively-pink-300: #cfafa7;
--color-positively-pink-400: #b9958d;
--color-positively-pink-500: #a37b72;
--color-positively-pink-600: #8a6861;
--color-positively-pink-700: #6f534d;
--color-positively-pink-800: #523c38;
--color-positively-pink-900: #392927;
--color-positively-pink-950: #231715;
}SCSS
$positively-pink: #e7bfb6;
$positively-pink-rgb: 231, 191, 182;
$positively-pink-light: mix(#fff, $positively-pink, 20%);
$positively-pink-dark: mix(#000, $positively-pink, 20%);
.element {
color: $positively-pink;
box-shadow: 0 0 0 2px rgba($positively-pink, 0.35);
}