Ocean Glass

Palette mit 8 Farben · Kühl · Gemischt · Harmonie: Analog

Zurück zur Bibliothek

Ocean Glass

Palette mit 8 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Analog

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Analog green blue ocean

Likes 31

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #C1D0C1;
  --c-muted-2: #88B5A2;
  --c-muted-3: #68917D;
  --c-muted-4: #456D5A;
  --c-muted-5: #436B6D;
  --c-muted-6: #1E444F;
  --c-muted-7: #1D3550;
  --c-muted-8: #040040;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Green Lily (#C1D0C1) bis zum dunkelsten Ton Endless Galaxy (#040040). Sie vereint Green Lily, Indian Ocean, Cool Bluegrass, Foliage Green, Moat, Blue Hill, Elite Blue und Endless Galaxy in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 7 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #C1D0C1 auf #040040 mit 12,1:1.

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

Farben im Detail

Green Lily #C1D0C1

RGB: rgb(193, 208, 193)
HSL: hsl(120, 14%, 79%)
Luminanz: 0,603

Indian Ocean #88B5A2

RGB: rgb(136, 181, 162)
HSL: hsl(155, 23%, 62%)
Luminanz: 0,409

Cool Bluegrass #68917D

RGB: rgb(104, 145, 125)
HSL: hsl(151, 16%, 49%)
Luminanz: 0,247

Foliage Green #456D5A

RGB: rgb(69, 109, 90)
HSL: hsl(152, 22%, 35%)
Luminanz: 0,129

Moat #436B6D

RGB: rgb(67, 107, 109)
HSL: hsl(183, 24%, 35%)
Luminanz: 0,128

Blue Hill #1E444F

RGB: rgb(30, 68, 79)
HSL: hsl(193, 45%, 21%)
Luminanz: 0,050

Elite Blue #1D3550

RGB: rgb(29, 53, 80)
HSL: hsl(212, 47%, 21%)
Luminanz: 0,034

Endless Galaxy #040040

RGB: rgb(4, 0, 64)
HSL: hsl(244, 100%, 13%)
Luminanz: 0,004

Kontrast & Barrierefreiheit

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

Aa #C1D0C1 auf #040040 12,10:1 AAA

Aa #88B5A2 auf #040040 8,50:1 AAA

Aa #C1D0C1 auf #1D3550 7,79:1 AAA

Aa #C1D0C1 auf #1E444F 6,55:1 AA

Aa #68917D auf #040040 5,50:1 AA

Aa #88B5A2 auf #1D3550 5,47:1 AA

Aa #88B5A2 auf #1E444F 4,60:1 AA

Aa #C1D0C1 auf #436B6D 3,67:1 AA (großer Text)

Aa #C1D0C1 auf #456D5A 3,64:1 AA (großer Text)

Aa #68917D auf #1D3550 3,54:1 AA (großer Text)

Aa #456D5A auf #040040 3,32:1 AA (großer Text)

Aa #436B6D auf #040040 3,30:1 AA (großer Text)

Aa #68917D auf #1E444F 2,97:1 Nicht bestanden

Aa #88B5A2 auf #436B6D 2,58:1 Nicht bestanden

Aa #88B5A2 auf #456D5A 2,56:1 Nicht bestanden

Aa #C1D0C1 auf #68917D 2,20:1 Nicht bestanden

Aa #456D5A auf #1D3550 2,14:1 Nicht bestanden

Aa #436B6D auf #1D3550 2,12:1 Nicht bestanden

Aa #1E444F auf #040040 1,85:1 Nicht bestanden

Aa #456D5A auf #1E444F 1,80:1 Nicht bestanden

Aa #436B6D auf #1E444F 1,79:1 Nicht bestanden

Aa #68917D auf #436B6D 1,67:1 Nicht bestanden

Aa #68917D auf #456D5A 1,65:1 Nicht bestanden

Aa #88B5A2 auf #68917D 1,55:1 Nicht bestanden

Aa #1D3550 auf #040040 1,55:1 Nicht bestanden

Aa #C1D0C1 auf #88B5A2 1,42:1 Nicht bestanden

Aa #1E444F auf #1D3550 1,19:1 Nicht bestanden

Aa #456D5A auf #436B6D 1,01:1 Nicht bestanden

Ocean Glass

Ocean Glass

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen