---
# System prepended metadata

title: Color palete for DAD

---

# Color palete for metropolis

> Set of colors for UI
Palete is ased on https://huemint.com/brand-3/#palette=0d286c-ffffff-ef6974-7489d0




## Brand color - Primary color
RGB:#3354a4 HSV(HSL)(218, 68%, 31%)
![3354a4](https://hackmd.io/_uploads/Sy6sWeSNa.png)
![98371e](https://hackmd.io/_uploads/H1TxvlSE6.png)


| Shade   | value in RGB | value in HSL    | Sample                                              |
| ------- | ------------ | --------------- |:--------------------------------------------------- |
| 50      | #e7eaf3      | (218, 28%, 95%) | ![e7eaf3](https://hackmd.io/_uploads/H1I6zlH4p.png) |
| 100     | #c2cae3      | (218, 26%, 82%) | ![c2cae3](https://hackmd.io/_uploads/B179zgSNT.png) |
| 200     | #9aa8d0      | (218, 26%, 66%) | ![9aa8d0](https://hackmd.io/_uploads/HJ2wMeHNp.png) |
| 300     | #7387bd      | (218, 26%, 50%) | ![7387bd](https://hackmd.io/_uploads/SyJUzxr46.png) |
| 400     | #546db0      | (218, 30%, 41%) | ![546db0](https://hackmd.io/_uploads/S1X7feHET.png) |
| **500** | #3354a4      | (218, 68%, 31%) | ![3354a4](https://hackmd.io/_uploads/Sy6sWeSNa.png) |
| 600     | #2c4c9a      | (218, 61%, 30%) | ![2c4c9a](https://hackmd.io/_uploads/ryWqbxBNT.png) |
| 700     | #23428e      | (218, 57%, 28%) | ![23428e](https://hackmd.io/_uploads/Hya8-lr4T.png) |
| 800     | #1b3982      | (218, 54%, 25%) | ![1b3982](https://hackmd.io/_uploads/rySCegr4T.png) |
| 900     | #0d286c      | (218, 78%, 24%) | ![0d286c](https://hackmd.io/_uploads/HJBNC1BN6.png) |






## Secondary color


| Shade   | value in RGB | value in HSL     | Sample                                              |
| ------- | ------------ | ---------------- |:--------------------------------------------------- |
| 50      | #ffdab5      | (30, 100%, 84%)  | ![ffdab5](https://hackmd.io/_uploads/ryR-DlrNa.png) |
| 100     | #ffb79b      | (20, 100%, 78%)  | ![ffb79b](https://hackmd.io/_uploads/H1nbDgrEa.png) |
| 200     | #ed9279      | (17, 76%, 65%)   | ![ed9279](https://hackmd.io/_uploads/ryuWwxrVa.png) |
| 300     | #cb6f53      | (14, 59%, 49%)   | ![cb6f53](https://hackmd.io/_uploads/HJVbDeH46.png) |
| 400     | #b25338      | (15, 59%, 40%)   | ![b25338](https://hackmd.io/_uploads/BJ--wxS46.png) |
| **500** | #98371e      | (18, 68%, 31%)   | ![98371e](https://hackmd.io/_uploads/H1TxvlSE6.png) |
| 600     | #8c2d19      | (11, 68%, 27%)   | ![8c2d19](https://hackmd.io/_uploads/ryYxwgHE6.png) |
| 700     | #7b2011      | (9, 75%, 23%)    | ![7b2011](https://hackmd.io/_uploads/rkNlwlHNp.png) |
| 800     | #6c0d0d      | (0, 70%, 21%)    | ![6c0d0d](https://hackmd.io/_uploads/BJRyDgrEp.png) |
| 900     | #5b0001      | (359, 100%, 19%) | ![5b0001](https://hackmd.io/_uploads/BkH1verE6.png) |


## Supporting colors 

### Success

| Shade | value in RGB | value in HSL     | Sample                                              |
| ----- | ------------ | ---------------- |:--------------------------------------------------- |
| 50    | #ecf9e6      | (114, 63%, 92%)  | ![000000](https://hackmd.io/_uploads/H1OxKgS4T.png) |
| 100   | #d0efc1      | (108, 47%, 83%)  | ![000000](https://hackmd.io/_uploads/Bk0BFgSE6.png) |
| 200   | #b1e598      | (101, 62%, 77%)  | ![000000](https://hackmd.io/_uploads/ryqvtgBET.png) |
| 300   | #8fda6c      | (92, 60%, 63%)   | ![000000](https://hackmd.io/_uploads/B1RcYgrEp.png) |
| 400   | #72d148      | (93, 60%, 49%)   | ![000000](https://hackmd.io/_uploads/B1_ZqxBEa.png) |
| 500   | #53c91b      | (96, 79%, 31%)   | ![000000](https://hackmd.io/_uploads/Byx49gBEa.png) |
| 600   | #42b912      | (99, 81%, 27%)   | ![000000](https://hackmd.io/_uploads/HJjI9lBN6.png) |
| 700   | #24a402      | (101, 98%, 14%)  | ![000000](https://hackmd.io/_uploads/SJyO5lBN6.png) |
| 800   | #009000      | (120, 100%, 18%) | ![000000](https://hackmd.io/_uploads/r1Fc5xrNT.png) |
| 900   | #006e00      | (117, 100%, 14%) | ![000000](https://hackmd.io/_uploads/Hy22qxBVT.png) |


### Critical


| Shade   | value in RGB | Value in HSL    | Sample                                              |
|:------- | ------------ |:--------------- |:--------------------------------------------------- |
| 50      | #f6e6e8      | (351, 25%, 92%) | ![000000](https://hackmd.io/_uploads/S12C3erVp.png) |
| 100     | #e9c1c4      | (358, 38%, 80%) | ![000000](https://hackmd.io/_uploads/BktpnxrE6.png) |
| 200     | #ca8886      | (353, 40%, 65%) | ![000000](https://hackmd.io/_uploads/Sy8h2xrN6.png) |
| 300     | #b25c5a      | (4, 44%, 52%)   | ![000000](https://hackmd.io/_uploads/Hyni2lH4a.png) |
| 400     | #b33c37      | (2, 53%, 42%)   | ![000000](https://hackmd.io/_uploads/S1a9ngBEa.png) |
| **500** | #af291d      | (4, 71%, 36%)   | ![000000](https://hackmd.io/_uploads/S1AK3lSNa.png) |
| 600     | #a3211c      | (5, 69%, 34%)   | ![000000](https://hackmd.io/_uploads/rkFd2erV6.png) |
| 700     | #931918      | (5, 70%, 29%)   | ![000000](https://hackmd.io/_uploads/S1UwneHNa.png) |
| 800     | #861412      | (6, 73%, 25%)   | ![000000](https://hackmd.io/_uploads/S1ASnlBET.png) |
| 900     | #760c08      | (7, 81%, 20%)   | ![000000](https://hackmd.io/_uploads/SyLb2lBE6.png) |


### Warning 


| Shade | value in RGB | Value in HSL   |                       Sample                        |
| ----- | ------------ |:-------------- |:---------------------------------------------------:|
| 50    | #f9f5e0      | (48, 70%, 93%) | ![000000](https://hackmd.io/_uploads/SJCME-HNT.png) |
| 100   | #f0e6b1      | (48, 66%, 80%) | ![000000](https://hackmd.io/_uploads/Hy4NNWHN6.png) |
| 200   | #e6d580      | (48, 59%, 69%) | ![000000](https://hackmd.io/_uploads/SJfr4-S46.png) |
| 300   | #dec74f      | (48, 65%, 58%) | ![000000](https://hackmd.io/_uploads/Hkf8V-S4T.png) |
| 400   | #d9ba2d      | (47, 70%, 50%) | ![000000](https://hackmd.io/_uploads/r1B-_ZSET.png) |
| **500**   | #d4af18      |  (46, 78%, 43%)| ![000000](https://hackmd.io/_uploads/Hkf8V-S4T.png) |
| 600   | #d4a30f      | (45, 81%, 40%) | ![000000](https://hackmd.io/_uploads/ryjtVZB4T.png) |
| 700   | #d49206      | (44, 92%, 38%) | ![000000](https://hackmd.io/_uploads/HyzAE-rNa.png)  |
| 800   | #d38300      | 	(42, 100%, 35%) |   ![000000](https://hackmd.io/_uploads/Bym1HWH4a.png)      |
| 900   | #d26700      |  (33, 100%, 33%) |    ![000000](https://hackmd.io/_uploads/r1NxBbrEa.png)

 
### Info/ neutral

| Shade | value in RGB | Value in HSL    | Sample                                              |
| ----- | ------------ |:--------------- |:--------------------------------------------------- |
| 50    | #e1f4fa      | (195, 80%, 90%) | ![000000](https://hackmd.io/_uploads/r1_WYZBEp.png) |
| 100   | #b2e2f3      | (196, 63%, 81%) | ![000000](https://hackmd.io/_uploads/HkFGKWrVp.png) |
| 200   | #82ceeb      | (197, 69%, 72%) | ![000000](https://hackmd.io/_uploads/SJvXFZBE6.png) |
| 300   | #56bbe3      | (198, 71%, 63%) | ![000000](https://hackmd.io/_uploads/HJ74KbSVa.png) |
| 400   | #39adde      | (198, 74%, 57%) | ![000000](https://hackmd.io/_uploads/rkZSYZBVp.png) |
| **500**   | #249fd9      | (199, 77%, 52%) | ![000000](https://hackmd.io/_uploads/rJarK-SV6.png) |
| 600   | #1e92cb      | (201, 80%, 47%) | ![000000](https://hackmd.io/_uploads/BJtLKbrV6.png) |
| 700   | #1780b8      | (205, 82%, 42%) | ![000000](https://hackmd.io/_uploads/HkSvY-H4T.png) |
| 800   | #156fa5      | (208, 83%, 40%) | ![000000](https://hackmd.io/_uploads/HkSdt-BET.png) |
| 900   | #0c5083      | (209, 87%, 30%) | ![ffffff](https://hackmd.io/_uploads/H1UYKWBVp.png) |

### White




| Shade | value in RGB | Value in HSL  |                       Sample                        |
| ----- | ------------ | ------------- |:---------------------------------------------------:|
| 50    | #ffffff      | (0, 0%, 100%) | ![000000](https://hackmd.io/_uploads/SJClU-BEp.png) |
| 100   | #fafafa      | (0, 0%, 98%)  | ![000000](https://hackmd.io/_uploads/SkKb8ZHET.png) |
| 200   | #f5f5f5      | (0, 0%, 96%)  | ![000000](https://hackmd.io/_uploads/Bk9DLWSEp.png) |
| 300   | #f0f0f0      | (0, 0%, 94%)  | ![000000](https://hackmd.io/_uploads/ry_OIWrV6.png) |
| 400   | #dedede      | (0, 0%, 87%)  | ![000000](https://hackmd.io/_uploads/ryNt8ZHVT.png) |
| **500**   | #c2c2c2      | (0, 0%, 76%)  | ![000000](https://hackmd.io/_uploads/rkqcLWS46.png) |
| 600   | #979797      | (0, 0%, 59%)  | ![000000](https://hackmd.io/_uploads/r1YiI-S4T.png) |
| 700   | #818181      | (0, 0%, 51%)  | ![000000](https://hackmd.io/_uploads/rklTIZrEa.png) |
| 800   | #606060      | (0, 0%, 38%)  | ![000000](https://hackmd.io/_uploads/SJC6UbHVT.png) |
| 900   | #3c3c3c      | (0, 0%, 24%)  | ![ffffff](https://hackmd.io/_uploads/HJZJvbH46.png) |
