Converts a simple list of color definitions to asset catalogs for Xcode, resource XML for Android or an HTML preview.
Install via Homebrew:
brew tap 5sw/makecolors
brew install make-colors
If you don’t use Homebrew you can also install directly from source. Clone the repository or download the release and run make install inside the working copy.
USAGE: make-colors <input> [--ios] [--android] [--html] [--prefix <prefix>] [--output <output>] [--dump]
ARGUMENTS:
<input> The color list to process.
Use - to process the standard input.
OPTIONS:
--ios/--android/--html The formatter to use. (default: ios)
--prefix <prefix> Prefix for color names.
--output <output> Output file to write.
Use - for standard output.
Default is the input file name with the appropriate file extension. If
the input is - the default is standard output.
Note that asset catalogs cannot be written to standard output.
--dump List read colors on console.
-h, --help Show help information.
Each line in your input contains one color definition. That is a name followed by the actual color. We support RGB colors in a few formats similar to CSS:
Base/Green #8fd151
Base/PaleGreen #d0f9a9
Base/Red rgb(249, 39, 7)
TransparentRed rgba(255, 0, 0, 128)
Base/Yellow #ff0
Grayscale colors can be produced with the white(value) and white(value, alpha) syntax. A value of zero means black while a value of 255 is pure white.
Black white(0)
MediumGray white(128)
TransparentGray white(128, 128)
HSV colors can be specified as hsv(hue, saturation, value) or hsva(hue, saturation, value, alpha) syntax. Hue is specified as degrees with the ° or deg suffix.
HSV/Yellow hsv(60°, 255, 255)
Colors can also reference other colors by prefixing them with an @ sign:
Error @Base/Red
Warning @Base/Yellow
Good @Base/Green
The optional prefix followed by a / is added in front of the color name. Then for each part separate by / a new folder that provides namespace is inserted in the asset catalogs. Spaces are inserted between CamelCase words. Color references are inserted as copies of the original color.
For the given example input the generated asset catalog looks like this:
The optional prefix, followed by a underscore is added in front of the name. Names are converted from CamelCase to snake_case and / is replaced by underscores as well. Color references the generated color resource also references the original color.
The generated XML for the example input looks like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="base_green">#8FD151</color>
<color name="base_pale_green">#D0F9A9</color>
<color name="base_red">#F92707</color>
<color name="base_yellow">#FFFF00</color>
<color name="transparent_red">#FF000080</color>
<color name="error">@color/base_red</color>
<color name="good">@color/base_green</color>
<color name="warning">@color/base_yellow</color>
</resources>
</xml>
Generates a simple HTML table with the color names, values and a sample.
The generated HTML looks like this:
- Calculate derived colors (blend, change hue/saturation/brightness/alpha)
- Support for dark/light mode
- Improved error reporting in the parser