ColorTool
ログイン
#E18D23

#e18d23 ≈ Carrot Orange

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

#e18d23はオレンジ系の色です（明度：中程度、彩度：高め）。 RGBでは赤88.24%、緑55.29%、青13.73%で構成され、CMYK印刷ではシアン0%、マゼンタ37.33%、イエロー84.44%、ブラック11.76%を使います。 HSLでは色相角33.47°、彩度76%、明度50.98%です。 暖色で、熱意、温かさ、創造性を連想させることが多い色です。 デザインでは主にCTAボタン、食品ブランドやレストラン、ブランドのアクセントに使われます。 この色の上に黒の文字を置くとコントラスト比は8.04:1（WCAG AAA）です。 最も近い色名はCarrot Orange（#ed9121）で、ΔEは2.34です。

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

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

補色

  1. #e18d23
  2. #2377e1

分裂補色

  1. #e18d23
  2. #23d6e1
  3. #2e23e1

類似色

  1. #e12e23
  2. #e18d23
  3. #d6e123

トライアド

  1. #e18d23
  2. #23e18d
  3. #8d23e1

テトラード

  1. #e18d23
  2. #77e123
  3. #2377e1
  4. #8d23e1

スクエア

  1. #e18d23
  2. #23e12e
  3. #2377e1
  4. #e123d6

モノクロマティック

  1. #5e3a0d
  2. #a16416
  3. #e18d23
  4. #eab066
  5. #f3d3aa

シェード

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

  1. #e18d23
  2. #cb7f20
  3. #b4711c
  4. #9e6319
  5. #875515
  6. #714712
  7. #5a380e
  8. #442a0b
  9. #2d1c07
  10. #170e04
  11. #000000

ティント

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

  1. #e18d23
  2. #e49839
  3. #e7a44f
  4. #eaaf65
  5. #edbb7b
  6. #f0c691
  7. #f3d1a7
  8. #f6ddbd
  9. #f9e8d3
  10. #fcf4e9
  11. #ffffff

トーン

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

  1. #e18d23
  2. #d78c2c
  3. #ce8a36
  4. #c4893f
  5. #ba8848
  6. #b18752
  7. #a7855b
  8. #9d8464
  9. #93836d
  10. #8a8177
  11. #808080

読みやすい文字 2.61:1 AA ✕ AA Large ✕ AAA ✕ AAA Large ✕
読みやすい文字 8.04:1 AA ✓ AA Large ✓ AAA ✓ AAA Large ✓

1色覚（全色盲） #a0a0a0 男性の約0.003%
不完全1色覚 #be9981 男性の約0.001%
1型2色覚（P型） #a89406 男性の約1.01%
2型2色覚（D型） #bca825 男性の約1.27%
3型2色覚（T型） #f67979 男性の約0.0001%
1型3色覚（P型弱） #c19116 男性の約1.08%
2型3色覚（D型弱） #cc9e24 男性の約4.63%
3型3色覚（T型弱） #ee8162 男性の約0.0002%
自分の画像でシミュレーション

この色の文字

この色の背景

この色の枠線

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

#ed9121 Carrot Orange ΔE 2.34 #e48400 Fulvous ΔE 2.87 #f28500 Tangerine ΔE 4.77 #ed872d Cadmium Orange ΔE 5.42 #cd853f Peru ΔE 5.96 #ff8c00 Dark Orange ΔE 6.04 #e49b0f Gamboge ΔE 6.12 #1e72dc 反転色 #a0a0a0 グレースケール 

Carrot Orange
#e18d23  rgb(225, 141, 35)  hsl(33, 76%, 51%)  Carrot Orange
#2377e1  rgb(35, 119, 225)  hsl(213, 76%, 51%)  Tufts Blue
#23e18d  rgb(35, 225, 141)  hsl(153, 76%, 51%)  Medium Spring Green
#8d23e1  rgb(141, 35, 225)  hsl(273, 76%, 51%)  Blue Violet