Till innehåll på sidan

Färgpalett med de 12 färger som får användas i den grafiska profilen

Färger

Färgpaletten består av ett antal starkare färger som sedan, utifrån en stilistisk avvägning, kombineras med ett antal ljusare färger. Färgerna får användas i lika stor utsträckning och är inte knutna till specifika områden eller verksamheter.

Kontaktcenter - en väg in

Öppettider

Helgfria vardagar, måndag–fredag: 8:00–16:30

Vad kan kontaktcenter hjälpa mig med?

Ring eller mejla oss

Besök oss

Gärdhemsvägen 9 461 83 Trollhättan

Svart

CMYK 0-0-0-95
PMS Black 7 C
RGB 41-41-41
#292929

Lila

CMYK 90-100-0-20
PMS 7680 C
RGB 75-45-120
#4B2D78

Grön.jpg

CMYK 80-0-60-0
PMS 339 C
RGB 25-200-150
#19C896

Grå

CMYK 0-0-0-15
PMS Cool Gray 1 C
RGB 240-240-240
#F0F0F0

Ljuslila

CMYK 15-25-0-0
PMS 263 C
RGB 210-195-255
#D2C3FF

Ljusgrön

CMYK 45-0-30-0
PMS 3248 C
RGB 100-220-190
#64DCBE

Blå

CMYK 80-10-0-0
PMS 299 C
RGB 0-185-255
#00B9FF

Gul

CMYK 10-0-80-0
PMS 603 C
RGB 240-250-90
#F0FA5A

Röd

CMYK 0-75-65-0
PMS 2348 C
RGB 235-95-95
#EB5F5F

Ljusblå.png

CMYK 40-0-0-5
PMS 291 C
RGB 125-225-255
#7DE1FF

Ljusgul

CMYK 0-0-40-0
PMS Yellow 0131 C
RGB 255-250-190
#FFFABE

Rosa

CMYK 0-30-0-0
PMS 1895 C
RGB 255-180-210
#FFB4D2

Färgkombinationer

När du väljer färgkombinationer är det viktigt att välja färger som tydligt kontrasterar varandra. Här ser du några kombinationer med bra läsbarhet:

Färgkombinationer som är bra att använda

Färgkombinationer med dålig läsbarhet

Några av färgerna i den grafiska profilen fungerar inte lika bra ihop ifall man vill skriva text på en färgplatta. Exempel på kombinationer med dålig läsbarhet:

Exempel på dåliga färgkombinationer

Senast granskad 2025-08-29 av JARWEREIDBRE

Statistical Code

<script type="text/javascript">
// SITEIMPROVE
    (function () {
        var sz = document.createElement('script'); sz.type = 'text/javascript'; sz.async = true;
        sz.src = '//siteimproveanalytics.com/js/siteanalyze_8055.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sz, s);
    })();
</script>

<script type="text/javascript">
// Lyssna is clicked
$(".bapluslogo").click(function(e){

// Siteimprove event
	var eventCategory = "Lyssna på sidan";
	var eventLabel = $('body').css('position') == 'absolute' ? "Close" : "Open";
	var eventAction = $(document).attr('title').replace(" - Trollhättans stad", "");
	
	_sz.push(['event', eventCategory, eventLabel, eventAction]);
});

// Lättläst is clicked
$("#showEasyread").click(function(e){

// Siteimprove event
	var eventCategory = "Lättläst";
	var eventLabel = $('#showEasyread').hasClass('active') ? "Close" : "Open";
	var eventAction = $(document).attr('title').replace(" - Trollhättans stad", "");
	
	_sz.push(['event', eventCategory, eventLabel, eventAction]);
});

// Hitta snabbt is clicked
setTimeout(function() {$(".rek-link").click(function(e){

// Siteimprove event
	var eventCategory = "Hitta snabbt";
	var eventLabel = $(document).attr('title').replace(" - Trollhättans stad", "");
	var eventAction = $(this).text();
	
	_sz.push(['event', eventCategory, eventLabel, eventAction]);
});
}, 2000);

</script>

<script type="text/javascript">
// VISITORS VOICE

var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//tracking.visitorsvoice.com/piwik/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '39']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
  
</script>

<script>

// Startpage only
if ($("body").hasClass("StartPage")) {
	// Language links on startpage
	var languages_start = '<div style="float: right;position: relative;height: 2em;z-index: 100;background: #f0f0f0;padding: 0.5em;">';
	var img = '<i class="fa-solid fa-angle-right" style="margin-right:5px;"></i>';
	var eng = '<a style="margin:10px;" href="/en/homepage/">' + img + '<span class="show-for-sr">Show the article in  </span> English</a>';
	var fin = '<a style="margin:10px;" href="/fi/startsida/">' + img + '<span class="show-for-sr">Näytä artikkeli  </span> Suomi</a>';
	var swe = '<a style="margin:10px;" href="/startsida/">' + img + '<span class="show-for-sr">Visa artikeln på  </span> Svenska</a>';
	var languages_end = '</div>';
	var path = window.location.pathname;

switch (path) {
		case '/startsida/':
		case '/startsida':
			$('header').append(languages_start + eng + fin + languages_end);
			break;
		case '/fi/startsida/':
		case '/fi/startsida':
			$('header').append(languages_start + eng + swe + languages_end);
			break;
		case '/en/homepage/':
		case '/en/homepage':
			$('header').append(languages_start + swe + fin + languages_end);
			break;
		default:
			break;
	}
	
	// Campaign: Red (den nya) startpage-panels when black
	//$('.startpage-panels .colorBlack').css({"background-color":"#C94846"});
	
	// Campaign: Orange startpage-panels when empty
	$('.startpage-panels .colorEmpty').css({"background-color":"#F8B068"});
		
	//************************
}

</script>

<script>
// Set Language Label in header
var userLanguage = navigator.language || navigator.userLanguage;

var languageLabel;

switch (userLanguage) {
    case 'sv' :
    case 'sv-SE' :
        languageLabel = "Språk";
        break;
    case 'en' :
    case 'en-US' :
        languageLabel = "Languages";
        break;
    case 'fi' :
        languageLabel = "Kieli";
        break;
    default :
        languageLabel = "Languages";
}

$(".functionLinks ul li.colorLightYellow a strong").text($(".functionLinks ul li.colorLightYellow a strong").text().replace("Languages", languageLabel));

$("#MobileMenu ul li.colorLightYellow a strong").text($("#MobileMenu ul li.colorLightYellow a strong").text().replace("Languages", languageLabel));
</script>

<script>

// SearchPage only
if ($("body").hasClass("SearchPage")) {
	//Change background color to search tip
	var beforeTip = '</div></div></div><div class="row"><div class="block textblock full large-12 medium-12 small-12 columns"><div class="row colorLightYellow"><div class="medium-12 columns"><p>'
	var afterTip = '</p></div>'
	var oldtext = $('.searchNumberPresentation').html();
	var newtext = (oldtext.replace('<p>', beforeTip)).replace('</p>', afterTip);
	$('.searchNumberPresentation').html(newtext);
}

</script>

<style>
.opaonhover:hover, .opaonhover:focus { opacity:0.9; }
.noborder {margin-bottom:0px; line-height:0; border:none!important;}
</style>