色名 · #ECA6CA
Elastic Pink
Elastic Pinkは#ECA6CA：rgb(236 166 202)、hsl(329 65% 79%)、oklch(0.802 0.094 347.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Elastic Pink color name →
#ECA6CA
oklch(0.802 0.094 347.2)
カラー変換
- HEX
- #eca6ca
- RGB
- rgb(236 166 202)
- HSL
- hsl(329 65% 79%)
- HWB
- hwb(329 65% 7%)
- OKLCH
- oklch(0.802 0.094 347.2)
- OKLab
- oklab(0.802 0.092 -0.021)
- CIE Lab
- lab(75.81 30.44 -7.55)
- LCH
- lch(75.81 31.37 346.1)
- CMYK
- cmyk(0% 30% 14% 7%)
ティント · シェード · トーン
ティント
- EEAFCF
- F1B8D4
- F3C1DA
- F5CADF
- F7D2E4
- F9DBEA
- FBE4EF
- FCEDF4
- FEF6FA
シェード
- CD90AF
- AF7A95
- 92657C
- 765164
- 5B3E4D
- 422B37
- 291A22
- 130A0F
- 030102
トーン
- E1A2C2
- D69FBB
- CB9BB3
- C097AC
- B693A4
- AB909D
- A08C96
- 95888E
- 8B8487
カラーハーモニー
補色 +180°
- ECA6CA
Elastic Pink
- 7FD2B2
≈ Sea Treasure
類似色 -30° +30°
- ECA6CA
Elastic Pink
- D7ACE7
≈ Petal Plush
- F5A6A9
≈ Calabrese
トライアド +120° +240°
- ECA6CA
Elastic Pink
- C5C37B
≈ Fresh Sprout
- 79CBEE
≈ Fish Pond
スプリットコンプリメンタリー +150° +210°
- ECA6CA
Elastic Pink
- A2CD91
≈ Chenille
- 6DD1D3
≈ Soft Turquoise
テトラード +90° +180° +270°
- ECA6CA
Elastic Pink
- E1B778
≈ Honey Gold
- 7FD2B2
≈ Sea Treasure
- 98C1FB
≈ Pastel Blue
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.93:1 · APCA Lc 37
Ag
AAA黒の上
WCAG 10.87:1 · APCA Lc 66
最適な文字色: #000000
WCAG 10.87:1 (AAA) · APCA Lc 66
Contrast pairs
コードスニペット
CSS
:root {
--elastic-pink: #eca6ca;
--elastic-pink-rgb: 236 166 202;
--elastic-pink-oklch: oklch(0.802 0.094 347.2);
}
.element {
color: var(--elastic-pink);
background-color: hsl(329 65% 79%);
border-color: oklch(0.802 0.094 347.2);
}Tailwind CSS v4
@theme {
--color-elastic-pink: #eca6ca;
--color-elastic-pink-50: #ffebf9;
--color-elastic-pink-100: #ffdced;
--color-elastic-pink-200: #f4c5da;
--color-elastic-pink-300: #dda4bf;
--color-elastic-pink-400: #c888a9;
--color-elastic-pink-500: #b36c92;
--color-elastic-pink-600: #985b7b;
--color-elastic-pink-700: #7a4963;
--color-elastic-pink-800: #5a354a;
--color-elastic-pink-900: #3f2433;
--color-elastic-pink-950: #28131f;
}SCSS
$elastic-pink: #eca6ca;
$elastic-pink-rgb: 236, 166, 202;
$elastic-pink-light: mix(#fff, $elastic-pink, 20%);
$elastic-pink-dark: mix(#000, $elastic-pink, 20%);
.element {
color: $elastic-pink;
box-shadow: 0 0 0 2px rgba($elastic-pink, 0.35);
}