カラーツール
プロジェクト用のカラーパレットを生成、分析、エクスポートします。
カラーピッカー｜画像から色を抽出しHEX・RGB・HSL取得
画像上の好きな箇所から色を直接選び、HEX・RGB・HSLの値をその場で取得。ライブプレビュー付きでコードをコピーできます。
画像から色抽出｜主要カラーをHEX・RGBで自動取得
写真から主要な色を自動で抽出し、HEXとRGBコード付きの整ったパレットを生成。デザイン制作にそのままコピーや書き出しができます。
パレット生成｜画像から調和したHEX・RGB配色を自動作成
任意の画像から完全で調和のとれたカラーパレットを生成。編集可能なHEX・RGBコードでWebやUI向けにすぐ書き出せます。
支配的な色抽出｜画像の主要トーンをHEX・RGBで特定
画像を解析して支配的な色を占有率とともに特定し、正確なHEX・RGBコードを取得。デザインでの再利用にそのまま使えます。
類似色検索｜基準色に近いトーンと近似色をHEXで発見
HEXやRGBの基準色から近い色合いや類似トーンを多数発見。即時プレビューとコードで調和した配色づくりに役立ちます。
色変換｜HEX・RGB・HSL・HSV・CMYK・OKLCH・LAB相互変換
色をHEX・RGB・HSL・HSV・CMYK・OKLCH・LABの各形式へ即座に相互変換。正確な数値とライブプレビューでコピーできます。
コントラスト比チェック｜文字と背景のWCAG AA・AAA判定
2色間のコントラスト比を測定し、文字やUIのWCAG AA・AAA準拠を即判定。アクセシビリティ改善の提案も表示します。
パレット書き出し｜CSS・SCSS・JSON・ASE形式
作成したパレットをCSS・SCSS・JSON・ASE形式でワンクリック書き出し。Web制作やFigmaにすぐ取り込めます。
カラープレビュー｜実際のUIデザインで配色の見え方を確認
HEXやRGBの色が実際のUIでどう見えるかをプレビュー。文字・背景・コンポーネントを適用前に確認できます。
カラーダウンロード｜配色パレットをPNG画像として保存
パレットを読みやすいHEXコード付きのPNG画像として保存。配色やムードボードをチームと共有するのに最適です。
カラーパレット共有｜固有リンクで配色を送信し共同確認
HEX・RGBコードをすべて保持した固有リンクでパレットを共有。同僚やクライアントが同じ配色を一瞬で開けます。
カラーハーモニー｜補色・三色・類似・四色の調和配色を探索
基準色から補色・三色・類似・四色配色などの調和を探索。カラーホイールのプレビューと配色ごとのHEXコード付き。
CSSグラデーション生成｜線形・放射状・円錐形に対応
線形・放射状・円錐形のCSSグラデーションを位置や角度を調整して作成。ライブプレビューとコピー用CSSコード付き。
メッシュグラデーション｜多色の滑らかな背景をCSSで作成
調整可能なポイントと滑らかな遷移で美しい多色メッシュグラデーションを作成。ライブプレビューとCSSコード付きです。
アニメーショングラデ｜動くCSS背景をコード付きで作成
色・速度・方向を調整し、純CSSで動くアニメーショングラデーション背景を生成。ライブプレビューと貼付用コード付き。
色覚シミュレーター｜P型・D型・T型の色の見え方を確認
パレットがP型・D型・T型色覚でどう見えるかをシミュレートし、問題のある色を補正。誰にとっても使いやすい配色に。
テキスト読みやすさ検証｜文字色と背景色のWCAG対比を確認
文字色と背景色の組み合わせで読みやすさをテストし、WCAGコントラストを測定。どの画面でも明快な表示を確保します。
WCAGアナライザー｜配色パレットのAA・AAA準拠を分析
パレット全体のWCAG AA・AAA準拠を分析し、コントラスト不足の色の組み合わせを検出。アクセシブルな修正案を提案します。
グラスモーフィズム生成｜すりガラス効果のCSSを出力
調整可能なぼかしですりガラス風のグラスモーフィズム効果を生成。カードやメニュー向けのライブプレビューとCSS付き。
ニューモーフィズム｜柔らかいソフトUI効果をCSSで生成
明暗の影を調整したソフトUI風の柔らかなニューモーフィック効果を作成。ボタンやカード用のCSSコード付きです。
カラーシャドウ｜鮮やかなbox-shadow効果生成
色・ぼかし・オフセットを調整した鮮やかなカラーシャドウをCSSで生成。UIに奥行きを与えるbox-shadowコード付き。
デュオトーン効果｜画像に2色を適用しライブプレビュー表示
影とハイライトの色を選び、画像に2色のデュオトーン効果を適用。ライブプレビューとダウンロードに対応します。
画像カラーフィルター｜色調・色相・彩度の補正をライブ適用
画像にカラーフィルターや色調、色相補正をライブプレビュー付きで適用。統一した雰囲気に仕上げて書き出せます。
カラームードボード｜配色パレットで視覚的な着想ボードを作成
パレットと色の組み合わせを並べて視覚的なムードボードを作成。着想を集めチームに一貫した配色を提示できます。
カラーミキサー｜2色を混色し結果をHEX・RGBで取得
2色以上を割合を調整して混ぜ合わせ、結果の色をHEX・RGBコードで取得。ライブプレビューでそのままコピーできます。
ティント＆シェード｜任意の色から明暗の階調スケールを生成
1つの色から明るいティントと暗いシェードの階調を生成。段階的なパレットやデザインシステム向けのHEXコード付き。
ランダムパレット｜着想用の調和配色をワンクリックで生成
調和したパレットをワンクリックでランダム生成し、創作の着想に活用。気に入った色を固定しHEXで書き出せます。
キーワード配色生成｜テーマや感情の言葉から配色を自動作成
テーマや感情をキーワードで指定し、その雰囲気に合ったパレットを生成。自分のプロジェクトに使えるHEXコード付き。
Tailwind配色｜設定用カラースケールを50〜950で生成
基準色から50〜950の完全なカラースケールを生成し、Tailwind CSS設定にそのまま貼り付けられるコードを出力します。
CSS変数｜配色をカスタムプロパティ変数として書き出し管理
パレットを貼付可能なCSSカスタムプロパティ変数として書き出し。テーマやコンポーネントの色を一元管理できます。
shadcn/uiテーマ｜配色変数を生成しCSSに貼り付け
ライト・ダークモード用のカラー変数を備えたshadcn/uiテーマを生成。CSSに貼り付けて一貫したUIを構築できます。
SCSS変数書き出し｜配色をSass変数として出力し管理
パレットを再利用可能なSCSS・Sass変数として書き出し、スタイルシートに読み込んで色を整然と管理・拡張できます。
色温度分析｜配色の暖色と寒色トーンを数値で判別し調整
色の暖かい・冷たいトーンを数値で分析し、暖色と寒色を判別。パレットのバランスを整え理想の雰囲気を作れます。
カラームード｜色が伝える感情と心理を探り最適な配色選び
各色に結びつく感情や心理を探り、ブランディングやUI、創作で狙った印象を伝える色を選ぶ手がかりになります。
ブランドカラー抽出｜ロゴや画像から配色をHEXで取得
カタログからブランドを検索し、登録されているブランドカラーを確認して、必要なHEXコードをすぐにコピーできます。
カラートレンド｜旬のトレンド配色とトーンを発見し着想に活用
旬のトレンドカラーとパレットを発見して制作の着想に。厳選された配色とWeb・UI・グラフィック向けHEXコード付き。
グラデーションマップ｜画像のトーンを色の階調変換で再適用
選んだ色の階調に画像のトーンを再マッピングするグラデーションマップを適用。ライブプレビューと結果の保存に対応。
カラーオーバーレイ｜画像に色相と不透明度の重ねを適用
色相と不透明度を調整したカラーオーバーレイを画像に追加し、ライブプレビューで作品全体の雰囲気を統一できます。
モノクロ配色｜単一色の明度と彩度から階調的な配色を作成
1つの色から明度と彩度を変えたモノクロカラースキームを作成。すっきり洗練されたデザイン向けのHEXコード付き。
補色スキーム生成｜対照的な配色ペアで鮮やかな対比を作成
カラーホイール上の対照的な色のペアで、鮮やかでバランスの取れた補色スキームを生成。制作に使えるHEXコード付き。
UIプレビュー｜実際のUI部品モックアップで配色を確認
ボタンやカード、メニューなど実際のUIコンポーネントのモックアップで配色を試し、適用前に組み合わせと対比を確認。
ソーシャルプレビュー｜SNS投稿モックアップで配色確認
リアルなSNS投稿のモックアップで配色を確認し、色の組み合わせと文字の読みやすさを投稿前にチェックできます。