ティール
ティールは、xkcd color name surveyで「teal」として集計された一般的な英語色名です。色しるべでは同調査の公開RGB値に対応する #029386 を代表値として掲載します。
※ CMYKはICCプロファイルを使用しない一般的な参考換算値です。印刷条件によって値は異なります。
HEX・RGB・CMYKなどの見方数値の意味を確認する
色の数値に慣れていない方は、ここを開いて用語の意味を確認できます。
Webでよく使う #RRGGBB 形式の色表記です。
赤・緑・青の光を0〜255などの数値で表します。
色相・彩度・明度で、色の方向や鮮やかさを見やすくした表現です。
印刷用の目安です。実際の印刷色は紙・インキ・ICCプロファイルなどで変わります。
色相・明度・彩度で色を体系的に表す表色系の値です。資料に値がある色だけ表示します。
同じ色名でも、資料・規格・表示環境によって代表値が異なることがあります。色しるべでは、確認できる出典と数値を分けて扱います。
ティールの意味
ティールは、青と緑の中間に位置する青緑系の色名です。 色しるべではxkcd color name surveyの「teal」集計値 #029386 を代表値として掲載します。一方、CSS named color の teal は #008080 であり、同じ名称でも体系によって値が異なります。
ティールの名前の由来
ティールは青緑系を表す一般色名として、ファッション、インテリア、グラフィック、Webなどで広く使われます。 デジタル用途では、色名だけでなくxkcdの調査値かCSS named colorかなど、参照体系を確認することが重要です。
ティールの歴史
Web標準ではW3CのCSS named color `teal` が #008080 と定義されています。 一方、xkcd color name surveyの teal は #029386 です。色しるべでは両者を混同せず、このページの代表値はxkcd調査値として扱います。
ティールの使われ方
代表HEX #029386 を背景色として使う場合、白文字とのコントラスト比は約3.80:1、黒文字とは約5.52:1です。 この代表値では黒系文字の方が読みやすく、通常文字でもWCAGの4.5:1目安を満たしやすい条件です。白文字は約3.80:1なので、文字サイズや太さを含めて実画面で確認してください。色面やアクセントとして使う場合も、文字色はコントラスト比を基準に選ぶのが安全です。
ティールを、身近なモチーフに当てて見る
文章で読んだ色の特徴を、同じ基準色を使った簡易モチーフで視覚的に確認します。自然物や素材そのものの実物色を示すものではなく、色面の広がり・明暗・まとまりをつかむための補助です。
花の形で見る
曲面にのせたときの明暗差
葉の形で見る
平たい形で見たときの色面
布の形で見る
素材面に使ったときのまとまり
紙の形で見る
平面で見たときの色の見え方
明るい色・暗い色は、基準HEXから明度を調整した理解用の派生色です。カードから近い登録色や関連ツールへ移動できます。
文章の確認に使った資料
teal の集計代表値 #029386 を確認。標準規格ではなく、参加者による色名認識調査の代表値として扱う。
CSS named color の teal が #008080 と定義されることを確認。xkcdの teal #029386 とは別体系・別値。
資料による色の違い
伝統色や歴史的な色名では、資料や規格によって代表色値が異なることがあります。色しるべでは確認済みの資料値を並べ、代表値との差をΔE00でも比較します。
| 色 | 資料 | HEX | マンセル | 代表値との差 |
|---|---|---|---|---|
| xkcd color name survey / RGB color list | #029386 | — | ΔE00 0.00 |
ティールと近い色を数値で比べる
下の「近い色一覧」とは役割を分け、ここでは近い3色について、明るさ・鮮やかさ・色相がどう違うかを比較します。
ティールに近い色
CIEDE2000による色差ΔE00を使い、近い色を種類ごとに分けて表示します。
登録色から
ティールから「もっと○○」な色を探す
OKLChの明るさ・クロマ・色相を基準に、現在の色から少し方向を変えた登録色を自動で選びます。
ティールを使った配色
OKLChを基準に機械的に生成した配色候補です。実際の用途や文字の読みやすさに合わせて調整してください。
ティールの分類
詳しい色彩データLab・LCh・OKLab・OKLCh・輝度・コントラストまで確認
ティールの詳細な色彩データ
| HEX | #029386 |
|---|---|
| RGB | 2, 147, 134 |
| CMYK参考値 | 98.6%, 0.0%, 8.8%, 42.4% |
| HSL | 174.6°, 97.3%, 29.2% |
| HSV | 174.62°, 98.64%, 57.65% |
| CIELAB | L* 54.6575 / a* -35.8077 / b* -2.4691 |
| CIELCh | L* 54.6575 / C* 35.8927 / h 183.94° |
| OKLab | L 0.596074 / a -0.105033 / b -0.007260 |
| OKLCh | L 0.596074 / C 0.105284 / h 183.95° |
| 相対輝度 | 0.226016 |
| 白とのコントラスト | 3.80:1 |
| 黒とのコントラスト | 5.52:1 |
代表色値の出典・確認情報
xkcd color name surveyの公開RGB一覧を参照。標準規格ではなく、参加者による一般的な色名認識の調査値。
CSSで `teal` と指定した場合は #008080 です。このページの #029386 はxkcd color name survey由来で、CSS named colorとは別です。
ティールを背景にした文字の見え方
同じ背景色でも、白文字と黒文字では読みやすさが大きく変わります。実際の表示とコントラスト比を並べて確認できます。
この色を背景にして、白文字を置いたときの見え方です。
サンプルボタンこの色を背景にして、黒文字を置いたときの見え方です。
サンプルボタン高い方のコントラスト比は 5.52:1 です。実際のデザインでは、文字サイズ・太さ・背景画像・透明度も含めて確認してください。
※ 数値はこのページのWeb表示用代表HEXをsRGBとして計算した目安です。通常本文4.5:1、大きな文字3:1を比較基準として表示しています。
数値を図で見る色相・彩度・明度の位置と、RGB / CMYKの構成を確認
ティールの色の位置を見る
数値だけでなく、色相・鮮やかさ・明るさの位置を図で確認できます。
※ ここではWeb表示用の代表HEXからHSLを計算しています。資料・印刷・実物の発色とは条件が異なる場合があります。
RGBとCMYK参考値を「構成」で見る
同じ#029386でも、画面ではRGBの光、印刷ではCMYKのインキ量という別の考え方で表します。 数字だけでなく、各チャンネルの大きさを横棒で比べられます。
RGB｜光の3チャンネル
RGBはディスプレイ上の光の成分です。3チャンネルが大きいほど光が加わります。
CMYK｜印刷用の参考換算
CMYKはICCプロファイルを使わない一般的な参考換算です。実際の印刷結果は紙・インキ・印刷機・プロファイルで変わります。
この図は「どの成分で色を表しているか」を学ぶためのものです。印刷色の厳密な再現や校正には、出力条件に合ったICCプロファイルと実機確認が必要です。
ティールは、どれくらいの面積で使う？
同じ色でも、使う面積が変わると全体の印象は大きく変わります。 背景・主役・アクセントの3つの役割で見比べられます。
ティールを背景に使う
色そのものを広い面積で見せる使い方です。
壁面、紙面の大きな色面、背景、布地などで、この色自体を空間の印象として見せたいときの考え方です。
ティールを主役に使う
周囲を抑え、この色を中心として見せる使い方です。
作品の主役、見出し、家具、パッケージの主要部分など、色をしっかり見せつつ全体を支配しすぎない構成です。
ティールをアクセントに使う
少量だけ置いて、視線を集める使い方です。
小物、刺繍、ボタン、図形、ポイント色など、少ない面積でこの色を効かせたいときの構成です。
配色比率に絶対の正解があるわけではありません。 用途、素材、画面サイズ、照明、周囲の色によって、心地よい面積は変わります。 このページでは「大きく使う・主役にする・少量だけ効かせる」の違いを比較するための一例として表示しています。
この色を、使う場面で見る
同じ色でも、紙・布・画面・空間など使う場面によって見え方が変わります。用途別のイメージを見比べられます。
切り絵・紙もの
大きな色面と差し色の位置を、紙を重ねる感覚で確認できます。
布・刺繍
細かな色が隣り合ったときのまとまりを、布や糸のような細分化で見ます。
イラスト
背景・主役・補助色・アクセントに分けたときの見え方です。
インテリア
壁・床・家具・小物に置いたときの色面バランスをイメージできます。
文字・印刷
背景色・文字色・罫線として使ったときの雰囲気を確認できます。
色覚多様性で、この色の見え方を参考比較
#029386 を、代表的な3つの2色覚タイプで近似シミュレーションします。 色の見え方には個人差があり、ここでの表示は診断ではなく、デザイン・教材用の参考です。
元のsRGB表示
#029386このページで採用している代表HEXです。
P型強度の参考
1型2色覚 / Protanopia #8B8A86L錐体が機能しない2色覚を想定した参考シミュレーションです。
D型強度の参考
2型2色覚 / Deuteranopia #7B7E87M錐体が機能しない2色覚を想定した参考シミュレーションです。
T型強度の参考
3型2色覚 / Tritanopia #00968FS錐体が機能しない2色覚を想定した参考シミュレーションです。
色覚タイプによっては、異なる色が近く見える場合があります。 状態・警告・分類などは、色に加えて文字、アイコン、形、線種、模様などでも区別してください。
計算方法と注意点
Machado, Oliveira & Fernandes (2009) の完全2色覚（severity 1.0）用3×3行列を使用しています。 代表HEXのsRGBを線形RGBへ変換して行列を適用し、表示用sRGBへ戻しています。
これは「実際に全員がこの色に見える」という意味ではありません。 色覚特性には程度差・個人差があり、画面環境によっても表示は変わります。 複数色の識別性を確認する場合は、単色ではなく実際の配色全体で評価する必要があります。
ティールを仕事で使うときの見方
同じ色でも、画面・印刷・素材・照明で見え方は変わります。職種ごとに、まず確認したいポイントをまとめています。
ティールから関連する色を探す
色系統・分類・由来・季節・素材・文化用途などから、関連する色の一覧へ進めます。
資料別比較
資料によって、この色はどれくらい違う？
「ティール」について、 色しるべ採用値と資料別に確認された色値を比較します。
Lab(D65)
54.66, -35.81, -2.47
色面で資料差を見る
同じ大きさの色面で並べると、数値だけでは分かりにくい資料ごとの違いを直感的に確認できます。
| 資料 | 色 | HEX | 値の種類 | 採用値との差 ΔE00 | 確認 |
|---|---|---|---|---|---|
| W3C CSS Color Module Level 4 §6.1 Named Colors / teal | #008080 |
規格値 | 8.33 大きな差 | 確認済み | |
| xkcd color name survey / RGB color list teal | #029386 |
デジタル参考値 | 0.00 ごく小さい差 | 確認済み |
資料同士の色差
W3C CSS Color Module Level 4 vs xkcd color name survey / RGB color list
ΔE00 8.33 大きな差同じ色名でも、資料・用途・規格・時代・デジタル化方法によって代表値が異なる場合があります。 ここでのΔE00は各HEXをsRGBとしてCIELAB(D65)へ変換した比較値であり、 実物試料を同一条件で分光測色した結果ではありません。 色しるべでは、資料差そのものを消さず、出典付きで確認できるようにしています。
