Type and colour, made for your brand.

Colour Studio

Explore, lock and refine a palette that fits your direction.

AIDescribe the colour mood you want

Choose a colour relationship

#0E0E12
hsl 240·13·6
Pick a different colour for swatch #0E0E12
#2A2440
hsl 253·28·20
Pick a different colour for swatch #2A2440
#7C5CFC
hsl 252·96·67
Pick a different colour for swatch #7C5CFC
#C9C4E0
hsl 251·31·82
Pick a different colour for swatch #C9C4E0
#FAFAF7
hsl 60·23·97
Pick a different colour for swatch #FAFAF7

WCAG contrast on your lightest colour

on18.42AAA

on14.09AAA

on4.19AA Large

on1.61Fail

Ready when you are.

Copy your fonts and colours into your website, or share them with whoever is building it.

CSS variables
Font stacks
Google Fonts reference
Colour values

:root {
  --color-1: #0E0E12;
  --color-2: #2A2440;
  --color-3: #7C5CFC;
  --color-4: #C9C4E0;
  --color-5: #FAFAF7;
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-accent: "JetBrains Mono", monospace;
}