Serendie Design System

AboutGet StartedFoundationsComponents
© Mitsubishi Electric Corporation

カラー

Serendieらしさを視覚的に表現するための基礎となるカラーパレットです。このパレットに基づくことでプロダクト間の一貫性を強化できます。カラーパレットはリファレンストークンとして定義されています。

更新 2024/11/1

カラーパレット

三菱電機のDXブランドであるSerendieでは日本の伝統色をベースにしたカラーパレットを、オフィス空間やコミュニケーションツールなど様々なタッチポイントで使用しています。Serendie Design Systemはそれを継承しつつ、デジタルプロダクトに最適化したカラーパレットを提供しています。

基本的に色相ごとに10段階の明度でスケールを設計していますが、UIのなかで必要となるWhiteとBlack、Transparencyは例外です。Transparencyの用途はカラーロールを参照してください。

1000 900 800 700 600 500 400 300 200 100
Gray
#232322
#31312F
#3F3F3D
#525250
#696966
#8C8B87
#AFAEAA
#C8C7C2
#D9D8D3
#EFEEEB
Blue
#081E3F
#073165
#043F81
#0650A0
#0A69CF
#428CFE
#8FAEFE
#BFCEFC
#D7DEFB
#EFF2FC
SkyBlue
#04272A
#02373C
#01474C
#015C63
#00757E
#00A3AF
#64CCD3
#9CE6EC
#C3EFF4
#D9F6FC
Green
#0D271E
#12372B
#184737
#266751
#2C755C
#40A683
#6ED0AE
#98E1C8
#AEEAD5
#CAF9E6
Purple
#32183A
#462352
#592D68
#733B85
#914DA9
#AA61C2
#CC9FD9
#DCBDE4
#EADAEE
#F4ECF6
Pink
#401026
#591734
#711D41
#932653
#B9336B
#EB4F8E
#F190B4
#F5C1D1
#F6D7E0
#F9EBF0
Red
#49060E
#650417
#81001F
#A4002A
#CE0037
#F84258
#FF8F8F
#FDB9B4
#FCD6D3
#FCEBEA
Chestnut
#371B0B
#50230D
#692C0D
#803510
#AB4919
#E26324
#F49567
#F7C6B0
#F7D8C9
#FAECE6
Beige
#2B2013
#3E2D17
#503A1C
#684C26
#846132
#AF8245
#DAA358
#EDC18A
#F2DBC0
#F7EDE2
Yellow
#292200
#3A3000
#4A3E00
#5F5100
#857100
#AC9301
#EDD202
#FFE600
#FFE885
#FEEDBE
White
#FFFFFF
Black
#000000
60 20 5
Trans-
parency
#FFFFFF99
#00000033
#0000000D