Figma Plugin Docs
Dashboard Blog Post

HSL Color Game

Find the block with a different shade or brightness.

Pick a block to play.
Source Share Score on Twitter 𝕏
Colors Color Setup
Contrast
Contrast
Contrast
Contrast
Contrast
Dark/Light
(Alt + T)
Randomize Colors
(Spacebar)

Select a color scheme

All
Monochromatic
Analogous
Complementary
Split Complementary
Triadic
Tetradic
Undo
(← Left arrow)
Redo
(Right arrow →)
Export
(CTRL + E)
Fonts Font Setup
Headings

Enter font name (local or Google )

Source
Learn more or Troubleshoot
Body

Enter font name (local or Google )

Source
Learn more or Troubleshoot
Type Scale

Select a type scale

1.067 – Minor Second
1.125 – Major Second
1.200 – Minor Third
1.250 – Major Third
1.333 – Perfect Fourth
1.414 – Augmented Fourth
1.500 – Perfect Fifth
1.618 – Golden Ratio
Randomize Fonts
(Spacebar)

Select a font category

All
Serif
Sans Serif
Handwriting
Monospace
Display
Undo
(← Left arrow)
Redo
(Right arrow →)
Export
(CTRL + E)