> For the complete documentation index, see [llms.txt](https://buypass-profilguide.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://buypass-profilguide.gitbook.io/project/farger.md).

# Farger

Buypass har et sett med ferdigdefinerte farger for skjerm og trykte flater.

Fargepaletten vår består av 4 primærfarger (inkludert hvit) og 3 sekundærfarger. Hver farge har 2 nyanser i lysere rettning og 2 nyanser i mørkere rettning.&#x20;

I vår logo brukes fargene "Blå" for symbolet" og "Marine" for selskapsnavnet.

**Primærfarger** \
Buypass sine mest gjenkjennelige farger er kombinasjonen marineblå, blå og hvit. &#x20;

![Pantone 2174 U | CMYK 92 47 0 0 | RGB 40 113 235 | HEX #2871eb](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LLESZI_Xbk0eGqLBTrr%2F-LLEScmdfT8Iy8DCsYEF%2Fblue%402x.png?alt=media\&token=316ea84d-eeb6-4675-97b5-12e2561cd046)

![Pantone 2757 U | CMYK 97 82 3 19 | RGB 26 57 124 | HEX #1a397c](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LLESZI_Xbk0eGqLBTrr%2F-LLESjKz_70lc0xXbSCe%2Fmarine%402x.png?alt=media\&token=7eb552d8-4e92-42d7-909f-a37f4f77859b)

![Pantone 649 U | CMYK 12 4 2 0 | RGB 237 241 248 | HEX #edf1f8](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LLESZI_Xbk0eGqLBTrr%2F-LLESqV5AD7A21BbMNv_%2Fsnow%402x.png?alt=media\&token=05a68703-5bdb-4c8b-b8d7-48c70de1317a)

**Sekundærfarger** \
Disse fargene brukes i mindre kvanta – i tilfeller der man har behov for å tilføre variasjon eller der man har behov for å poengtere noe spesielt. F.eks. magenta for å signalisere ‘fare’.&#x20;

![Pantone 7635 U | CMYK 0 81 23 4 | RGB 234 109 140 | HEX #ea6d8c](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LLESZI_Xbk0eGqLBTrr%2F-LLESxeo6xMia808JLFb%2Fmagenta%402x.png?alt=media\&token=4b54bc9b-7cdb-4b91-bd26-315227629d13)

![Pantone 324 U | CMYK 30 0 16 0 | RGB 45 203 195 | HEX #2dcbc3](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LLESZI_Xbk0eGqLBTrr%2F-LLET2r5K0JdaoBRKUEX%2Fteal%402x.png?alt=media\&token=1290ea54-44fb-4209-9af6-d2c7bec31852)

![Pantone 2757 U | CMYK 6 15 20 1 | RGB 240 217 196 | HEX #f0d9c4](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LLESZI_Xbk0eGqLBTrr%2F-LLET8eINcqmeEBm7eR8%2Fsand%402x.png?alt=media\&token=6350f2b4-a6a1-4d71-b763-24ff6a7325ec)

**Kontrastkrav** \
Den visuelle presentasjonen av tekst og bilder skal et kontrastforhold på minst 4.5:1, unntatt i tilfeller med større tekst (18pt og større eller 14pt ved medium/ fet vekt) der kravet er 3:1. Uvesentlig tekst og logoer rammes ikke av kontrakstkrav.

### **Andre valører**&#x20;

De ulike fargene kommer i flere valører for økt fleksibilitet. Spesielt i skjermbasert design kan det melde seg behov for flere farger, og ofte kun med ørsmåforskjeller. F.eks. ved en knapp som endrer tilstand ved mouseover/hover. Da kan man benytte fargenes tilleggsvalører som vist her.

#### Snø (Snow)

![](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LKQSsRUSZQfK5HxbsmT%2F-LKQV04-6p3JdThTz48D%2Fsnow-fargevarianter.JPG?alt=media\&token=15ef17bc-988a-4854-b3ea-b0c3d49aead9)

| **Valører**           | **Kode**                                      |
| --------------------- | --------------------------------------------- |
| **Snow, lighter 50**  |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-snow-lighter-50</p><p>#f9fafd</p> |
| **Snow, lighter 25**  |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-snow-lighter-25</p><p>#f7f9fc</p> |
| **Snow 100**          |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-snow</p><p>#edf1f8</p>            |
| **Snow, darker 25**   |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-snow-darker-25</p><p>#e6e9ef</p>  |
| **Snow, darker 50**   |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-snow-darker-50</p><p>#d7dae1</p>  |
| **Snow, darker 75**   |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-snow-darker-75</p><p>#c4c7d0</p>  |

#### Blå (Blue)

![](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LL4gyVLkKiOTFwlKo-y%2F-LL4ie2QRyD_zpCAKGB3%2Fblue-val%C3%B8rer.png?alt=media\&token=02196f6e-ddf0-42f4-a1da-18870e61cfad)

| **Valører**           |                                                 |
| --------------------- | ----------------------------------------------- |
| **Blue, lighter 50**  |                                                 |
| <p>Sass</p><p>Hex</p> | <p>$buypass-blue-lighter-50</p><p>#5b94ff</p>   |
| **Blue, lighter 25**  |                                                 |
| <p>Sass</p><p>Hex</p> | <p>$buypass-blue-lighter-25</p><p>#367cff</p>   |
| **Blue**              |                                                 |
| <p>Sass</p><p>Hex</p> | <p>$buypass-blue</p><p>#2871eb</p>              |
| **Blue, darker 25**   |                                                 |
| <p>Sass</p><p>Hex</p> | <p>$buypass-blue-darker-25</p><p>Hex#1c61d3</p> |
| **Blue, darker 50**   |                                                 |
| <p>Sass</p><p>Hex</p> | <p>$buypass-blue-darker-50</p><p>#1959c5</p>    |

#### Marine (Navy)

![](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LM6abZdw_0mCKE0MgPs%2F-LM6bQU6UgDr-Cqr0Wuy%2Fimage.png?alt=media\&token=1670eff2-2be1-486c-8f37-76a09196829d)

| Valører               |                                               |
| --------------------- | --------------------------------------------- |
| **Navy, lighter 50**  |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-navy-lighter-50</p><p>#8491b0</p> |
| **Navy, lighter 25**  |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-navy-lighter-25</p><p>#64759c</p> |
| **Navy**              |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-navy</p><p>#1a397c</p>            |
| **Navy, darker 25**   |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-navy-darker-25</p><p>#142e68</p>  |
| **Navy, darker 50**   |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-navy-darker-50</p><p>#0d2250</p>  |

#### Sjøgrønn (Teal)

![](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LM6abZdw_0mCKE0MgPs%2F-LM6cAF8W1cF5BPZjKVq%2Fimage.png?alt=media\&token=f077fd22-a1ed-414a-a8ad-62c2c60d32a8)

| Valører               | Kode                                          |
| --------------------- | --------------------------------------------- |
| **Teal, lighter 50**  |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-teal-lighter-50</p><p>#a4e9e5</p> |
| **Teal. lighter 25**  |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-teal-lighter-25</p><p>#79ded9</p> |
| **Teal**              |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-teal</p><p>#2dcbc3</p>            |
| **Teal, darker, 25**  | <p>$buypass-teal-darker-25</p><p>#35b7b0</p>  |
| <p>Sass</p><p>Hex</p> | <p>$buypass-teal-darker-25</p><p>#35b7b0</p>  |
| **Teal, darker 50**   |                                               |
| <p>Sass</p><p>Hex</p> | <p>$buypass-teal-darker-50</p><p>#2da9a2</p>  |

#### Magnenta

![](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LM6abZdw_0mCKE0MgPs%2F-LM6d44_U743hGvMb2r-%2Fimage.png?alt=media\&token=64add3d2-0f16-4a64-a7ad-890437443271)

| Valører                 | Kode                                             |
| ----------------------- | ------------------------------------------------ |
| **Magenta, lighter 50** |                                                  |
| <p>Sass</p><p>Hex</p>   | <p>$buypass-magenta-lighter-50</p><p>#f2a6b9</p> |
| **Magenta, lighter 25** |                                                  |
| <p>Sass</p><p>Hex</p>   | <p>$buypass-magenta-lighter-25</p><p>#ef91a8</p> |
| **Magenta**             |                                                  |
| <p>Sass</p><p>Hex</p>   | <p>$buypass-magenta</p><p>#ea6d8c</p>            |
| **Magenta, darker 25**  |                                                  |
| <p>Sass</p><p>Hex</p>   | <p>$buypass-magenta-darker-25</p><p>#d25a78</p>  |
| **Magenta, darker 50**  |                                                  |
| <p>Sass</p><p>Hex</p>   | <p>$buypass-magenta-darker-50</p><p>#ba4c68</p>  |

#### Sand

![](https://1165408786-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDaOmaOm53kkQ0pXs93%2F-LM6abZdw_0mCKE0MgPs%2F-LM6dfuH5UlKDTWjTtTI%2Fimage.png?alt=media\&token=9443894f-f0e4-4045-aa18-3252e96dc33c)

| Valører               | Kode                                                |
| --------------------- | --------------------------------------------------- |
| **Sand, ligther 50**  |                                                     |
| <p>Sass</p><p>Hex</p> | <p>$buypass-sand-lighter-50</p><p>#fbf3ec</p>       |
| **Sand, ligther 25**  |                                                     |
| <p>Sass</p><p>Hex</p> | <p>$buypass-sand-lighter-25</p><p>#f7e9dd</p>       |
| **Sand**              |                                                     |
| <p>Sass</p><p>Hex</p> | <p>$buypass-sand</p><p>#f0d9c4</p>                  |
| **Sand, darker 25**   |                                                     |
| <p>Sass</p><p>Hex</p> | <p></p><p>$buypass-sand-darker-25</p><p>#e1ccb8</p> |
| **Sand, darker 50**   |                                                     |
| <p>Sass</p><p>Hex</p> | <p>$buypass-sand-darker-50</p><p>#d5c0ac</p>        |