FIRST CH TOOLS LOCAL PROCESSING — サーバー送信なし EN

FIRST CH TOOLS / 22 COLOR

Colorコード変換＆アルファ透過計算機

色を1つ決めると、HEX・RGB・HSL・OKLCH のコードが同時に出ます。アルファ（透過度）を動かせば rgba() / hsla() / 8桁HEX がそのまま作れ、背景に重ねたときに実際に見える色とコントラスト比も一緒に確かめられます。

色を1つ決めると、全形式のコードが同時に出ます

色HEX / rgb() / hsl() / oklch() / 色名（tomato 等）を貼れます
よく使う色
#c8501f
ON WHITEこの色の文字 Aa 0123
ON DARKこの色の文字 Aa 0123
HEX#c8501f
HEX8#c8501fff
RGBrgb(200 80 31)
RGBArgb(200 80 31 / 1)
HSLhsl(17.4 73.2% 45.3%)
HSLAhsl(17.4 73.2% 45.3% / 1)
OKLCHoklch(56% 0.16 41)
4.11
白とのコントラスト比
5.11
黒とのコントラスト比
黒文字
AAを満たす文字色
56.5%
明度 L（OKLCH）
0.166
彩度 C（OKLCH）
CSSに貼る形

    
    
  
    

  
    変換はこのページの中だけで行われ、入力がブラウザの外へ出ることはありません。URLパラメータで直接呼び出せます: /color/?c=%23c8501f&a=50 ／ /color/?c=oklch(56%25 0.16 41)
    
  
    

  

  

  
    
    
    How to Use
    
    
      
      
    1. 色を入れるピッカーで選ぶか、欄に #c8501f / rgb(200 80 31) / hsl(17 73% 45%) / oklch(56% 0.16 41) / tomato のいずれかを貼ります。
      2. 
      
    2. アルファを決めるスライダーを動かすと rgba() / hsla() / 8桁HEX がその場で更新されます。「アルファ透過」タブでは背景色を指定して、重ねたときの実際の色まで出せます。
      3. 
      
    3. コードをコピーする各行のコピーボタンで1つずつ、または書き出し欄からCSS変数・SCSS・JSON・Markdownの表としてまとめて持っていけます。
      4. 
    
    
  
    

  
    
    
    About This Tool
    
    
    同じ色を別の書き方で表したものが HEX・RGB・HSL・OKLCH です。HEXとRGBは同じ数値（0〜255の光の三原色）を16進数で書くか10進数で書くかの違いで、HSLは色相・彩度・明度という人が指定しやすい軸に置き換えたもの、OKLCHは「見た目の明るさが揃う」ように設計された新しい色空間です。このツールはsRGBを基準に相互変換します。
    
    
    
      
    アルファは「背景しだいで見え方が変わる」
    
      
    rgba(0, 0, 0, 0.5) は黒ではなく「背景を半分暗くする指定」です。白の上なら #808080、紙色 #faf8f4 の上なら #7d7c7a になります。「アルファ透過」タブの背景に重ねた実際の色は、この合成結果（前景×α + 背景×(1−α)）を計算したものです。デザインカンプの半透明レイヤーを実装で不透明なHEXに置き換えるときに使えます。
    
    
    
    
    
      
    8桁HEX（#rrggbbaa）とrgba()の使い分け
    
      
    末尾2桁がアルファの8桁HEXは、Chrome・Safari・Firefox・Edgeのいずれも対応済みで、実務上はIE 11だけが非対応です。アルファを50%にしたいときの末尾は 80（128÷255）で、%で直感的に書けない点だけが難所になります。パーセントで指定したい場合や、CSS変数で色とアルファを分けて持ちたい場合は rgb(200 80 31 / 50%) のモダン記法が扱いやすくなります。
    
    
    
    
    
      
    OKLCHは明度を変えても色相がずれない
    
      
    HSLで明度だけを下げると、青は黒っぽく沈み、黄はくすんで見えます。人の目の感じ方と数値がずれているためです。oklch() は知覚的な均等性を持つ色空間なので、Lだけを変えたトーンは色相の印象を保ったまま明暗が揃います。UIのカラースケール（100〜900）を作るのに向いており、Chrome・Safari・Firefoxとも2023年以降で使えます。
    
    
    
    
    
      
    sRGBの外側は彩度を下げて収める
    
      
    OKLCHはsRGBより広い範囲を表せるため、oklch(70% 0.35 140) のような指定は画面に出せません。単純にRGBを0〜255へ切り詰めると色相までずれるので、このツールはCSS Color 4のガモットマッピングと同じ考え方で、明度と色相を保ったまま彩度だけを下げて収めます。収めた場合は結果の下に指摘が出ます。
    
    
    
    
    
      
    コントラスト比は不透明にしてから測る
    
      
    WCAGのコントラスト比は不透明な2色の相対輝度から求めるため、透過色のままでは判定できません。半透明の文字色や背景を検証するときは、まず背景に重ねた実際の色を出し、その値で比べます。文字色と背景色を決め打ちで検証したい場合は コントラスト比チェッカー にAA/AAAの判定表があります。
    
    
    
    
    
      
    CSSの名前付き色は148色
    
      
    tomato や rebeccapurple のような名前もそのまま入力できます。入力した色が名前付き色と完全に一致した場合は、その名前を指摘に表示します。名前付き色は同じ値に複数の名前があること（aqua と cyan、gray と grey）と、gray が #808080 なのに green が #008000（lime が #00ff00）という歴史的な事情があるので、チームで使う色の指定には向きません。
    
    
    
  
    

  
    
    
    From AI Agents
    
    
    この変換ロジックは、MCP（Model Context Protocol）サーバー @first-ch/tools-mcp の color_convert ツールとしても提供しており、ブラウザを使わずAIエージェントから直接呼び出せます。導入方法の詳細は AIエージェントからの使い方 を参照してください。
    
    
    導入
    
    
    claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp
    
    
    呼び出し例
    
    
    # HEXから全形式のコードを出す
color_convert(color="#c8501f")

# アルファ40%の rgba() / hsla() を作り、白背景に重ねた実際の色も見る
color_convert(color="#23282e", alpha=0.4, background="#ffffff")

# OKLCHで指定（sRGB外なら彩度を下げて収める）
color_convert(color="oklch(70% 0.35 140)")

# 明度パレットだけを取り出す
color_convert(color="dodgerblue", alphaTable=false)
    
  
    

  
    
    
    Other Tools