Skip to content
Designer Decisions

Color Decisions

import { ... } from '@noodlestan/designer-shows/astro';

Components

These components render color related decisions.

ShowColorValueDecision

Renders a ColorValueDecision.

<ShowColorValueDecision store={store} d="Brand Blue" size="m" value={['rgb', 'oklch']} />
#06b4e0
oklch(71.53% 0.13 223.64deg)

ShowColorSetDecision

Renders a ColorSetDecision.

<ShowColorSetDecision store={store} d="Pink Palette" size="m" value={['rgb', 'oklch']} />
#3d1a28
oklch(27.31% 0.06 356.5deg)
#64263e
oklch(36.61% 0.09 357.97deg)
#8e2f55
oklch(45.54% 0.13 359.3deg)
#ba366a
oklch(54.3% 0.17 0.59deg)
#d35084
oklch(61.92% 0.17 358.76deg)
#d67199
oklch(67.39% 0.13 356.15deg)
#da90ad
oklch(73.62% 0.1 354.3deg)
#e0aec2
oklch(80.14% 0.06 352.99deg)
#e8c9d6
oklch(86.66% 0.04 352.05deg)

ShowColorSRGBHueValueDecision

Renders a ColorHueValueDecision.

<ShowColorSRGBHueValueDecision store={store} d="Brand Pink Hue" size="m" />
<ShowColorSRGBHueValueDecision store={store} d="Brand Blue Hue" size="m" />
336
192

ShowColorSRGBSaturationValueDecision

Renders a ColorSaturationValueDecision.

<ShowColorSRGBSaturationValueDecision store={store} d="Brand Pink Saturation" size="m" />
<ShowColorSRGBSaturationValueDecision store={store} d="Brand Blue Saturation" size="m" />
0.6
0.95

ShowColorSRGBLightnessValueDecision

Renders a ColorLightnessValueDecision.

<ShowColorSRGBLightnessValueDecision store={store} d="Brand Pink Lightness" size="m" />
<ShowColorSRGBLightnessValueDecision store={store} d="Brand Blue Lightness" size="m" />
0.57
0.45

ShowColorSRGBLightnessScaleDecision

Renders a ShowColorSRGBLightnessScaleDecision.

<ShowColorSRGBLightnessScaleDecision store={store} d="Foreground Lightness Scale" size="m" />
<ShowColorSRGBLightnessScaleDecision store={store} d="Background Lightness Scale" size="m" />
0.97
0.97
0.94
0.91
0.89
0.86
0.83
0.83
0.03
0.06
0.09
0.12
0.15

Props

༶ DecisionProps: store and d

These two mandatory props serve to identify and retrieve the decision.

༶ ValueProps ༶ value

The value prop controls how the decision value is displayed.

Color Values

For decisions of type ColorValueDecision and ColorSetDecision, the value prop can be used not only to show/hide the decision value but also to display it in one or more color spaces.

Provide a string with one of ColorFormat to specify which color space and format to use.

<ShowDecision d="Brand Blue" store={store} size="s" value="oklch" />
oklch(61.92% 0.17 358.76deg)

Provide an array of ColorFormat to list several color spaces in your preferred order.

<ShowDecision d="Brand Pink" store={store} size="s" value={['oklch', 'rgb']} />
oklch(61.92% 0.17 358.76deg)
#d35084

༶ ValueProps ༶ size

The size optional prop controls the size of the visualization.

Refer to ShowValueSize for available sizes.

༶ ValueProps ༶ viz

Chose visualization type.

In this example we set the visualization to bg.

<ShowDecision store={store} d="Action Color" size="m" viz="bg" options={{ contrast: '#FDFBFC' }} />
Gg
#9b2c5a

Refer to ColorVizName for available visualizations.

༶ ValueProps ༶ options

Configure the visualization.

In this example we change it to fg and provide the additional options prop for defining the visualization options.

<ShowDecision store={store} d="Action Color" size="m" viz="fg" options={{ contrast: '#FDFBFC' }} />
An old wooden gate creaked in protest as it opened to an unfamiliar visitor. Leaves rustled quietly. The brushes on the side of the road stood by, in expectation. Overhead, the stars shimmered like a
#9b2c5a

Refer to ColorVizOptions for available options.