Web制作の配色作成と
アクセシビリティ診断ツール
Myカラークリエイターは、Web制作者のための配色ツールです。美しいカラーパレットの発見から、アクセシビリティ対応のコントラストチェックまで、あなたのデザイン作業をサポートします。
How to Use配色ツールとコントラストチェックの使い方
発見する
カラーパレットギャラリーや配色理論に基づいた自動生成機能で、インスピレーションの源となる配色を見つけましょう。
検証する
アクセシビリティチェッカーで、選んだ色の組み合わせが十分に見やすいか（コントラスト比）を確認します。
実装する
気に入った色はワンクリックでCSSコードをコピー。すぐにあなたのデザインに反映できます。
配色パターンを選んでみよう
類似色 (Analogous)
まとまりのある、落ち着いた配色。隣り合う色を使うため失敗が少なく、統一感のある穏やかな印象のデザインを作りたいときにおすすめです。
補色 (Complementary)
メリハリのある、印象的な配色。お互いを引き立て合う正反対の色を使うため、力強く、ユーザーの目を引きたいボタンやバナーなどに最適です。
トライアド (Triadic)
バランスの良い、活気のある配色。3つの色が均等なバランスで配置されるため、カラフルでありながら安定感のあるデザインを作れます。
モノクロマティック
統一感のある、洗練された配色。１つの色だけで濃淡を表現するため、ごちゃごちゃせず、シンプルでモダンな印象に仕上がります。
配色ツール（自動生成）
アクセシビリティ・コントラストチェッカー
コントラスト比とは、文字色と背景色の見やすさの指標です。数字が大きいほど見やすいことを意味します。
WCAGはWebのアクセシビリティ（誰にとっても使いやすいこと）の世界的な基準で、このツールでは基準値「4.5:1」以上を「PASS」としています。
色を探す・変換する
HEX(16進数)とRGB値をリアルタイムで相互変換します。
入力による変換はもちろん、カラーピッカーやパレットから直感的に色を選んでコードを取得することも可能です。
よくある質問
- 作成したカラーパレットは商用利用できますか？
- はい、Myカラークリエイターで生成された配色は、Webサイト制作、チラシ、ロゴなど、個人・商用問わず無料でご自由にお使いいただけます。
- アクセシビリティの「AA」とは何ですか？
- WCAG（Webコンテンツ・アクセシビリティ・ガイドライン）の適合レベルです。AAは一般的な基準で、通常のテキストでコントラスト比4.5:1以上が求められます。
- スマホでも使えますか？
- はい、レスポンシブ対応しており、スマートフォンやタブレットからでも配色生成やコントラストチェックが可能です。
人気のカラーパレットを探す
伝統色カラー | パステルカラー | 原色 | ビビッドカラー | モノトーン | グラデーション | アースカラー | ウェブセーフカラー
Passion-Creator 姉妹ツール
My HPクリエイター
完全無料のホームページテンプレートサイトです。テンプレートは全てレスポンシブ対応！
Myフォームクリエイター
管理画面からメールフォームを簡単に作成。自動返信メールやファイル添付機能も搭載しています。
My Logo Creator
登録不要で本格的なロゴが無料で作成できるツールです。
My OGPクリエイター
SNSでシェアされた時に目を引くOGP画像を簡単に作成。クリック率の向上に貢献します。
My Faviconクリエイター
サイトのシンボルとなるファビコンを作成。テキストや画像から、様々なサイズのアイコンを生成できます。
My Canvas Creator
今お使いのデザインツールです。SNS投稿やバナー、チラシなどをブラウザだけで作成できます。
スマート割り勘＆立替精算
面倒な割り勘計算と立替精算を自動計算で一発解決！登録なしで使える完全無料のブラウザツールです。