ColorTool
ログイン
#E508C8

#e508c8 ≈ Shocking Pink

  • マゼンタ
  • 明度: 中程度
  • 彩度: とても高い
  • 中間色
コントラストを確認 グラフで探索 ランダムな色

#e508c8はマゼンタ系の色です（明度：中程度、彩度：とても高い）。 RGBでは赤89.8%、緑3.14%、青78.43%で構成され、CMYK印刷ではシアン0%、マゼンタ96.51%、イエロー12.66%、ブラック10.2%を使います。 HSLでは色相角307.87°、彩度93.25%、明度46.47%です。 暖色と寒色の中間で、創造性、大胆さ、個性を連想させることが多い色です。 デザインでは主に美容・コスメ、クリエイティブスタジオ、CTAボタンに使われます。 この色の上に黒の文字を置くとコントラスト比は5.2:1（WCAG AA）です。 最も近い色名はShocking Pink（#fc0fc0）で、ΔEは5.36です。

この色の測定値から自動生成した説明です。

HEX
RGB
RGB（%）
CMY
CMYK
HSL
HSV / HSB
Webセーフ#cc00cc
CIE-LAB
XYZ
xyY
CIE-LCH
CIE-LUV
Hunter-Lab
OKLab
2進数
10進数
相対輝度0.21

補色

  1. #e508c8
  2. #08e525

分裂補色

  1. #e508c8
  2. #5ae508
  3. #08e593

類似色

  1. #9308e5
  2. #e508c8
  3. #e5085a

トライアド

  1. #e508c8
  2. #c8e508
  3. #08c8e5

テトラード

  1. #e508c8
  2. #e52508
  3. #08e525
  4. #08c8e5

スクエア

  1. #e508c8
  2. #e59308
  3. #08e525
  4. #085ae5

モノクロマティック

  1. #510347
  2. #9b0587
  3. #e508c8
  4. #f841e0
  5. #fb8bec

シェード

#e508c8に黒を段階的に混ぜた色です。

  1. #e508c8
  2. #ce07b4
  3. #b706a0
  4. #a0068c
  5. #890578
  6. #730464
  7. #5c0350
  8. #45023c
  9. #2e0228
  10. #170114
  11. #000000

ティント

#e508c8に白を段階的に混ぜた色です。

  1. #e508c8
  2. #e821ce
  3. #ea39d3
  4. #ed52d9
  5. #ef6bde
  6. #f284e4
  7. #f59ce9
  8. #f7b5ef
  9. #facef4
  10. #fce6fa
  11. #ffffff

トーン

#e508c8にグレーを段階的に混ぜた色です。

  1. #e508c8
  2. #db14c1
  3. #d120ba
  4. #c72cb2
  5. #bd38ab
  6. #b344a4
  7. #a8509d
  8. #9e5c96
  9. #94688e
  10. #8a7487
  11. #808080

読みやすい文字 4.04:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕
読みやすい文字 5.2:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓

1色覚（全色盲） #7e7e7e 男性の約0.003%
不完全1色覚 #b164a1 男性の約0.001%
1型2色覚（P型） #0c6ccc 男性の約1.01%
2型2色覚（D型） #6f89c4 男性の約1.27%
3型2色覚（T型） #f12d76 男性の約0.0001%
1型3色覚（P型弱） #9855ca 男性の約1.08%
2型3色覚（D型弱） #ab6cc5 男性の約4.63%
3型3色覚（T型弱） #ec239e 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-e508c8 {
  color: #e508c8;
}
背景色
.bg-e508c8 {
  background-color: #e508c8;
  color: #000000;
}
枠線
.border-e508c8 {
  border: 2px solid #e508c8;
}
CSS変数
:root {
  --color-primary: #e508c8;
  --color-primary-rgb: 229 8 200;
  --color-primary-hsl: 308 93% 46%;
}
グラデーション
.gradient-e508c8 {
  background: linear-gradient(135deg, #e508c8, #e5085a);
}
色付きの影
.shadow-e508c8 {
  box-shadow: 0 8px 24px rgb(229 8 200 / 0.35);
}

#fc0fc0 Shocking Pink ΔE 5.36 #ff00ff Fuchsia ΔE 8.42 #ff00ff Magenta ΔE 8.42 #ba55d3 Medium Orchid ΔE 8.49 #fe28a2 Persian Rose ΔE 10.27 #bf00ff Electric Purple ΔE 11.06 #da70d6 Orchid ΔE 11.57 #1af737 反転色 #7e7e7e グレースケール 

Shocking Pink
#e508c8  rgb(229, 8, 200)  hsl(308, 93%, 46%)  Shocking Pink
#08e525  rgb(8, 229, 37)  hsl(128, 93%, 46%)  Malachite
#c8e508  rgb(200, 229, 8)  hsl(68, 93%, 46%)  Pear
#08c8e5  rgb(8, 200, 229)  hsl(188, 93%, 46%)  Sky Blue