ColorTool
ログイン
#CA5946

#ca5946 ≈ Cinnabar

  • 赤
  • 明度: 中程度
  • 彩度: 高め
  • 暖色
コントラストを確認 グラフで探索 ランダムな色

#ca5946は赤系の色です（明度：中程度、彩度：高め）。 RGBでは赤79.22%、緑34.9%、青27.45%で構成され、CMYK印刷ではシアン0%、マゼンタ55.94%、イエロー65.35%、ブラック20.78%を使います。 HSLでは色相角8.64°、彩度55.46%、明度53.33%です。 暖色で、エネルギー、情熱、緊急性を連想させることが多い色です。 デザインでは主に食品ブランドやレストラン、セールやキャンペーン、ブランドのアクセントに使われます。 この色の上に黒の文字を置くとコントラスト比は5.03:1（WCAG AA）です。 最も近い色名はCinnabar（#e34234）で、ΔEは5.36です。

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

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

補色

  1. #ca5946
  2. #46b7ca

分裂補色

  1. #ca5946
  2. #46ca9b
  3. #4675ca

類似色

  1. #ca4675
  2. #ca5946
  3. #ca9b46

トライアド

  1. #ca5946
  2. #46ca59
  3. #5946ca

テトラード

  1. #ca5946
  2. #b7ca46
  3. #46b7ca
  4. #5946ca

スクエア

  1. #ca5946
  2. #75ca46
  3. #46b7ca
  4. #9b46ca

モノクロマティック

  1. #5c241a
  2. #983b2c
  3. #ca5946
  4. #db8e81
  5. #ecc4bd

シェード

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

  1. #ca5946
  2. #b6503f
  3. #a24738
  4. #8d3e31
  5. #79352a
  6. #652d23
  7. #51241c
  8. #3d1b15
  9. #28120e
  10. #140907
  11. #000000

ティント

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

  1. #ca5946
  2. #cf6a59
  3. #d57a6b
  4. #da8b7e
  5. #df9b90
  6. #e5aca3
  7. #eabdb5
  8. #efcdc8
  9. #f4deda
  10. #faeeed
  11. #ffffff

トーン

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

  1. #ca5946
  2. #c35d4c
  3. #bb6152
  4. #b46557
  5. #ac695d
  6. #a56d63
  7. #9e7069
  8. #96746f
  9. #8f7874
  10. #877c7a
  11. #808080

読みやすい文字 4.18:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕
読みやすい文字 5.03:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓

1色覚（全色盲） #7c7c7c 男性の約0.003%
不完全1色覚 #a1706a 男性の約0.001%
1型2色覚（P型） #766d44 男性の約1.01%
2型2色覚（D型） #928543 男性の約1.27%
3型2色覚（T型） #dd4355 男性の約0.0001%
1型3色覚（P型弱） #9f6545 男性の約1.08%
2型3色覚（D型弱） #ab7644 男性の約4.63%
3型3色覚（T型弱） #d64d4f 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-ca5946 {
  color: #ca5946;
}
背景色
.bg-ca5946 {
  background-color: #ca5946;
  color: #000000;
}
枠線
.border-ca5946 {
  border: 2px solid #ca5946;
}
CSS変数
:root {
  --color-primary: #ca5946;
  --color-primary-rgb: 202 89 70;
  --color-primary-hsl: 9 55% 53%;
}
グラデーション
.gradient-ca5946 {
  background: linear-gradient(135deg, #ca5946, #ca9b46);
}
色付きの影
.shadow-ca5946 {
  box-shadow: 0 8px 24px rgb(202 89 70 / 0.35);
}

#e34234 Cinnabar ΔE 5.36 #e34234 Vermilion ΔE 5.36 #cd5c5c Indian Red ΔE 6.38 #cc3333 Persian Red ΔE 7.65 #e2725b Terra Cotta ΔE 8.16 #e62020 Lust ΔE 8.29 #a45a52 Redwood ΔE 8.96 #35a6b9 反転色 #7c7c7c グレースケール 

Cinnabar
#ca5946  rgb(202, 89, 70)  hsl(9, 55%, 53%)  Cinnabar
#46b7ca  rgb(70, 183, 202)  hsl(189, 55%, 53%)  Moonstone Blue
#46ca59  rgb(70, 202, 89)  hsl(129, 55%, 53%)  Lime Green
#5946ca  rgb(89, 70, 202)  hsl(249, 55%, 53%)  Iris