# Color
Color utilities provide easy way to add font and background colors to your application.
# Font color
'fw-color-#{$colorName}' is the class to be applied to apply font color.
For example, to apply '#475867' color, we can use 'fw-color-smoke-700'.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium velit feugiat rutrum ultrices. Morbi elementum id velit sit amet scelerisque. Proin tempus placerat luctus. Maecenas pulvinar quis libero nec accumsan. Pellentesque in pharetra odio.
# color-hex code mapping.
| colorName | Hex code | color |
|---|---|---|
| smoke-700 | #475867 | |
| smoke-300 | #92a2b1 | |
| azure-800 | #2c5cc5 | |
| azure-100 | #bbdcfe | |
| elephant-900 | #12344d | |
| elephant-800 | #264966 | |
| jungle-800 | #005c3f | |
| jungle-500 | #00a886 | |
| persimmon-900 | #c82124 | |
| persimmon-800 | #d72d30 | |
| casablanca-700 | #e86f25 |
# Background color
'fw-bg-#{$colorName}' is the class to be applied to apply background color.
For example, to apply '#f5f7f9' color, we can use 'fw-bg-smoke-25'.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium velit feugiat rutrum ultrices. Morbi elementum id velit sit amet scelerisque. Proin tempus placerat luctus. Maecenas pulvinar quis libero nec accumsan. Pellentesque in pharetra odio.
# color-hex code mapping.
| colorName | Hex code | color |
|---|---|---|
| casablanca-50 | #fef1e1 | |
| elephant-900 | #12344d | |
| smoke-100 | #cfd7df | |
| smoke-50 | #ebeff3 | |
| smoke-25 | #f5f7f9 | |
| jungle-50 | #e0f5f1 | |
| azure-50 | #e5f2fd | |
| persimmon-50 | #ffecf0 |