Colors

The world is much brighter with color.

Application Colors are the specific colors that you'll define specifically for your application. The names should look familiar to you as they are pulled from the Bootstrap framework. The second set of colors provides a standard and well-designed palette for you to use within your application. This palette comes from the Tailwind framework.

Hex Colors

When specifying a color with a hexadecimal number, you can use 3, 4, 6, or 8 digits, with an optional "#" prefix. If 3 digits are specified, they are interpreted as RGB doublet data for a fully opaque color. For example, "#123" specifies the color that is represented by "#FF112233".

If you provide a 4-digit hexadecimal number, then the data is interpreted as above, except that the first digit specifies the alpha channel. For example, "#1234" specifies the color that is represented by "#11223344".

When providing a 6-digit hexadecimal number, the data is interpreted as a fully opaque color with those RGB values. For example, "#112233" specifies the color that is represented by "#FF112233". Finally, you can explicitly provide an 8-digit number that completely specifies the Alpha, Red, Green, and Blue channels, in that order.

Note that, in the paragraph above, the fully expanded color description is of the format, AARRGGBB. That is: the first pair of hexadecimal digits specify the Alpha channel; the second pair specifies the Red channel; the third pair specifies the Green channel; and the final pair specifies the Blue channel.

Alpha Transparency Values

100% — FF 99% — FC 98% — FA 97% — F7 96% — F5 95% — F2 94% — F0 93% — ED 92% — EB 91% — E8 90% — E6 89% — E3 88% — E0 87% — DE 86% — DB 85% — D9 84% — D6 83% — D4 82% — D1 81% — CF 80% — CC 79% — C9 78% — C7 77% — C4 76% — C2 75% — BF 74% — BD 73% — BA 72% — B8 71% — B5 70% — B3 69% — B0 68% — AD 67% — AB 66% — A8 65% — A6 64% — A3 63% — A1 62% — 9E 61% — 9C 60% — 99 59% — 96 58% — 94 57% — 91 56% — 8F 55% — 8C 54% — 8A 53% — 87 52% — 85 51% — 82 50% — 80 49% — 7D 48% — 7A 47% — 78 46% — 75 45% — 73 44% — 70 43% — 6E 42% — 6B 41% — 69 40% — 66 39% — 63 38% — 61 37% — 5E 36% — 5C 35% — 59 34% — 57 33% — 54 32% — 52 31% — 4F 30% — 4D 29% — 4A 28% — 47 27% — 45 26% — 42 25% — 40 24% — 3D 23% — 3B 22% — 38 21% — 36 20% — 33 19% — 30 18% — 2E 17% — 2B 16% — 29 15% — 26 14% — 24 13% — 21 12% — 1F 11% — 1C 10% — 1A 09% — 17 08% — 14 07% — 12 06% — 0F 05% — 0D 04% — 0A 03% — 08 02% — 05 01% — 03 00% — 00

Interface Colors

There are several interface colors that can be set through the mobile application settings. The follow CSS notation can be used to access these colors in your application's stylesheets.

• ?color-background - the background color for the application.

• ?color-heading - the text color for headings.

• ?color-text - the general text color.

Application Colors

The following colors are available for you to use and customize for your application. You can access these colors in your CSS using the notation ?color-colorname (e.g. ?color-primary).

Application colors can be used with XAML properties of type Color using the following syntax.

<Rock:Tag Text="Custom Pallette Color" 
        BackgroundColor="{Rock:PaletteColor pink-800}"
        TextColor="{Rock:PaletteColor App-Primary}" />

Palette Colors

Creating sets of well matched colors can be difficult. We've incorporated the well-balanced colors of the Tailwind CSS framework so you'll have easy access to a great set of colors for your application.

When using these colors you'll reference the color name and the saturation value. For example to use the 600 weight of gray for text you'd use .text-gray-600. To use the same gray as a background you'd reference .bg-gray-600.

You can access these colors in your CSS using the notation ?color-colorname-intensity (e.g. ?color-gray-400).

Palette colors can be used with XAML properties of type Color using the following syntax.

<Rock:Tag Text="Custom Pallette Color" 
        BackgroundColor="{Rock:PaletteColor pink-800}"
        TextColor="{Rock:PaletteColor pink-200}" />

Gray

Red

Orange

Yellow

Green

Teal

Blue

Indigo

Purple

Pink