Export Formats Guide

Best for:

• • API responses and data storage
• • Configuration files
• • JavaScript applications
• • Design system documentation

Includes color names, HEX values, RGB, and HSL data in a structured format.

Example Output:

{
  "colors": [
    {
      "name": "primary",
      "hex": "#3B82F6",
      "rgb": { "r": 59, "g": 130, "b": 246 },
      "hsl": { "h": 217, "s": 91, "l": 60 }
    },
    {
      "name": "secondary", 
      "hex": "#10B981",
      "rgb": { "r": 16, "g": 185, "b": 129 },
      "hsl": { "h": 160, "s": 84, "l": 39 }
    }
  ]
}

Best for:

• • Modern CSS projects
• • Theme switching (light/dark mode)
• • Dynamic color changes
• • Component libraries

Creates reusable CSS variables that can be used throughout your stylesheets.

Example Output:

:root {
  --color-primary: #3B82F6;
  --color-secondary: #10B981;
  --color-accent: #F59E0B;
  --color-neutral: #6B7280;
}

/* Usage */
.button {
  background: var(--color-primary);
  color: white;
}

Best for:

• • Tailwind CSS projects
• • Utility-first CSS workflows
• • React, Vue, or Angular apps
• • Design system tokens

Ready-to-use Tailwind configuration that extends the default color palette.

Example Output:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#3B82F6',
        'brand-secondary': '#10B981',
        'brand-accent': '#F59E0B',
        'brand-neutral': '#6B7280'
      }
    }
  }
}

/* Use like: bg-brand-primary */

Best for:

• • Sass/SCSS projects
• • Legacy CSS preprocessor workflows
• • Bootstrap customization
• • Large-scale CSS architectures

Traditional Sass variables with optional color functions and mixins.

Example Output:

// _colors.scss
$color-primary: #3B82F6;
$color-secondary: #10B981;
$color-accent: #F59E0B;
$color-neutral: #6B7280;

// Usage
.button {
  background-color: $color-primary;
  border: 1px solid darken($color-primary, 10%);
}

Best for:

• • Styled Components
• • Emotion
• • React Native
• • JavaScript-based styling

JavaScript object format compatible with most CSS-in-JS libraries.

Example Output:

// colors.js
export const colors = {
  primary: '#3B82F6',
  secondary: '#10B981', 
  accent: '#F59E0B',
  neutral: '#6B7280'
}

// Usage with Styled Components
const Button = styled.button`
  background: ${colors.primary};
`

Best for:

• • Android app development
• • Material Design themes
• • Kotlin/Java projects
• • Android Studio integration

XML color resources ready for your Android res/values/colors.xml file.

Example Output:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3B82F6</color>
    <color name="colorSecondary">#10B981</color>
    <color name="colorAccent">#F59E0B</color>
    <color name="colorNeutral">#6B7280</color>
</resources>

<!-- Usage in layouts -->
android:background="@color/colorPrimary"

Best for:

• • iOS app development
• • Swift/SwiftUI projects
• • Xcode color assets
• • UIKit color definitions

Swift color definitions using UIColor and Color (SwiftUI) with proper RGB values.

Example Output:

// Colors.swift
import UIKit
import SwiftUI

extension UIColor {
    static let brandPrimary = UIColor(red: 59/255, green: 130/255, blue: 246/255, alpha: 1.0)
    static let brandSecondary = UIColor(red: 16/255, green: 185/255, blue: 129/255, alpha: 1.0)
}

extension Color {
    static let brandPrimary = Color(.brandPrimary)
}