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