Color

色は、ユーザーが意味や関係性を認知・認識するより先に、知覚してしまう情報です。色を適切に使用すれば情報の優先順位を表現できるほか、サービスのなかで一貫して同じ意味で使用することで認知・認識の補助となり、ユーザー体験の向上につながります。

Inhouseでは、16進数のカラーコードに一貫性のある名前をつけて呼び出しやすくしたPrimitive colorと、そのPrimitive colorを同じ意味で使用できるように用途ごとに名前を割り当てたSemantic colorによる、2種類のデザイントークンがあります。

例えば、単純に青色を使いたいときにサービスで使う色のカラーコードを覚えるのは大変なので、Sassのソースコードでは get-primitive-color($name: blue, $level: 600) と指定します。このように指定することで、色の明度の調整はLevelの数値を変えるだけで対応できるようにもなります。

そのうえで、 get-primitive-color($name: blue, $level: 600) をアクションボタンの配色として使用する場合は、 get-semantic-color($intention: informative, $level: 600) と指定します。このように指定することで、チームで一貫して同じ配色ができます。

Primitive color

このドキュメントでは、InhouseのFlavorのひとつであるPepper flavorを例にPrimitive colorを紹介します。実際には、ブランドごとに配色は異なります。

Pepper flavorでは、カラーパレット Pepper Color で定義している色の値をPrimitive tokenとして扱います。Pepper Colorは、青(Pepper Blue 500)と、黒(Pepper Blue 800)を基準に、この色と調和がとれている色を集めたものです。

Sass function

Syntax

get-primitive-color($name, $level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  color: inhouse.get-primitive-color($name: blue, $level: 600);
}
NameLevelPepper flavor
black1000Pepper Black
white1000Pepper White
gray50Pepper Gray 50
100Pepper Gray 100
200Pepper Gray 200
300Pepper Gray 300
400Pepper Gray 400
500Pepper Gray 500
600Pepper Gray 600
700Pepper Gray 700
800Pepper Gray 800
900Pepper Gray 900
blue50Pepper Blue 50
100Pepper Blue 100
200Pepper Blue 200
300Pepper Blue 300
400Pepper Blue 400
500Pepper Blue 500
600Pepper Blue 600
700Pepper Blue 700
800Pepper Blue 800
900Pepper Blue 900
green50Pepper Green 50
100Pepper Green 100
200Pepper Green 200
300Pepper Green 300
400Pepper Green 400
500Pepper Green 500
600Pepper Green 600
700Pepper Green 700
800Pepper Green 800
900Pepper Green 900
yellow50Pepper Yellow 50
100Pepper Yellow 100
200Pepper Yellow 200
300Pepper Yellow 300
400Pepper Yellow 400
500Pepper Yellow 500
600Pepper Yellow 600
700Pepper Yellow 700
800Pepper Yellow 800
900Pepper Yellow 900
red50Pepper Red 50
100Pepper Red 100
200Pepper Red 200
300Pepper Red 300
400Pepper Red 400
500Pepper Red 500
600Pepper Red 600
700Pepper Red 700
800Pepper Red 800
900Pepper Red 900
orange50Pepper Orange 50
100Pepper Orange 100
200Pepper Orange 200
300Pepper Orange 300
400Pepper Orange 400
500Pepper Orange 500
600Pepper Orange 600
700Pepper Orange 700
800Pepper Orange 800
900Pepper Orange 900

Semantic color

Semantic colorは、Informative, Neutral, Positive, Notice, Negative, Attention, Interactive, FavoriteからなるIntentionにそれぞれ配色が定義されています。

ソースコード上では、Sass functionや対応するコンポーネントのModifierにIntentionの名前を指定することで、割り当てられたPrimitive colorの値が返ってきたり、Primitive colorを基調とした配色が適用されます。

Sass function

Syntax

get-semantic-color($intention, $level)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  color: inhouse.get-semantic-color($intention: informative, $level: 600);
}
IntentionPepper flavor
InformativePepper Blue
NeutralPepper Gray
PositivePepper Green
NoticePepper Yellow
NegativePepper Red
AttentionPepper Orange
InteractivePepper Blue
FavoritePepper Red

Overlay color

Overlay colorは、ComponentのStateを表現するために、Overlayさせる色です。 色面に乗せる場合と画像に乗せる場合で色が異なります。

Background Overlay Color
Image Overlay Color

Sass function

色面に乗せるOverlay Colorを取得できます。

Syntax

get-background-overlay-color($brightness, $state)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  color: inhouse.get-background-overlay-color($brightness: light, $state: enabled);
}
BrightnessStatePepper flavor
lightenabled#000000 (00%)
hover#000000 (04%)
focused#000000 (12%)
selected#5e8eb8 (08%)
activated#5e8eb8 (12%)
dragged#000000 (08%)
darkenabled#ffffff (00%)
hover#ffffff (08%)
focused#ffffff (24%)
selected#ffffff (16%)
activated#ffffff (24%)
dragged#ffffff (16%)

画像に乗せるOverlay Colorを取得できます。

Syntax

get-image-overlay-color($state)

Usage

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  color: inhouse.get-image-overlay-color($state: enabled);
}
StatePepper flavor
enabled#000000 (00%)
hover#000000 (12%)
focused#000000 (36%)
selected#000000 (24%)
activated#000000 (36%)
dragged#000000 (32%)