"Named colors do not work prior to iOS 11.0" error referring to a storyboard

Simply set the minimum Deployment Target to 11.0 or greater both in Target's and Project's Build Settings. It will solve the issue.

For cordova projects, I fixed updating the config.xml from

<preference name="deployment-target"            value="10" />

to

<preference name="deployment-target"            value="12" />

1. Open the storyboard as Source Code. (right click on the storyboard file inside the Project navigator/Open As/Source Code)

   

2. Navigate to Find/Find and Replace... (or press ⌥⌘F).

3. Open the dropdown list on the right side and select Regular Expression.

   

   

4. For the search term, enter the following regex:

   color key=(.*) name=.*
   

   For the replacement, enter this:

   color key=$1 red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
   

   This regular expression essentially captures the key of the color property with (.*) and inserts it again with $1.

   Keep in mind that this example replaces the color to white. Change the color by providing a different RGB value.

5. Switch back to Interface Builder by navigating to Open As/Interface Builder - Storyboard in the right click menu that was mentioned in the first step.

If you want to get the exact floating point values of your named colours, and then do a find / replace so that you can do a quick "replace all" instead of editing each individual colour. Just search for "namedColor" in your storyboard and you will find the colorus as they would appear normally eg.

<namedColor name="Grey Background">
     <color red="0.92941176470588238" green="0.93333333333333335" blue="0.94117647058823528" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</namedColor>

Then do a Find/Replace with the search term:

name="Grey Background"/>

And copy-paste the following into the "With" section of the Find / Replace:

red="0.92941176470588238" green="0.93333333333333335" blue="0.94117647058823528" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>

Then hit "replace all". Don't forget to include the "/>" at the end of both the search term and the replacement text as this will ensure the name is not replaced in the "namedColor" section at the bottom of the storyboard document.

This should then replace all colours in your storyboard that match the exact name. Now just right-click the storyboard and open in interface builder again and the file will recompile and all colours should still look the same.

Things to note:

1. Always make sure you either commit then push to your repository or at least make a backup copy of your storyboard file before you make any changes to it's source.
2. Do this same process for all .xib files that may contain the named colours too otherwise your project wont compile.
3. You can use this same process if you ever have to change a colour project-wide without having to change it for each individual view. Just do a find / replace for the RGB values you pasted above and this will allow you to do a "replace all" for that colour in the future.

Hope this helps!

ಠ‿ಠ