直感で選べる！Web色見本帳｜RGB・HEX・HSL・CMYK

2026年2月9日

全216色の中から、直感で『いいな』と思った色をクリック！
Webサイトや推し活に使えるカラーコード（RGB・HEX・HSL・CMYK）を、ワンタップで瞬時にコピーできる便利なカラーパレットです。

Format:

Copied!

💡 基本的な使い方

コピー: 色の四角をクリックするだけで、コードがコピーされます。
形式切替: 左上の「HEX / RGB / HSL / CMYK」ボタンで、コピーする文字の形式を変えられます。
絞り込み: 「Red」「Blue」などのボタンを押すと、その色味だけを表示します。「All」で元に戻ります。

📚 用語の解説

Hue (色相/ヒュー) – 「色味の違い」
赤、青、黄色といった「色の種類」のことです。円形に並べた「色相環」をイメージしてください。「Sort: Hue」ボタンを押すと、バラバラだった色が虹のグラデーション順に並び直すので、好みの色が探しやすくなります。
HEX (ヘックス) – 「Web用の記号」
`#FF5733` のように `#` と英数字で表す形式です。Webサイトを作るときに一番よく使われる、コンピュータ用の色のあだ名のようなものです。
RGB (アールジービー) – 「光の三原色」
赤(Red)・緑(Green)・青(Blue)の3つの光を混ぜて色を作ります。パソコンやスマホの画面はこの仕組みで光っています。数値は `0〜255` で、大きいほど明るく光ります。
HSL (エイチエスエル) – 「人間の感覚」
色を「色相(Hue)」「鮮やかさ(Saturation)」「明るさ(Lightness)」の3つで指定します。「もっと鮮やかにしたい」「もう少し暗くしたい」といった調整が直感的にできる、人間に優しい形式です。
CMYK (シーエムワイケー) – 「インクの色」
シアン(Cyan)・マゼンタ(Magenta)・イエロー(Yellow)・キープレート(Key plate/黒)の4つのインクの混色比率です。印刷物を作る際に使われます。

⚠️ 【重要】CMYK変換の注意点
画面上の色(RGB)は、インク(CMYK)よりも鮮やかな色を表現できます。そのため、ここで表示されるCMYK値はあくまで計算上の近似値です。
実際の印刷では、画面よりも色がくすんで（暗くなって）見えることが多いので、あくまで目安としてお使いください。

📝 計算式について
このツールでは、RGB(0〜255)を計算式で変換して表示しています。
1. RGBそれぞれを0〜1に変換
2. K = 1 - max(R, G, B) で黒の成分を算出
3. 残りの成分から C = (1-R-K)/(1-K) のように各色を算出
4. 最後に100分率(%)に直しています。

⚠️ ご利用上の注意

モニタによる色の見え方
お使いのパソコンやスマートフォンの画面（ディスプレイ）の設定や種類によって、色の見え方は微妙に異なります。ここで選んだ色が、他の人の画面でも全く同じに見えるとは限りません。
アクセシビリティ（見やすさ）
薄い色を文字色に使ったり、濃い色同士を組み合わせたりすると、文字が読みづらくなることがあります。Webサイトのデザインに使う際は、背景色と文字色の「コントラスト（明度差）」にも気を配ってみてください。

ご利用にあたっては、本Webアプリの利用規約も合わせてご確認ください。

バグや表示の乱れなどがあれば、こちらよりお知らせください。