PaletteDesk
Tool

Export the color palette

Every color in the current palette - as HEX or RGB, with ready-made code for CSS, Tailwind, and JSON.

Background#FAFAF9
Surface#FFFFFF
Primary#111827
Accent#2563EB
Text#030712
Text (secondary)#57534E

Expanded font export

CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

h1 {font-size: 3.815rem; /* 61.04px */}
h2 {font-size: 3.052rem; /* 48.83px */}
h3 {font-size: 2.441rem; /* 39.06px */}
h4 {font-size: 1.953rem; /* 31.25px */}
h5 {font-size: 1.563rem; /* 25.00px */}
h6 {font-size: 1.250rem; /* 20.00px */}

small {font-size: 0.800rem; /* 12.80px */}
Tailwind CSS
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: ['Inter', 'sans-serif'],
        body: ['Inter', 'sans-serif'],
      },
      fontSize: {
        h1: ['3.815rem', { lineHeight: '1.2' }],
        h2: ['3.052rem', { lineHeight: '1.2' }],
        h3: ['2.441rem', { lineHeight: '1.2' }],
        h4: ['1.953rem', { lineHeight: '1.2' }],
        h5: ['1.563rem', { lineHeight: '1.2' }],
        h6: ['1.250rem', { lineHeight: '1.2' }],
        small: ['0.800rem', { lineHeight: '1.5' }],
      },
    },
  },
}
CSS variables
:root {
  --color-bg: #FAFAF9;
  --color-surface: #FFFFFF;
  --color-primary: #111827;
  --color-accent: #2563EB;
  --color-text: #030712;
  --color-text-secondary: #57534E;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}
Tailwind config
module.exports = {
  theme: {
    extend: {
      colors: {
        'background': '#FAFAF9',
        'surface': '#FFFFFF',
        'primary': '#111827',
        'accent': '#2563EB',
        'text': '#030712',
        'text-secondary': '#57534E',
      },
      fontFamily: {
        heading: ['Inter', 'sans-serif'],
        body: ['Inter', 'sans-serif'],
      }
    },
  },
}
JSON
{
  "background": "#FAFAF9",
  "surface": "#FFFFFF",
  "primary": "#111827",
  "accent": "#2563EB",
  "text": "#030712",
  "text-secondary": "#57534E",
  "fonts": {
    "heading": "Inter",
    "body": "Inter"
  }
}
Export