ColorTool
ログイン
#A8673D

#a8673d ≈ Copper

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

#a8673dはオレンジ系の色です（明度：中程度、彩度：中程度）。 RGBでは赤65.88%、緑40.39%、青23.92%で構成され、CMYK印刷ではシアン0%、マゼンタ38.69%、イエロー63.69%、ブラック34.12%を使います。 HSLでは色相角23.55°、彩度46.72%、明度44.9%です。 暖色で、熱意、温かさ、創造性を連想させることが多い色です。 デザインでは主にCTAボタン、食品ブランドやレストラン、ブランドのアクセントに使われます。 この色の上に黒の文字を置くとコントラスト比は4.67:1（WCAG AA）です。 最も近い色名はCopper（#b87333）で、ΔEは6.97です。

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

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

補色

  1. #a8673d
  2. #3d7ea8

分裂補色

  1. #a8673d
  2. #3da89c
  3. #3d49a8

類似色

  1. #a83d49
  2. #a8673d
  3. #a89c3d

トライアド

  1. #a8673d
  2. #3da867
  3. #673da8

テトラード

  1. #a8673d
  2. #7ea83d
  3. #3d7ea8
  4. #673da8

スクエア

  1. #a8673d
  2. #49a83d
  3. #3d7ea8
  4. #9c3da8

モノクロマティック

  1. #382214
  2. #704529
  3. #a8673d
  4. #c98e69
  5. #ddb9a1

シェード

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

  1. #a8673d
  2. #975d37
  3. #865231
  4. #76482b
  5. #653e25
  6. #54341f
  7. #432918
  8. #321f12
  9. #22150c
  10. #110a06
  11. #000000

ティント

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

  1. #a8673d
  2. #b17650
  3. #b98564
  4. #c29577
  5. #cba48b
  6. #d4b39e
  7. #dcc2b1
  8. #e5d1c5
  9. #eee1d8
  10. #f6f0ec
  11. #ffffff

トーン

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

  1. #a8673d
  2. #a46a44
  3. #a06c4a
  4. #9c6f51
  5. #987158
  6. #94745f
  7. #907665
  8. #8c796c
  9. #887b73
  10. #847e79
  11. #808080

読みやすい文字 4.49:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕
読みやすい文字 4.67:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓

1色覚（全色盲） #777777 男性の約0.003%
不完全1色覚 #8d7165 男性の約0.001%
1型2色覚（P型） #796e39 男性の約1.01%
2型2色覚（D型） #897c3d 男性の約1.27%
3型2色覚（T型） #b75a5d 男性の約0.0001%
1型3色覚（P型弱） #8e6b3b 男性の約1.08%
2型3色覚（D型弱） #96743d 男性の約4.63%
3型3色覚（T型弱） #b16052 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

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

#b87333 Copper ΔE 6.97 #a0522d Sienna ΔE 7.21 #a67b5b Cafe au Lait ΔE 7.79 #b06500 Ginger ΔE 8.92 #cc5500 Burnt Orange ΔE 9.80 #d2691e Chocolate ΔE 9.82 #996515 Golden Brown ΔE 10.22 #5798c2 反転色 #777777 グレースケール 

Copper
#a8673d  rgb(168, 103, 61)  hsl(24, 47%, 45%)  Copper
#3d7ea8  rgb(61, 126, 168)  hsl(204, 47%, 45%)  Steel Blue
#3da867  rgb(61, 168, 103)  hsl(144, 47%, 45%)  Jade
#673da8  rgb(103, 61, 168)  hsl(264, 47%, 45%)  Purple Heart