Teal カラー

ティール — 落ち着きとモダンさの色

#008080Teal

カラー値

HEX#008080

RGBrgb(0, 128, 128)

HSLhsl(180°, 100%, 25%)

CSSteal

シェードパレット

#E0F7FA

100

#B2EBF2

300

#4DD0E1

500

#00ACC1

700

#00838F

900

#004D40

補色

↔

#800000

Maroon

類似色

#009080

Persian Green

#007070

Dark Teal

CSS使用例

CSS

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

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

/* By RGB */
color: rgb(0, 128, 128);

/* By HSL */
color: hsl(180deg, 100%, 25%);

/* With opacity */
color: rgba(0, 128, 128, 0.8);
color: hsl(180deg 100% 25% / 80%);

CSS `teal`(#008080)はかなり暗い色です。より明るくモダンなティールには#0D9488(Tailwind teal-600)または#14B8A6(Tailwind teal-500)を使用してください。

ティール(#008080)は青と緑の中間に位置する青緑色で、青の穏やかな信頼感と緑の新鮮さを兼ね備えています。洗練さ・バランス・明快さ・革新性を表現し、医療・ヘルスケア・技術・環境分野のUIで広く使われます。補色の栗色(マルーン)との組み合わせで印象的な高コントラストのデザインが作れます。Material Designのコアパレットにも含まれる現代的なUI色です。

主な使用例

▸ヘルスケア・医療UI — 清潔感と信頼感の両立
▸環境・サステナビリティブランド — 自然と技術の融合
▸SaaS・テック製品 — モダンで差別化されたブランドカラー
▸データビジュアライゼーション — 青緑系チャートの中間色調
▸スパ・ウェルネスアプリ — 落ち着きとヒーリングの雰囲気
▸金融ダッシュボード — 信頼感がありながら新鮮な印象

Teal カラー

CSS使用例

主な使用例

関連カラー