Arkov

Palette mit 12 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Arkov

Palette mit 12 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 12 Farben Kühl Gemischt Komplementär dark contrast dungeon

Likes 21

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #0B7DD2;
  --c-vibrant-2: #FF9225;
  --c-vibrant-3: #F5FB54;
  --c-vibrant-4: #0BD276;
  --c-vibrant-5: #454C75;
  --c-vibrant-6: #262B44;
  --c-vibrant-7: #5E3363;
  --c-vibrant-8: #FF2537;
  --c-vibrant-9: #D2C7D3;
  --c-vibrant-10: #FFFFFF;
  --c-vibrant-11: #218019;
  --c-vibrant-12: #000000;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Electron Blue, Texas Sunset, Sylph of Light, Underwater Fern, Astronaut, Latin Charm, Imperial Purple, In the Red, Enchant, White, Tree Green und Black in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 21 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #000000 mit 21:1.

Eine vielseitige Palette für Marketingseiten, Hero-Blöcke von Produkten, Illustrationen und Akzentzustände in der UI.

Farben im Detail

Electron Blue #0B7DD2

RGB: rgb(11, 125, 210)
HSL: hsl(206, 90%, 43%)
Luminanz: 0,194

Texas Sunset #FF9225

RGB: rgb(255, 146, 37)
HSL: hsl(30, 100%, 57%)
Luminanz: 0,420

Sylph of Light #F5FB54

RGB: rgb(245, 251, 84)
HSL: hsl(62, 95%, 66%)
Luminanz: 0,891

Underwater Fern #0BD276

RGB: rgb(11, 210, 118)
HSL: hsl(152, 90%, 43%)
Luminanz: 0,475

Astronaut #454C75

RGB: rgb(69, 76, 117)
HSL: hsl(231, 26%, 36%)
Luminanz: 0,077

Latin Charm #262B44

RGB: rgb(38, 43, 68)
HSL: hsl(230, 28%, 21%)
Luminanz: 0,026

Imperial Purple #5E3363

RGB: rgb(94, 51, 99)
HSL: hsl(294, 32%, 29%)
Luminanz: 0,057

In the Red #FF2537

RGB: rgb(255, 37, 55)
HSL: hsl(355, 100%, 57%)
Luminanz: 0,229

Enchant #D2C7D3

RGB: rgb(210, 199, 211)
HSL: hsl(295, 12%, 80%)
Luminanz: 0,593

White #FFFFFF

RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Luminanz: 1,000

Tree Green #218019

RGB: rgb(33, 128, 25)
HSL: hsl(115, 67%, 30%)
Luminanz: 0,158

Black #000000

RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)
Luminanz: 0,000

Kontrast & Barrierefreiheit

21 von 66 Farbpaaren erreichen die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext.

Aa #FFFFFF auf #000000 21,00:1 AAA

Aa #F5FB54 auf #000000 18,81:1 AAA

Aa #262B44 auf #FFFFFF 13,89:1 AAA

Aa #D2C7D3 auf #000000 12,85:1 AAA

Aa #F5FB54 auf #262B44 12,44:1 AAA

Aa #0BD276 auf #000000 10,49:1 AAA

Aa #5E3363 auf #FFFFFF 9,86:1 AAA

Aa #FF9225 auf #000000 9,39:1 AAA

Aa #F5FB54 auf #5E3363 8,83:1 AAA

Aa #262B44 auf #D2C7D3 8,50:1 AAA

Aa #454C75 auf #FFFFFF 8,26:1 AAA

Aa #F5FB54 auf #454C75 7,39:1 AAA

Aa #0BD276 auf #262B44 6,94:1 AA

Aa #FF9225 auf #262B44 6,21:1 AA

Aa #5E3363 auf #D2C7D3 6,03:1 AA

Aa #FF2537 auf #000000 5,57:1 AA

Aa #454C75 auf #D2C7D3 5,05:1 AA

Aa #FFFFFF auf #218019 5,04:1 AA

Aa #0BD276 auf #5E3363 4,93:1 AA

Aa #0B7DD2 auf #000000 4,88:1 AA

Aa #F5FB54 auf #218019 4,51:1 AA

Aa #FF9225 auf #5E3363 4,41:1 AA (großer Text)

Aa #0B7DD2 auf #FFFFFF 4,30:1 AA (großer Text)

Aa #218019 auf #000000 4,17:1 AA (großer Text)

Aa #0BD276 auf #454C75 4,13:1 AA (großer Text)

Aa #0B7DD2 auf #F5FB54 3,86:1 AA (großer Text)

Aa #FF2537 auf #FFFFFF 3,77:1 AA (großer Text)

Aa #FF9225 auf #454C75 3,69:1 AA (großer Text)

Aa #262B44 auf #FF2537 3,69:1 AA (großer Text)

Aa #F5FB54 auf #FF2537 3,38:1 AA (großer Text)

Aa #0B7DD2 auf #262B44 3,23:1 AA (großer Text)

Aa #D2C7D3 auf #218019 3,08:1 AA (großer Text)

Aa #262B44 auf #218019 2,76:1 Nicht bestanden

Aa #0B7DD2 auf #D2C7D3 2,63:1 Nicht bestanden

Aa #5E3363 auf #FF2537 2,62:1 Nicht bestanden

Aa #454C75 auf #000000 2,54:1 Nicht bestanden

Aa #0BD276 auf #218019 2,52:1 Nicht bestanden

Aa #FF2537 auf #D2C7D3 2,31:1 Nicht bestanden

Aa #0B7DD2 auf #5E3363 2,29:1 Nicht bestanden

Aa #FF9225 auf #218019 2,25:1 Nicht bestanden

Aa #FF9225 auf #FFFFFF 2,24:1 Nicht bestanden

Aa #454C75 auf #FF2537 2,19:1 Nicht bestanden

Aa #0B7DD2 auf #0BD276 2,15:1 Nicht bestanden

Aa #5E3363 auf #000000 2,13:1 Nicht bestanden

Aa #FF9225 auf #F5FB54 2,00:1 Nicht bestanden

Aa #0BD276 auf #FFFFFF 2,00:1 Nicht bestanden

Aa #5E3363 auf #218019 1,96:1 Nicht bestanden

Aa #0B7DD2 auf #FF9225 1,92:1 Nicht bestanden

Aa #0B7DD2 auf #454C75 1,92:1 Nicht bestanden

Aa #0BD276 auf #FF2537 1,88:1 Nicht bestanden

Aa #F5FB54 auf #0BD276 1,79:1 Nicht bestanden

Aa #FF9225 auf #FF2537 1,69:1 Nicht bestanden

Aa #454C75 auf #262B44 1,68:1 Nicht bestanden

Aa #454C75 auf #218019 1,64:1 Nicht bestanden

Aa #D2C7D3 auf #FFFFFF 1,63:1 Nicht bestanden

Aa #262B44 auf #000000 1,51:1 Nicht bestanden

Aa #F5FB54 auf #D2C7D3 1,46:1 Nicht bestanden

Aa #262B44 auf #5E3363 1,41:1 Nicht bestanden

Aa #FF9225 auf #D2C7D3 1,37:1 Nicht bestanden

Aa #FF2537 auf #218019 1,34:1 Nicht bestanden

Aa #0BD276 auf #D2C7D3 1,22:1 Nicht bestanden

Aa #454C75 auf #5E3363 1,19:1 Nicht bestanden

Aa #0B7DD2 auf #218019 1,17:1 Nicht bestanden

Aa #0B7DD2 auf #FF2537 1,14:1 Nicht bestanden

Aa #FF9225 auf #0BD276 1,12:1 Nicht bestanden

Aa #F5FB54 auf #FFFFFF 1,12:1 Nicht bestanden

Arkov

Arkov

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen