Skip to content
Designer Decisions

Color Examples

Color sets

ColorSet (foreground viz)
<ShowDecision d="Brand Color Set" value={false} size="m"  viz="fg" options={{ contrast: '#ccc' }} />
Gg
#d45084
Gg
#16b2dd
Gg
#0f0f0f
Gg
#f5f5f5
ColorSet (vertical layout / channels shown)
<ShowDecision d="Pink Palette" value="rgb" layout="column" />
<ShowDecision d="Heat Map Color Set" value="hsl" layout="column" />
#ffc5dd
#ffa8c6
#f48caf
#e46f99
#d45084
#ad3d6a
#882b51
#651939
#440823
hsl(0deg 69.91% 55.69%)
hsl(339.39deg 65.47% 51.18%)
hsl(321.45deg 62.68% 47.25%)
hsl(298.57deg 56.23% 43.93%)
hsl(275.51deg 58.11% 50.39%)
hsl(256.05deg 68.53% 55.09%)
hsl(231.47deg 73.93% 53.33%)
ColorSet (foreground vs background viz)
<ShowDecision
    d="Content Foreground Scale"
    layout="column"
    size="m"
    viz="fg"
    options={{ contrast: 'oklch(17% 0 0deg)' }}
/>


<ShowDecision
    permalink
    d="Content Background Scale"
    layout="column"
    size="m"
    viz="bg"
    options={{ contrast: 'oklch(83% 0.02 0deg)' }}
/>
Gg
#fff0f4
Gg
#e9d9dd
Gg
#d3c2c6
Gg
#4d4344
Gg
#2e2526
Gg
#110a0b
Gg
#010000

Color values

ColorValue (fg viz / custom contrast color)
<ShowDecision d="Action Color" size="l" viz="fg" options={{ contrast: 'oklch(17% 0 0deg)' }} />


<ShowDecision
    d="Action Constrast Color"
    size="l"
    viz="bg"
    options={{ contrast: 'oklch(48% 0.15 0deg) ' }}
/>
GgA
#9c2e5c
GgA
#ffb2db

Cards

ColorValue (DecisionCard)
<ShowDecisionCard d="Action Color" viz="bg" options={{ contrast: '#fff0f4' }} />
Action Color
Gg
#9c2e5c

Used for buttons, links and navigation

For:

  • Link Foreground
  • Action Background
  • Action Foreground
  • Action Border
  • Navigation Item Background

Not For:

  • Non-interactive elements
ColorSet (DecisionCard / column layout / s size / model and params shown)
<ShowDecisionCard d="Heat Map Color Set" layout="column" size="s" model params />
Heat Map Color Set
#dd3f3f
#d43169
#c42d8e
#ac31af
#8e37ca
#683edb
#3049e0

A 7 step color set ranging from hot to cold

For:

  • Heat maps

Not For:

  • Typography
  • Icons
  • Backgrounds
  • Foregrounds

Model:

color-set/bounded

Params:

  • from

    oklch(60.12% 0.1951 25.26)

  • to

    oklch(49.35% 0.2284 268.48)

  • steps

    5

See also