Skip to content
PARTYPPLBrand
NederlandsGo to partyppl.nl
02Colours

COLOURS

Night is the stage. Pink leads, violet supports and amber is the flash: used sparingly, only where two things meet. A confirmation, a match, sold out.

Proportion

60 ink, 20 surface, 10 pink, 7 violet, 3 amber. A screen feels dark, with colour at the points of decision.

Accents

The three colours of the brand.

Pink --pink

HEX#FF4D6D
RGB255, 77, 109

Primary button and the brand. Text on pink is ink.

Violet --violet

HEX#7B61FF
RGB123, 97, 255

Organisers, following and mentions.

Amber --amber

HEX#FFB020
RGB255, 176, 32

Live, highlights, ratings and admin. Less than 5% of a screen.

Signal and data

For success and for charts. Not as a brand colour.

Teal --teal

HEX#2EC4B6
RGB46, 196, 182

Success and confirmed.

Orange --orange

HEX#F26430
RGB242, 100, 48

Data and charts only.

Lime --lime

HEX#9BC53D
RGB155, 197, 61

Data and charts only.

Dark theme

The default theme of the site and the apps.

Ink --ink

HEX#0E0B16
RGB14, 11, 22

Background. Also the text colour on pink.

Deep --deep

HEX#07050C
RGB7, 5, 12

The deepest layer, behind sheets and dialogs.

Surface --surface

HEX#1A1524
RGB26, 21, 36

Cards and sheets.

Surface 2 --surface2

HEX#251E36
RGB37, 30, 54

Fields, chips and a card on a card.

Border --border

HEX#2A2338
RGB42, 35, 56

1 px borders.

Border, hover --border-h

HEX#3A3350
RGB58, 51, 80

Border on hover and focus.

Text --text

HEX#FFF5F0
RGB255, 245, 240

Headlines and text.

Body text --body

HEX#C9C3D6
RGB201, 195, 214

Body text.

Muted --muted

HEX#9A93AB
RGB154, 147, 171

Times, metadata and hints.

Light theme

The same brand on cream. The accents stay the same.

Cream --bg

HEX#FFF5F0
RGB255, 245, 240

Background of the light theme.

Surface --surface

HEX#FFFFFF
RGB255, 255, 255

Cards and sheets.

Surface 2 --surface2

HEX#F3ECF0
RGB243, 236, 240

Fields, chips and a card on a card.

Border --border

HEX#E8DFE6
RGB232, 223, 230

1 px borders.

Border, hover --border-h

HEX#D9CFD8
RGB217, 207, 216

Border on hover and focus.

Text --text

HEX#0E0B16
RGB14, 11, 22

Headlines and text: ink.

Body text --body

HEX#3D3550
RGB61, 53, 80

Body text.

Muted --muted

HEX#6B6478
RGB107, 100, 120

Times, metadata and hints.

Accents as text

Pink and violet do not reach 4.5:1 everywhere as small text. So every accent has a text form: the accent with a little text colour (dark) or ink (light) mixed in. Use it for text under 24 px; fills, borders and dots keep the plain accent.

Aa--pink-tDark#FF5E7A
Aa--violet-tDark#9C86FB
Aa--pink-tLight#AB364F
Aa--violet-tLight#604CC5
Aa--teal-tLight#20716E
Aa--amber-tLight#AE4928

Contrast

Measured with the WCAG 2 formula. Text under 24 px needs 4.5:1 (AA), large text and the edges of buttons and fields 3:1.

Dark

  • Text on ink#FFF5F0 / #0E0B1618.2:1AAA
  • Body text on ink#C9C3D6 / #0E0B1611.4:1AAA
  • Muted on ink#9A93AB / #0E0B166.6:1AA
  • Muted on surface 2#9A93AB / #251E365.4:1AA
  • Ink on pink, the button#0E0B16 / #FF4D6D6.1:1AA
  • Pink on ink#FF4D6D / #0E0B166.1:1AA
  • Violet on surface#7B61FF / #1A15244.2:1Large and edges
  • Violet as text on surface#9C86FB / #1A15246.1:1AA
  • Amber on ink#FFB020 / #0E0B1610.7:1AAA
  • Teal on ink#2EC4B6 / #0E0B169.0:1AAA

Light

  • Ink on cream#0E0B16 / #FFF5F018.2:1AAA
  • Body text on cream#3D3550 / #FFF5F010.7:1AAA
  • Muted on cream#6B6478 / #FFF5F05.3:1AA
  • Ink on pink, the button#0E0B16 / #FF4D6D6.1:1AA
  • Pink on cream#FF4D6D / #FFF5F03.0:1Decoration only
  • Pink as text on cream#AB364F / #FFF5F05.8:1AA
  • Violet as text on white#604CC5 / #FFFFFF6.3:1AA
  • Amber as text on cream#AE4928 / #FFF5F05.2:1AA

Gradient

Pink to violet at 135 degrees. Only on the app icon, on hero backgrounds (25% opacity at most) and in poster art. Never on text or buttons.

linear-gradient(135deg, #FF4D6D, #7B61FF)

Tokens

The same values as in the site's code, as CSS variables and as JSON.

/* PartyPPL colour tokens. Source: brand.partyppl.nl/kleuren. Never add colours; derive tints with alpha. */
:root {
  --pink: #FF4D6D;
  --violet: #7B61FF;
  --amber: #FFB020;
  --teal: #2EC4B6;
  --orange: #F26430;
  --lime: #9BC53D;
  --ink: #0E0B16;
  --deep: #07050C;
  --surface: #1A1524;
  --surface2: #251E36;
  --border: #2A2338;
  --border-h: #3A3350;
  --text: #FFF5F0;
  --body: #C9C3D6;
  --muted: #9A93AB;
  --bg: var(--ink);
  --on-pink: #0E0B16;
}
:root[data-theme="light"] {
  --bg: #FFF5F0;
  --surface: #FFFFFF;
  --surface2: #F3ECF0;
  --border: #E8DFE6;
  --border-h: #D9CFD8;
  --text: #0E0B16;
  --body: #3D3550;
  --muted: #6B6478;
}
CSS variables, CSS, 1 kBJSON, JSON, 1 kB