# Data Viz and Sequential CSS Variables

**URL:** <https://forum.inductiveautomation.com/t/data-viz-and-sequential-css-variables/52145>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [October 20, 2021, 7:10am UTC](https://forum.inductiveautomation.com/t/data-viz-and-sequential-css-variables/52145 "2021-10-20T07:10:34Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![matthew.gollasch](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.gollasch/32/26382_2.png) [@matthew.gollasch](https://forum.inductiveautomation.com/u/matthew.gollasch)\
**Post date:** [October 20, 2021, 7:10am UTC](https://forum.inductiveautomation.com/t/data-viz-and-sequential-css-variables/52145/1 "2021-10-20T07:10:34Z")

</div>

Can anyone tell me where the Perspective theme CSS variables "Data Viz: Qualitative", "Data Viz: Diverging" and "Sequential" are used? When I search through the built in Perspective "Light" theme I can see heavy use of the "Neutrals" variables, but not these others.

> ```
> /* Sequential */
> --seq-1: #AE74E8; /* purple-50 */
> --seq-2: #9659D6; /* purple-60 */
> --seq-3: #7D3CBD; /* purple-70 */
> --seq-4: #642B9E; /* purple-80 */
> --seq-5: #4B2175; /* purple-90 */
> --seq-6: #371C52; /* purple-100 */
> 
> /* Data Viz: Diverging */
> --div-1: #642B9E; /* purple-80 */
> --div-2: #7D3CBD; /* purple-70 */
> --div-3: #9656D6; /* purple-60 */
> --div-4: #AE74E8; /* purple-50 */
> --div-5: #C79BF2; /* purple-40 */
> --div-6: #DABCF7; /* purple-30 */
> --div-7: #EAD9FA; /* purple-20 */
> --div-8: #F5F0FA; /* purple-10 */
> --div-9: #D7FAF8; /* teal-10 */
> --div-10: #83F2EB; /* teal-20 */
> --div-11: #43DED3; /* teal-30 */
> --div-12: #21C2B7; /* teal-40 */
> --div-13: #0EA197; /* teal-50 */
> --div-14: #08827A; /* teal-60 */
> --div-15: #086962; /* teal-70 */
> --div-16: #09524D; /* teal-80 */
> 
> /* Data Viz: Qualitative */
> --qual-1: #7D3CBD; /* purple-70 */
> --qual-2: #229AD6; /* primary-50 */
> --qual-3: #086962; /* teal-70 */
> --qual-4: #B01355; /* magenta-70 */
> --qual-5: #F55353; /* red-50 */
> --qual-6: #661414; /* red-90 */
> --qual-7: #038537; /* green-60 */
> --qual-8: #114599; /* blue-80 */
> --qual-9: #ED5393; /* magenta-50 */
> --qual-10: #CF7911; /* bronze-50 */
> 
> ```

For a little more context to my question, I'm interested in creating a standard set of colors for Perspective Chart components and thought I could make use of these existing variables somehow.