コピーしました
50%
配色モード
<div>
  <div class="cw-section-title">選択色・配色スウォッチ</div>
  <div class="cw-swatches" id="cw-swatches"></div>
</div>

<div class="cw-color-detail" id="cw-color-detail">
  <div class="cw-section-title">選択色の値（クリックでコピー）</div>
  <div class="cw-color-detail-row">
    <div class="cw-detail-swatch" id="cw-detail-swatch"></div>
    <div class="cw-detail-values">
      <span class="cw-detail-val" id="cw-val-hex" title="HEXをコピー"></span>
      <span class="cw-detail-val" id="cw-val-rgb" title="RGBをコピー"></span>
      <span class="cw-detail-val" id="cw-val-hsl" title="HSLをコピー"></span>
    </div>
  </div>
</div>

<div>
  <div class="cw-section-title">WCAGコントラスト比（白・黒背景）</div>
  <div class="cw-contrast-box" id="cw-contrast-box">
    <div class="cw-contrast-row">
      <div class="cw-contrast-preview" id="cw-prev-white">白背景サンプル</div>
      <div class="cw-contrast-info" id="cw-cr-white"></div>
    </div>
    <div class="cw-contrast-row">
      <div class="cw-contrast-preview" id="cw-prev-black">黒背景サンプル</div>
      <div class="cw-contrast-info" id="cw-cr-black"></div>
    </div>
  </div>
</div>

CSSカスタムプロパティ書き出し

事業の請求書・経費管理もかんたんに
freee会計なら、請求書作成・経費精算・確定申告までクラウドで一元管理。無料トライアル実施中。
freeeを無料で試す →
カラーパレットを生成 → カラーパレットジェネレーター
コントラスト比を確認 → カラーコントラストチェッカー
色覚をシミュレーション → 色覚シミュレーター
カラーパレットを生成 → カラーパレットジェネレーター
コントラスト比を確認 → カラーコントラストチェッカー
色覚をシミュレーション → 色覚シミュレーター
確定申告・会計をもっとラクに？ freee会計
なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。