web-dev-qa-db-ja.com

カラーパレットで数字は何を意味しますか？

私はカラーパレットを調整している最中です。いくつかの調査を行っている間、多くのパレット（たとえば、Atlassianのパレット）が50から900の範囲の色に数字を追加しているのを見ています。

enter image description here

これらの数値は色に対してどの程度正確に決定され、どのような意味ですか？

colorcolor-scheme
1
Whirlwind991

命名法は Atlasian Design：Colors ページで詳しく説明されています。他の回答で言及されているマテリアルデザインページと同様に、数字の部分（例：500または800）は、色の飽和レベル（およびを逆に示します明るさ/明るさを示す1）。最初の文字は、ほとんどの場合、ベースカラーを示します（青の場合はB、黄色の場合はY）。ここで、NはNeutralを表します（実際には紫の色合いから派生しています）。

上記のページから：

落ち着いた中間色のパレットは紫から派生しています。それらのさまざまな飽和度により、マーケティングおよび製品全体で適切なレベルの暖かさが可能になります。

Atlasian's range of neutral shades

そして、彼らの「二次色パレット」の選択は、最初の文字が下にある色をどのように示すかを示しています：

R300は、主にエラーを示し、破壊的なアクションを示すために使用します。 Y300は警告およびブロックされた進行状況を示し、ひし形やバナーで見つけることができます。 N800の上に配置されるテキストにはY300を使用します。 G300はフラグとインラインメッセージの成功を表すために使用され、P300はヘルプ、情報、およびプリンスの曲を示すために使用されます。

enter image description here

1 MoritzLüdtke がコメントで正しく指摘されているように、彩度との両方の明るさが「N番号」によって変化します。N番号が高いと、 高い彩度と低い明るさ;一方、低いN番号は低彩度と高明るさを示します。

彩度を使用する（少なくとも）2つの「カラーシステム」があります。1つは[〜＃〜] hsv [〜＃〜]で、hueを使用します。 saturationおよびvalue（brightnessとも呼ばれます）;もう一方の[〜＃〜] hsl [〜＃〜]は、hue、saturationを使用しますおよびlightness。それらの類似点と相違点の詳細については、Wikipediaの HSL and HSV を参照してください。

上記の「ニュートラル」カラーの最初の列を取り、RGB値をオンラインコンバーターのペアに接続する2、N-numberとHSV/HSLの関係を確認できます。

| Nxxx  Name         |     RGB |   R    G    B |   H     S     V |   H     S     L |
|--------------------+---------+---------------+-----------------+-----------------|
| N900  Slate        | #091e42 |   9   30   66 | 218  86.4  25.9 | 218  76.0  14.7 |
| N500  Mick Fanning | #42526e |  66   82  110 | 218  40.0  43.1 | 218  25.0  34.5 |
| N100  Humboldt Fog | #7a869a | 122  134  154 | 218  20.8  60.4 | 218  13.7  54.1 |
|  N60  Sentinel     | #b3bac5 | 179  186  197 | 217   9.1  77.3 | 217  13.4  73.7 |
|  N20  Gram's Hair  | #f4f5f7 | 244  245  247 | 220   1.2  96.9 | 220  15.8  96.3 |

2 RGBからHSVへの色変換 および RGBからHSLへの色変換 を参照してください。どちらもRapidTables.comによって提供されます。

4
TripeHound

カラーシステム のマテリアルデザインドキュメントを見ると、16進数値（一意の識別子）を使用せずに色を識別する簡単な方法を提供するための内部標準があるようです。

それは、それぞれの値の何らかの表示も提供する色を分類およびラベル付けする一貫した方法を可能にするように設計されているようです。

0
Michael Lai

ほとんどの場合、これらの値は色の異なる色合いを表します。それらは明るい色から暗い色（小さい数から大きい数）の範囲ですが、色相は変わりません。スクリーンショットではほとんど見えません。 N500はN800よりも軽量です。

マテリアルデザインのドキュメントでは、これらの「カラーパレット」について、「色とテーマ」で説明しています。 https://material.io/design/color/the-color-system.html#color-usage-palettes =

Michealが言ったように、異なる種類の色を話したり参照したりする方が簡単です。色N500を呼び出すと、コミュニケーションがはるかに簡単になります。

0
Moritz Lüdtke