Export a color palette to code

Learn how to export your color palette to a batch of formats, from agnostic data to a specific one suitable for frameworks and libraries.

1

Export as design tokens (JSON)

You can export every color shade/tint (including the source color) to a JSON file on your computer. This file can be imported to Tokens Studio or Penpot. The purpose is to add more semantics to the shades/tints. Learn more about Tokens Studio and Penpot.

The export file follows this model:

{
  "$themes": [
    {
      "name": "Color Mode Name 1",
      "group": "Modes",
      "description": "",
      "selectedTokenSets": {
        "Palette Name/Color Mode Name 1": "enabled"
    },
    {
      "name": "Color Mode Name 2",
      "group": "Modes",
      "description": "",
      "selectedTokenSets": {
        "Palette Name/Color Mode Name 2": "enabled"
    },
    ...
  ],
  "$metadata": {
    "activeThemes": [],
    "tokenSetOrder": [
      "Palette Name/Color Mode Name 1",
      "Palette Name/Color Mode Name 2",
      ...
    ],
    "activeSets": []
  },
  "Palette Name/Color Mode Name 1": {
    "sourceColorName.stopName": {
      "$type": "color",
      "$value": "#f4f1b1",
      "$description": "Shade/Tint color with 96.0% of lightness"
    },
    ...
  },
  ...
}
2

Export as stylesheet (CSS, SCSS, LESS)

You can export every color shade/tint to a CSS file on your computer. The modes can be applied via the :root selector. Learn more about CSS4 Custom Properties on the Mozilla documentation.

You can switch the RGB values into HEX, HSL, LCH, or P3 values.

The export file follows this model:

/* Color Mode Name */
:root[data-theme="color-mode-name"] {
  /* Source Color Name */
  --source-color-name-stop-name: rgb(207, 205, 255);
  ...
  --source-color-name-source: rgb(255, 247, 0);
}
...
3

Export for Tailwind (JS, CSS)

Exporting for Tailwind v3 and v4 is only available in the /pro plan.

You can export every color shade/tint to a config file (JS) for Tailwind v3 on your computer. Learn more about setting a theme with Tailwind 3.

The export file follows this model:

/** @type {import('tailwindcss').Config} */

module.exports = {
  "theme": {
    "colors": {
      "sourceColorName": {
        "colorModeName": {
          "stopName": "#fffa11",
          ...
          "source": "#fff700"
        },
        ...
      },
      ...
    }
  }
}
4

Export for Apple apps (Swift)

Exporting for Apple apps is only available in the /pro plan.

You can export every color shade/tint to a Swift file on your computer, depending on the framework you use for building UI in your Xcode project. Learn more about Color Structure on the Apple Developer Documentation.

The export file follows this model:

import SwiftUI

public extension Color {
  static let Token = Color.TokenColor() 
  struct TokenColor {
    // modeName - sourceColorName
    public let ColorModeNameSourceColorNameStopName = Color(red: 0.133, green: 0.329, blue: 0.961)
    ...
  }
}
5

Export for Android apps (KT and XML)

Exporting for Android apps is only available in the /pro plan.

You can export every color shade/tint to Kotlin or an XML file on your computer, depending on how you want to develop your Android project. Learn more about App Resources and Jetpack Compose on the Android Developer Documentation.

The export file follows this model:

import androidx.compose.ui.graphics.Color

// colorModeName - sourceColorName
val colorModeName_sourceColorName_stopName = Color(0XFF1D3A3E)
...
6

Export the LCH as spreadsheets (CSV)

Exporting as spreadsheets is only available in the /pro plan.

You can export every color shade/tint to CSV files on your computer.

The export file follows this model (the files are compressed into a zip):

SourceColorName,Lightness,Chroma,Hue
stopName,43,94,297
10,24,64,297
9,32,80,297
8,40,90,297
7,47,92,297
6,54,79,295
5,61,65,295
4,70,51,296
3,78,36,297
2,87,22,299
1,95,7,30
PreviousGenerate a color palette documentationNextSync a color palette to the local library

Last updated