使い方
- 1
ハーモニーを選択
類似色や補色など、色のハーモニールールを選択して色間の関係を定義します。
- 2
ムードを選択
ムードセレクターで雰囲気を設定。パステル、ビビッド、ダークモードからブランドに合ったものを。
- 3
生成
生成ボタンをクリックしてユニークなパレットを作成。気に入った色はロックして残りを再生成できます。
- 4
エクスポート
個別のHexコードをコピーするか、エクスポートでTailwind CSS設定全体を取得できます。
カラーセオリーガイド
ハーモニーを理解する
- 類似色
色相環で隣り合う色で構成されます。穏やかで快適なデザインを生み出します。
- 補色
色相環で反対側にある色です。高いコントラストと強いインパクトを生み出します。
- トライアド
色相環で均等に配置された3色です。調和を保ちながら高いコントラストを提供します。
- 分割補色
補色スキームの変形。基本色とその補色に隣接する2色を使用します。
- モノクロマティック
単一色の明度と彩度の変化です。清潔で上品、落ち着いた印象を与えます。
- ランダム
厳格なルールのない完全ランダムな色。予想外のインスピレーションに最適です。
ムードを探る
- スタンダード
バランスの取れた彩度と明度。一般的なWebデザインやUIコンポーネントに適しています。
- パステルドリーム
高明度・低彩度。柔らかく心地よい。ライフスタイルや春のテーマに最適です。
- ネオンビビッド
高彩度・中明度。エネルギッシュで目を引くデザインに。
- ダークモード
低明度の無彩色トーン。深みがあり神秘的で現代的。OLEDの省電力にも効果的です。
- ヴィンテージレトロ
低彩度でわずかに温かみのあるトーン。ノスタルジックでクラシックな印象。
Choosing Colors That Work Together
Overview
Color choice can make or break a design. Random color combinations look chaotic; deliberate palettes built on color theory feel intentional and professional. This tool generates harmonious palettes from a single base color using established color theory relationships: complementary (opposite on the color wheel), analogous (adjacent), triadic (three evenly spaced), and tetradic (four). It also extracts palettes from uploaded images and shows hex/RGB/HSL values for direct use in CSS or design files.
How It Works
Color theory expressed mathematically: a color in HSL has hue (0–360°), saturation, and lightness. Complementary = base hue + 180°. Triadic = base + 120° and base + 240°. Analogous = base ± 30°. The tool computes these mathematically, then displays the resulting palette with copy-to-clipboard for each color. Image-based palettes use color quantization (k-means clustering) to find the most dominant colors in the uploaded image.
When to Use This
Designing UI for a website or app (primary, secondary, accent colors). Picking colors for a brand identity. Coordinating slide deck visuals. Choosing paint colors for a room (start from one wall, find complementary trim). Creating data visualization color schemes (categorical or sequential). Generating themes for graphics — Instagram posts, YouTube thumbnails, blog headers.
Frequently Asked Questions
What's the difference between complementary and analogous?
Complementary colors are opposite on the color wheel (blue + orange) — high contrast, visually striking. Analogous colors are next to each other (blue + blue-green + green) — calmer, more cohesive. Use complementary for accents, analogous for backgrounds.
How many colors should a design use?
60-30-10 rule: 60% dominant (background), 30% secondary, 10% accent. Most professional designs use 3–5 colors total. More than 5 starts to feel chaotic unless you're explicitly going for a vibrant playful look.
What's the WCAG contrast requirement?
For accessibility, text must have at least 4.5:1 contrast against its background (3:1 for large text). Black on white is 21:1. Dark gray on light gray often fails — check with a contrast tool before shipping.
おすすめのツール
役に立つかもしれない厳選されたツール