ColorTool
ログイン
#BAA285

#baa285 ≈ Tan

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

#baa285はオレンジ系の色です（明度：高い、彩度：低め）。 RGBでは赤72.94%、緑63.53%、青52.16%で構成され、CMYK印刷ではシアン0%、マゼンタ12.9%、イエロー28.49%、ブラック27.06%を使います。 HSLでは色相角32.83°、彩度27.75%、明度62.55%です。 暖色で、熱意、温かさ、創造性を連想させることが多い色です。 デザインでは主にCTAボタン、食品ブランドやレストラン、ブランドのアクセントに使われます。 この色の上に黒の文字を置くとコントラスト比は8.59:1（WCAG AAA）です。 最も近い色名はTan（#d2b48c）で、ΔEは6.15です。

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

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

補色

  1. #baa285
  2. #859dba

分裂補色

  1. #baa285
  2. #85b8ba
  3. #8885ba

類似色

  1. #ba8885
  2. #baa285
  3. #b8ba85

トライアド

  1. #baa285
  2. #85baa2
  3. #a285ba

テトラード

  1. #baa285
  2. #9dba85
  3. #859dba
  4. #a285ba

スクエア

  1. #baa285
  2. #85ba88
  3. #859dba
  4. #ba85b8

モノクロマティック

  1. #6a553c
  2. #9b7c58
  3. #baa285
  4. #d6c7b6
  5. #f1ece7

シェード

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

  1. #baa285
  2. #a79278
  3. #95826a
  4. #82715d
  5. #706150
  6. #5d5143
  7. #4a4135
  8. #383128
  9. #25201b
  10. #13100d
  11. #000000

ティント

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

  1. #baa285
  2. #c1ab91
  3. #c8b59d
  4. #cfbeaa
  5. #d6c7b6
  6. #ddd1c2
  7. #e3dace
  8. #eae3da
  9. #f1ece7
  10. #f8f6f3
  11. #ffffff

トーン

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

  1. #baa285
  2. #b49f85
  3. #ae9b84
  4. #a99884
  5. #a39483
  6. #9d9183
  7. #978e82
  8. #918a82
  9. #8c8781
  10. #868381
  11. #808080

読みやすい文字 2.44:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕
読みやすい文字 8.59:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓

1色覚（全色盲） #a6a6a6 男性の約0.003%
不完全1色覚 #aea49a 男性の約0.001%
1型2色覚（P型） #aba283 男性の約1.01%
2型2色覚（D型） #b1a886 男性の約1.27%
3型2色覚（T型） #c39c9a 男性の約0.0001%
1型3色覚（P型弱） #b1a284 男性の約1.08%
2型3色覚（D型弱） #b4a685 男性の約4.63%
3型3色覚（T型弱） #c09e92 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

文字色
.text-baa285 {
  color: #baa285;
}
背景色
.bg-baa285 {
  background-color: #baa285;
  color: #000000;
}
枠線
.border-baa285 {
  border: 2px solid #baa285;
}
CSS変数
:root {
  --color-primary: #baa285;
  --color-primary-rgb: 186 162 133;
  --color-primary-hsl: 33 28% 63%;
}
グラデーション
.gradient-baa285 {
  background: linear-gradient(135deg, #baa285, #b8ba85);
}
色付きの影
.shadow-baa285 {
  box-shadow: 0 8px 24px rgb(186 162 133 / 0.35);
}

#d2b48c Tan ΔE 6.15 #c19a6b Camel ΔE 6.16 #c2b280 Ecru ΔE 8.69 #deb887 Burly Wood ΔE 8.84 #deaa88 Tumbleweed ΔE 9.45 #e5aa70 Fawn ΔE 11.06 #bcb88a Sage ΔE 11.81 #455d7a 反転色 #a6a6a6 グレースケール 

Tan
#baa285  rgb(186, 162, 133)  hsl(33, 28%, 63%)  Tan
#859dba  rgb(133, 157, 186)  hsl(213, 28%, 63%)  Iceberg
#85baa2  rgb(133, 186, 162)  hsl(153, 28%, 63%)  Dark Sea Green
#a285ba  rgb(162, 133, 186)  hsl(273, 28%, 63%)  Purple Mountain Majesty