Palette
A palette of eight pastel colors, plus black, white and grays, used solid or glazed. This page lists them; the next pages of this section explain how to use them.
View on GitHubAccessibility: every combination meets WCAG 2.2 AA, and most of them reach AAA. The details are at the end of the page.
Palette
| Color | Name in the classes | Pastel | Text color (light mode) |
|---|---|---|---|
| Sky | sky |
#5CDFEB |
#02464B |
| Blue | blue |
#8AB4FF |
#003290 |
| Lavender | lavender |
#B9A3FF |
#5F23B8 |
| Pink | pink |
#FFA6D1 |
#940061 |
| Peach | peach |
#FFB98A |
#5F2E01 |
| Lemon | lemon |
#FFE38A |
#4B3B01 |
| Mint | mint |
#8BE3B6 |
#014A2F |
| Coral | coral |
#FF9B9B |
#9C0226 |
In dark mode, the text color is the pastel itself.
Black, white and grays
The same grays that the framework already uses, in a scale like Bootstrap's. They are used with the same classes as the pastels.
| Color | Value | Text on the solid color |
|---|---|---|
white |
#ffffff |
black |
gray-100 |
#f5f5f7 |
black |
gray-200 |
#e8e8ed |
black |
gray-300 |
#d2d2d7 |
black |
gray-400 |
#aeaeb2 |
black |
gray-500 |
#8e8e93 |
black |
gray-600 |
#636366 |
white |
gray-700 |
#48484a |
white |
gray-800 |
#3a3a3c |
white |
gray-900 |
#1d1d1f |
white |
black |
#000000 |
white |
Scales
Each color has 13 tones, from 025 (almost white) to 975 (almost black), calculated from its pastel: same hue, different lightness. The tone marked ★ pastel is the pastel and Aa text is the text tone in light mode. Under each tone, its contrast on white (□) and on black (■): 4.5 or more is valid for text.
They are CSS variables, like Bootstrap's colors: var(--gm-sky-500), var(--gm-coral-800), var(--gm-gray-050)… There are no classes for each tone, so the file stays small.
Sky
--gm-sky-…025#eefeff□ 1.0 · ■ 20.3
050#ddfcff□ 1.1 · ■ 19.4
100#b8f9ff□ 1.2 · ■ 18.0
200#70f1fd□ 1.3 · ■ 15.7
300#5cdfeb□ 1.6 · ■ 13.2★ pastel
400#3dc6d2□ 2.1 · ■ 10.2
500#09acb8□ 2.8 · ■ 7.6
600#0a919b□ 3.8 · ■ 5.5
700#20747b□ 5.5 · ■ 3.8
800#045e65□ 7.5 · ■ 2.8
900#02464b□ 10.6 · ■ 2.0Aa text
950#013236□ 13.9 · ■ 1.5
975#012225□ 16.7 · ■ 1.3
Blue
--gm-blue-…025#f7faff□ 1.0 · ■ 20.1
050#f0f5fe□ 1.1 · ■ 19.2
100#e1ecff□ 1.2 · ■ 17.6
200#c8dcff□ 1.4 · ■ 15.1
300#a9c8ff□ 1.7 · ■ 12.4
400#8ab4ff□ 2.1 · ■ 10.1★ pastel
500#5b95ff□ 2.9 · ■ 7.2
600#3979f1□ 4.1 · ■ 5.2
700#1f61d7□ 5.6 · ■ 3.7
800#0c48b4□ 8.1 · ■ 2.6
900#003290□ 11.3 · ■ 1.9Aa text
950#00236b□ 14.5 · ■ 1.5
975#00164d□ 17.2 · ■ 1.2
Lavender
--gm-lavender-…025#faf9fe□ 1.0 · ■ 20.0
050#f5f3fe□ 1.1 · ■ 19.1
100#ece8fe□ 1.2 · ■ 17.5
200#dcd4ff□ 1.4 · ■ 14.9
300#cabcff□ 1.7 · ■ 12.1
400#b9a3ff□ 2.2 · ■ 9.7★ pastel
500#a17bff□ 3.1 · ■ 6.8
600#8d57f6□ 4.4 · ■ 4.8
700#6d47e5□ 5.7 · ■ 3.7
800#5f23b8□ 8.7 · ■ 2.4Aa text
900#490795□ 12.0 · ■ 1.7
950#350170□ 15.1 · ■ 1.4
975#240051□ 17.6 · ■ 1.2
Pink
--gm-pink-…025#fff8fb□ 1.0 · ■ 20.1
050#fef1f7□ 1.1 · ■ 19.1
100#ffe2ef□ 1.2 · ■ 17.4
200#ffc9e1□ 1.4 · ■ 14.7
300#ffa6d1□ 1.8 · ■ 11.6★ pastel
400#ff7ec1□ 2.3 · ■ 9.0
500#f054ab□ 3.2 · ■ 6.6
600#d33892□ 4.4 · ■ 4.8
700#c71c6f□ 5.5 · ■ 3.8
800#940061□ 8.6 · ■ 2.4Aa text
900#700148□ 11.8 · ■ 1.8
950#520034□ 14.9 · ■ 1.4
975#3a0023□ 17.4 · ■ 1.2
Peach
--gm-peach-…025#fff9f5□ 1.0 · ■ 20.1
050#fff2eb□ 1.1 · ■ 19.2
100#ffe6d6□ 1.2 · ■ 17.5
200#ffd0b1□ 1.4 · ■ 14.9
300#ffb98a□ 1.7 · ■ 12.6★ pastel
400#f1995b□ 2.2 · ■ 9.4
500#d58041□ 3.0 · ■ 7.0
600#bb6826□ 4.1 · ■ 5.1
700#a75118□ 5.5 · ■ 3.8
800#7f3f00□ 8.0 · ■ 2.6
900#5f2e01□ 11.2 · ■ 1.9Aa text
950#452001□ 14.4 · ■ 1.5
975#311400□ 17.1 · ■ 1.2
Lemon
--gm-lemon-…025#fffae9□ 1.0 · ■ 20.1
050#fff5d5□ 1.1 · ■ 19.3
100#ffe38a□ 1.3 · ■ 16.6★ pastel
200#f5d980□ 1.4 · ■ 15.1
300#e1c56d□ 1.7 · ■ 12.4
400#caaf56□ 2.1 · ■ 9.8
500#b1963c□ 2.9 · ■ 7.3
600#987e1d□ 3.9 · ■ 5.3
700#856a13□ 5.2 · ■ 4.1
800#645004□ 7.8 · ■ 2.7
900#4b3b01□ 10.9 · ■ 1.9Aa text
950#362a00□ 14.1 · ■ 1.5
975#251c00□ 16.9 · ■ 1.2
Mint
--gm-mint-…025#eefff5□ 1.0 · ■ 20.3
050#dcffeb□ 1.1 · ■ 19.5
100#b2ffd6□ 1.2 · ■ 18.2
200#99f1c3□ 1.3 · ■ 15.7
300#8be3b6□ 1.5 · ■ 13.8★ pastel
400#6fc69b□ 2.1 · ■ 10.2
500#55ad82□ 2.7 · ■ 7.7
600#3a946b□ 3.7 · ■ 5.6
700#2c7851□ 5.4 · ■ 3.9
800#006340□ 7.3 · ■ 2.9
900#014a2f□ 10.4 · ■ 2.0Aa text
950#013520□ 13.7 · ■ 1.5
975#002415□ 16.6 · ■ 1.3
Coral
--gm-coral-…025#fff8f8□ 1.0 · ■ 20.0
050#fef2f1□ 1.1 · ■ 19.2
100#ffe4e3□ 1.2 · ■ 17.5
200#ffcccb□ 1.4 · ■ 14.8
300#ffafae□ 1.8 · ■ 12.0
400#ff9b9b□ 2.0 · ■ 10.4★ pastel
500#fe5361□ 3.2 · ■ 6.6
600#e03549□ 4.4 · ■ 4.8
700#cb1d1d□ 5.6 · ■ 3.7
800#9c0226□ 8.6 · ■ 2.5Aa text
900#76021b□ 11.7 · ■ 1.8
950#580011□ 14.8 · ■ 1.4
975#3e0009□ 17.4 · ■ 1.2
Gray
--gm-gray-…025#fbfbfd□ 1.0 · ■ 20.3
050#f9f9fb□ 1.1 · ■ 20.0
100#f5f5f7□ 1.1 · ■ 19.3
200#e8e8ed□ 1.2 · ■ 17.2
300#d2d2d7□ 1.5 · ■ 13.9
400#aeaeb2□ 2.2 · ■ 9.5
500#8e8e93□ 3.3 · ■ 6.4
600#636366□ 6.0 · ■ 3.5
700#48484a□ 9.1 · ■ 2.3
800#3a3a3c□ 11.3 · ■ 1.9
900#1d1d1f□ 16.8 · ■ 1.2
950#111112□ 18.9 · ■ 1.1
975#0a0a0a□ 19.8 · ■ 1.1
How to use them
Each color is used with these classes:
- Colors: the text in a color, with
.gm-text-sky. - Background: a solid background, with
.gm-bg-sky. - Light and dark mode: light or dark mode in one part of the page, with
data-theme. - Theme: solid, glazed or text in one go, with
.gm-theme-skyand.gm-theme-solid,.gm-theme-glassor.gm-theme-text.
CSS variables
Each color has three variables, so you can use it in your own CSS:
--gm-sky: #5cdfeb; /* the pastel */
--gm-sky-rgb: 92 223 235; /* the same color in RGB channels, for transparency */
--gm-sky-text: #20747b; /* the text tone (the pastel itself in dark mode) */The glass values are variables too: --gm-glass-alpha, --gm-glass-border-alpha, --gm-glass-radius, --gm-glass-blur and --gm-glass-shadow.
Accessibility
| Use | Contrast | Level |
|---|---|---|
| Black text on the solid color | 7.8:1 to 13.3:1 | AAA |
| Text on glass (light and dark) | about 14:1 | AAA |
| Colored text, dark mode | 9.7:1 to 16.6:1 | AAA |
| Colored text, light mode (tones 800 and 900) | 7:1 or more | AAA |
| Text on the grays (solid) | 7:1 or more, except gray-500 (5.2:1) and gray-600 (6:1) |
AAA (those two, AA) |
Gray text (.gm-theme-text) |
7:1 or more | AAA |
- Never use white text on the solid pastel: it stays below 2.2:1.
- The glass border is soft. Cards, alerts and buttons with text don't need more, but form controls that are recognized by their outline (fields, checkboxes, switches) use the framework's gray border, which reaches 3:1.
- Don't show a state with color alone: success, warning and error always come with an icon or a text.
- Glass lets the background show through. Over a photo or strong colors, measure the contrast of the text where you use it.