---
title: DevToolsカラー
slug: Tools/DevToolsColors
tags:
  - CSS
translation_of: Tools/DevToolsColors
---
<div>{{ToolsSidebar}}</div>

<div class="warning">
<p>これらの値のいずれかを変更する必要がある場合は、<code>/browser/themes/*/devtools/</code>の中のCSSコードを変更する必要があります。それに応じてDevToolsのバグを報告してください。</p>
</div>

<p class="summary"><span class="seoSummary">このチャートには、開発者ツールのダークテーマとライトテーマで実装されている色とCSS変数が一覧で表示されています。</span></p>

<table>
 <thead>
  <tr>
   <th> </th>
   <th>ダークテーマ</th>
   <th>ライトテーマ</th>
   <th>CSS 変数</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th colspan="3">
    <h3 id="Chrome_Colors">Chrome Colors</h3>
   </th>
   <th> </th>
  </tr>
  <tr>
   <th>タブツールバー</th>
   <td>
    <div class="swatch" style="background: #252c33;"> </div>

    <p>#252c33<br>
     rgba(37, 44, 51, 1)</p>
   </td>
   <td>
    <div class="swatch" style="background: #ebeced;"> </div>
    #ebeced<br>
    rgba(235, 236, 237, 1)</td>
   <td>--theme-tab-toolbar-background</td>
  </tr>
  <tr>
   <th>ツールバー</th>
   <td>
    <div class="swatch" style="background: #343c45;"> </div>
    #343c45<br>
    rgba(52, 60, 69, 1)</td>
   <td>
    <div class="swatch" style="background: #f0f1f2;"> </div>
    #f0f1f2<br>
    rgba(240, 241, 242, 1)</td>
   <td>--theme-toolbar-background</td>
  </tr>
  <tr>
   <th>選択箇所の背景</th>
   <td>
    <div class="swatch" style="background: #1d4f73;"> </div>
    #1d4f73<br>
    rgba(29, 79, 115, 1)</td>
   <td>
    <div class="swatch" style="background: #4c9ed9;"> </div>
    #4c9ed9<br>
    rgba(76, 158, 217, 1)</td>
   <td>--theme-selection-background</td>
  </tr>
  <tr>
   <th>選択したテキストの色</th>
   <td>
    <div class="swatch" style="background: #f5f7fa;"> </div>
    #f5f7fa<br>
    rgba(245, 247, 250, 1)</td>
   <td>
    <div class="swatch" style="background: #f5f7fa;"> </div>
    #f5f7fa<br>
    rgba(245, 247, 250, 1)</td>
   <td>--theme-selection-color</td>
  </tr>
  <tr>
   <th>スプリッタ</th>
   <td>
    <div class="swatch" style="background: #000000;"> </div>
    #000000<br>
    rgba(0, 0, 0, 1)</td>
   <td>
    <div class="swatch" style="background: #aaaaaa;"> </div>
    #aaaaaa<br>
    rgba(170, 170, 170, 1)</td>
   <td>--theme-splitter-color</td>
  </tr>
  <tr>
   <th>コメント</th>
   <td>
    <div class="swatch" style="background: #5c6773;"> </div>

    <p>#5c6773<br>
     rgba(92, 103, 115, 1)</p>
   </td>
   <td>
    <div class="swatch" style="background: #747573;"> </div>

    <p>#747573<br>
     rgba(116, 117, 115, 1)</p>
   </td>
   <td>--theme-comment</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <th colspan="3">
    <h3 id="コンテンツの色">コンテンツの色</h3>
   </th>
   <th> </th>
  </tr>
  <tr>
   <th>背景 - ボディ</th>
   <td>
    <div class="swatch" style="background: #14171a;"> </div>
    #14171a<br>
    rgba(17, 19, 21, 1)</td>
   <td>
    <div class="swatch" style="background: #fcfcfc;"> </div>
    #fcfcfc<br>
    rgba(252, 252, 252, 1)</td>
   <td>--theme-body-background</td>
  </tr>
  <tr>
   <th>背景 - サイドバー</th>
   <td>
    <div class="swatch" style="background: #181d20;"> </div>
    #181d20<br>
    rgba(24, 29, 32, 1)</td>
   <td>
    <div class="swatch" style="background: #f7f7f7;"> </div>
    #f7f7f7<br>
    rgba(247, 247, 247, 1)</td>
   <td>--theme-sidebar-background</td>
  </tr>
  <tr>
   <th>背景 - 注意</th>
   <td>
    <div class="swatch" style="background: #b28025;"> </div>
    #b28025<br>
    rgba(178, 128, 37, 1)</td>
   <td>
    <div class="swatch" style="background: #e6b064;"> </div>
    #e6b064<br>
    rgba(230, 176, 100, 1)</td>
   <td>--theme-contrast-background</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <th colspan="3">
    <h3 id="テキストの色">テキストの色</h3>
   </th>
   <th> </th>
  </tr>
  <tr>
   <th>ボディテキスト</th>
   <td>
    <div class="swatch" style="background: #8fa1b2;"> </div>
    #8fa1b2<br>
    rgba(143, 161, 178, 1)</td>
   <td>
    <div class="swatch" style="background: #18191a;"> </div>
    #18191a<br>
    rgba(24, 25, 26, 1)</td>
   <td>--theme-body-color</td>
  </tr>
  <tr>
   <th>フォアグラウンド (テキスト) - グレー</th>
   <td>
    <div class="swatch" style="background: #b6babf;"> </div>
    #b6babf<br>
    rgba(182, 186, 191, 1)</td>
   <td>
    <div class="swatch" style="background: #585959;"> </div>
    #585959<br>
    rgba(88, 89, 89, 1)</td>
   <td>--theme-body-color-alt</td>
  </tr>
  <tr>
   <th>コンテンツ (テキスト) - ハイコントラスト</th>
   <td>
    <div class="swatch" style="background: #a9bacb;"> </div>
    #a9bacb<br>
    rgba(169, 186, 203, 1)</td>
   <td>
    <div class="swatch" style="background: #292e33;"> </div>
    #292e33<br>
    rgba(41, 46, 51, 1)</td>
   <td>--theme-content-color1</td>
  </tr>
  <tr>
   <th>コンテンツ (テキスト) - グレー</th>
   <td>
    <div class="swatch" style="background: #8fa1b2;"> </div>
    #8fa1b2<br>
    rgba(143, 161, 178, 1)</td>
   <td>
    <div class="swatch" style="background: #8fa1b2;"> </div>
    #8fa1b2<br>
    rgba(143, 161, 178, 1)</td>
   <td>--theme-content-color2</td>
  </tr>
  <tr>
   <th>コンテンツ (テキスト) - ダークグレー</th>
   <td>
    <div class="swatch" style="background: #667380;"> </div>
    #667380<br>
    rgba(102, 115, 128, 1)</td>
   <td>
    <div class="swatch" style="background: #667380;"> </div>
    #667380<br>
    rgba(102, 115, 128, 1)</td>
   <td>--theme-content-color3</td>
  </tr>
 </tbody>
 <tbody>
  <tr>
   <th colspan="3">
    <h3 id="ハイライトカラー">ハイライトカラー</h3>
   </th>
   <th> </th>
  </tr>
  <tr>
   <th>青</th>
   <td>
    <div class="swatch" style="background: #46afe3;"> </div>
    #46afe3<br>
    rgba(70, 175, 227, 1)</td>
   <td>
    <div class="swatch" style="background: #0088cc;"> </div>
    #0088cc<br>
    rgba(0, 136, 204, 1)</td>
   <td>--theme-highlight-blue</td>
  </tr>
  <tr>
   <th>紫</th>
   <td>
    <div class="swatch" style="background: #6b7abb;"> </div>
    #6b7abb<br>
    rgba(107, 122, 187, 1)</td>
   <td>
    <div class="swatch" style="background: #5b5fff;"> </div>
    #5b5fff<br>
    rgba(91, 95, 255, 1)</td>
   <td>--theme-highlight-purple</td>
  </tr>
  <tr>
   <th>ピンク</th>
   <td>
    <div class="swatch" style="background: #df80ff;"> </div>
    #df80ff<br>
    rgba(223, 128, 255, 1)</td>
   <td>
    <div class="swatch" style="background: #b82ee5;"> </div>
    #b82ee5<br>
    rgba(184, 46, 229, 1)</td>
   <td>--theme-highlight-pink</td>
  </tr>
  <tr>
   <th>赤</th>
   <td>
    <div class="swatch" style="background: #eb5368;"> </div>
    #eb5368<br>
    rgba(235, 83, 104, 1)</td>
   <td>
    <div class="swatch" style="background: #ed2655;"> </div>
    #ed2655<br>
    rgba(237, 38, 85, 1)</td>
   <td>--theme-highlight-red</td>
  </tr>
  <tr>
   <th>オレンジ</th>
   <td>
    <div class="swatch" style="background: #d96629;"> </div>
    #d96629<br>
    rgba(217, 102, 41, 1)</td>
   <td>
    <div class="swatch" style="background: #f13c00;"> </div>
    #f13c00<br>
    rgba(241, 60, 0, 1)</td>
   <td>--theme-highlight-orange</td>
  </tr>
  <tr>
   <th>ライトオレンジ</th>
   <td>
    <div class="swatch" style="background: #d99b28;"> </div>
    #d99b28<br>
    rgba(217, 155, 40, 1)</td>
   <td>
    <div class="swatch" style="background: #d97e00;"> </div>
    #d97e00<br>
    rgba(217, 126, 0, 1)</td>
   <td>--theme-highlight-lightorange</td>
  </tr>
  <tr>
   <th>緑</th>
   <td>
    <div class="swatch" style="background: #70bf53;"> </div>
    #70bf53<br>
    rgba(112, 191, 83, 1)</td>
   <td>
    <div class="swatch" style="background: #2cbb0f;"> </div>
    #2cbb0f<br>
    rgba(44, 187, 15, 1)</td>
   <td>--theme-highlight-green</td>
  </tr>
  <tr>
   <th>ブルーグレー</th>
   <td>
    <div class="swatch" style="background: #5e88b0;"> </div>
    #5e88b0<br>
    rgba(94, 136, 176, 1)</td>
   <td>
    <div class="swatch" style="background: #0072ab;"> </div>
    #0072ab<br>
    rgba(0, 114, 171, 1)</td>
   <td>--theme-highlight-bluegrey</td>
  </tr>
  <tr>
   <th>黄</th>
   <td>
    <div class="swatch" style="background: #ffffb4;"> </div>
    #ffffb4<br>
    rgba(255, 255, 180, 1)</td>
   <td>
    <div class="swatch" style="background: #ffffb4;"> </div>
    #ffffb4<br>
    rgba(255, 255, 180, 1)</td>
   <td>--theme-highlight-yellow</td>
  </tr>
 </tbody>
</table>

<div class="warning">
<p>まだ修正されていません。進行状況については、<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916766">bug 916766</a>を参照してください。</p>
</div>