ColorTool
ログイン
#D45802

#d45802 ≈ Burnt Orange

  • 茶
  • 明度: 中程度
  • 彩度: とても高い
  • 暖色
コントラストを確認 グラフで探索 ランダムな色

#d45802は茶系の色です（明度：中程度、彩度：とても高い）。 RGBでは赤83.14%、緑34.51%、青0.78%で構成され、CMYK印刷ではシアン0%、マゼンタ58.49%、イエロー99.06%、ブラック16.86%を使います。 HSLでは色相角24.57°、彩度98.13%、明度41.96%です。 暖色で、信頼性、温もり、素朴さを連想させることが多い色です。 デザインでは主にカフェやコーヒーブランド、素朴でナチュラルなスタイル、CTAボタンに使われます。 この色の上に黒の文字を置くとコントラスト比は5.2:1（WCAG AA）です。 最も近い色名はBurnt Orange（#cc5500）で、ΔEは1.91です。

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

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

補色

  1. #d45802
  2. #027ed4

分裂補色

  1. #d45802
  2. #02d4c1
  3. #0215d4

類似色

  1. #d40215
  2. #d45802
  3. #d4c102

トライアド

  1. #d45802
  2. #02d458
  3. #5802d4

テトラード

  1. #d45802
  2. #7ed402
  3. #027ed4
  4. #5802d4

スクエア

  1. #d45802
  2. #15d402
  3. #027ed4
  4. #c102d4

モノクロマティック

  1. #3c1901
  2. #883901
  3. #d45802
  4. #fd7e26
  5. #feab71

シェード

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

  1. #d45802
  2. #bf4f02
  3. #aa4602
  4. #943e01
  5. #7f3501
  6. #6a2c01
  7. #552301
  8. #401a01
  9. #2a1200
  10. #150900
  11. #000000

ティント

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

  1. #d45802
  2. #d8691b
  3. #dd7935
  4. #e18a4e
  5. #e59b67
  6. #eaac81
  7. #eebc9a
  8. #f2cdb3
  9. #f6decc
  10. #fbeee6
  11. #ffffff

トーン

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

  1. #d45802
  2. #cc5c0f
  3. #c3601b
  4. #bb6428
  5. #b26834
  6. #aa6c41
  7. #a2704e
  8. #99745a
  9. #917867
  10. #887c73
  11. #808080

読みやすい文字 4.04:1 AA ✕ AA Large ✓ AAA ✕ AAA Large ✕
読みやすい文字 5.2:1 AA ✓ AA Large ✓ AAA ✕ AAA Large ✓

1色覚（全色盲） #7e7e7e 男性の約0.003%
不完全1色覚 #a87164 男性の約0.001%
1型2色覚（P型） #7c6d00 男性の約1.01%
2型2色覚（D型） #9b8900 男性の約1.27%
3型2色覚（T型） #ea384b 男性の約0.0001%
1型3色覚（P型弱） #a76500 男性の約1.08%
2型3色覚（D型弱） #b47800 男性の約4.63%
3型3色覚（T型弱） #e1473a 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

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

#cc5500 Burnt Orange ΔE 1.91 #d2691e Chocolate ΔE 4.39 #ec5800 Persimmon ΔE 4.77 #e25822 Flame ΔE 5.33 #cb410b Sinopia ΔE 7.45 #f94d00 Tangelo ΔE 7.46 #c04000 Mahogany ΔE 8.24 #2ba7fd 反転色 #7e7e7e グレースケール 

Burnt Orange
#d45802  rgb(212, 88, 2)  hsl(25, 98%, 42%)  Burnt Orange
#027ed4  rgb(2, 126, 212)  hsl(205, 98%, 42%)  Tufts Blue
#02d458  rgb(2, 212, 88)  hsl(145, 98%, 42%)  Malachite
#5802d4  rgb(88, 2, 212)  hsl(265, 98%, 42%)  Ultramarine