ColorTool
ログイン
#CA8317

#ca8317 ≈ Bronze

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

#ca8317はオレンジ系の色です（明度：中程度、彩度：高め）。 RGBでは赤79.22%、緑51.37%、青9.02%で構成され、CMYK印刷ではシアン0%、マゼンタ35.15%、イエロー88.61%、ブラック20.78%を使います。 HSLでは色相角36.2°、彩度79.56%、明度44.12%です。 暖色で、熱意、温かさ、創造性を連想させることが多い色です。 デザインでは主にCTAボタン、食品ブランドやレストラン、ブランドのアクセントに使われます。 この色の上に黒の文字を置くとコントラスト比は6.77:1（WCAG AA）です。 最も近い色名はBronze（#cd7f32）で、ΔEは5.32です。

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

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

補色

  1. #ca8317
  2. #175eca

分裂補色

  1. #ca8317
  2. #17b8ca
  3. #2917ca

類似色

  1. #ca2917
  2. #ca8317
  3. #b8ca17

トライアド

  1. #ca8317
  2. #17ca83
  3. #8317ca

テトラード

  1. #ca8317
  2. #5eca17
  3. #175eca
  4. #8317ca

スクエア

  1. #ca8317
  2. #17ca29
  3. #175eca
  4. #ca17b8

モノクロマティック

  1. #412a07
  2. #85560f
  3. #ca8317
  4. #eaa844
  5. #f2c889

シェード

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

  1. #ca8317
  2. #b67615
  3. #a26912
  4. #8d5c10
  5. #794f0e
  6. #65420c
  7. #513409
  8. #3d2707
  9. #281a05
  10. #140d02
  11. #000000

ティント

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

  1. #ca8317
  2. #cf8f2e
  3. #d59c45
  4. #daa85d
  5. #dfb574
  6. #e5c18b
  7. #eacda2
  8. #efdab9
  9. #f4e6d1
  10. #faf3e8
  11. #ffffff

トーン

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

  1. #ca8317
  2. #c38322
  3. #bb822c
  4. #b48237
  5. #ac8241
  6. #a5824c
  7. #9e8156
  8. #968161
  9. #8f816b
  10. #878076
  11. #808080

読みやすい文字 3.1:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕
読みやすい文字 6.77:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓

1色覚（全色盲） #929292 男性の約0.003%
不完全1色覚 #ab8c75 男性の約0.001%
1型2色覚（P型） #9b8800 男性の約1.01%
2型2色覚（D型） #ac991b 男性の約1.27%
3型2色覚（T型） #dd7170 男性の約0.0001%
1型3色覚（P型弱） #b08603 男性の約1.08%
2型3色覚（D型弱） #b9911a 男性の約4.63%
3型3色覚（T型弱） #d67959 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

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

#cd7f32 Bronze ΔE 5.32 #cd853f Peru ΔE 5.67 #e48400 Fulvous ΔE 5.78 #cc7722 Ochre ΔE 6.21 #b8860b Dark Goldenrod ΔE 6.37 #ed9121 Carrot Orange ΔE 7.39 #e49b0f Gamboge ΔE 8.01 #357ce8 反転色 #929292 グレースケール 

Bronze
#ca8317  rgb(202, 131, 23)  hsl(36, 80%, 44%)  Bronze
#175eca  rgb(23, 94, 202)  hsl(216, 80%, 44%)  Denim
#17ca83  rgb(23, 202, 131)  hsl(156, 80%, 44%)  Emerald
#8317ca  rgb(131, 23, 202)  hsl(276, 80%, 44%)  Dark Violet