カラーパレット ジェネレーター

ジェネレーター
简 繁 BM BI 日本語 한국어 ไทย EN
Share:
By Checked against sources by , Founder & Architect, RECATOOLS Published Updated Last reviewed

調和のとれた5色のカラーパレットをワンタップで生成——ランダム・補色・類似色・トライアド・モノクロから選べます。気に入った色をロックして残りだけ振り直し、HEX コードをクリックでコピー、美しいパレットカードも書き出せます。ブラウザだけで完結、すぐ生成。

RT-FUN-091 · Fun & Misc
お使いのブラウザは古いため、このツールの操作機能は動作しません。Safari 13.1、Chrome/Edge 80、Firefox 74 以降に更新してください。

カラーパレット ジェネレーター

(スペースキーでも可)

コントラストの確認(WCAG 2.2)

 

色HEXrgb()hsl()白に対して黒に対して
     
     
     
     
     

すべての組み合わせ(コントラストの高い順)

  1. Aa
  2. Aa
  3. Aa
  4. Aa
  5. Aa
  6. Aa
  7. Aa
  8. Aa
  9. Aa
  10. Aa

数値は WCAG 2.2 のコントラスト比で、切り捨てて表示します(4.5:1 と出れば本当に 4.5:1 以上)。本文は 4.5:1(AA)または 7:1(AAA)、大きな文字(18pt、または太字 14pt)は 3:1 が基準です。配色法が決めるのは色相の関係だけで、コントラストは保証しません。色相環で正反対の2色でも、輝度がほぼ同じことがあります。

Advertisement
After tool · AD-W1 Responsive

使い方

配色法を選ぶ

「ランダム・補色・類似色・トライアド・モノクロ」から選びます。それぞれ色彩調和のルールで、5色の関係性を決めます。

「生成」を押す、またはスペースキー

押すたびに新しい調和配色が生まれます。気に入らなければもう一度、またはスペースキーでサッと振り直し。

ロック + コピー

気に入った色があれば🔓をタップしてロック。次に生成しても固定されます。HEX 値(例:#E8622A)をクリックすればそのままコピーでき、デザインに貼り付けられます。

カードを保存・共有

「パレットを保存」で5色を HEX 付きの画像として保存、「共有」で同僚や友人に送信、PDF での書き出しも可能です。

カラーパレット ジェネレーター:色彩理論で、数秒で「いい色」を

デザインで色選びは、つまずきやすいところです。1色だけならいいのに、5色そろえると途端に「ちぐはぐ」に見える。このツールは色彩調和の背後にあるルールを1つのボタンにしました——ランダムな5色を渡すのではなく、色相環の幾何学にもとづいて「もともと調和している」一組を組み立てます。あなたは気に入った色を選び、ロックし、コピーしてデザインに持ち込むだけ。

5つの配色法、5つの関係

最もよく使われる調和ルールを用意しました。それぞれ色相環上の関係です。モノクロ——同じ色相で明度だけを変える、最も安全で時代を選ばない配色。類似色——色相環で隣り合う色、柔らかく自然で、ひとつの風景の色のよう。補色——色相環で正反対の2色、高コントラストで目を引く。トライアド——等間隔の3色、鮮やかなのにバランスがいい。ランダム——明度の幅を保ちつつ色相を解き放ち、思わぬ発想を。配色法を変えれば、関係性ごと変わります。

「いい配色は寄せ集めではなく、関係で並べられたもの。」

HEX とは、なぜどこでも使われるのか

各色の下にある #E8622A のような文字列が HEX コードです——ウェブ、デザインソフト、ほぼすべてのデジタルツールで通用する色の「身分証」。# のあとに16進数6桁が続き、赤・緑・青それぞれの強さを表します。クリックでコピーし、CSS や Figma、スライドに貼れば色はぴったり一致。このツールが生成する色にはすべて HEX が付き、すぐ使えます。

ひとことコントラストについて

きれいなだけでなく、使える配色であることも大切です。文字と背景には十分なコントラストが必要で、そうして初めて読めます(アクセシビリティ標準 WCAG は本文に少なくとも4.5:1を推奨)。カード上の HEX ラベルは各色の明暗に応じて黒字・白字を自動で切り替え、読みやすさを保ちます——色を文字や背景に使うときはコントラストの確認をお忘れなく。ツールはすべてブラウザ内で動き、瞬時に生成し、何もアップロードしません。

Advertisement
After how-to · AD-W2 Responsive

ニュートンの七分割の色環、HEX の約1,677万色、そして HSL の明度が誤解を招く理由

01

HEX コードは赤・緑・青を16進数で表し、各チャンネルは00〜FF(0〜255)——理論上およそ1,677万色を表現できます。

02

ニュートンの『光学』(初版1704年、第1巻第2部 命題6)は、赤から紫までの7色に分けた円を描き、各弧の長さを音階の音程の比に合わせました。このツールが回している色相環の祖先です。

03

人間の目は緑に最も敏感で、だからこそ輝度の計算式では緑の重みが最も高く(約0.72)、赤(0.21)や青(0.07)を大きく上回ります。

04

アクセシビリティ標準WCAGは、本文と背景のコントラストを少なくとも4.5:1(大きな文字は3:1)求めており、これは弱視のユーザーに配慮するためです。

05

画面はRGB(光の加算)、印刷はCMYK(インクの減算)を使います。同じ HEX でも画面と紙ではわずかに見え方が違うことがあります。

06

このツールが HSL で配色を作るのは、調和が色相角度の回転だからです。ただし HSL の明度は目に見える明るさではありません。CSS Color 4 が指摘するとおり、黄 hsl(60 100% 50%) と青 hsl(240 100% 50%) は明度が同じ 50% でも、WCAG の相対輝度は 0.93 と 0.07。だから上のコントラスト確認では全ての組み合わせを実測しています。

よくある質問

  • 各色の下にHEX コード(例:#E8622A)が表示されます。クリックでコピーし、CSS・Figma・Photoshop・スライドなど HEX を受け付ける場所に貼れば、色はぴったり一致します。パレットカードの画像を参考用に保存することもできます。

  • それぞれ色相環上の幾何学的な関係に対応します。モノクロ=同一色相で明度だけ変化(いちばん無難);類似色=隣り合う色相(やわらか);補色=正反対の色相(コントラスト強);トライアド=等間隔の三色(鮮やかで均整);ランダム=色相は自由でも明度の幅は一定。切り替えると、配色全体の「関係性」が変わります。

  • 色の上の🔓をタップするとその色をロックできます。次に「生成」を押すと、ロックした色はそのまま、ロックされていない色だけが入れ替わります。気に入った色を一つ二つ残したまま、残りだけ何度も振り直して全体を整えられます。

  • 基準色を設定しない限り、はい。「生成」のたびに基準の色相・彩度・明度をランダムに選び、選んだモードの固定ルール(操作欄の下に表示)で残り4色を導きます。「この色から作る」にチェックすると、あなたの色はそのまま残り、ランダムに選ぶのは「ランダム」モードだけになります。

  • 自動では保証されませんし、配色法そのものも保証しません。補色どうしでも輝度がほぼ同じことがあり、コントラストを決めるのは輝度です。このツールがするのは実測です。コントラスト確認に10組すべての WCAG 2.2 コントラスト比を表示し(本文の AA 基準は 4.5:1、大きな文字は 3:1)、各色のラベルは黒か白のうち比が高いほうを使うので、必ず 4.5:1 以上になります。色覚特性のシミュレーションは行いません。

  • できます。「基準色」で色を選ぶ(または「この色から作る」にチェック)と、どのモードもその色を中心に組み立て、あなたの色はルールが定める基準の位置にそのまま残ります。🔒で任意の色をロックして、残りだけ振り直すこともできます。

  • 高解像度の JPEG 画像で、五つの色とそれぞれの HEX 値が並びます。シェアや保存に最適で、PDF も書き出せます。画像はすべてお使いの端末内で生成され、サーバーは経由しません。

  • どれも同じ色の別の表記です。RGB は赤・緑・青を 0–255 の三つの数で表し、HEX はその RGB を十六進数で書いたもの(#RRGGBB)、HSL は色相・彩度・明度で表し、人の感覚に近いものです。本ツールは内部で HSL を使って調和を導き、最後に汎用的な HEX を出力します。

  • いいえ。すべてのパレットはお使いのブラウザ内でその場で生成され、サーバーに送られることも、URL に書き込まれることも、収集されることもありません。ページを再読み込みすれば最初からやり直しです。

Method & sources

How it computes

Five colours from fixed HSL hue rotations of a base (complementary +180°, triadic ±120°, analogous 20° steps, monochromatic lightness ladder); HSL to sRGB by the CSS Color 4 §7.1 algorithm. Every pair's WCAG 2.2 contrast ratio, (L1 + 0.05) / (L2 + 0.05), shown rounded down; swatch labels use black or white, whichever contrasts more (ColourPaletteKernel).

What this tool implements

  • Colour conversion: HSL to sRGB and back by the W3C CSS Color Module Level 4 sample algorithms (§7.1 hslToRgb, §7.2 rgbToHsl), through the site's shared ColourConvertKernel; HEX as #RRGGBB.
  • Contrast: WCAG 2.2 relative luminance (sRGB linearised at 0.04045; L = 0.2126 R + 0.7152 G + 0.0722 B) and contrast ratio (L1 + 0.05) / (L2 + 0.05). Bands: 7:1 AAA and 4.5:1 AA for body text (SC 1.4.6, SC 1.4.3), 3:1 for large text (18 point, or 14 point bold). Ratios print rounded DOWN to one decimal, so a figure shown as 4.5:1 is never a 4.46 that fails.
  • Harmony rules are this tool's own, stated on the page in degrees and percent: analogous −40° to +40° in 20° steps; complementary three of the base hue and two at +180°; triadic +120° and +240° plus a tint and a shade; monochromatic lightness 88/72/56/40/26%; random five hues over a random 40–160° arc. A base colour the reader enters is kept exactly.
  • HSL lightness is not perceived lightness (CSS Color 4 §7: yellow and blue at 50% have WCAG luminance 0.93 and 0.07), so no harmony is presented as accessible; every pair is measured instead.
  • Corrected 2026-11-03: label ink by luminance < 0.45 (32.5% of 500,000 generated swatches under 4.5:1, worst 2.10:1) replaced by the higher-contrast of black and white (floor 4.58:1); Newton's colour circle dated 1666 corrected to Opticks, 1704.

Sources

  • W3C. CSS Color Module Level 4, Candidate Recommendation Draft, 1 November 2026 — §7.1 and §7.2 sample code, and the §7 note on HSL lightness across hues: https://www.w3.org/TR/css-color-4/
  • W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — definitions of relative luminance, contrast ratio and large-scale text; SC 1.4.3 and SC 1.4.6: https://www.w3.org/TR/WCAG22/
  • Newton I. Opticks. 4th ed. London: William Innys; 1730 (first edition 1704). Book I, Part II, Prop. VI, the seven-part colour circle. Project Gutenberg: https://www.gutenberg.org/ebooks/33504

What can make this go out of date

  • None at runtime: palettes and contrast are computed in the browser and nothing the reader picks is sent or written to the URL.
Advertisement
Pre-footer · AD-W3 728 × 90