カラー
Serendieらしさを視覚的に表現するための基礎となるカラーパレットです。このパレットに基づくことでプロダクト間の一貫性を強化できます。カラーパレットはリファレンストークンとして定義されています。
更新 2025/7/28
カラーパレット
Serendieブランドでは日本の伝統色をベースにしたカラーを多様に組み合わせ、オフィス空間やコミュニケーションツールなど様々なタッチポイントで使用しています。Serendie Design Systemではその多様さを5つのカラーテーマとして定義し、それを継承したデータビジュアライゼーション用のカラーパレットも備えています。本カラーパレットはそれらの基盤となります。
基本的に色相ごとに10段階の明度でスケールを設計していますが、UIのなかで必要となるWhiteとBlack、Transparencyは例外です。Transparencyの用途はカラーロールを参照してください。
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | |
|---|---|---|---|---|---|---|---|---|---|---|
| Gray | #F0F0F0 | #E4E4E3 | #D1D0CD | #B1B0AE | #8C8B87 | #6F6F6F | #575757 | #424242 | #31312F | #232322 |
| Blue | #EFF2FC | #DDE3FF | #C0CFFD | #8FAEFE | #3B86F9 | #056AD8 | #0353AA | #043F81 | #073165 | #081E3F |
| SkyBlue | #D9F6FC | #C2EAEF | #8DDDE3 | #4ACBD4 | #00A0AC | #007882 | #006066 | #004A4F | #02373C | #04272A |
| Green | #DBF5EA | #BCEEDD | #90E4C7 | #46D2A2 | #2EAB80 | #2C7C60 | #146348 | #174A38 | #12372B | #0D271E |
| Purple | #F4ECF6 | #EEDEF2 | #E1C7E7 | #CC9FD9 | #B36CCD | #9751B0 | #7C3694 | #5F2B70 | #462352 | #32183A |
| Pink | #FFF4F8 | #F9DCE5 | #F3C4D3 | #F691B6 | #E2568F | #B9346C | #9B2657 | #761A42 | #591734 | #3E0F24 |
| Red | #FCEBEA | #FFDCDA | #FFC0BB | #FF8F8F | #F64157 | #D00138 | #A4002A | #81001F | #600114 | #400109 |
| Chestnut | #FAECE6 | #FDDDCE | #FCC4AB | #F49972 | #DC6733 | #B54E1B | #8F3D15 | #702D0D | #50230D | #371B0B |
| Beige | #FDF5EC | #F6E0C6 | #F0CC9E | #DEB074 | #AE8144 | #8D6735 | #70522A | #573F1D | #3E2D17 | #2B2013 |
| Yellow | #FAF4E3 | #FCE998 | #EDD857 | #DEC400 | #A78E00 | #816E00 | #645600 | #514400 | #3A3000 | #292200 |
| White | #FFFFFF | |||||||||
| Black | #000000 | |||||||||
| bl2 | bl5 | bl20 | wh60 | |||||||
|
Trans- parency | #00000005 | #0000000D | #00000033 | #FFFFFF99 |
アクセシビリティ
Serendieブランドの特性や、テーミングやデータビジュアライゼーションなど多様な用途の基盤となることを踏まえて、カラーパレットのコントラスト基準としてAPCA (Advanced Perceptual Contrast Algorithm) を採用しています。APCAはWCAG 3.0での採用が検討されており、より人間の知覚に近い基準として期待されています。
APCAのコントラスト基準 (Lc値) を前提に、色相ごとの人間の知覚特性を考慮しながら、色相間の明度レベルが揃うように調整しています。また、カラートークンとしての使いやすさを考慮し、明度のジャンプ率には意図的な傾斜をつけています。読みやすさが重要なテキストにおいては、カラートークン600番以上 (Lc値の75以上) を使用してください。
また、現在提供している5つのカラーテーマは、前景色(テキスト色)と背景色がAPCAのコントラスト基準を満たすように設計しています。そのため、UIコンポーネントを追加設計する際は、カラーロールを適切に使用してください。例えば、primaryとonPrimaryは合わせて使うことが推奨され、primaryとonPrimaryContainerを組み合わせることは非推奨です。