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)

Native tokens

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": [],
  "$metadata": {
    "activeThemes": [],
    "tokenSetOrder": [],
    "activeSets": []
  },
  // "Color Mode Name/Source Color Name" if there is any color mode
  "Palette Name/Source Color Name": {
    "Stop Name": {
      "$type": "color",
      "$value": "#f4f1b1",
      "$description": "Shade/Tint color with 96.0% of lightness"
    },
    ...
  },
  ...
}

DTCG tokens

DTCG is a W3C group working on standardizing and stabilizing the token format across platforms, tools, technologies, etc. The format is nowadays the most agnostic one and will be in the future an indispensable one; however, it is an ongoing project.

You can switch the RGB values into OKLCH values.

The export file follows this model (that can be used for Terrazzo or Style Dictionary v4):

{
  "Source Color Name": {
    "Stop Name": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.957,
          0.945,
          0.694
        ],
        "hex": "#f4f1b1"
      },
      "$description": "Shade/Tint color with 96.0% of lightness",
      // If there is any color mode
      "$extentions": {
        "mode": {
          "Color Mode Name": {
            "$value": {
              "colorSpace": "srgb",
              "components": [
                0.91,
                0.886,
                0.243
              ],
              "hex": "#e8e23e"
            },
            "$description": "Shade/Tint color with 88.0% of lightness"
          },
          ...
        },
      },
    },
    ...
  },
  ...
}

Style Dictionary v3

You can export every color shade/tint (including the source color) to a JSON file on your computer. This file is compliant with a basic configuration of the Style Dictionary v3 tool. It is a legacy format because Style Dictionary v4 has introduced the DTCG format, so you can refer to the DTCG tokens in order to use them on Style Dictionary v4.

The export file follows this model:

{
  "color": {
    "Source Color Name": {
      "Color Mode Name": {
        "Stop Name": {
          "value": "#c4bbff",
          "comment": "Shade/Tint color with 80.2% of lightness",
          "type": "color"
        },
        ...
      },
      ...
    },
    ...
  }
}

Universal

The JSON file format is ideal for design tokens because it can be easily handled.

You can export every color shade/tint (including the source color) to a JSON file on your computer. This file includes every color space value to enable a large gamut of handling.

The export file follows this model:

{
  "Color Mode Name": {
    "Source Color Name": {
      "Stop Name": {
        "rgb": {
          "r": 196,
          "g": 187,
          "b": 255
        },
        "gl": {
          "r": 0.769,
          "g": 0.733,
          "b": 1
        },
        "lch": {
          "l": 78,
          "c": 36,
          "h": 297
        },
        "oklch": {
          "l": 0.823,
          "c": 0.095,
          "h": 290
        },
        "lab": {
          "l": 78,
          "a": 17,
          "b": -33
        },
        "oklab": {
          "l": 0.823,
          "a": 0.033,
          "b": -0.089
        },
        "hsl": {
          "h": 247,
          "s": 100,
          "l": 86
        },
        "hsluv": {
          "h": 270,
          "s": 99,
          "l": 78
        },
        "hex": "#ffeeee",
        "description": "Shade/Tint color with 80.2% of lightness",
        "type": "color shade/tint"
      },
      ...
      "type": "color"
    },
    ...
    "type": "color mode"
  },
  ...
  "type": "color palette"
}

2

Export as stylesheet (CSS, SCSS, LESS)

CSS Custom Properties

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);
}
...

SCSS・Pro

Exporting SCSS variables is only available in the Pro plan.

You can export every color shade/tint to a SCSS file on your computer. The color modes can be applied via the :root or a specific class selector. Learn more about Sass variables on the official documentation.

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

The export file follows this model:

// Color Mode Name
@mixin color-mode-name {
  // Source Color Name
  --source-color-name-stop-name: rgb(255, 250, 17);
  ...
  --source-color-name-source: rgb(255, 247, 0);
}
...

// Source Color Name
$source-color-name-stop-name: var(--source-color-name-stop-name);
...
$source-color-name-source: var(--source-color-name-source);


:root {
  &[data-theme="color-mode-name"] {
    @include color-mode-name;
  }
  ...
}

.color-mode-name {
  @include color-mode-name;
}

Less・Pro

Exporting Less variables is only available in the Pro plan.

You can export every color shade/tint to a Less file on your computer. The color modes can be applied via the :root or a specific class selector. Learn more about Less variables on the official documentation.

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

The export file follows this model:

// Color Mode Name
.color-mode-name() {
  // Source Color Name
  @source-color-name-stop-name: rgb(255, 250, 17);
  ...
  @source-color-name-source: rgb(255, 247, 0);

  // ...
  ...
}
...

:root {
  &[data-theme="color-mode-name"] {
    .color-mode-name();
  }
  ...
}

.color-mode-name {
  .color-mode-name();
}
...

3

Export for Tailwind (JS, CSS)

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

Tailwind v3

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"
        },
        ...
      },
      ...
    }
  }
}

Tailwind v4

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

The export file follows this model:

@import "tailwindcss";

@theme {
  --color-*: initial;

  /* Color Mode Name - Source Color Name */
  --color-color-mode-name-source-color-name-source: #fff700;
  ...
  --color-color-mode-name-source-color-name-stop-name: #fffa11;

  /* ... */
  ...
}

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:

SwiftUI

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)
    ...
  }
}

UIKit

import UIKit

struct Color {
  struct ColorModeName {
    // sourceColorName
    public let SourceColorNameStopName = 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:

Compose

import androidx.compose.ui.graphics.Color

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

Resources

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!--modeName - sourceColorName-->
  <color name="colorModeName_sourceColorName_stopName">#2254f5</color>
  ...
</resources>

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