無料配色ツール&カラーパレットのMyカラークリエイター

Webデザインに、
確かなインスピレーションを。

Myカラークリエイターは、Web制作者のための配色ツールです。美しいカラーパレットの発見から、アクセシビリティ対応のコントラストチェックまで、あなたのデザイン作業をサポートします。

Myカラークリエイター カラーパレット

How to Use3ステップでわかる使い方ガイド

STEP 1

発見する

カラーパレットギャラリーや配色理論に基づいた自動生成機能で、インスピレーションの源となる配色を見つけましょう。

STEP 2

検証する

アクセシビリティチェッカーで、選んだ色の組み合わせが十分に見やすいか(コントラスト比)を確認します。

STEP 3

実装する

気に入った色はワンクリックでCSSコードをコピー。すぐにあなたのデザインに反映できます。

配色ツール」では、カラーハーモニー理論に基づいた配色を自動で生成できます。
カラーパレット」では、テーマ別に厳選された美しい配色パターンを閲覧できます。

配色パターンを選んでみよう

類似色 (Analogous)

まとまりのある、落ち着いた配色。隣り合う色を使うため失敗が少なく、統一感のある穏やかな印象のデザインを作りたいときにおすすめです。

補色 (Complementary)

メリハリのある、印象的な配色。お互いを引き立て合う正反対の色を使うため、力強く、ユーザーの目を引きたいボタンやバナーなどに最適です。

トライアド (Triadic)

バランスの良い、活気のある配色。3つの色が均等なバランスで配置されるため、カラフルでありながら安定感のあるデザインを作れます。

モノクロマティック

統一感のある、洗練された配色。1つの色だけで濃淡を表現するため、ごちゃごちゃせず、シンプルでモダンな印象に仕上がります。

アクセシビリティ・コントラストチェッカー

コントラスト比とは、文字色と背景色の見やすさの指標です。数字が大きいほど見やすいことを意味します。
WCAGはWebのアクセシビリティ(誰にとっても使いやすいこと)の世界的な基準で、このツールでは基準値「4.5:1」以上を「PASS」としています。

#3498db
#ffffff
コントラスト比 4.13
WCAG AA (通常テキスト) FAIL