Generate a data-visualization color system that stays readable, accessible, and on-brand
Views
8.8K
Copies
2.7K
Likes
884
Comments
0
Copy rate
30.0%
Prompt
Write a TypeScript module that generates a complete data-visualization color system from a brand anchor. It must serve a [chart_variety] of chart types at the quality level expected for [product_level].
Requirements:
- Export a `createDataVizPalette(anchor: string, options)` function that returns categorical, sequential, and diverging scales
- Categorical palette: 8 colors, hue-rotated from the anchor, perceptually spaced in OKLCH, all hitting 3:1 contrast against both light and dark backgrounds
- Sequential scale: 9 steps from light to dark, monotonic in lightness for quantitative encoding
- Diverging scale: 11 steps through a neutral midpoint for comparisons around zero
- Colorblind safety: simulate deuteranopia and flag any collisions in the categorical palette
- Deterministic output: same input always yields same palette
- Strict typing, explicit return types, no `any`
Add a small helper that emits CSS custom properties and a helper that returns the nearest palette color to a given target. Include inline comments explaining each step so a designer can follow the logic.Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
Write a TypeScript module that generates a complete data-visualization color system from a brand anchor. It must serve a [chart_variety] of chart types at the quality level expected for [product_level].
Requirements:
- Export a `createDataVizPalette(anchor: string, options)` function that returns categorical, sequential, and diverging scales
- Categorical palette: 8 colors, hue-rotated from the anchor, perceptually spaced in OKLCH, all hitting 3:1 contrast against both light and dark backgrounds
- Sequential scale: 9 steps from light to dark, monotonic in lightness for quantitative encoding
- Diverging scale: 11 steps through a neutral midpoint for comparisons around zero
- Colorblind safety: simulate deuteranopia and flag any collisions in the categorical palette
- Deterministic output: same input always yields same palette
- Strict typing, explicit return types, no `any`
Add a small helper that emits CSS custom properties and a helper that returns the nearest palette color to a given target. Include inline comments explaining each step so a designer can follow the logic.