ColorTool
ログイン
#AB5684

#ab5684 ≈ Mulberry

  • ローズ
  • 明度: 中程度
  • 彩度: 中程度
  • 中間色
コントラストを確認 グラフで探索 ランダムな色

#ab5684はローズ系の色です（明度：中程度、彩度：中程度）。 RGBでは赤67.06%、緑33.73%、青51.76%で構成され、CMYK印刷ではシアン0%、マゼンタ49.71%、イエロー22.81%、ブラック32.94%を使います。 HSLでは色相角327.53°、彩度33.6%、明度50.39%です。 暖色と寒色の中間で、ロマンス、遊び心、愛情を連想させることが多い色です。 デザインでは主に食品ブランドやレストラン、セールやキャンペーン、ブランドのアクセントに使われます。 この色の上に白の文字を置くとコントラスト比は4.78:1（WCAG AA）です。 最も近い色名はMulberry（#c54b8c）で、ΔEは5.16です。

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

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

補色

  1. #ab5684
  2. #56ab7d

分裂補色

  1. #ab5684
  2. #59ab56
  3. #56aba8

類似色

  1. #a856ab
  2. #ab5684
  3. #ab5659

トライアド

  1. #ab5684
  2. #84ab56
  3. #5684ab

テトラード

  1. #ab5684
  2. #ab7d56
  3. #56ab7d
  4. #5684ab

スクエア

  1. #ab5684
  2. #aba856
  3. #56ab7d
  4. #5659ab

モノクロマティック

  1. #452335
  2. #793c5d
  3. #ab5684
  4. #c489a9
  5. #debcce

シェード

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

  1. #ab5684
  2. #9a4d77
  3. #89456a
  4. #783c5c
  5. #67344f
  6. #562b42
  7. #442235
  8. #331a28
  9. #22111a
  10. #11090d
  11. #000000

ティント

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

  1. #ab5684
  2. #b36790
  3. #bc789d
  4. #c489a9
  5. #cd9ab5
  6. #d5abc2
  7. #ddbbce
  8. #e6ccda
  9. #eedde6
  10. #f7eef3
  11. #ffffff

トーン

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

  1. #ab5684
  2. #a75a84
  3. #a25e83
  4. #9e6383
  5. #9a6782
  6. #966b82
  7. #916f82
  8. #8d7381
  9. #897881
  10. #847c80
  11. #808080

読みやすい文字 4.78:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓
読みやすい文字 4.4:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕

1色覚（全色盲） #727272 男性の約0.003%
不完全1色覚 #8d687a 男性の約0.001%
1型2色覚（P型） #5e6a86 男性の約1.01%
2型2色覚（D型） #757882 男性の約1.27%
3型2色覚（T型） #b55467 男性の約0.0001%
1型3色覚（P型弱） #846285 男性の約1.08%
2型3色覚（D型弱） #8e6c83 男性の約4.63%
3型3色覚（T型弱） #b15574 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-ab5684 {
  color: #ab5684;
}
背景色
.bg-ab5684 {
  background-color: #ab5684;
  color: #ffffff;
}
枠線
.border-ab5684 {
  border: 2px solid #ab5684;
}
CSS変数
:root {
  --color-primary: #ab5684;
  --color-primary-rgb: 171 86 132;
  --color-primary-hsl: 328 34% 50%;
}
グラデーション
.gradient-ab5684 {
  background: linear-gradient(135deg, #ab5684, #ab5659);
}
色付きの影
.shadow-ab5684 {
  box-shadow: 0 8px 24px rgb(171 86 132 / 0.35);
}

#c54b8c Mulberry ΔE 5.16 #8a496b Twilight Lavender ΔE 8.39 #cf3476 Telemagenta ΔE 8.69 #c71585 Medium Violet Red ΔE 9.35 #8e4585 Deep Plum ΔE 9.41 #915f6d Mauve Taupe ΔE 9.43 #b57281 Turkish Rose ΔE 11.07 #54a97b 反転色 #727272 グレースケール 

Mulberry
#ab5684  rgb(171, 86, 132)  hsl(328, 34%, 50%)  Mulberry
#56ab7d  rgb(86, 171, 125)  hsl(148, 34%, 50%)  Mint
#84ab56  rgb(132, 171, 86)  hsl(88, 34%, 50%)  Asparagus
#5684ab  rgb(86, 132, 171)  hsl(208, 34%, 50%)  Steel Blue