パステルカラー生成ツール

パステルカラーは、原色に白をたっぷり混ぜた色です

パステルカラーは、原色に白を多く混ぜて、明るく淡くした色です。上の最初の画面に出ているピンク #FFCAE0 は、原色 #FF006A が 21%、白が 79% の色です。レモン色の #FDF6C5 は、原色 #FFDF00 が 22%、白が 77%、黒が 1% で成り立っています。Wikipedia(日本語版)も、パステルカラーを、原色のようにはっきりした色合いではなく、白が混ざったような淡い色彩だと説明しています。

このツールでは、色の系統とトーンを選ぶと、パステル3~8色の組み合わせを引いてくれます。気に入った色はロックで固定して残りだけを引き直せますし、パステルマップの点をドラッグして、色相と濃さを自分で微調整することもできます。選んだ色ごとに、読みやすい文字色とコントラスト比、HEX・RGB・HSL・HWB・OKLCH のコード、原色と白を混ぜた割合をあわせて表示します。

パステルの配色が必要になる場面

パステルは広い面に塗っても目が疲れにくく、文字や写真の邪魔をしないため、背景色としてよく使われます。ただし、使う場所によって気をつける点が違います。

• Webサイト・アプリの画面: カードの背景、お知らせの帯、タグのように、面積は広くても目立ちすぎてはいけない場所に使います。このときは、上に載せる文字が読めるかどうかが最も大切なので、ペアの文字色とコントラスト比をあわせて確認します。
• ベビー用品・春のデザイン: 出産祝いのメッセージカード、幼児向けの教材、春の新商品バナーなど、やさしい印象がほしいデザインに使います。系統は混ぜても、トーンを1つにそろえると、色数が多くても1つのセットに見えます。
• プレゼン資料・文書: 表の行の区切り、手順ごとのボックス、グラフの背景エリアに使います。濃い強調色を1色とパステルを数色組み合わせると、強調したい場所がはっきりします。
• 手帳・グッズ・イラスト: ステッカー、手帳のデコレーション、イラストの下地色を決めるときに使います。画面の色を絵の具や印刷に移すと同じ色にならないことがあるため、試し刷りが必要です。

ツールの使い方

1. 色の系統で、すべて、または赤・オレンジ・黄・緑・ミント・青・紫・ピンクのどれかを選びます。系統を1つ選ぶと、その中で色相と濃さが重ならないように分けて引きます。
2. トーンを淡め・やわらか・澄んだ色・ミックスから選び、色数を3~8色で決めます。系統やトーンを変えると、固定していない色がすぐに引き直されます。
3. 引き直すを押すか、Space キーを押します。気に入った色はカードのロックを押して固定すると、引き直しても残ります。
4. カードを押して色を選んだら、パステルマップでその点をドラッグするか、好きな位置を押します。左右で色相、上下で濃さが変わります。点にフォーカスして矢印キーを押すと1マスずつ、Shift と一緒に押すと10マスずつ動かせます。
5. ブランドカラーなど決まった色があるときは、手持ちの色をパステルにに #2563EB、rgb(37 99 235)、royalblue のように入れます。同じ色相のパステルに変わり、いま選んでいる枠に入って固定されます。
6. 完成した組み合わせは、HEX をまとめてコピー、CSS変数をコピー(ペアの文字色を含む)、PNGで保存(1200 × 630)、リンクをコピーで持ち出せます。リンクには色と固定の状態が入ります。

パステルは、白を混ぜた量で見分けます

CSS Color 4 の HWB 表記は、1つの色相に白と黒をどれだけ混ぜたかで色を表します。画面上の1つの色は、原色・白・黒の割合に正確に分けて書き換えられます。白は RGB の最小値、黒は 255 から最大値を引いた分で、残りが原色です。パステルは、このうち白が圧倒的に多く、黒がほとんどない色です。

ツールは色を引くとき、この割合を直接決めるのではなく、見た目の差が人間の感覚に近くなるよう作られた OKLab 色空間で、原色と白を結ぶ直線上の1点を選びます。同じ白 79% でも、原色が黄ならとても明るく、紫ならそこまで明るく見えないからです。マップ上の濃さの値がその点の位置で、詳細欄の混ぜる割合は、その結果を HWB に分け直した値です。

3つのトーン: 淡め、やわらか、澄んだ色

濃さは 0 から 100 までで、0 に近いほど白が多くなります。トーンは濃さを3つの範囲に分けたもので、「ミックス」は 0~100 の全体から引きます。白の割合は、マップ上のすべての色相で計算した範囲です。

パステルカラー一覧: 8系統 × 3トーン

各系統の中央の色相から、淡め(濃さ 15)・やわらか(48)・澄んだ色(82)で引いた24個のコードです。ツールのマップ上の同じ位置、同じ値なので、表で選んだ色をマップで少しずつ動かして、近い色をさらに探せます。

パステルの上に載せる文字色

WCAG 2.2 は、本文の文字と背景の明度のコントラスト比を 4.5:1 以上(AA)、より厳しくは 7:1 以上(AAA)にするよう求めています。パステルはとても明るいので、白い文字を載せるとほとんど読めません。ツールのマップにある 36,360 色のパステルをすべて計算すると、白い文字のコントラスト比は、最も高い色でも 1.8:1 で、大きい文字の基準 3:1 にも届きません。

反対に、同じ色相のとても濃い色(OKLCH の明度 36%)を文字に使うと、すべてのパステルで 6.1:1 以上になり、88.0% は 7:1 以上です。ツールが「ペアの文字色」として表示するのがこの色です。白い背景では 4.5:1 をわずかに超えるグレーの #767676 も、パステルの上では基準に届きません。

コントラスト比は、小数第1位までを残して、それ以下は切り捨てて表示しています。WCAG ではコントラスト比を四捨五入しないため、4.49:1 は 4.5:1 に達していないものとして扱います。黒でも十分に読めますが、同じ色相の濃い色を使うと背景と一揃いに見えるので、パステルならではのやわらかい印象が損なわれにくくなります。

系統によって明るさが違う理由

同じ「やわらか」のトーンでも、黄とミントのパステルは白に近く、ピンクと紫は色が濃く見えます。原色そのものの明るさが違うためです。黄の原色は最初から明るいので、白を少し混ぜるだけでとても明るくなり、紫の原色は暗いので、白をたくさん混ぜないと同じ明るさになりません。

そのため、ツールは原色が暗い系統ほど白を多く混ぜて、パステルの明るさが一定の水準を下回らないようにそろえています。黄のパステルを濃くしようと暗くすると、からし色やオリーブ色のようにくすんでしまうので、濃さを 100 まで上げても、黄の系統のパステルには白が 60% を超えて残るようにしました。

手持ちの色をパステルにする

「手持ちの色をパステルに」は、入力した色の OKLCH の色相角をそのまま保ち、いま選んでいるトーンの中央の濃さでパステルを作ります。入力した色がすでにその色相でいちばん澄んだパステルより明るいときは、元の明るさにいちばん近い濃さを選ぶので、もともとパステルの色はほぼそのまま残ります。下の表はトーンが「やわらか」のときの結果です。

グレー・白・黒のように彩度がほとんどない色(OKLCH の彩度が 0.006 未満)は、どの系統のパステルにするか決められないため、変換せずに案内だけを表示します。aliceblue #F0F8FF のようにごく淡く色づいた白は彩度が 0.013 あるので、その色相でいちばん淡いパステル #E1F1FF に変わります。

よくある失敗

• パステルの背景に白い文字: ボタンやバナーでよく見かけますが、コントラスト比は 1~1.8:1 しかなく読みにくくなります。文字にはペアの文字色か黒系を使い、白い文字がどうしても必要なら、背景をパステルではなく濃い色に変えます。
• パステル同士で文字と背景: ピンクの地に空色の文字のように、パステルを2つ重ねると、どちらも明るいのでコントラストがほとんど出ません。パステルは面に、文字は濃い色に任せます。
• HSL の彩度の数字だけで判断する: #FFCAE0 の HSL 表記は hsl(335 100% 89.6%) で、彩度は 100% です。HSL の彩度は明るさとは別に計算されるためです。パステルかどうかは、HSV の彩度(この色は 21%)や、HWB の白の割合(79%)で見るほうが適切です。
• グレーを混ぜてくすんだ色: 白の代わりにグレーを混ぜると、HWB の黒が増えて落ち着いた「ダスティ」な色になります。これもよく使われる色ですが、澄んだパステルとは別の系統なので、このツールの結果と混ぜると、片方だけがくすんで見えることがあります。
• 系統ごとにトーンがばらばら: 淡い黄と澄んだ紫を一緒に使うと、紫だけが浮いて見えます。複数の系統を使うときは、トーンを1つに固定して引くと、まとまって見えます。
• 画面の色をそのまま印刷する: モニターのパステルは光で見る色なので、紙に印刷するとよりくすんだり、黄みがかったりすることがあります。印刷物は、印刷会社の CMYK 見本や試し刷りで確認します。

限界と注意

• 「パステル」に決まった国際基準はありません。このツールの範囲(原色に白 58~93%)は、一般にパステルと呼ばれる色が収まるように決めた設計値で、他のツールのパステルとは異なる場合があります。
• すべての色は sRGB のディスプレイを基準にしています。広色域のモニターや、スマートフォンのナイトモード、色の補正設定によっては、同じコードでも違って見えます。
• 混ぜる割合は、画面の色を HWB に分けた値です。絵の具や色鉛筆の実際の量とは異なるため、画材を混ぜるときは参考程度にとどめ、試し塗りで確認してください。
• 明度のコントラスト比は、文字と背景の明るさの差だけを見ています。色覚に特性のある人に2つのパステルが区別できるかどうかは、別に確認する必要があります。
• 引き直しはブラウザーの乱数を使うため、同じ設定でも毎回違う組み合わせが出ます。気に入った組み合わせは、リンクのコピーやPNG保存で残しておいてください。

基準: 色は W3C CSS Color 4(2026年10月20日の Candidate Recommendation Draft)の OKLab・HWB の定義で、コントラスト比は WCAG 2.2(2024年12月12日の勧告)の相対輝度の式で計算しています。表のコードとコントラスト比は、2026年10月21日にこのツールで計算した値です。

出典

• 01W3C — CSS Color Module Level 4, 8. HWB Colors色相に白と黒を混ぜる量で色を表す hwb() 表記。白 + 黒が 100% 以上ならグレー
• 02W3C — CSS Color Module Level 4, 9.2 Oklab and OkLChマップと生成に使った OKLab・OKLCH 色空間、14節の色域マッピング(彩度を下げて sRGB の内側へ)
• 03W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)本文の文字 4.5:1、大きい文字 3:1、1.4.6 の 7:1 とコントラスト比の計算式
• 04Björn Ottosson — A perceptual color space for image processingOKLab 色空間の定義と変換行列
• 05Wikipedia — パステルカラー桜色や藤色のように白色が混ざったような淡い色彩という説明

よくある質問

あわせて使いたいツール