ダッシュボードのデザインテンプレートのカラーコード
目次
1. Solid Gray（灰色）のカラーコード
テキスト
| name | color code |
|---|
| Text (Black) | #000000 |
| Text (White) | #FFFFFF |
| Label | #626264 |
| Link | #0017C1 |
背景
| name | color code |
|---|
| Standard | #F8F8FB |
| Highlight | #4D4D4D |
| Control | #F1F1F4 |
チャート
| name | color code |
|---|
| SolidGray 900 | #1A1A1A |
| SolidGray 700 | #4D4D4D |
| SolidGray 536 | #767676 |
| SolidGray 400 | #999999 |
| SolidGray 200 | #CCCCCC |
| SolidGray 50 | #F2F2F2 |
| Yellow 800 | #A58000 |
| Yellow 600 | #D2A400 |
| Yellow 400 | #FFC700 |
セマンティックカラー
| name | color code |
|---|
| Blue 600 | #3460FB |
| Blue 200 | #C5D7FB |
| Blue 50 | #E8F1FE |
| Red 600 | #FE3939 |
| Red 200 | #FFBBBB |
| Red 50 | #FDEEEE |
| Success | #197A4B |
| Error | #CE0000 |
2. Blue（青色）のカラーコード
テキスト
| name | colo rcode |
|---|
| Text (Black) | #000000 |
| Text (White) | #FFFFFF |
| Label | #626264 |
| Link | #0017C1 |
背景
| name | color code |
|---|
| Standard | #F8F8FB |
| Highlight | #0017C1 |
| Control | #F1F1F4 |
チャート
| name | color code |
|---|
| Blue 1200 | #000060 |
| Blue 900 | #0017C1 |
| Blue 600 | #3460FB |
| Blue 400 | #7096F8 |
| Blue 200 | #C5D7FB |
| Blue 50 | #D9E6FF |
| Yellow 800 | #A58000 |
| Yellow 600 | #D2A400 |
| Yellow 400 | #FFC700 |
| SolidGray 800 | #333333 |
| SolidGray 600 | #666666 |
| SolidGray 400 | #999999 |
| SolidGray 200 | #CCCCCC |
セマンティックカラー
| name | color code |
|---|
| Blue 600 | #3460FB |
| Blue 200 | #C5D7FB |
| Blue 50 | #E8F1FE |
| Red 600 | #FE3939 |
| Red 200 | #FFBBBB |
| Red 50 | #FDEEEE |
| Success | #197A4B |
| Error | #CE0000 |
3. Light Blue（薄い青色）のカラーコード
テキスト
| name | color code |
|---|
| Text (Black) | #000000 |
| Text (White) | #FFFFFF |
| Label | #626264 |
| Link | #0017C1 |
背景
| name | color code |
|---|
| Standard | #F8F8FB |
| Highlight | #0055AD |
| Control | #F1F1F4 |
チャート
| name | color code |
|---|
| LightBlue 1200 | #00234B |
| LightBlue 900 | #0055AD |
| LightBlue 600 | #008BF2 |
| LightBlue 400 | #57B8FF |
| LightBlue 200 | #C0E4FF |
| LightBlue 50 | #F0F9FF |
| Yellow 800 | #A58000 |
| Yellow 600 | #D2A400 |
| Yellow 400 | #FFC700 |
| SolidGray 800 | #333333 |
| SolidGray 600 | #666666 |
| SolidGray 400 | #999999 |
| SolidGray 200 | #CCCCCC |
セマンティックカラー
| name | color code |
|---|
| LightBlue 600 | #008BF2 |
| LightBlue 200 | #C0E4FF |
| LightBlue 50 | #F0F9FF |
| Red 600 | #FE3939 |
| Red 200 | #FFBBBB |
| Red 50 | #FDEEEE |
| Success | #197A4B |
| Error | #CE0000 |
4. Cyan（シアン色）のカラーコード
テキスト
| name | color code |
|---|
| Text (Black) | #000000 |
| Text (White) | #FFFFFF |
| Label | #626264 |
| Link | #0017C1 |
背景
| name | color code |
|---|
| Standard | #F8F8FB |
| Highlight | #006F83 |
| Control | #F1F1F4 |
チャート
| name | color code |
|---|
| Cyan 1200 | #003741 |
| Cyan 900 | #006F83 |
| Cyan 600 | #00A3BF |
| Cyan 400 | #2BC8E4 |
| Cyan 200 | #99F2FF |
| Cyan 50 | #E9F7F9 |
| Green 800 | #197A4B |
| Green 600 | #259D63 |
| Green 400 | #51B883 |
| SolidGray 800 | #333333 |
| SolidGray 600 | #666666 |
| SolidGray 400 | #999999 |
| SolidGray 200 | #CCCCCC |
セマンティックカラー
| name | color code |
|---|
| Cyan 600 | #00A3BF |
| Cyan 200 | #99F2FF |
| Cyan 50 | #E9F7F9 |
| SolidGray 600 | #666666 |
| SolidGray 200 | #CCCCCC |
| SolidGray 50 | #F2F2F2 |
| Success | #197A4B |
| Error | #CE0000 |
5. Green（緑色）のカラーコード
テキスト
| name | color code |
|---|
| Text (Black) | #000000 |
| Text (White) | #FFFFFF |
| Label | #626264 |
| Link | #0017C1 |
背景
| name | color code |
|---|
| Standard | #F8F8FB |
| Highlight | #115A36 |
| Control | #F1F1F4 |
チャート
| name | color code |
|---|
| Green 1200 | #032213 |
| Green 900 | #115A36 |
| Green 600 | #259D63 |
| Green 400 | #51B883 |
| Green 200 | #9BD4B5 |
| Green 50 | #E6F5EC |
| Cyan 800 | #006F83 |
| Cyan 600 | #00A3BF |
| Cyan 400 | #2BC8E4 |
| SolidGray 800 | #333333 |
| SolidGray 600 | #666666 |
| SolidGray 400 | #999999 |
| SolidGray 200 | #CCCCCC |
セマンティックカラー
| name | color code |
|---|
| Green 600 | #259D63 |
| Green 200 | #9BD4B5 |
| Green 50 | #E6F5EC |
| SolidGray 600 | #666666 |
| SolidGray 200 | #CCCCCC |
| SolidGray 50 | #F2F2F2 |
| Success | #197A4B |
| Error | #CE0000 |
6. Orange（オレンジ色）のカラーコード
テキスト
| name | color code |
|---|
| Text (Black) | #000000 |
| Text (White) | #FFFFFF |
| Label | #626264 |
| Link | #0017C1 |
背景
| name | color code |
|---|
| Standard | #F8F8FB |
| Highlight | #AC3E00 |
| Control | #F1F1F4 |
チャート
| name | color code |
|---|
| Orange 1200 | #541E00 |
| Orange 900 | #AC3E00 |
| Orange 600 | #FB5B01 |
| Orange 400 | #FF8D44 |
| Orange 200 | #FFC199 |
| Orange 50 | #FFEEE2 |
| Yellow 800 | #A58000 |
| Yellow 600 | #D2A400 |
| Yellow 400 | #FFC700 |
| SolidGray 800 | #333333 |
| SolidGray 600 | #666666 |
| SolidGray 400 | #999999 |
| SolidGray 200 | #CCCCCC |
セマンティックカラー
| name | color code |
|---|
| Orange 600 | #FB5B01 |
| Orange 200 | #FFC199 |
| Orange 50 | #FFEEE2 |
| SolidGray 600 | #666666 |
| SolidGray 200 | #CCCCCC |
| SolidGray 50 | #F2F2F2 |
| Success | #197A4B |
| Error | #850000 |
7. Red（赤色）のカラーコード
テキスト
| name | color code |
|---|
| Text (Black) | #000000 |
| Text (White) | #FFFFFF |
| Label | #626264 |
| Link | #0017C1 |
背景
| name | color code |
|---|
| Standard | #F8F8FB |
| Highlight | #CE0000 |
| Control | #F1F1F4 |
チャート
| name | color code |
|---|
| Red 1200 | #620000 |
| Red 900 | #CE0000 |
| Red 600 | #FE3939 |
| Red 400 | #FF7171 |
| Red 200 | #FFBBBB |
| Red 50 | #FDEEEE |
| Yellow 800 | #A58000 |
| Yellow 600 | #D2A400 |
| Yellow 400 | #FFC700 |
| SolidGray 800 | #333333 |
| SolidGray 600 | #666666 |
| SolidGray 400 | #999999 |
| SolidGray 200 | #CCCCCC |
セマンティックカラー
| name | color code |
|---|
| Red 600 | #FE3939 |
| Red 200 | #FFBBBB |
| Red 50 | #FDEEEE |
| SolidGray 600 | #666666 |
| SolidGray 200 | #CCCCCC |
| SolidGray 50 | #F2F2F2 |
| Success | #197A4B |
| Error | #850000 |
