実用ツールジェネレーター
カラーパレットジェネレーター
基準色、写真、またはランダムなアイデアから、調和の取れたアクセシブルなパレットを作成します。
HEX · RGB · HSL · OKLCH · WCAG
カラーパレットスタジオ
基準色、写真、またはランダムなアイデアから、調和の取れたアクセシブルなパレットを作成します。
🖼️ 画像から色を抽出画像はブラウザー内だけで処理され、サーバーへ送信されません。
ヒント：スペースキーでも再生成できます。
あなたのパレット
コードを押すとコピーできます。再生成前に色を固定または並べ替えできます。
カードをドラッグするか矢印ボタンで並べ替えます。
UIライブプレビュー
あなたのパレット
アクセシビリティとコントラスト
–
コントラスト表
色覚プレビュー
近似表示です。実際の利用者でも確認し、色だけで情報を伝えないでください。
グラデーション作成
パレットを書き出す
配色ルールを選ぶ
モノクロームは一つの色相を変化させます。類似色は近接し、補色、トライアド、テトラードはより広い色相関係を使います。
公開前にアクセシビリティを確認
WCAGの結果は文字でも表示します。AAには通常テキストで4.5:1、大きなテキストで3:1が必要です。
適切な色形式を使う
HEXとRGBは広く対応し、HSLは調整しやすく、OKLCHは知覚的に均一な明度と彩度を扱えます。
カラーパレット生成のよくある質問
配色ルールとは何ですか？
類似色、補色、トライアドなど、色相どうしの再現可能な関係です。
アクセシブルなパレットにするには？
文字と背景のコントラストを確認し、色だけに頼らず、操作状態もテストしてください。
画像はサーバーへ送られますか？
いいえ。色の抽出はブラウザー内で行われ、画像はアップロードされません。
どの書き出し形式を選べばよいですか？
WebサイトはCSS、スタイルシートはSCSS、アプリはJSON、見本にはPNGが便利です。
ペット・デジタル・Webツール一覧
ほかのペット・デジタルツールをお探しですか？
犬・猫の年齢やフード量、ペットの投薬量、カラーパレット、データ容量、画面密度、RGBからHEXへの変換ツールをご覧ください。