色を入力
色として読めませんでした。「#FF0000」「rgb(255, 0, 0)」「hsl(0, 100%, 50%)」「red」のように入力してください。
画像から色を拾う
画像を読み込めませんでした。
画像の上をクリック（タップ）すると、その場所の色を拾います。
画像でよく使われている色
変換結果
文字色とのコントラスト（WCAG）
- 白い文字をのせる
- 黒い文字をのせる
明るさ違い（クリックで選択）
配色（クリックで選択）
らくらくカラーコードとは
カラーコード（HEX）とRGB・HSL・HSV・CMYKを相互に変換できる無料ツールです。色を選ぶか「#FF0000」「rgb(255, 0, 0)」「red」のように入力すると、各形式のコードをまとめて表示し、ワンタップでコピーできます。白・黒の文字とのコントラスト比（WCAG）、明るさ違いの色、補色・類似色などの配色も確認できます。画像をクリックしてその場所の色を拾う「スポイト」や、画像でよく使われている色の抽出にも対応。アカウント登録は不要で、画像はサーバーに送信されず、お使いの端末（ブラウザ）内だけで処理されます。
使い方
- 「カラーコード変換」で色を選ぶか、カラーコードを入力します
- HEX・RGB・HSL・CMYKなどのコードが表示されるので、「コピー」で使います
- 明るさ違いの色や配色をクリックすると、その色に切り替わります
- 「画像から色を拾う」では、画像をクリックした場所の色を調べられます
よくある質問
スクリーンショットからも色を拾えますか？
できます。画像ファイルを選ぶほか、コピーした画像をこのページで貼り付け（Ctrl+V / ⌘+V）しても読み込めます。
「よく使われている色」はどう選んでいますか？
画像のピクセルを似た色ごとにまとめて数え、多い順に、互いに似すぎない色を最大8色表示しています。
HEXとRGBの違いは？
どちらも赤・緑・青の強さで色を表します。RGBは0〜255の10進数（例：rgb(255, 0, 0)）、HEXはそれを2桁ずつの16進数にしたもの（例：#FF0000）で、Webサイトやデザインツールでよく使われます。
CMYKの値はそのまま印刷に使えますか？
表示しているCMYKは、画面の色から単純に計算した目安です。実際の印刷では用紙やインク、印刷会社のカラープロファイルによって色が変わるため、正確な指定が必要な場合は印刷会社にご相談ください。
コントラスト比とは？
文字と背景の明るさの差を表す値で、Webのアクセシビリティ基準（WCAG）では、通常の文字で4.5:1以上（AA）、より厳しい基準では7:1以上（AAA）が推奨されています。
画像はサーバーに送信されますか？
送信されません。色の変換や画像からの色の抽出は、すべてお使いのブラウザ内で行われます。
関連ツール
気に入ったら応援してください
このサイトは無料で運営しています。コーヒー1杯分の応援が励みになります。