Developer handoff

Export Center.

Copy or download palette data as CSS, SCSS, JSON, or Tailwind-style tokens.

CSS Variables

:root {
  --palette-1: #0647B8;
  --palette-2: #0B63E5;
  --palette-3: #3B82F6;
  --palette-4: #DBEAFE;
  --palette-5: #F5F8FF;
}

SCSS Variables

$palette-1: #0647B8;
$palette-2: #0B63E5;
$palette-3: #3B82F6;
$palette-4: #DBEAFE;
$palette-5: #F5F8FF;

JSON Tokens

{
  "name": "AblePro Blue",
  "slug": "ablepro-blue",
  "category": "Brand",
  "colors": [
    "#0647B8",
    "#0B63E5",
    "#3B82F6",
    "#DBEAFE",
    "#F5F8FF"
  ]
}

Tailwind-style

colors: {
  "100": "#0647B8",
  "200": "#0B63E5",
  "300": "#3B82F6",
  "400": "#DBEAFE",
  "500": "#F5F8FF",
}