Stax
Tools

カラーパレット生成

16進カラーから10色相と10調和色を生成。

HSL(217°, 91%, 60%)

Lightness scale from 10% (darkest) to 90% (lightest). Click any swatch to copy its hex value.

優れたカラーパレットとは何か？

配色ハーモニーのルール

パレットをコードで使う

優れたカラーパレットは通常3つの層で構成されます。ブランドやコンセプトを表すベースカラー、視覚的な多様性を生み出しながら見た目を保つハーモニクスのセット、そして新しい色相を導入せずに背景、ボーダー、テキスト、アクセントの選択肢を与える明度スケールです。

hex値をCSSカスタムプロパティ、Tailwind config、またはデザイントークンファイルに直接コピーしてください。シェードスケール（100〜1000）はTailwindの命名規則に直接マッピングされます。シェードをtailwind.config.jsのtheme.colorsに貼り付けると、すべてのユーティリティクラスで動作する完全カスタムのカラーシステムが完成します。

  • 補色: 高コントラスト、エネルギッシュ。ブランドカラーに対してCall-to-Actionボタンに使用。
  • 類似色: 低コントラスト、調和的。落ち着いたUIや自然にインスパイアされたデザインに最適。
  • 三角配色: バランスが取れ、鮮やか。遊び心のあるブランドや3カテゴリのデータビジュアライゼーションに向いている。
  • スプリット補色: 補色よりも緊張感が少なく、類似色より多様性がある。Webデザインに汎用的な選択。
  • 四色配色: 豊かで複雑。1色が主役でほかがアクセントとして機能する場合に最適。

よくある質問

What is a colour palette?
A colour palette is a curated set of colours used consistently across a design — brand identity, UI, or illustration. A good palette typically has a primary colour, a few harmonics (colours that work well together based on colour theory), and a lightness scale (shades from very dark to very light).
What are colour harmonics?
Colour harmonics are colours related to your base by their position on the colour wheel. Complementary is directly opposite (180°); analogous colours are neighbours (±30°); triadic colours are equally spaced at 120°; split-complementary replaces the direct complement with two adjacent colours at ±150°; tetradic (square) uses four colours at 90° intervals.
How do the shades work?
The shade scale keeps your hue and saturation constant and varies lightness from 10% (very dark) to ~90% (very light) in equal steps — generating 10 swatches labelled 100–1000, similar to Tailwind CSS colour scales.
How do I copy a colour?
Click any swatch to copy its hex code to your clipboard. A 'Copied!' confirmation appears briefly. You can then paste the hex code into Figma, CSS, or any design tool.
What colour model does this tool use internally?
All calculations are done in HSL (Hue, Saturation, Lightness) which makes it easy to rotate hue for harmonics and vary lightness for shades. The display and copy values are standard hex codes.

関連ツール