Colors

At GO-JEK, colors play an important role when we are working with a product, a service or a space. The right combination of colors can influence how users feel, think, and behave.

Primary Colors

GO-JEK’s color palette has been created to reflect the spirit of our brand. Green is used across all our communication as an essential element of branding.

Black is used primarily for body text and headings, and White is used for screen backgrounds and negative space.

GREEN50

HEX: #31B057

RGB: 49, 176, 87

BLACK50

HEX: #25282B

RGB: 37, 40, 43

White

HEX: #FFFFFF

RGB: 255, 255, 255

Secondary Colors

Secondary color provides more ways to accent and distinguish our product. Each color is selected with purpose in order to provide meaningful feedback within our products. Secondary colors can also be used to create unique secondary brands for each one of GO-JEK’s products.

BLUE50

HEX: #388BF2

RGB: 56, 139, 242

RED50

HEX: #E52A34

RGB: 229, 42, 52

YELLOW50

HEX: #FBAF18

RGB: 251, 175, 24

ORANGE50

HEX: #FC8338

RGB: 252, 131, 56

Shades and Tints

We intend for tints and shades to be ever evolving, offering an endless palette to choose from. Usage of these colors varies depending on scenarios, but they come in handy for components in our products.

GREEN80

HEX: #0F752E

RGB: 15, 117, 46

GREEN60

HEX: #1C9440

RGB: 28, 148, 64

GREEN50

HEX: #31B057

RGB: 49, 176, 87

GREEN40

HEX: #51C273

RGB: 81, 194, 115

GREEN10

HEX: #E1F7E8

RGB: 225, 247, 232

ORANGE80

HEX: #B85518

RGB: 184, 85, 24

ORANGE60

HEX: #E6732C

RGB: 230, 115, 44

ORANGE50

HEX: #FC8338

RGB: 252, 131, 56

ORANGE40

HEX: #FF9A5C

RGB: 255, 154, 92

ORANGE10

HEX: #FFE7D9

RGB: 255, 231, 217

BLUE80

HEX: #114D96

RGB: 17, 77, 150

BLUE60

HEX: #216BC4

RGB: 33, 107, 196

BLUE50

HEX: #388BF2

RGB: 56, 139, 242

BLUE40

HEX: #5BA0F5

RGB: 91, 160, 245

BLUE10

HEX: #DBEBFF

RGB: 219, 235, 255

RED80

HEX: #A1131A

RGB: 161, 19, 26

RED60

HEX: #CF212A

RGB: 207, 33, 42

RED50

HEX: #E52A34

RGB: 229, 42, 52

RED40

HEX: #ED646A

RGB: 237, 100, 106

RED10

HEX: #FCE3E4

RGB: 252, 227, 228

YELLOW80

HEX: #C98C10

RGB: 201, 140, 16

YELLOW60

HEX: #E39E14

RGB: 227, 158, 20

YELLOW50

HEX: #FBAF18

RGB: 251, 175, 24

YELLOW40

HEX: #FCC047

RGB: 252, 192, 71

YELLOW10

HEX: #FFF0D1

RGB: 255, 240, 209

BLACK100

HEX: #25282B

RGB: 37, 40, 43

BLACK80

HEX: #52575C

RGB: 82, 87, 92

BLACK60

HEX: #A0A4A8

RGB: 160, 164, 168

BLACK40

HEX: #CACCCF

RGB: 202, 204, 207

BLACK10

HEX: #E8E8E8

RGB: 232, 232, 232

BLACK05

HEX: #FAFAFA

RGB: 250, 250, 250

Color Roles

Colors in GO-JEK app are used sparingly to draw attention to important elements and those that we want the user to take action on, this maintains visual hierarchy. Also certain colors have inherent meaning for a large majority of users. For example, we use shade of red to communicate an error, this helps to communicate visually.

Following is a set of specific guidelines for when and how to use each color in our palette.

GREEN50
Primary actions, buttons, links & success states#31B057
GREEN40
Pressed states & creating gradients#51C273
RED50
Product specific color for GO-FOOD#E52A34
RED60
All error text, negative states#CF212A
BLUE50
Product specific color for GO-PAY#388BF2
YELLOW50
Product specific color for GO-POINTS#FBAF18
ORANGE50
Product specific color for GO-TIX#FC8338
BLACK100
Title texts, icons, captions, input fields & everywhere else where black is required#25282B
BLACK80
Body text & component description#52575C
BLACK60
Inactive states of icons & other components#A0A4A8
BLACK40
Default texts in text field, disabled states of buttons, icons & other components#CACCCF
BLACK10
Dividers & borders#E8E8E8

Color Contrast

We ensure that all types of color combinations on our platform must pass WCAG AA standards. WCAG recommends contrast ratio of atleast 4.5:1 for small text against its background and at least 3:1 for large text. The contrast ratio between a color and its background is based on its luminance.

Background Palette

#0F752E

rgb(15, 117, 46)

hsl(138, 77%, 26%)

Foreground Palette

black-100
Aa
2.54:1
fail
Aa
2.54:1
fail
black-80
Aa
1.25:1
fail
Aa
1.25:1
fail
white
Aa
5.83:1
pass
Aa
5.83:1
pass