ColorTool
ログイン
#AF562A

#af562a ≈ Sienna

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

#af562aはオレンジ系の色です（明度：中程度、彩度：高め）。 RGBでは赤68.63%、緑33.73%、青16.47%で構成され、CMYK印刷ではシアン0%、マゼンタ50.86%、イエロー76%、ブラック31.37%を使います。 HSLでは色相角19.85°、彩度61.29%、明度42.55%です。 暖色で、熱意、温かさ、創造性を連想させることが多い色です。 デザインでは主にCTAボタン、食品ブランドやレストラン、ブランドのアクセントに使われます。 この色の上に白の文字を置くとコントラスト比は5.02:1（WCAG AA）です。 最も近い色名はSienna（#a0522d）で、ΔEは3.63です。

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

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

補色

  1. #af562a
  2. #2a83af

分裂補色

  1. #af562a
  2. #2aaf99
  3. #2a41af

類似色

  1. #af2a41
  2. #af562a
  3. #af992a

トライアド

  1. #af562a
  2. #2aaf56
  3. #562aaf

テトラード

  1. #af562a
  2. #83af2a
  3. #2a83af
  4. #562aaf

スクエア

  1. #af562a
  2. #41af2a
  3. #2a83af
  4. #992aaf

モノクロマティック

  1. #34190c
  2. #71381b
  3. #af562a
  4. #d57c50
  5. #e4aa8e

シェード

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

  1. #af562a
  2. #9e4d26
  3. #8c4522
  4. #7b3c1d
  5. #693419
  6. #582b15
  7. #462211
  8. #351a0d
  9. #231108
  10. #120904
  11. #000000

ティント

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

  1. #af562a
  2. #b7673f
  3. #bf7855
  4. #c7896a
  5. #cf9a7f
  6. #d7ab95
  7. #dfbbaa
  8. #e7ccbf
  9. #efddd4
  10. #f7eeea
  11. #ffffff

トーン

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

  1. #af562a
  2. #aa5a33
  3. #a65e3b
  4. #a16344
  5. #9c674c
  6. #986b55
  7. #936f5e
  8. #8e7366
  9. #89786f
  10. #857c77
  11. #808080

読みやすい文字 5.02:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓
読みやすい文字 4.19:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕

1色覚（全色盲） #6f6f6f 男性の約0.003%
不完全1色覚 #8d665b 男性の約0.001%
1型2色覚（P型） #6f6325 男性の約1.01%
2型2色覚（D型） #847728 男性の約1.27%
3型2色覚（T型） #c0434d 男性の約0.0001%
1型3色覚（P型弱） #8d5e27 男性の約1.08%
2型3色覚（D型弱） #976b29 男性の約4.63%
3型3色覚（T型弱） #b94b41 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

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

#a0522d Sienna ΔE 3.63 #b7410e Rust ΔE 5.36 #c04000 Mahogany ΔE 6.04 #cb410b Sinopia ΔE 6.85 #cc5500 Burnt Orange ΔE 7.35 #8b4513 Saddle Brown ΔE 9.37 #954535 Chestnut ΔE 10.55 #50a9d5 反転色 #6f6f6f グレースケール 

Sienna
#af562a  rgb(175, 86, 42)  hsl(20, 61%, 43%)  Sienna
#2a83af  rgb(42, 131, 175)  hsl(200, 61%, 43%)  Cerulean
#2aaf56  rgb(42, 175, 86)  hsl(140, 61%, 43%)  Medium Sea Green
#562aaf  rgb(86, 42, 175)  hsl(260, 61%, 43%)  Rebecca Purple