> For the complete documentation index, see [llms.txt](https://zoomuxd.gitbook.io/drift/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zoomuxd.gitbook.io/drift/foundations/color.md).
# Color
## Brand Colors
{% tabs %}
{% tab title="Evergreen (Primary)" %}
### Usage
Used for Primary Actions, Link and Inputs (Focus, Select Highlights, Checkbox, Radio button Toggle)
| Color | Name | HEX | HSB |
| ------------------------------------------------------------------- | ------------ | --------- | --------------- |
| 
| Evergreen 01 | `#E6FFEA` | `H130 S10 B100` |
| 
| Evergreen 02 | `#B9FAC2` | `H128 S26 B98` |
| 
| Evergreen 03 | `#8BF095` | `H126 S42 B94` |
| 
| Evergreen 04 | `#55E05F` | `H124 S62 B88` |
| 
| Evergreen 05 | `#28C72D` | `H122 S80 B78` |
| 
| Evergreen 06 | `#10A310` | `H120 S90 B64` |
| 
| Evergreen 07 | `#0B7A07` | `H118 S94 B48` |
| 
| Evergreen 08 | `#0C5906` | `H116 S93 B35` |
| 
| Evergreen 09 | `#0D4207` | `H114 S90 B26` |
| 
| Evergreen 10 | `#0D4207` | `H112 S84 B18` |
| {% endtab %} | | | |
{% tab title="Phantom Grey (Base)" %}
### Usage
Used for Text & BGs
| Color | Name | HEX | HSB |
| ------------------------------------------------------------------- | ----------- | --------- | ----------- |
| 
| Ash Grey 01 | `#F5F5F5` | `H0 S0 B96` |
| 
| Ash Grey 02 | `#E0E0E0` | `H0 S0 B88` |
| 
| Ash Grey 03 | `#C7C7C7` | `H0 S0 B78` |
| 
| Ash Grey 04 | `#A8A8A8` | `H0 S0 B66` |
| 
| Ash Grey 05 | `#858585` | `H0 S0 B52` |
| 
| Ash Grey 06 | `#666666` | `H0 S0 B40` |
| 
| Ash Grey 07 | `#4D4D4D` | `H0 S0 B30` |
| 
| Ash Grey 08 | `#383838` | `H0 S0 B22` |
| 
| Ash Grey 09 | `#292929` | `H0 S0 B16` |
| 
| Ash Grey 10 | `#1F1F1F` | `H0 S0 B12` |
| {% endtab %} | | | |
| {% endtabs %} | | | |
## Secondary Colors
{% tabs %}
{% tab title="Midnight Blue (Info)" %}
### Usage
Used as complementary color with Phantom Grey
| Color | Name | HEX | HSB |
| ------------------------------------------------------------------- | ---------------- | --------- | -------------- |
| 
| Midnight Blue 01 | `#F0F4FF` | `H224 S6 B100` |
| 
| Midnight Blue 02 | `#D7E0FA` | `H225 S14 B98` |
| 
| Midnight Blue 03 | `#B8C6F2` | `H226 S24 B95` |
| 
| Midnight Blue 04 | `#93A3E6` | `H228 S36 B90` |
| 
| Midnight Blue 05 | `#6F81D6` | `H230 S48 B84` |
| 
| Midnight Blue 06 | `#5160C2` | `H232 S58 B76` |
| 
| Midnight Blue 07 | `#3B46AD` | `H234 S66 B68` |
| 
| Midnight Blue 08 | `#282F8F` | `H236 S72 B56` |
| 
| Midnight Blue 09 | `#1F2166` | `H238 S70 B40` |
| 
| Midnight Blue 10 | `#1B1B47` | `H240 S62 B28` |
| {% endtab %} | | | |
{% tab title="Fire Red (Error)" %}
### Usage
Used in Error Text & BGs
| Color | Name | HEX | HSBA |
| ------------------------------------------------------------------- | ----------- | --------- | --------------- |
| 
| Fire Red 01 | `#FFF3F0` | `H12 S6 B100` |
| 
| Fire Red 02 | `#FFD3CC` | `H8 S20 B100` |
| 
| Fire Red 03 | `#FCAFA7` | `H6 S34 B99` |
| 
| Fire Red 04 | `#F7847C` | `H4 S50 B97` |
| 
| Fire Red 05 | `#F05651` | `H2 S66 B94` |
| 
| Fire Red 06 | `#E02D2D` | `H360 S80 B88` |
| 
| Fire Red 07 | `#D11111` | `H360 S92 B82` |
| 
| Fire Red 08 | `#B30000` | `H360 S100 B70` |
| 
| Fire Red 09 | `#850303` | `H360 S98 B52` |
| 
| Fire Red 10 | `#520A0A` | `H360 S88 B32` |
| {% endtab %} | | | |
{% tab title="Sunrise Yellow (Warning)" %}
### Usage
Used for Warning BG & Text
| Color | Name | HEX | HSB |
| ------------------------------------------------------------------- | ----------------- | --------- | -------------- |
| 
| Sunrise Yellow 01 | `#FFF5DB` | `H43 S14 B100` |
| 
| Sunrise Yellow 02 | `#FCE1A2` | `H42 S36 B99` |
| 
| Sunrise Yellow 03 | `#F5C567` | `H40 S58 B96` |
| 
| Sunrise Yellow 04 | `#E09F2D` | `H38 S80 B88` |
| 
| Sunrise Yellow 05 | `#C77C0C` | `H36 S94 B78` |
| 
| Sunrise Yellow 06 | `#A35C00` | `H34 S100 B64` |
| 
| Sunrise Yellow 07 | `#804400` | `H32 S100 B50` |
| 
| Sunrise Yellow 08 | `#592F05` | `H30 S94 B35` |
| 
| Sunrise Yellow 09 | `#42240A` | `H28 S85 B26` |
| 
| Sunrise Yellow 10 | `#2E1A0A` | `H27 S78 B18` |
| {% endtab %} | | | |
| {% endtabs %} | | | |
## Shades
{% tabs %}
{% tab title=" Black & White" %}
| Color | Name | HEX | HSB |
| ------------------------------------------------------------------- | ----- | --------- | ------------ |
| 
| White | `#FFFFFF` | `H0 S0 B100` |
| 
| Black | `#000000` | `H0 S0 B0` |
| {% endtab %} | | | |
| {% endtabs %} | | | |
## 🧑🏻‍💻 Usage Guidelines
### Color Palette
{% tabs %}
{% tab title="🍎iOS" %}
```swift
open class ZColor {
open class var phantomgrey01: UIColor {
return UIColor(white: 245.0 / 255.0, alpha: 1.0)
}
open class var phantomgrey02: UIColor {
return UIColor(white: 224.0 / 255.0, alpha: 1.0)
}
open class var phantomgrey03: UIColor {
return UIColor(white: 199.0 / 255.0, alpha: 1.0)
}
open class var phantomgrey04: UIColor {
return UIColor(white: 168.0 / 255.0, alpha: 1.0)
}
open class var phantomgrey05: UIColor {
return UIColor(white: 133.0 / 255.0, alpha: 1.0)
}
open class var phantomgrey06: UIColor {
return UIColor(white: 102.0 / 255.0, alpha: 1.0)
}
open class var phantomgrey07: UIColor {
return UIColor(white: 77.0 / 255.0, alpha: 1.0)
}
open class var phantomgrey08: UIColor {
return UIColor(white: 56.0 / 255.0, alpha: 1.0)
}
open class var phantomgrey09: UIColor {
return UIColor(white: 41.0 / 255.0, alpha: 1.0)
}
open class var phantomgrey10: UIColor {
return UIColor(white: 31.0 / 255.0, alpha: 1.0)
}
open class var evergreen01: UIColor {
return UIColor(red: 230.0 / 255.0, green: 1.0, blue: 234.0 / 255.0, alpha: 1.0)
}
open class var evergreen02: UIColor {
return UIColor(red: 185.0 / 255.0, green: 250.0 / 255.0, blue: 194.0 / 255.0, alpha: 1.0)
}
open class var evergreen03: UIColor {
return UIColor(red: 139.0 / 255.0, green: 240.0 / 255.0, blue: 149.0 / 255.0, alpha: 1.0)
}
open class var evergreen04: UIColor {
return UIColor(red: 85.0 / 255.0, green: 224.0 / 255.0, blue: 95.0 / 255.0, alpha: 1.0)
}
open class var evergreen05: UIColor {
return UIColor(red: 40.0 / 255.0, green: 199.0 / 255.0, blue: 45.0 / 255.0, alpha: 1.0)
}
open class var evergreen06: UIColor {
return UIColor(red: 16.0 / 255.0, green: 163.0 / 255.0, blue: 16.0 / 255.0, alpha: 1.0)
}
open class var evergreen07: UIColor {
return UIColor(red: 11.0 / 255.0, green: 122.0 / 255.0, blue: 7.0 / 255.0, alpha: 1.0)
}
open class var evergreen08: UIColor {
return UIColor(red: 12.0 / 255.0, green: 89.0 / 255.0, blue: 6.0 / 255.0, alpha: 1.0)
}
open class var evergreen09: UIColor {
return UIColor(red: 13.0 / 255.0, green: 66.0 / 255.0, blue: 7.0 / 255.0, alpha: 1.0)
}
open class var evergreen10: UIColor {
return UIColor(red: 13.0 / 255.0, green: 46.0 / 255.0, blue: 7.0 / 255.0, alpha: 1.0)
}
open class var midnightblue01: UIColor {
return UIColor(red: 240.0 / 255.0, green: 244.0 / 255.0, blue: 1.0, alpha: 1.0)
}
open class var midnightblue02: UIColor {
return UIColor(red: 215.0 / 255.0, green: 224.0 / 255.0, blue: 250.0 / 255.0, alpha: 1.0)
}
open class var midnightblue03: UIColor {
return UIColor(red: 184.0 / 255.0, green: 198.0 / 255.0, blue: 242.0 / 255.0, alpha: 1.0)
}
open class var midnightblue04: UIColor {
return UIColor(red: 147.0 / 255.0, green: 163.0 / 255.0, blue: 230.0 / 255.0, alpha: 1.0)
}
open class var midnightblue05: UIColor {
return UIColor(red: 111.0 / 255.0, green: 129.0 / 255.0, blue: 214.0 / 255.0, alpha: 1.0)
}
open class var midnightblue06: UIColor {
return UIColor(red: 81.0 / 255.0, green: 96.0 / 255.0, blue: 194.0 / 255.0, alpha: 1.0)
}
open class var midnightblue07: UIColor {
return UIColor(red: 59.0 / 255.0, green: 70.0 / 255.0, blue: 173.0 / 255.0, alpha: 1.0)
}
open class var midnightblue08: UIColor {
return UIColor(red: 40.0 / 255.0, green: 47.0 / 255.0, blue: 143.0 / 255.0, alpha: 1.0)
}
open class var midnightblue09: UIColor {
return UIColor(red: 31.0 / 255.0, green: 33.0 / 255.0, blue: 102.0 / 255.0, alpha: 1.0)
}
open class var midnightblue10: UIColor {
return UIColor(red: 27.0 / 255.0, green: 27.0 / 255.0, blue: 71.0 / 255.0, alpha: 1.0)
}
open class var firered01: UIColor {
return UIColor(red: 1.0, green: 243.0 / 255.0, blue: 240.0 / 255.0, alpha: 1.0)
}
open class var firered02: UIColor {
return UIColor(red: 1.0, green: 211.0 / 255.0, blue: 204.0 / 255.0, alpha: 1.0)
}
open class var firered03: UIColor {
return UIColor(red: 252.0 / 255.0, green: 175.0 / 255.0, blue: 167.0 / 255.0, alpha: 1.0)
}
open class var firered04: UIColor {
return UIColor(red: 247.0 / 255.0, green: 132.0 / 255.0, blue: 124.0 / 255.0, alpha: 1.0)
}
open class var firered05: UIColor {
return UIColor(red: 240.0 / 255.0, green: 86.0 / 255.0, blue: 81.0 / 255.0, alpha: 1.0)
}
open class var firered06: UIColor {
return UIColor(red: 224.0 / 255.0, green: 45.0 / 255.0, blue: 45.0 / 255.0, alpha: 1.0)
}
open class var firered07: UIColor {
return UIColor(red: 209.0 / 255.0, green: 17.0 / 255.0, blue: 17.0 / 255.0, alpha: 1.0)
}
open class var firered08: UIColor {
return UIColor(red: 179.0 / 255.0, green: 0.0, blue: 0.0, alpha: 1.0)
}
open class var firered09: UIColor {
return UIColor(red: 133.0 / 255.0, green: 3.0 / 255.0, blue: 3.0 / 255.0, alpha: 1.0)
}
open class var firered10: UIColor {
return UIColor(red: 82.0 / 255.0, green: 10.0 / 255.0, blue: 10.0 / 255.0, alpha: 1.0)
}
open class var sunriseyellow01: UIColor {
return UIColor(red: 1.0, green: 245.0 / 255.0, blue: 219.0 / 255.0, alpha: 1.0)
}
open class var sunriseyellow02: UIColor {
return UIColor(red: 252.0 / 255.0, green: 225.0 / 255.0, blue: 162.0 / 255.0, alpha: 1.0)
}
open class var sunriseyellow03: UIColor {
return UIColor(red: 245.0 / 255.0, green: 197.0 / 255.0, blue: 103.0 / 255.0, alpha: 1.0)
}
open class var sunriseyellow04: UIColor {
return UIColor(red: 224.0 / 255.0, green: 159.0 / 255.0, blue: 45.0 / 255.0, alpha: 1.0)
}
open class var sunriseyellow05: UIColor {
return UIColor(red: 199.0 / 255.0, green: 124.0 / 255.0, blue: 12.0 / 255.0, alpha: 1.0)
}
open class var sunriseyellow06: UIColor {
return UIColor(red: 163.0 / 255.0, green: 92.0 / 255.0, blue: 0.0, alpha: 1.0)
}
open class var sunriseyellow07: UIColor {
return UIColor(red: 128.0 / 255.0, green: 68.0 / 255.0, blue: 0.0, alpha: 1.0)
}
open class var sunriseyellow08: UIColor {
return UIColor(red: 89.0 / 255.0, green: 47.0 / 255.0, blue: 5.0 / 255.0, alpha: 1.0)
}
open class var sunriseyellow09: UIColor {
return UIColor(red: 66.0 / 255.0, green: 36.0 / 255.0, blue: 10.0 / 255.0, alpha: 1.0)
}
open class var sunriseyellow10: UIColor {
return UIColor(red: 46.0 / 255.0, green: 26.0 / 255.0, blue: 10.0 / 255.0, alpha: 1.0)
}
open class var white: UIColor {
return UIColor(white: 1.0, alpha: 1.0)
}
open class var black: UIColor {
return UIColor(white: 0.0, alpha: 1.0)
}
open class var clear: UIColor {
return UIColor.clear
}
open class func custom(hexString: String, alpha: CGFloat) -> UIColor {
return UIColor(hexString: hexString).withAlphaComponent(alpha)
}
}
```
{% endtab %}
{% tab title="🤖Android" %}
{% endtab %}
{% endtabs %}
### Color Label Token
{% tabs %}
{% tab title="🍎iOS" %}
```swift
open class ZLabelColor {
open class var primary: UIColor {
return ZColor.phantomgrey10
}
open class var secondary: UIColor {
return ZColor.phantomgrey06
}
open class var inactive: UIColor {
return ZColor.phantomgrey04
}
open class var inverse: UIColor {
return ZColor.white
}
open class var error: UIColor {
return ZColor.firered06
}
open class var success: UIColor {
return ZColor.evergreen06
}
open class var warning: UIColor {
return ZColor.sunriseyellow06
}
open class var sunriseYellow: UIColor {
return ZColor.sunriseyellow04
}
open class var accent: UIColor {
return ZColor.evergreen06
}
open class var info: UIColor {
return ZColor.midnightblue06
}
}
```
{% endtab %}
{% tab title="Second Tab" %}
{% endtab %}
{% endtabs %}
### Icon Color Token
{% tabs %}
{% tab title="🍎iOS" %}
```swift
open class ZIconColor {
open class var primary: UIColor {
return ZColor.phantomgrey08
}
open class var secondary: UIColor {
return ZColor.phantomgrey06
}
open class var inactive: UIColor {
return ZColor.phantomgrey04
}
open class var inverse: UIColor {
return ZColor.white
}
open class var accent: UIColor {
return ZColor.evergreen06
}
open class var warning: UIColor {
return ZColor.sunriseyellow06
}
open class var error: UIColor {
return ZColor.firered06
}
open class var info: UIColor {
return ZColor.midnightblue06
}
}
```
{% endtab %}
{% tab title="Second Tab" %}
{% endtab %}
{% endtabs %}
### Separator Color Tokens
{% tabs %}
{% tab title="🍎iOS" %}
```swift
open class ZSeparatorColor {
open class var primary: UIColor {
return ZColor.phantomgrey02
}
open class var warning: UIColor {
return ZColor.sunriseyellow06
}
open class var error: UIColor {
return ZColor.firered06
}
open class var accent: UIColor {
return ZColor.evergreen06
}
open class var map: UIColor {
return ZColor.midnightblue06
}
open class var clear: UIColor {
return ZColor.clear
}
}
```
{% endtab %}
{% tab title="Second Tab" %}
{% endtab %}
{% endtabs %}
### Background Color Token
{% tabs %}
{% tab title="🍎iOS" %}
```swift
open class ZBackgroundColor {
open class var primary: UIColor {
return ZColor.phantomgrey01
}
open class var white: UIColor {
return ZColor.white
}
open class var clear: UIColor {
return ZColor.clear
}
open class var accent: UIColor {
return ZColor.evergreen01
}
open class var warning: UIColor {
return ZColor.sunriseyellow01
}
open class var error: UIColor {
return ZColor.firered01
}
open class var info: UIColor {
return ZColor.midnightblue01
}
open class var map: UIColor {
return ZColor.midnightblue06.withAlphaComponent(0.1)
}
open class var overlay: UIColor {
return ZColor.phantomgrey10.withAlphaComponent(0.87)
}
}
```
{% endtab %}
{% tab title="Second Tab" %}
{% endtab %}
{% endtabs %}
### Button BG Color Token
{% tabs %}
{% tab title="🍎iOS" %}
```swift
open class ZButtonBackgroundColor {
open class var primary: UIColor {
return ZColor.phantomgrey10
}
open class var inactive: UIColor {
return ZColor.phantomgrey02
}
open class var inverse: UIColor {
return ZColor.white
}
open class var clear: UIColor {
return ZColor.clear
}
open class var accent: UIColor {
return ZColor.evergreen06
}
open class var warning: UIColor {
return ZColor.sunriseyellow06
}
open class var error: UIColor {
return ZColor.firered06
}
open class var info: UIColor {
return ZColor.midnightblue06
}
}
```
{% endtab %}
{% tab title="Second Tab" %}
{% endtab %}
{% endtabs %}