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

| Shade | value in RGB | value in HSL | Sample |
| ------- | ------------ | --------------- |:--------------------------------------------------- |
| 50 | #e7eaf3 | (218, 28%, 95%) |  |
| 100 | #c2cae3 | (218, 26%, 82%) |  |
| 200 | #9aa8d0 | (218, 26%, 66%) |  |
| 300 | #7387bd | (218, 26%, 50%) |  |
| 400 | #546db0 | (218, 30%, 41%) |  |
| **500** | #3354a4 | (218, 68%, 31%) |  |
| 600 | #2c4c9a | (218, 61%, 30%) |  |
| 700 | #23428e | (218, 57%, 28%) |  |
| 800 | #1b3982 | (218, 54%, 25%) |  |
| 900 | #0d286c | (218, 78%, 24%) |  |

## Secondary color

| Shade | value in RGB | value in HSL | Sample |
| ------- | ------------ | ---------------- |:--------------------------------------------------- |
| 50 | #ffdab5 | (30, 100%, 84%) |  |
| 100 | #ffb79b | (20, 100%, 78%) |  |
| 200 | #ed9279 | (17, 76%, 65%) |  |
| 300 | #cb6f53 | (14, 59%, 49%) |  |
| 400 | #b25338 | (15, 59%, 40%) |  |
| **500** | #98371e | (18, 68%, 31%) |  |
| 600 | #8c2d19 | (11, 68%, 27%) |  |
| 700 | #7b2011 | (9, 75%, 23%) |  |
| 800 | #6c0d0d | (0, 70%, 21%) |  |
| 900 | #5b0001 | (359, 100%, 19%) |  |

## Supporting colors

### Success

| Shade | value in RGB | value in HSL | Sample |
| ----- | ------------ | ---------------- |:--------------------------------------------------- |
| 50 | #ecf9e6 | (114, 63%, 92%) |  |
| 100 | #d0efc1 | (108, 47%, 83%) |  |
| 200 | #b1e598 | (101, 62%, 77%) |  |
| 300 | #8fda6c | (92, 60%, 63%) |  |
| 400 | #72d148 | (93, 60%, 49%) |  |
| 500 | #53c91b | (96, 79%, 31%) |  |
| 600 | #42b912 | (99, 81%, 27%) |  |
| 700 | #24a402 | (101, 98%, 14%) |  |
| 800 | #009000 | (120, 100%, 18%) |  |
| 900 | #006e00 | (117, 100%, 14%) |  |

### Critical

| Shade | value in RGB | Value in HSL | Sample |
|:------- | ------------ |:--------------- |:--------------------------------------------------- |
| 50 | #f6e6e8 | (351, 25%, 92%) |  |
| 100 | #e9c1c4 | (358, 38%, 80%) |  |
| 200 | #ca8886 | (353, 40%, 65%) |  |
| 300 | #b25c5a | (4, 44%, 52%) |  |
| 400 | #b33c37 | (2, 53%, 42%) |  |
| **500** | #af291d | (4, 71%, 36%) |  |
| 600 | #a3211c | (5, 69%, 34%) |  |
| 700 | #931918 | (5, 70%, 29%) |  |
| 800 | #861412 | (6, 73%, 25%) |  |
| 900 | #760c08 | (7, 81%, 20%) |  |

### Warning

| Shade | value in RGB | Value in HSL | Sample |
| ----- | ------------ |:-------------- |:---------------------------------------------------:|
| 50 | #f9f5e0 | (48, 70%, 93%) |  |
| 100 | #f0e6b1 | (48, 66%, 80%) |  |
| 200 | #e6d580 | (48, 59%, 69%) |  |
| 300 | #dec74f | (48, 65%, 58%) |  |
| 400 | #d9ba2d | (47, 70%, 50%) |  |
| **500** | #d4af18 | (46, 78%, 43%)|  |
| 600 | #d4a30f | (45, 81%, 40%) |  |
| 700 | #d49206 | (44, 92%, 38%) |  |
| 800 | #d38300 | (42, 100%, 35%) |  |
| 900 | #d26700 | (33, 100%, 33%) | 

### Info/ neutral

| Shade | value in RGB | Value in HSL | Sample |
| ----- | ------------ |:--------------- |:--------------------------------------------------- |
| 50 | #e1f4fa | (195, 80%, 90%) |  |
| 100 | #b2e2f3 | (196, 63%, 81%) |  |
| 200 | #82ceeb | (197, 69%, 72%) |  |
| 300 | #56bbe3 | (198, 71%, 63%) |  |
| 400 | #39adde | (198, 74%, 57%) |  |
| **500** | #249fd9 | (199, 77%, 52%) |  |
| 600 | #1e92cb | (201, 80%, 47%) |  |
| 700 | #1780b8 | (205, 82%, 42%) |  |
| 800 | #156fa5 | (208, 83%, 40%) |  |
| 900 | #0c5083 | (209, 87%, 30%) |  |

### White

| Shade | value in RGB | Value in HSL | Sample |
| ----- | ------------ | ------------- |:---------------------------------------------------:|
| 50 | #ffffff | (0, 0%, 100%) |  |
| 100 | #fafafa | (0, 0%, 98%) |  |
| 200 | #f5f5f5 | (0, 0%, 96%) |  |
| 300 | #f0f0f0 | (0, 0%, 94%) |  |
| 400 | #dedede | (0, 0%, 87%) |  |
| **500** | #c2c2c2 | (0, 0%, 76%) |  |
| 600 | #979797 | (0, 0%, 59%) |  |
| 700 | #818181 | (0, 0%, 51%) |  |
| 800 | #606060 | (0, 0%, 38%) |  |
| 900 | #3c3c3c | (0, 0%, 24%) |  |