Color Examples

<ShowDecisionCard store={store} d="Brand Pink" value={['hsl', 'rgb', 'oklch']} model params />

Brand Pink

hsl(336.18deg 59.82% 57.06%)

#d35084

oklch(61.92% 0.17 358.76deg)

Brand Pink color

Model:

color-value/explicit

Params:

value

#d35084

<ShowDecision store={store} d="Brand Pink Hue" size="l" />
<ShowDecision store={store} d="Brand Blue Hue" size="l" />

336

192

<ShowDecision store={store} d="Brand Color Set" size="m" row />

#d35084

#06b4e0

#181818

#f7f7f7

<ShowDecision store={store} d="Pink Palette" />
<ShowDecision store={store} d="Heat Map Color Set" />

#3d1a28

#64263e

#8e2f55

#ba366a

#d35084

#d67199

#da90ad

#e0aec2

#e8c9d6

hsl(0deg 69.91% 55.69%)

oklch(60.13% 0.2 25.26deg)

hsl(0deg 69.91% 55.69%)

oklch(60.13% 0.2 25.26deg)

hsl(341.02deg 39.84% 51.76%)

oklch(57.33% 0.13 2.18deg)

hsl(288.57deg 25.93% 47.65%)

oklch(54.75% 0.11 319.82deg)

hsl(246.47deg 43.59% 54.12%)

oklch(52.04% 0.15 284.56deg)

hsl(231.48deg 73.95% 53.33%)

oklch(49.35% 0.23 268.48deg)

hsl(231.48deg 73.95% 53.33%)

oklch(49.35% 0.23 268.48deg)

<ShowDecision store={store} d="Action Color" size="s" value={['rgb', 'oklch']} />

#9b2c5a

oklch(47.63% 0.15 359.38deg)

<ShowDecision store={store} d="Foreground Lightness Scale" size="m" />
<ShowDecision store={store} d="Background Lightness Scale" size="m" />

0.97

0.94

0.91

0.89

0.86

0.83

0.03

0.06

0.09

0.12

0.15