Colors

VelocityX includes a generous palette of great-looking, well-balanced colors that are perfect for prototyping or for kicking off a brand new project.

tip

You can either use the color directly or get the hex value

To get a color

Vx.{colorname}{number}

eg: Vx.blue900

To get a hexColor

Vx.{colorname}Hex{number}

eg: Vx.blueHex900

To use a text color

.{colorname}{number}

eg: text.blue900

To set a text color

.color({yourcolor})

eg: text.color(Colors.blue)

To use a box(container) color

.{colorname}{number}

eg: box.blue900

To set a box(container) color

.color({yourcolor})

eg: box.color(Colors.blue)

---

Available Utility Methods

Get color from the hex value

Color myColor = Vx.hexToColor(hexCode);

Get int color from the hex value

int myColor = Vx.getColorFromHex(hexCode);

Get Random Non-Primary Color

Color myColor = Vx.randomColor;

Get Random Non-Primary Color

Color myColor = Vx.randomPrimaryColor;

Get Random Non-Primary Opaque Color

Color myColor = Vx.randomOpaqueColor;

---

Some Color Samples

Gray

•   gray100
•   gray200
•   gray300
•   gray400
•   gray500
•   gray600
•   gray700
•   gray800
•   gray900

---

Red

•   red100
•   red200
•   red300
•   red400
•   red500
•   red600
•   red700
•   red800
•   red900

---

Pink

•   pink100
•   pink200
•   pink300
•   pink400
•   pink500
•   pink600
•   pink700
•   pink800
•   pink900

---

Orange

•   orange100
•   orange200
•   orange300
•   orange400
•   orange500
•   orange600
•   orange700
•   orange800
•   orange900

---

Yellow

•   yellow100
•   yellow200
•   yellow300
•   yellow400
•   yellow500
•   yellow600
•   yellow700
•   yellow800
•   yellow900

---

Green

•   green100
•   green200
•   green300
•   green400
•   green500
•   green600
•   green700
•   green800
•   green900

---

Teal

•   teal100
•   teal200
•   teal300
•   teal400
•   teal500
•   teal600
•   teal700
•   teal800
•   teal900

---

Blue

•   blue100
•   blue200
•   blue300
•   blue400
•   blue500
•   blue600
•   blue700
•   blue800
•   blue900

---

Indigo

•   indigo100
•   indigo200
•   indigo300
•   indigo400
•   indigo500
•   indigo600
•   indigo700
•   indigo800
•   indigo900

---

Purple

•   purple100
•   purple200
•   purple300
•   purple400
•   purple500
•   purple600
•   purple700
•   purple800
•   purple900

---

Checkout the Full Color Palette here

Source code for colors can be find here