Coral カラー

コーラル — 温かさと活力の色

#FF7F50Coral

カラー値

HEX#FF7F50

RGBrgb(255, 127, 80)

HSLhsl(16°, 100%, 66%)

CSScoral

シェードパレット

#FFF0EB

100

#FFD5C7

300

#FFA380

500

#FF7F50

700

#CC4A1A

900

#7A1F00

補色

↔

#007FAF

Cerulean

類似色

#FF6347

Tomato

#FFA07A

Light Salmon

CSS使用例

CSS

/* By name */
color: coral;
background-color: coral;

/* By HEX */
color: #FF7F50;
background-color: #FF7F50;

/* By RGB */
color: rgb(255, 127, 80);

/* By HSL */
color: hsl(16deg, 100%, 66%);

/* With opacity */
color: rgba(255, 127, 80, 0.8);
color: hsl(16deg 100% 66% / 80%);

コーラル(#FF7F50)は白い背景でテキストとして使う場合、WCAGのコントラスト要件を満たさない可能性があります。テキストには#E8572Aや#CC4A1Aのような暗いバリエーションを使い、コーラル自体は背景やボタンに活用してください。

コーラル(#FF7F50)は赤とオレンジの間に位置する暖かく生き生きとした色です。サンゴ礁の鮮やかな色から名前が付けられ、エネルギー・遊び心・温かさ・創造性を表現します。2019年のパントン・カラー・オブ・ザ・イヤー(リビングコーラル)に選ばれ、デザイン界で大きな注目を集めました。CTAボタン、強調テキスト、ライフスタイル製品のアクセントカラーに適しています。

主な使用例

▸CTAボタン — '購入'、'申し込む'、'始める'ボタンのアクセント色
▸ライフスタイル・ビューティーブランド — トレンディで生き生きとしたUI
▸イラストレーションのアクセント — 硬いインターフェースに温かみを加える
▸イベント・プロモーションバナー — 目を引くアクセントカラー
▸フード・飲料アプリ — 食欲を刺激する暖かいトーン
▸子ども向けアプリ・教育プラットフォーム — 明るく親しみやすい雰囲気

Coral カラー

CSS使用例

主な使用例

関連カラー