Colors

In SongKit, you can specify colors using different methods depending on the context

Explicit Colors

This is the classical way of defining a color: you specify the Red, Green and Blue components, as well as an α component for transparency.

You can use the color wheel to change the tint of the color, and then the center selector to set the brightness and saturation. You can use the α slider to set the transparency.

You can also tap on the color code below the color preview and enter directly the hexadecimal color code of the color in the form #rgb or #rbga.

Referenceable Colors

Referenceable colors are labeled colors defined in a song style that can be reused elsewhere in the style. If you modify the referenced color later, all elements referencing it will be updated accordingly.

The referenceable color labels are:

• Title 1
• Title 2
• Title 3
• Content
• Anti-Content (to draw above or under the “Content” color)
• Background
• Accent 1
• Anti-Accent 1 (to draw above or under the “Accent 1” color)
• Accent 2
• Anti-Accent 2 (to draw above or under the “Accent 2” color)
• Accent 3
• Anti-Accent 3 (to draw above or under the “Accent 3” color)

The “Background” color will always correspond to the whole document background. Because it can be transparent, you can use the “Anti-Content” color as a background of things traced with the “Content” color. In the same spirit, “Anti-Accent” colors can be used to draw content over “Accent” colors. Otherwise, these labels are only provided for mnemonic reasons, and you can use any label as you want.

Referenced colors can be explicit colors or dynamic colors.

Dynamic Colors

Dynamic Colors depend on the device and its configuration:

• Dynamic Content Color: Black* in Light mode, White* in Dark mode
• Dynamic Background Color: White* in Light mode, Black* in Dark mode
• Dynamic Accent Color: The current accent color of the app.
• Dynamic Anti-Accent Color: Black when the accent is Yellow, White otherwise.

Dynamic colors can only be selected when defining a referenced color. If you want to use a dynamic color in some specific place, assign it to a referenced color and use this referenced color.

*: Because these colors are defined by the system, they can slightly differ from pure white or pure black.