薄ピンクのカラーコード一覧｜#FFC0CB・#FD9BA5と12色比較、RGB設定まで徹底解説

薄ピンクのカラーコードを探しているなら、まず押さえたいのが、標準的なピンクの#FFC0CBと、やや鮮やかな薄ピンクの#FD9BA5です。どちらもピンク系のデザインに使いやすい色ですが、赤みの強さや明るさが異なるため、Webサイト、SNS画像、プレゼン資料、バナーなど、用途によって適した色が変わります。

2026年にCanvaやPowerPointでデザインを作る場合も、HEXコードやRGB値を正しく指定すれば、色を感覚だけで選ぶ必要はありません。この記事では、薄ピンク12色の色見本とカラーコード、RGB・HSL値、近いCSS色名、サーモンピンクとの違い、配色の組み合わせまで整理しました。コピーして使える数値と、失敗しにくい選び方を紹介します。

📌 【この記事の重要ポイントまとめ】

• 代表的な薄ピンク：#FFC0CBは標準的なピンク、#FD9BA5は赤みがやや強い明るいピンク。
• 12色を比較：HEX・RGB・HSL値を一覧で確認でき、淡い桜色から鮮やかなピンクまで選べる。
• 実務でも使える：CanvaやPowerPointに数値を入力する方法と、白・グレー・ブラウンなどとの配色を解説。

【まず確認】薄ピンクの代表色は#FFC0CBと#FD9BA5

薄ピンクには、すべてのデザインで共通して使われる単一のカラーコードがあるわけではありません。白を多く含んだ淡いピンク、赤みが強いピンク、少し黄みを含む桃色など、複数の色が薄ピンクとして扱われます。

色選びの出発点として覚えておきたいのが、CSSの標準色名「pink」に対応する#FFC0CBと、明るい桃色に近い#FD9BA5です。

#FFC0CBは、CSSで定義された標準色「pink」の値です。赤の成分が255、緑が192、青が203で、赤を最大値に保ちながら緑と青を加えることで、明るいピンクになります。

一方、#FD9BA5は赤が253、緑が155、青が165です。#FFC0CBより緑の成分が少なく、全体として赤みが強く見えます。華やかさや存在感を出したい場合に向いています。ただし、このコード自体にCSSの標準色名が割り当てられているわけではありません。

色を選ぶときは、コードの名前だけで判断しないことが大切です。「薄ピンク」という呼び方が同じでも、実際の見た目は明るさ、赤み、彩度によって変わります。

【12色比較】薄ピンクのHEX・RGB・HSLカラーコード一覧

薄いピンクの色見本を、使いやすい12色に整理しました。淡い色から赤みのある色、桃色寄りの色まで比較できます。色名のうち、CSS標準色名が存在するものはその名称を記載し、それ以外は見た目をイメージしやすい便宜的な名称を使っています。

※RGBは赤・緑・青の順で、各成分は0〜255。HSLは色相・彩度・明度の順で、色相は度数、彩度と明度はパーセントで表記しています。HSL値はRGB値から算出して丸めた目安です。色名はCSSの標準色名と独自の説明用名称を区別しています。

12色の中から迷った場合は、次の基準で選ぶと絞り込みやすくなります。

• 最も一般的な薄ピンク：#FFC0CB
• 赤みを強く出したい：#FD9BA5
• 淡く、やわらかな印象にしたい：#FADADD、#FADDE1
• 桜や春らしい印象にしたい：#FFD1DC
• 白に近い背景色にしたい：#FFF0F3
• 暖かみのある桃色にしたい：#FFDAB9

なお、同じHEXコードでも、ディスプレイの設定、画面の明るさ、周囲の色によって見え方は変わります。デザインに使う際は、単独の色見本だけでなく、実際の背景や文字と組み合わせて確認するのがおすすめです。

【色番号の読み方】HEX・RGB・HSLの違いと薄ピンクの作り方

カラーコードには複数の表現方法があります。W3Cの「CSS Color Module Level 4」では、HEX、RGB、HSLなどが色を指定する方法として定義されています。それぞれの役割を理解しておくと、Web制作と画像編集、プレゼン資料の間で色を扱いやすくなります。

HEX：6桁の16進数で色を指定する

HEXコードは、先頭に「#」を付けた6桁の16進数です。たとえば#FFC0CBは、赤・緑・青の各成分を2桁ずつ並べています。

• FF：赤（255）
• C0：緑（192）
• CB：青（203）

16進数の「FF」は10進数の255、「C0」は192、「CB」は203に相当します。6桁のHEXコードは、WebサイトのCSSや画像編集ツールで広く使われています。

RGB：赤・緑・青の数値で指定する

RGBは、赤（Red）、緑（Green）、青（Blue）の光の強さを、それぞれ0〜255の整数で表す方式です。#FFC0CBをRGBで指定すると、RGB（255, 192, 203）になります。

HEXとRGBは、同じ色を異なる書式で表現したものです。たとえば、WebのCSSでは次のように記述できます。

/* HEXで指定 /
color: #FFC0CB;
/ RGBで指定 */
color: rgb(255, 192, 203);

どちらを使っても指定する色は同じです。ただし、透明度も扱いたい場合は、CSSのrgbaや、アルファ値を含む8桁のHEX表記など、用途に合った形式を選びます。

HSL：色相・彩度・明度から薄ピンクを作る

HSLは、色相（Hue）、彩度（Saturation）、明度（Lightness）の3要素で色を表す方式です。HEXやRGBよりも、人間が色の印象を調整しやすいという利点があります。

• 色相：色味の方向。赤に近いピンクは、おおむね350°前後が目安。
• 彩度：色の鮮やかさ。下げると灰色に近づき、上げると色味が強くなる。
• 明度：色の明るさ。上げると白に近づき、下げると暗くなる。

たとえば、赤みのある薄ピンクをCSSで作るなら、次のように指定できます。

color: hsl(354, 80%, 85%);

この例では、色相を354°に設定し、彩度を80%、明度を85%にしています。さらに明るくしたい場合は明度を上げ、落ち着いた印象にしたい場合は彩度を下げると調整しやすくなります。

ただし、HSLの数値を整数に丸めると、元のHEXコードと完全に一致しない場合があります。既存の色を再現したい場合はHEXまたはRGBをそのまま入力し、新しい色を作りたい場合はHSLで調整する、という使い分けが実用的です。

【CSS色名を比較】薄ピンクとサーモンピンクは何が違う？

Webサイトで薄ピンクを指定するときは、HEXコードだけでなくCSSの標準色名も利用できます。ただし、日本語の色名とCSSの色名は必ずしも一対一で対応していません。

MDNのCSS色名資料では、「pink」「lightpink」「mistyrose」などが標準色名として定義されています。代表的な色とコードを整理すると、次のようになります。

• pink：#FFC0CB。標準的なピンクとして使いやすい色。
• lightpink：#FFB6C1。CSSで名前が定義された明るいピンク。
• mistyrose：#FFE4E1。白に近く、わずかに赤みを感じる淡い色。
• peachpuff：#FFDAB9。ピンクというより、黄みやオレンジみを含む桃色寄りの色。
• salmon：#FA8072。ピンクよりオレンジみが強く、暖かい印象の色。
• lightsalmon：#FFA07A。明るく、オレンジみが強いサーモン系の色。

ここで注意したいのが、「薄ピンク」「サーモンピンク」は、単一のHEXコードを指す厳密なCSS標準色名ではないという点です。「salmon」や「lightsalmon」はCSSの標準色名ですが、一般的に呼ばれるサーモンピンクと完全に同じ色を意味するとは限りません。

また、#FD9BA5も特定のCSS標準色名には対応していません。色見本サイトやデザインサービスによって、同じような見た目の色に異なる名称が付けられることがあります。

そのため、Web制作やチームでのデザイン共有では、「薄ピンクにしてほしい」と色名だけで伝えるよりも、「#FD9BA5を使用する」と具体的なコードを指定したほうが、認識のずれを防げます。

【実務設定】Canva・PowerPointで薄ピンクの色コードを使う方法

薄ピンクのHEXコードは、CanvaやPowerPointの色設定に利用できます。ツールによって操作画面は異なりますが、基本は色を変更する項目を開き、HEXまたはRGBの入力欄に数値を指定する流れです。

Canvaで薄ピンクを指定する

Canvaでは、編集する要素を選択して色の設定を開き、HEXコードを入力できる欄に希望の色を指定します。Canvaヘルプセンターでも、エディター上で色を変更したり、カラーコードを入力したりする方法が案内されています。

1. 色を変更したい文字、図形、背景などを選択する。
2. ツールバーから色の設定を開く。
3. カラーコードの入力欄に、使用したいHEXコードを入力する。
4. プレビューで色を確認し、必要に応じて明るさや周囲の色を調整する。

入力するコードは、たとえば次のとおりです。

• 標準的なピンク：#FFC0CB
• 赤みのある薄ピンク：#FD9BA5
• 白に近い淡いピンク：#FFF0F3

複数のデザインで同じ色を使う場合は、使用したHEXコードを控えておくと便利です。ブランドカラーやSNS投稿のテンプレートを統一したい場合にも役立ちます。利用できる色管理機能は、編集画面や契約プランなどによって異なることがあります。

PowerPointで薄ピンクをRGB設定する

PowerPointでは、図形の塗りつぶし、文字色、枠線などを個別に変更できます。Microsoft Supportの操作案内では、独自の色を使う場合に「その他の色」からカスタム色を設定する方法が説明されています。

1. 色を変更したい図形やテキストボックスを選択する。
2. 「図形の書式」などのメニューから、塗りつぶし・文字色・枠線の設定を開く。
3. 「その他の色」などのカスタム色設定を選択する。
4. RGBの入力欄がある場合は、赤・緑・青の数値を入力する。
5. 色を確定し、スライド上の見え方を確認する。

PowerPointに設定する場合のRGB値は、次の組み合わせが基本です。

• #FFC0CB：赤255、緑192、青203
• #FD9BA5：赤253、緑155、青165
• #FFB6C1：赤255、緑182、青193

使用するPowerPointのバージョンや画面によって、色の入力方法がHEX形式ではなくRGB形式になる場合があります。その際は、HEXコードをRGBに変換して入力すれば、同じ色を指定できます。

なお、モニター上の色と印刷物の色は完全に一致するとは限りません。印刷用途では、用紙や印刷方式、カラープロファイルなども影響するため、最終的な出力物で確認することが大切です。

【配色のコツ】薄ピンクに合う色と用途別の選び方

薄ピンクは単色で使うだけでなく、組み合わせる色によって印象を大きく変えられます。かわいらしさを出すのか、落ち着いた雰囲気にするのか、情報を目立たせたいのかによって、適した配色は異なります。

薄ピンクと相性のよい配色5パターン

ここで挙げた組み合わせのうち、ベージュ、グリーン、ダークブラウンのコードは配色例としての提案です。特定の標準色名に対応することを意味するものではありません。

用途別に選ぶなら、どの薄ピンクがよい？

• Webサイトの背景：#FFF0F3や#FADDE1。白に近く、ほかの要素を邪魔しにくい色です。
• SNS投稿・サムネイル：#FD9BA5や#FFB6C1。淡すぎないため、ポイントカラーとして使いやすい色です。
• プレゼン資料：#FADDE1や#F8C8DC。落ち着いた色の文字と組み合わせると、情報を整理しやすくなります。
• 美容・コスメのデザイン：#FFC0CBや#F4C2C2。柔らかさや親しみやすさを表現できます。
• 桜や春のイベント：#FFD1DCや#FFE4E1。明るく軽やかな印象を作りやすい色です。
• 暖色系の桃色デザイン：#FFDAB9。ピンクだけでなく、オレンジやベージュを使うデザインにもなじみます。

薄ピンクを使うときの注意点

薄ピンクを背景に使う場合、白い文字を重ねるとコントラストが不足し、読みづらくなることがあります。特に、#FFF0F3のような白に近い色では注意が必要です。

文字には濃いブラウンやチャコールグレーを使い、背景に薄ピンクを配置すると、色の柔らかさを維持しながら可読性を確保しやすくなります。小さな文字や重要な情報を扱う場合は、実際の表示サイズでも確認してください。

また、画面全体を薄ピンクにすると、メリハリがなくなる場合があります。背景を淡い色にし、ボタンや見出しだけに#FD9BA5などの少し濃い色を使うと、視線を誘導しやすくなります。

【プロの結論】薄ピンクの色コードは目的から逆算して選ぶ

薄ピンクの色選びで重要なのは、「薄いピンクならどれでも同じ」と考えないことです。色名が似ていても、明度と彩度の違いによって、画面に与える印象や文字との相性は変わります。

実際のデザイン作業では、次の3つの基準を押さえると、選択肢を効率よく絞れます。

1. まずHEXコードを決める：一般的なピンクなら#FFC0CB、赤みを強調したいなら#FD9BA5、背景を淡くしたいなら#FFF0F3を候補にします。
2. 用途に合わせて明度と彩度を調整する：背景には明るい色、ボタンや装飾にはやや鮮やかな色を使うと、情報にメリハリを付けられます。
3. 文字色とセットで確認する：白や淡いグレーだけでなく、濃い文字色との組み合わせも確認し、読みやすさを優先します。

反対に、色コードを統一する必要があるWebサイトやブランドデザインでは、色名だけを頼りに指定する方法はおすすめできません。制作担当者によって「薄ピンク」の解釈が異なる可能性があるためです。HEXやRGBを共有し、同じ数値を使うことで色の再現性を高められます。

さらに、色を調整する際には、HSLの数値を少しずつ変える方法も便利です。赤みを保ったまま明るくする、彩度を下げて落ち着かせるなど、意図に沿った微調整ができます。最初に代表色を決め、必要に応じて派生色を作る方法なら、配色全体の統一感も保ちやすくなります。

【薄ピンクカラーコード】に関するよくある質問（FAQ）

Q1：薄ピンクの代表的なカラーコードは何ですか？
A1：代表的な候補は#FFC0CBです。CSSの標準色名「pink」に対応し、RGB値は（255, 192, 203）です。より赤みの強い色が好みなら、#FD9BA5も候補になります。

Q2：#FFC0CBと#FD9BA5は何が違いますか？
A2：#FFC0CBはRGB（255, 192, 203）、#FD9BA5はRGB（253, 155, 165）です。#FD9BA5は緑の成分が少なく、赤みが強く感じられます。どちらもピンク系ですが、同じ色ではありません。

Q3：薄ピンクのRGB値はどうやって調べますか？
A3：HEXコードをRGBに変換するか、色設定画面のRGB欄を確認します。たとえば#FFC0CBなら、赤255・緑192・青203です。HEXとRGBは同じ色を異なる形式で表しています。

Q4：薄ピンクをCSSで指定する場合、色名だけでも使えますか？
A4：CSSで定義された標準色名なら使えます。たとえば、pinkは#FFC0CB、lightpinkは#FFB6C1です。一方、#FD9BA5には対応する標準色名がないため、HEXコードで指定するのが確実です。

Q5：Canvaで薄ピンクの色コードを入力する方法は？
A5：変更したい文字や図形などを選び、色の設定を開いてHEXコードを入力します。#FFC0CBや#FD9BA5を指定すれば、希望する色を再現しやすくなります。操作画面は利用環境によって異なる場合があります。

Q6：PowerPointではHEXとRGBのどちらを使えばよいですか？
A6：色の入力欄がRGB形式ならRGB値を使用します。#FFC0CBは（255, 192, 203）、#FD9BA5は（253, 155, 165）です。HEX入力欄が利用できる環境では、コードを直接入力する方法もあります。

Q7：薄ピンクとサーモンピンクの違いは何ですか？
A7：薄ピンクは一般に赤みのある淡いピンクを指しますが、サーモンピンクはオレンジみや黄みを含む暖色寄りの色として扱われます。CSSのsalmonは#FA8072、lightsalmonは#FFA07Aです。名称だけで判断せず、実際の色見本を比較するのがおすすめです。

まとめ：薄ピンクの色選びで失敗しないための判断基準

薄ピンクのカラーコードを選ぶなら、最初に覚えておきたいのは#FFC0CBと#FD9BA5の2色です。前者はCSSの標準色名pinkに対応する基本色、後者は赤みを強調したいときに使いやすい色です。

淡い背景には#FADDE1や#FFF0F3、桜のような雰囲気には#FFD1DC、桃色寄りのデザインには#FFDAB9など、目的に合わせて12色の中から選べます。HEXは色の共有に、RGBは数値での色指定に、HSLは明るさや鮮やかさの調整に便利です。

CanvaやPowerPointで使うときは、コードまたはRGB値を正確に入力したうえで、背景色や文字色との相性を確認しましょう。色名の印象だけで選ぶのではなく、実際の色見本と数値を基準にすることが、統一感のある薄ピンクのデザインにつながります。 （出典: 薄 ピンク カラー コード（Yahoo!ニュース））