---
title: "Fargepalett"
canonical: "https://forvarelset.tazk.no/page/fargepalett/"
format: markdown
---
/\* Isolert CSS som ikke skal påvirke resten av Refined \*/ /\* Navigasjonsstiler \*/ #refined-color-palette .rcp-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; position: sticky; top: 0; background: white; padding: 10px 0; z-index: 10; border-bottom: 1px solid #eee; } #refined-color-palette .rcp-nav-btn { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 12px; display: flex; align-items: center; transition: all 0.2s ease; text-decoration: none; color: inherit; } #refined-color-palette .rcp-nav-btn:hover { border-color: #bbb; background-color: #f9f9f9; } #refined-color-palette .rcp-nav-dot { width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; border: 1px solid rgba(0,0,0,0.1); } #refined-color-palette { font-family: inherit; line-height: normal; color: inherit; } #refined-color-palette .rcp-category { margin-bottom: 20px; } #refined-color-palette .rcp-title { font-size: inherit; font-weight: bold; margin: 10px 0 5px 0; padding-bottom: 4px; border-bottom: 1px solid #eee; } #refined-color-palette .rcp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; } #refined-color-palette .rcp-card { display: flex; border: 1px solid #e2e8f0; border-radius: 4px; overflow: hidden; width: 200px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); background-color: white; } #refined-color-palette .rcp-sample { width: 40px; height: auto; flex-shrink: 0; flex-grow: 0; } #refined-color-palette .rcp-info { flex: 1; padding: 6px 8px; font-size: 12px; } #refined-color-palette .rcp-shade { font-weight: 500; margin-bottom: 4px; } #refined-color-palette .rcp-value { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; } #refined-color-palette .rcp-code { font-family: monospace; font-size: 11px; background: none; padding: 0; } #refined-color-palette .rcp-button { background: none; border: none; cursor: pointer; padding: 2px; border-radius: 3px; display: flex; align-items: center; justify-content: center; } #refined-color-palette .rcp-button:hover { background-color: #f3f4f6; } #refined-color-palette .rcp-button svg { width: 14px; height: 14px; } #refined-color-palette .rcp-success { color: #22c55e; } /\* Responsiv design \*/ @media (max-width: 1200px) { #refined-color-palette .rcp-card { width: 190px; } } @media (max-width: 768px) { #refined-color-palette .rcp-card { width: 170px; } #refined-color-palette .rcp-sample { width: 32px; } } @media (max-width: 576px) { #refined-color-palette .rcp-card { width: 100%; max-width: 300px; } #refined-color-palette .rcp-row { flex-direction: column; gap: 5px; } #refined-color-palette .rcp-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; justify-content: flex-start; -webkit-overflow-scrolling: touch; } #refined-color-palette .rcp-nav-btn { white-space: nowrap; flex-shrink: 0; } }

(function() { // SVG-ikoner for kopiering const COPY\_ICON = \`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>\`; const CHECK\_ICON = \`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>\`; // Fargepakken const colors = { 'Gray': { '600': '#2D2926', '500': '#5F5D5C', '400': '#919191', '300': '#C4C6C7', '200': '#E2E5E7', '100': '#F7F8F9' }, 'Dark Blue': { '500': '#00263E', '400': '#3E5B6E', '300': '#7B909D', '200': '#B8C5CD', '100': '#DDE4EA' }, 'Light Blue': { '500': '#BED6EE', '400': '#ABCAE9', '300': '#D0E2F3', '200': '#E3EEF8', '100': '#EEF5FB' }, 'Deep Blue': { '500': '#3E698B', '400': '#7B99B1', '300': '#B8C9D7', '200': '#DDE6EE', '100': '#F1F5F8' }, 'Blue': { '600': '#00569C', '500': '#0072CE', '400': '#4095DA', '300': '#7FB8E6', '200': '#BFDCF3', '100': '#E5F1FA' }, 'Green': { '500': '#448344', '400': '#3A703A', '300': '#AAC6AA', '200': '#C4DDCA', '100': '#E6F0E7' }, 'Yellow': { '500': '#EBB500', '400': '#FDDA25', '300': '#F3D266', '200': '#F7E19B', '100': '#FAEDC5' }, 'Orange': { '500': '#EB8A1E', '400': '#F7B661', '300': '#FAD09A', '200': '#FDE7CB', '100': '#FCF2E2' }, 'Red': { '500': '#DB352C', '400': '#ED9A96', '300': '#F4BEBB', '200': '#F8D7D5', '100': '#F7EBEA' } }; // Konverterer HEX til RGB function hexToRgb(hex) { const result = /^#?(\[a-f\\d\]{2})(\[a-f\\d\]{2})(\[a-f\\d\]{2})$/i.exec(hex); return result ? { r: parseInt(result\[1\], 16), g: parseInt(result\[2\], 16), b: parseInt(result\[3\], 16) } : null; } // Kopierer tekst til utklippstavlen window.rcpCopyToClipboard = function(text, button) { try { navigator.clipboard.writeText(text).then(() => { const originalIcon = button.innerHTML; button.innerHTML = CHECK\_ICON; button.querySelector('svg').classList.add('rcp-success'); setTimeout(() => { button.innerHTML = originalIcon; }, 2000); }); } catch (err) { console.error('Failed to copy:', err); } } // Lager fargekort function createColorCard(shade, hex) { const rgb = hexToRgb(hex); const rgbString = \`rgb(${rgb.r}, ${rgb.g}, ${rgb.b})\`; const card = document.createElement('div'); card.className = 'rcp-card'; card.innerHTML = \` <div class="rcp-sample" style="background-color: ${hex}"></div> <div class="rcp-info"> <div class="rcp-shade">${shade}</div> <div class="rcp-value"> <code class="rcp-code">${hex}</code> <button class="rcp-button" onclick="rcpCopyToClipboard('${hex}', this)"> ${COPY\_ICON} </button> </div> <div class="rcp-value"> <code class="rcp-code">${rgbString}</code> <button class="rcp-button" onclick="rcpCopyToClipboard('${rgbString}', this)"> ${COPY\_ICON} </button> </div> </div> \`; return card; } // Oppretter navigasjonsbar function createNavigation() { const navContainer = document.getElementById('rcp-navigation'); // Tøm eksisterende innhold for å unngå duplisering navContainer.innerHTML = ''; for (const \[category, shades\] of Object.entries(colors)) { // Lag en kategorispesifikk ID const categoryId = \`rcp-category-${category.toLowerCase().replace(/\\s+/g, '-')}\`; // Velg en representativ farge for kategorien (vanligvis 500 eller 400) let sampleColor = shades\['500'\] || shades\['400'\] || Object.values(shades)\[0\]; // Opprett navigasjonsknapp const navButton = document.createElement('a'); navButton.className = 'rcp-nav-btn'; navButton.href = \`#${categoryId}\`; navButton.innerHTML = \` <span class="rcp-nav-dot" style="background-color: ${sampleColor}"></span> ${category} \`; // Legg til glatt rulling når knapp klikkes navButton.addEventListener('click', function(e) { e.preventDefault(); const targetElement = document.getElementById(categoryId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); navContainer.appendChild(navButton); } } // Initialiserer fargepaletten function initColorPalette() { const container = document.getElementById('rcp-container'); // Tøm eksisterende innhold for å unngå duplisering container.innerHTML = ''; // Opprett navigasjonsknapper først createNavigation(); for (const \[category, shades\] of Object.entries(colors)) { const categoryId = \`rcp-category-${category.toLowerCase().replace(/\\s+/g, '-')}\`; const categoryDiv = document.createElement('div'); categoryDiv.className = 'rcp-category'; categoryDiv.id = categoryId; // Legg til ID for navigasjon const title = document.createElement('div'); title.className = 'rcp-title'; title.textContent = category; categoryDiv.appendChild(title); const row = document.createElement('div'); row.className = 'rcp-row'; for (const \[shade, hex\] of Object.entries(shades)) { row.appendChild(createColorCard(shade, hex)); } categoryDiv.appendChild(row); container.appendChild(categoryDiv); } } // Starter opp når siden er lastet if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initColorPalette); } else { // Vent et lite øyeblikk for å unngå potensielle race conditions setTimeout(initColorPalette, 50); } // Kjør også denne funksjonen når Refined kan ha rerendret innholdet document.addEventListener('visibilitychange', function() { if (document.visibilityState === 'visible') { setTimeout(initColorPalette, 100); } }); })();