# 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) |