ポジティブで親しみやすい、SmartHRらしい印象に近づけることができる色を定義しました。

ガイドライン

SmartHRでは、基本的に以下の色を使用してください。

Primary Brand Color

SmartHRブランドの中心となるブランドカラーです。

SmartHR Blue
#00c4cc
rgba(0,196,204)

CMYK(70, 0, 30, 0)DIC 97、PANTONE 2397、白地でのテキストへの使用は非推奨です。

Secondary Brand Colors

Primary Brand Colorを引き立たせるブランドカラーです。

Black
#23221f
rgba(35,34,31)

テキストへの使用を推奨します。

Orange
#ff9900
rgba(255,153,0)

アクセントとしての使用を推奨します。

White
#ffffff
rgba(255,255,255)

Extended Colors

Primary Brand Color、Secondary Brand Colorと調和するカラーです。

SmartHRを説明/表現する際に必要な要素(テキスト、イラスト、背景など)で、Extended Colorsを用いることで、ブランドカラーをより印象的に扱うことに繋がります。

これらの色の使用を推奨しますが、利用シーンに合う色がない場合は、Extended Colorsのトーンを参考に、色を調整して使用することもできます。色づかいで迷った際には # designcomm依頼で気軽にご相談ください。

Stone

Stone01
#f8f7f6
rgba(248,247,246)

Stone02
#edebe6
rgba(237,235,230)

Stone03
#aaa69f
rgba(170,166,159)

Stone04
#4e4c49
rgba(78,76,73)

テキストへの利用を推奨します。

Aqua

Aqua01
#d4f4f5
rgba(212,244,245)

Aqua02
#69d9de
rgba(105,217,222)

Aqua03
#12abb1
rgba(18,171,177)

Aqua04
#0f7f85
rgba(15,127,133)

テキストへの使用を推奨します。

Sakura

Sakura01
#f9e9f7
rgba(249,233,247)

Sakura02
#f8b2e1
rgba(248,178,225)

Sakura03
#d362af
rgba(211,98,175)

Sakura04
#82407c
rgba(130,64,124)

Momiji

Momiji01
#ffe7e5
rgba(255,231,229)

Momiji02
#ff9e9c
rgba(255,158,156)

Momiji03
#ec5a55
rgba(236,90,85)

Momiji04
#a53f3f
rgba(165,63,63)

Sunlight

Sunlight01
#faf2d0
rgba(250,242,208)

Sunlight02
#ffee11
rgba(255,238,17)

Sunlight03
#ffd74a
rgba(255,215,74)

Sunlight04
#f56121
rgba(245,97,33)

Grass

Grass01
#e6f2c8
rgba(230,242,200)

Grass02
#aee26b
rgba(174,226,107)

Grass03
#3dcc65
rgba(61,204,101)

Grass04
#378445
rgba(55,132,69)

Sky

Sky01
#ddf2fb
rgba(221,242,251)

Sky02
#8fe2fc
rgba(143,226,252)

Sky03
#32b7f0
rgba(50,183,240)

Sky04
#1376a0
rgba(19,118,160)

Marine

Marine01
#dee9ff
rgba(222,233,255)

Marine02
#8ac0ff
rgba(138,192,255)

Marine03
#0075e3
rgba(0,117,227)

Marine04
#26519f
rgba(38,81,159)

Galaxy

Galaxy01
#eee5fd
rgba(238,229,253)

Galaxy02
#9d8ef8
rgba(157,142,248)

Galaxy03
#8c5eee
rgba(140,94,238)

Galaxy04
#6e4ca6
rgba(110,76,166)

Earth

Earth01
#fbede1
rgba(251,237,225)

Earth02
#f2d3a4
rgba(242,211,164)

Earth03
#ba621e
rgba(186,98,30)

Earth04
#76533e
rgba(118,83,62)

ダウンロード

Macで使う

SmartHR従業員のMacには、インストールされています。インストールされていない方は、以下の手順でご利用ください。

1. 下記の「SmartHRColor.zip」をダウンロード。

SmartHRColor_mac.zip

2. Finderのメニューバーから「移動」→「ライブラリ」を選択。

「ライブラリ」が表示されない場合は、Optionキーを押しながら「移動」→「ライブラリ」を選択。

color mac step2

3.「ライブラリ」内の「Colors」に「SmartHRColor.clr」を格納

color mac step3

Keynoteで使う

1. Keynoteを開く
2. メニューバーから「表示」→「カラーパネルを表示」を選択

color_keynote_step2

3. カラーパネルの「カラーパレット(左から3つめ)」タブを選択

color_keynote_step3

4. プルダウンメニューから「SmartHRColor」を選択

color_keynote_step4

5. SmartHRColorのパレットをお使いいただけます。

color_keynote_step5

Sketch で使う

下記の「SmatHRColor.sketchpallettes」をダウンロードし、Sketchプラグイン「Sketch Palletes」を使ってインストールしてください。

SmartHRColor.sketchpalette.zip

そのほか

ase , LESS , scss形式の色情報をダウンロードできます。

SmartHRColor_ase_less_scss.zip

ご利用方法

カラーコード一式は、SmartHRのオリジナルの組み合わせです。

サービスや会社などのブランドカラーとして「Primary Brand Color」「Secondary Brand Colors」の利用はお控えください。

© 2021, SmartHR, Inc.