カラー
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 |