Permafrost12

Palette mit 12 Farben · Kühl · Hell · Harmonie: Analog

Zurück zur Bibliothek

Permafrost12

Palette mit 12 Farben · Temperatur: Kühl · Ton: Hell · Harmonie: Analog

Bearbeiten

Gedeckt 12 Farben Kühl Hell Analog snow winter coolcolors

Likes 34

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #A8C3D8;
  --c-muted-2: #C6DEE5;
  --c-muted-3: #DAEAEB;
  --c-muted-4: #E9F8F8;
  --c-muted-5: #243169;
  --c-muted-6: #4666A3;
  --c-muted-7: #6A93BE;
  --c-muted-8: #98C5DE;
  --c-muted-9: #3D6257;
  --c-muted-10: #49837A;
  --c-muted-11: #54A39E;
  --c-muted-12: #68B7BE;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Melting Glacier (#E9F8F8) bis zum dunkelsten Ton Passionate Blue (#243169). Sie vereint Frozen Blue, Light Blue Sloth, Tibetan Sky, Melting Glacier, Passionate Blue, Starstruck, Blue Marble, Bobby Blue, Emerson, Carlisle, Teal Bayou und Maritime Soft Blue in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #E9F8F8 auf #243169 mit 11,2:1.

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

Farben im Detail

Frozen Blue #A8C3D8

RGB: rgb(168, 195, 216)
HSL: hsl(206, 38%, 75%)
Luminanz: 0,523

Light Blue Sloth #C6DEE5

RGB: rgb(198, 222, 229)
HSL: hsl(194, 37%, 84%)
Luminanz: 0,699

Tibetan Sky #DAEAEB

RGB: rgb(218, 234, 235)
HSL: hsl(184, 30%, 89%)
Luminanz: 0,798

Melting Glacier #E9F8F8

RGB: rgb(233, 248, 248)
HSL: hsl(180, 52%, 94%)
Luminanz: 0,912

Passionate Blue #243169

RGB: rgb(36, 49, 105)
HSL: hsl(229, 49%, 28%)
Luminanz: 0,036

Starstruck #4666A3

RGB: rgb(70, 102, 163)
HSL: hsl(219, 40%, 46%)
Luminanz: 0,135

Blue Marble #6A93BE

RGB: rgb(106, 147, 190)
HSL: hsl(211, 39%, 58%)
Luminanz: 0,277

Bobby Blue #98C5DE

RGB: rgb(152, 197, 222)
HSL: hsl(201, 51%, 73%)
Luminanz: 0,519

Emerson #3D6257

RGB: rgb(61, 98, 87)
HSL: hsl(162, 23%, 31%)
Luminanz: 0,104

Carlisle #49837A

RGB: rgb(73, 131, 122)
HSL: hsl(171, 28%, 40%)
Luminanz: 0,191

Teal Bayou #54A39E

RGB: rgb(84, 163, 158)
HSL: hsl(176, 32%, 48%)
Luminanz: 0,306

Maritime Soft Blue #68B7BE

RGB: rgb(104, 183, 190)
HSL: hsl(185, 40%, 58%)
Luminanz: 0,405

Kontrast & Barrierefreiheit

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

Aa #E9F8F8 auf #243169 11,20:1 AAA

Aa #DAEAEB auf #243169 9,86:1 AAA

Aa #C6DEE5 auf #243169 8,72:1 AAA

Aa #A8C3D8 auf #243169 6,67:1 AA

Aa #243169 auf #98C5DE 6,62:1 AA

Aa #E9F8F8 auf #3D6257 6,24:1 AA

Aa #DAEAEB auf #3D6257 5,50:1 AA

Aa #243169 auf #68B7BE 5,30:1 AA

Aa #E9F8F8 auf #4666A3 5,22:1 AA

Aa #C6DEE5 auf #3D6257 4,86:1 AA

Aa #DAEAEB auf #4666A3 4,59:1 AA

Aa #243169 auf #54A39E 4,14:1 AA (großer Text)

Aa #C6DEE5 auf #4666A3 4,06:1 AA (großer Text)

Aa #E9F8F8 auf #49837A 4,00:1 AA (großer Text)

Aa #243169 auf #6A93BE 3,80:1 AA (großer Text)

Aa #A8C3D8 auf #3D6257 3,72:1 AA (großer Text)

Aa #98C5DE auf #3D6257 3,69:1 AA (großer Text)

Aa #DAEAEB auf #49837A 3,52:1 AA (großer Text)

Aa #A8C3D8 auf #4666A3 3,11:1 AA (großer Text)

Aa #C6DEE5 auf #49837A 3,11:1 AA (großer Text)

Aa #4666A3 auf #98C5DE 3,08:1 AA (großer Text)

Aa #E9F8F8 auf #6A93BE 2,95:1 Nicht bestanden

Aa #3D6257 auf #68B7BE 2,95:1 Nicht bestanden

Aa #243169 auf #49837A 2,80:1 Nicht bestanden

Aa #E9F8F8 auf #54A39E 2,71:1 Nicht bestanden

Aa #DAEAEB auf #6A93BE 2,60:1 Nicht bestanden

Aa #4666A3 auf #68B7BE 2,47:1 Nicht bestanden

Aa #A8C3D8 auf #49837A 2,38:1 Nicht bestanden

Aa #DAEAEB auf #54A39E 2,38:1 Nicht bestanden

Aa #98C5DE auf #49837A 2,36:1 Nicht bestanden

Aa #3D6257 auf #54A39E 2,31:1 Nicht bestanden

Aa #C6DEE5 auf #6A93BE 2,29:1 Nicht bestanden

Aa #243169 auf #4666A3 2,15:1 Nicht bestanden

Aa #6A93BE auf #3D6257 2,12:1 Nicht bestanden

Aa #C6DEE5 auf #54A39E 2,11:1 Nicht bestanden

Aa #E9F8F8 auf #68B7BE 2,11:1 Nicht bestanden

Aa #4666A3 auf #54A39E 1,93:1 Nicht bestanden

Aa #49837A auf #68B7BE 1,89:1 Nicht bestanden

Aa #DAEAEB auf #68B7BE 1,86:1 Nicht bestanden

Aa #243169 auf #3D6257 1,79:1 Nicht bestanden

Aa #4666A3 auf #6A93BE 1,77:1 Nicht bestanden

Aa #A8C3D8 auf #6A93BE 1,76:1 Nicht bestanden

Aa #6A93BE auf #98C5DE 1,74:1 Nicht bestanden

Aa #E9F8F8 auf #98C5DE 1,69:1 Nicht bestanden

Aa #A8C3D8 auf #E9F8F8 1,68:1 Nicht bestanden

Aa #C6DEE5 auf #68B7BE 1,65:1 Nicht bestanden

Aa #A8C3D8 auf #54A39E 1,61:1 Nicht bestanden

Aa #98C5DE auf #54A39E 1,60:1 Nicht bestanden

Aa #3D6257 auf #49837A 1,56:1 Nicht bestanden

Aa #DAEAEB auf #98C5DE 1,49:1 Nicht bestanden

Aa #A8C3D8 auf #DAEAEB 1,48:1 Nicht bestanden

Aa #49837A auf #54A39E 1,48:1 Nicht bestanden

Aa #6A93BE auf #68B7BE 1,39:1 Nicht bestanden

Aa #6A93BE auf #49837A 1,36:1 Nicht bestanden

Aa #C6DEE5 auf #98C5DE 1,32:1 Nicht bestanden

Aa #A8C3D8 auf #C6DEE5 1,31:1 Nicht bestanden

Aa #4666A3 auf #49837A 1,30:1 Nicht bestanden

Aa #C6DEE5 auf #E9F8F8 1,28:1 Nicht bestanden

Aa #54A39E auf #68B7BE 1,28:1 Nicht bestanden

Aa #A8C3D8 auf #68B7BE 1,26:1 Nicht bestanden

Aa #98C5DE auf #68B7BE 1,25:1 Nicht bestanden

Aa #4666A3 auf #3D6257 1,20:1 Nicht bestanden

Aa #DAEAEB auf #E9F8F8 1,14:1 Nicht bestanden

Aa #C6DEE5 auf #DAEAEB 1,13:1 Nicht bestanden

Aa #6A93BE auf #54A39E 1,09:1 Nicht bestanden

Aa #A8C3D8 auf #98C5DE 1,01:1 Nicht bestanden

Permafrost12

Permafrost12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen