Sekvensiella paletten
Den sekventiella paletten används vi första hand för att visa på trender eller skillnader.
Monokrom (1-10 värden)
Monokroma paletter används för att visa på trender och liknande. Exempelvis när något är mycket/lite eller högt/lågt.
Varje färg finns i tio fasta steg från 10 upp till 100. Generellt sätt har alla värden över 50 ett kontrastförhållande över 3:1 mot en ljusbakgrund. Färger från 50 och nedåt är till för att användas i mörka teman.
Värt att notera är också att även om man har en ljus bakgrund kan färger från 50 och nedåt i skalan användas för att illustrera just en trend eller intensitet. Dessa grafer kommer då vara under kontrastvärdet men bidrar ändå till att ge en fingervisning om tred. Diagramet bör då kompleteras med en tabell där informationen också kan framgå.
Använd i första hand färgpaletten “Purple”. Vid behov använd någon av de övriga färgerna specififerade nedan.
Purple
| Token | Value | |
|---|---|---|
| Purple-100 | #1C0F30 | |
| Purple-90 | #31135E | |
| Purple-80 | #491D8B | |
| Purple-70 | #6929C4 | |
| Purple-60 | #8A3FFC | |
| Purple-50 | #A56EFF | |
| Purple-40 | #BE95FF | |
| Purple-30 | #D4BBFF | |
| Purple-20 | #E8DAFF | |
| Purple-10 | #F6F2FF |
Green
| Token | Value | |
|---|---|---|
| Green-100 | #071908 | |
| Green-90 | #022D0D | |
| Green-80 | #044317 | |
| Green-70 | #0E6027 | |
| Green-60 | #198038 | |
| Green-50 | #24A148 | |
| Green-40 | #42BE65 | |
| Green-30 | #6FDC8C | |
| Green-20 | #A7F0BA | |
| Green-10 | #DEFBE6 |
Cyan
| Token | Value | |
|---|---|---|
| Cyan-100 | #061727 | |
| Cyan-90 | #012749 | |
| Cyan-80 | #003A6D | |
| Cyan-70 | #00539A | |
| Cyan-60 | #0072C3 | |
| Cyan-50 | #1192E8 | |
| Cyan-40 | #33B1FF | |
| Cyan-30 | #82CFFF | |
| Cyan-20 | #BAE6FF | |
| Cyan-10 | #E5F6FF |
Blue
| Token | Value | |
|---|---|---|
| Blue-100 | #001141 | |
| Blue-90 | #001D6C | |
| Blue-80 | #002D9C | |
| Blue-70 | #0043CE | |
| Blue-60 | #0F62FE | |
| Blue-50 | #4589FF | |
| Blue-40 | #78A9FF | |
| Blue-30 | #A6C8FF | |
| Blue-20 | #D0E2FF | |
| Blue-10 | #EDF5FF |
Teal
| Token | Value | |
|---|---|---|
| Teal-100 | #081A1C | |
| Teal-90 | #022B30 | |
| Teal-80 | #004144 | |
| Teal-70 | #005D5D | |
| Teal-60 | #007D79 | |
| Teal-50 | #009D9A | |
| Teal-40 | #08BDBA | |
| Teal-30 | #3DDBD9 | |
| Teal-20 | #9EF0F0 | |
| Teal-10 | #D9FBFB |
Magenta
| Token | Value | |
|---|---|---|
| Magenta-100 | #2A0A18 | |
| Magenta-90 | #510224 | |
| Magenta-80 | #740937 | |
| Magenta-70 | #9F1853 | |
| Magenta-60 | #D12771 | |
| Magenta-50 | #EE5396 | |
| Magenta-40 | #FF7EB6 | |
| Magenta-30 | #FFAFD2 | |
| Magenta-20 | #FFD6E8 | |
| Magenta-10 | #FFF0F7 |
Red
| Token | Value | |
|---|---|---|
| Red-100 | #2D0709 | |
| Red-90 | #520408 | |
| Red-80 | #750E13 | |
| Red-70 | #A2191F | |
| Red-60 | #DA1E28 | |
| Red-50 | #FA4D56 | |
| Red-40 | #FF8389 | |
| Red-30 | #FFB3B8 | |
| Red-20 | #FFD7D9 | |
| Red-10 | #FFF1F1 |
Orange
| Token | Value | |
|---|---|---|
| Orange-100 | #231000 | |
| Orange-90 | #3E1A00 | |
| Orange-80 | #5E2900 | |
| Orange-70 | #8A3800 | |
| Orange-60 | #BA4E00 | |
| Orange-50 | #EB6200 | |
| Orange-40 | #FF832B | |
| Orange-30 | #FFB784 | |
| Orange-20 | #FFD9BE | |
| Orange-10 | #FFF2E8 |
Yellow
| Token | Value | |
|---|---|---|
| Yellow-100 | #1C1500 | |
| Yellow-90 | #302400 | |
| Yellow-80 | #483700 | |
| Yellow-70 | #684E00 | |
| Yellow-60 | #8E6A00 | |
| Yellow-50 | #B28600 | |
| Yellow-40 | #D2A106 | |
| Yellow-30 | #F1C21B | |
| Yellow-20 | #FDDC69 | |
| Yellow-10 | #FCF4D6 |
Motpoler
Det finns även paletter för att tydligt kunna visa på skillnader. Genom att använda denna färgkombination tillgodoser man tillgänglighetskraven och möjligör även för människor med olika typer av färgblindhet att kunna ta till sig den trend man vill kunna visa på.
Denna palett kan användas antingen i fasta steg eller som övertoning.
Den generella regeln är att ljus nyans indikerar mindre och mörkare nyans indikerar mer.
Tema: "Varmt och kallt"
| Nr. | Token | Value | |
|---|---|---|---|
| 1. | Red-80 | #750E13 | |
| 2. | Red-70 | #A2191F | |
| 3. | Red-60 | #DA1E28 | |
| 4. | Red-50 | #FA4D56 | |
| 5. | Red-40 | #FF8389 | |
| 6. | Red-30 | #FFB3B8 | |
| 7. | Red-20 | #FFD7D9 | |
| 8. | Blue-20 | #D0E2FF | |
| 9. | Blue-30 | #A6C8FF | |
| 10. | Blue-40 | #78A9FF | |
| 11. | Blue-50 | #4589FF | |
| 12. | Blue-60 | #0F62FE | |
| 13. | Blue-70 | #0043CE | |
| 14. | Blue-80 | #002D9C |
Tema: "Många och få"
| Nr. | Token | Value | |
|---|---|---|---|
| 1. | Purple-80 | #491D8B | |
| 2. | Purple-70 | #6929C4 | |
| 3. | Purple-60 | #8A3FFC | |
| 4. | Purple-50 | #A56EFF | |
| 5. | Purple-40 | #BE95FF | |
| 6. | Purple-30 | #D4BBFF | |
| 7. | Purple-20 | #E8DAFF | |
| 8. | Orange-20 | #FFD9BE | |
| 9. | Orange-30 | #FFB784 | |
| 10. | Orange-40 | #FF832B | |
| 11. | Orange-50 | #EB6200 | |
| 12. | Orange-60 | #BA4E00 | |
| 13. | Orange-70 | #8A3800 | |
| 14. | Orange-80 | #5E2900 |