Extracting All Color Hex Codes from Xcode Color Sets and Saving to a File

Introduction:

Most often, we the iOS Engineers get design from UI/UX team with colour code, icons etc, but what if its other way around, I recently encountered a situation where I have to work on prebuilt app and source code came from other vendor, now our design team wanted me to export all the hex colour codes used inside the application, so that the new screen designed will re-use the previously used colours etc.

Section 1: Understanding Xcode Colour Sets

Xcode colour sets is a way to add colour to you .xcasset catalog where you generally add you icons and other images, if you want to dive deeper into it below are the few article that would help.

1. https://medium.com/@sandshell811/color-assets-xcassets-in-xcode-cc24b2834f89
2. https://medium.com/developerinsider/xcode-pro-tips-how-to-use-asset-catalogs-to-support-named-colors-8959ab51fd84

Lets do a hand on and create a create and Xcode project to understand that and see the structure of it in Finder(File explorer) to see how that is stored.

1. Create a new Xcode project
2. add few .colorset in assets folder,
3. Change the input method, three type of input method are there
   a. Hex code(#00000)
   b. Floating point(0.0–1.0)
   c. Integer(0–255)
4. Finally see the asset folder in finder

Also I have video that would help to create the colorset and do the analysis of its storage.

https://youtu.be/7-wS53Pr2UU

Section 2: Challenges Faced

Now that we already have a Xcode project if you have follow the youtube tutorial, now lets try to get the all the named color from the project.

The noob way

1. Click on the Assets
2. Click on the .colorset(Named colour)
3. Click over the color square inside the Named color(could be more than one based on the appearance selected).
4. Go to the attribute inspector from the Right panel(inspectors panel), and finally click on the attribute inspector.
5. In attribute inspector you will find the inside the color section the color code used.

Now repeat the process for all named color, in some project it can be as high as 50 or 100 or anything.

Please also look into this stack-overflow question, which was trying to do the achieve the similar thing.

https://stackoverflow.com/questions/55158244/how-can-i-programmatically-obtain-all-colors-included-in-color-assets-catalog

Section 3: Writing the Swift Script

Now if you have followed along, and watched the video diligently, you would know how the named colours are stored and its json format.

Let dive into writing the script or command line interface in swift.

The script should be able to do the following things

1. Able to get the .asset folder path as parameter.
2. Loop through all the folders in asset recursively and find all the .colorset folders name
3. Read the content.json file inside the folder to fetch the colour codes.
4. Finally printing all colour codes with respect to their respective file name and appearance type.

Section 4: Running the Script

If you want to download the source code please find the link here: -https://buymeacoffee.com/ajaysinghthakur/e/277352

Or you can directly download the executable file and run.

https://github.com/ajaysinghthakur/extractnamedcolourexe

$ git clone <https://github.com/ajaysinghthakur/extractnamedcolourexe.git>
$ cd extractnamedcolourexe
$ ./ExtractNamedColours --input path_to_asset/Assets.xcassets --output output_folder_for_json

By using the above command in order, you will be able to see the resultant json.

Section 5: Exploring Output File

On running the commands from above section you would have got your obj.json file

whose content will be similar to below

[
    {
        "values": [
            {
                "appearance": "Any",
                "colorHex": "#FF0000"
            },
            {
                "colorHex": "#FF0000",
                "appearance": "luminosity",
                "appearanceValue": "dark"
            }
        ],
        "color_name": "Red"
    },
    {
        "values": [],
        "color_name": "systemcolor"
    },
    {
        "color_name": "AccentColor",
        "values": []
    },
    {
        "values": [
            {
                "colorHex": "#FEFFFF",
                "appearance": "Any"
            },
            {
                "appearanceValue": "dark",
                "colorHex": "#000000",
                "appearance": "luminosity"
            }
        ],
        "color_name": "WhiteBlack"
    }
]

Json Structure

1. Array of Named Colours
2. Each Element in Array Contains color_name and values
3. color_name: Represent the name of colour given in XCAsset.
4. values: Array of element of type appearance element used, can be from one to many.
5. Finally the appearance element contains colorHex , appearance and option value of appearance.

Conclusion:

We explored Xcode color sets and how to extract named colors from an Xcode project. We discussed the challenges faced when manually retrieving color codes and then dove into writing a Swift script to automate the process. By running the provided script, you can obtain a JSON file containing all the color codes associated with their respective file names and appearance types

Support:

If you found this article insightful and want to stay updated on more iOS development tips and tricks, consider following me on:

• https://www.linkedin.com/in/ajay-singh-thakur/
• https://medium.com/@ajaysinghthakur/about

Your support and connection are greatly appreciated, and I look forward to sharing more valuable insights with you!.