Color and token explorer

OKLCH scales, semantic roles, WCAG 2.x contrast pairs and exportable tokens for any library theme. Everything is computed at build time; a theme's data loads from this site when you pick it, never from another origin.

OKLCH scales

Eleven-step ramps from primary, accent and secondary seeds.

primary

100

200

300

400

500

600

700

800

900

950

accent

100

200

300

400

500

600

700

800

900

950

secondary

100

200

300

400

500

600

700

800

900

950

Semantic roles

background #fbfbff

foreground #15151b

surface #ffffff

surfaceForeground #15151b

elevated #ffffff

elevatedForeground #15151b

muted #f3f3f7

mutedForeground #62626a

subtle #e9e9ed

subtleForeground #4c4c54

border #e1e1e5

borderStrong #929296

input #86868a

ring #1e3a5f

primary #1e3a5f

primaryForeground #ffffff

primarySoft #eff6ff

primarySoftForeground #0d294c

secondary #dae9ff

secondaryForeground #0e1b2d

accent #e4f0ff

accentForeground #0e1b2d

destructive #cc2827

destructiveForeground #ffffff

destructiveSoft #fff2f0

destructiveSoftForeground #540004

success #007f38

successForeground #ffffff

successSoft #dfffe4

successSoftForeground #003312

warning #916600

warningForeground #ffffff

warningSoft #fff4e1

warningSoftForeground #382500

info #0871c1

infoForeground #ffffff

infoSoft #eef6ff

infoSoftForeground #002a4e

sidebar #f6f6fb

sidebarForeground #23232a

sidebarBorder #e1e1e5

sidebarPrimary #1e3a5f

overlay rgb(9 9 11 / 0.5)

scrim rgb(9 9 11 / 0.32)

shadow rgb(15 23 42 / 0.1)

link #47658d

linkVisited #6a3895

selection #b9d7ff

selectionForeground #0e1b2d

canvas #f5f5f9

Contrast pairs

WCAG 2.x floors: text 4.5:1, UI 3:1.

Contrast pairs for Enterprise Neutral light
Foreground	Background	Kind	Ratio	Result
`foreground`	`canvas`	text	16.72:1	Pass
`foreground`	`background`	text	17.61:1	Pass
`foreground`	`surface`	text	18.18:1	Pass
`foreground`	`elevated`	text	18.18:1	Pass
`foreground`	`muted`	text	16.43:1	Pass
`foreground`	`subtle`	text	15.02:1	Pass
`surfaceForeground`	`surface`	text	18.18:1	Pass
`elevatedForeground`	`elevated`	text	18.18:1	Pass
`mutedForeground`	`background`	text	5.86:1	Pass
`mutedForeground`	`surface`	text	6.04:1	Pass
`mutedForeground`	`muted`	text	5.46:1	Pass
`mutedForeground`	`elevated`	text	6.04:1	Pass
`subtleForeground`	`background`	text	8.24:1	Pass
`subtleForeground`	`subtle`	text	7.02:1	Pass
`primaryForeground`	`primary`	text	11.50:1	Pass
`primaryForeground`	`sidebarPrimary`	text	11.50:1	Pass
`primarySoftForeground`	`primarySoft`	text	13.41:1	Pass
`foreground`	`primarySoft`	text	16.71:1	Pass
`secondaryForeground`	`secondary`	text	14.08:1	Pass
`accentForeground`	`accent`	text	15.01:1	Pass
`destructiveForeground`	`destructive`	text	5.38:1	Pass
`destructiveSoftForeground`	`destructiveSoft`	text	13.93:1	Pass
`foreground`	`destructiveSoft`	text	16.63:1	Pass
`successForeground`	`success`	text	5.13:1	Pass
`successSoftForeground`	`successSoft`	text	13.20:1	Pass
`foreground`	`successSoft`	text	16.94:1	Pass
`warningForeground`	`warning`	text	5.12:1	Pass
`warningSoftForeground`	`warningSoft`	text	13.46:1	Pass
`foreground`	`warningSoft`	text	16.69:1	Pass
`infoForeground`	`info`	text	5.07:1	Pass
`infoSoftForeground`	`infoSoft`	text	13.37:1	Pass
`foreground`	`infoSoft`	text	16.68:1	Pass
`sidebarForeground`	`sidebar`	text	14.49:1	Pass
`link`	`background`	text	5.79:1	Pass
`link`	`surface`	text	5.98:1	Pass
`link`	`muted`	text	5.40:1	Pass
`link`	`elevated`	text	5.98:1	Pass
`linkVisited`	`background`	text	7.79:1	Pass
`linkVisited`	`surface`	text	8.04:1	Pass
`linkVisited`	`muted`	text	7.26:1	Pass
`linkVisited`	`elevated`	text	8.04:1	Pass
`selectionForeground`	`selection`	text	11.73:1	Pass
`borderStrong`	`background`	ui	3.00:1	Pass
`borderStrong`	`surface`	ui	3.10:1	Pass
`input`	`background`	ui	3.51:1	Pass
`input`	`surface`	ui	3.63:1	Pass
`ring`	`background`	ui	11.14:1	Pass
`ring`	`surface`	ui	11.50:1	Pass

Export

/* enterprise-neutral · light */
[data-tx-theme='enterprise-neutral'][data-tx-mode='light'] {
  --tx-accent: #e4f0ff;
  --tx-accent-active: #f4ffff;
  --tx-accent-disabled: #f3f7fb;
  --tx-accent-focus: #1e3a5f;
  --tx-accent-foreground: #0e1b2d;
  --tx-accent-hover: #f4ffff;
  --tx-background: #fbfbff;
  --tx-border: #e1e1e5;
  --tx-border-strong: #929296;
  --tx-border-width: 1px;
  --tx-canvas: #f5f5f9;
  --tx-chart-axis: #62626a;
  --tx-chart-grid: #e1e1e5;
  --tx-density: 1;
  --tx-destructive: #cc2827;
  --tx-destructive-active: #a3000e;
  --tx-destructive-disabled: #e6b4ad;
  --tx-destructive-focus: #1e3a5f;
  --tx-destructive-foreground: #ffffff;
  --tx-destructive-hover: #ba0a15;
  --tx-destructive-soft: #fff2f0;
  --tx-destructive-soft-foreground: #540004;
  --tx-elevated: #ffffff;
  --tx-elevated-foreground: #15151b;
  --tx-elevation-style: flat;
  --tx-focus-ring-offset: 2px;
  --tx-focus-ring-style: ring;
  --tx-focus-ring-width: 2px;
  --tx-font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tx-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --tx-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tx-font-size-2xl: 1.5rem;
  --tx-font-size-3xl: 1.875rem;
  --tx-font-size-4xl: 2.25rem;
  --tx-font-size-5xl: 3rem;
  --tx-font-size-6xl: 3.75rem;
  --tx-font-size-7xl: 4.5rem;
  --tx-font-size-8xl: 6rem;
  --tx-font-size-9xl: 8rem;
  --tx-font-size-base: 1rem;
  --tx-font-size-lg: 1.125rem;
  --tx-font-size-sm: 0.875rem;
  --tx-font-size-xl: 1.25rem;
  --tx-font-size-xs: 0.75rem;
  --tx-font-weight-body: 400;
  --tx-font-weight-bold: 700;
  --tx-font-weight-heading: 600;
  --tx-font-weight-medium: 500;
  --tx-foreground: #15151b;
  --tx-glass-blur: 16px;
  --tx-glass-opacity: 82%;
  --tx-info: #0871c1;
  --tx-info-active: #005493;
  --tx-info-disabled: #abc4dd;
  --tx-info-focus: #1e3a5f;
  --tx-info-foreground: #ffffff;
  --tx-info-hover: #0062ab;
  --tx-info-soft: #eef6ff;
  --tx-info-soft-foreground: #002a4e;
  --tx-input: #86868a;
  --tx-input-active: #69696d;
  --tx-input-disabled: #cbcbcc;
  --tx-input-focus: #1e3a5f;
  --tx-input-hover: #77777b;
  --tx-letter-spacing-body: 0;
  --tx-letter-spacing-heading: 0;
  --tx-link: #47658d;
  --tx-link-active: #2c496f;
  --tx-link-disabled: #b3bdca;
  --tx-link-focus: #1e3a5f;
  --tx-link-hover: #39577e;
  --tx-link-visited: #6a3895;
  --tx-motion: 1;
  --tx-motion-base: 200ms;
  --tx-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --tx-motion-fast: 150ms;
  --tx-motion-slow: 300ms;
  --tx-muted: #f3f3f7;
  --tx-muted-active: #ffffff;
  --tx-muted-disabled: #f8f8f9;
  --tx-muted-focus: #1e3a5f;
  --tx-muted-foreground: #62626a;
  --tx-muted-hover: #ffffff;
  --tx-overlay: rgb(9 9 11 / 0.5);
  --tx-primary: #1e3a5f;
  --tx-primary-active: #052043;
  --tx-primary-disabled: #9fa9b6;
  --tx-primary-focus: #1e3a5f;
  --tx-primary-foreground: #ffffff;
  --tx-primary-hover: #112d51;
  --tx-primary-soft: #eff6ff;
  --tx-primary-soft-foreground: #0d294c;
  --tx-radius: 0.5rem;
  --tx-radius-scale: 1;
  --tx-radius-step-2: 2px;
  --tx-radius-step-4: 4px;
  --tx-radius-step-6: 6px;
  --tx-ring: #1e3a5f;
  --tx-scrim: rgb(9 9 11 / 0.32);
  --tx-secondary: #dae9ff;
  --tx-secondary-active: #f1ffff;
  --tx-secondary-disabled: #eff4fb;
  --tx-secondary-focus: #1e3a5f;
  --tx-secondary-foreground: #0e1b2d;
  --tx-secondary-hover: #f4f9ff;
  --tx-selection: #b9d7ff;
  --tx-selection-foreground: #0e1b2d;
  --tx-shadow: rgb(15 23 42 / 0.1);
  --tx-shadow-float: none;
  --tx-shadow-soft: none;
  --tx-sidebar: #f6f6fb;
  --tx-sidebar-border: #e1e1e5;
  --tx-sidebar-foreground: #23232a;
  --tx-sidebar-primary: #1e3a5f;
  --tx-sidebar-primary-active: #052043;
  --tx-sidebar-primary-disabled: #9fa9b6;
  --tx-sidebar-primary-focus: #1e3a5f;
  --tx-sidebar-primary-hover: #112d51;
  --tx-subtle: #e9e9ed;
  --tx-subtle-foreground: #4c4c54;
  --tx-success: #007f38;
  --tx-success-active: #005e28;
  --tx-success-disabled: #acc7b0;
  --tx-success-focus: #1e3a5f;
  --tx-success-foreground: #ffffff;
  --tx-success-hover: #006e30;
  --tx-success-soft: #dfffe4;
  --tx-success-soft-foreground: #003312;
  --tx-surface: #ffffff;
  --tx-surface-foreground: #15151b;
  --tx-surface-style: solid;
  --tx-warning: #916600;
  --tx-warning-active: #6d4c00;
  --tx-warning-disabled: #cdbfa9;
  --tx-warning-focus: #1e3a5f;
  --tx-warning-foreground: #ffffff;
  --tx-warning-hover: #7f5900;
  --tx-warning-soft: #fff4e1;
  --tx-warning-soft-foreground: #382500;
}