デザイン
カラーピッカー・カラーコード変換
無料・日本語・ローカル動作(Windows / macOS)
画面上の色を取得し、HEXやRGB、HSLを相互変換してパレット保存できます。
今すぐ使えます
このツールを無料でダウンロード
お使いのOSを選ぶだけで始められます。処理はPCの中で行い、ツール本体に広告は入りません。
- 無料で使える
- ファイルはPC内で処理
- ツール本体に広告なし
- 元ファイルを残して保存
すべてのバージョン・SHA-256Windows 版は準備中
macOS で開けない・「開発元を確認できません」と表示されるとき
macOS Sequoia(15)以降は、初回起動時に次の操作が必要です。Apple の公証前であることが理由で、安全性に問題はありません(ファイルは外部に送信されません)。
- アプリを「アプリケーション」フォルダに移動します。
- アプリをダブルクリックし、警告が出たら「完了」を押します(「ゴミ箱に入れる」は選ばないでください)。
- 「システム設定」→「プライバシーとセキュリティ」を開き、下部の「セキュリティ」にある「"(アプリ名)" は…ブロックされました」の右の「このまま開く」をクリックします。
- Touch ID またはパスワードで認証し、確認ダイアログで「このまま開く」を押します。次回からは通常どおり起動できます。
macOS Sonoma(14)以前では、アプリを右クリック →「開く」→「開く」でも起動できます。
うまくいかないときは、ターミナルで xattr -dr com.apple.quarantine と入力し(末尾に半角スペース)、続けてアプリのアイコンをターミナルにドラッグ&ドロップして Enter を押すと解除できます。
HEX・RGB・HSLのカラーコードを相互に変換できるデザイナー/開発者向けツールです。カラーピッカーやHEX入力で色を指定すると、各形式の値が即座に表示され、ワンクリックでコピーできます。白・黒背景に対するWCAGコントラスト比も自動判定するため、アクセシブルな配色チェックにも役立ちます。すべて端末内で完結する完全オフライン処理です。
こんな悩みを解決します
- —デザインカンプの色をHEXからRGBやHSLへ変換してCSSに反映したいとき
- —文字色と背景色のコントラスト比をチェックして読みやすさを確保したいとき
- —ブランドカラーを各形式で控えておき開発・デザイン間で共有したいとき
主な機能
- HEX・RGB・HSLのリアルタイム相互変換
- #abc / #aabbcc / 大文字小文字を自動正規化
- カラーピッカーとHEXテキスト入力の両対応
- 各形式のワンクリックコピー
- 白・黒背景に対するWCAGコントラスト比とAAA/AA判定
- ネット接続不要の完全オフライン処理
使い方
- 01ファイルをドラッグ&ドロップ、またはクリックで選択します。
- 02必要な設定を選び、実行ボタンを押します。
- 03別フォルダに結果を出力。元のファイルは変更しません。
よくある質問
HEX(3桁・6桁)、RGB、HSLの相互変換に対応しています。#付き・#なし、大文字・小文字のいずれの入力も自動で正規化します。
関連ツール
デザイン
ファビコン・アプリアイコン一括生成
1枚の画像からfavicon.icoや各サイズPNGを一括生成しタグも出力します。
WindowsmacOS詳細・ダウンロード →
デザイン
画像カラーパレット抽出
写真から主要色を抽出してパレット化し、配色の参考に使えます。
WindowsmacOS詳細・ダウンロード →
デザイン
CSSグラデーションジェネレータ
グラデーションをGUIで作成し、CSSコードとして出力できます。
WindowsmacOS詳細・ダウンロード →
デザイン
OGP・SNSヘッダー画像作成
OGPやSNSヘッダーを規定サイズの簡易キャンバスで作成し、PNG/JPEGで書き出せます。
WindowsmacOS詳細・ダウンロード →