Waverator

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

Zurück zur Bibliothek

Waverator

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

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Analog monoramp

Likes 207

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #0C0D14;
  --c-muted-2: #181C28;
  --c-muted-3: #23313D;
  --c-muted-4: #33505D;
  --c-muted-5: #4E7F7D;
  --c-muted-6: #53A788;
  --c-muted-7: #70D38B;
  --c-muted-8: #CBFFD8;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Mint Zest (#CBFFD8) bis zum dunkelsten Ton Midnight Oil (#0C0D14). Sie vereint Midnight Oil, Coarse Wool, Blue-Black, Velvet Evening, Nickel Ore Green, Laurel Wreath, Jube Green und Mint Zest in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #0C0D14 auf #CBFFD8 mit 17,39:1.

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

Farben im Detail

Midnight Oil #0C0D14

RGB: rgb(12, 13, 20)
HSL: hsl(233, 25%, 6%)
Luminanz: 0,004

Coarse Wool #181C28

RGB: rgb(24, 28, 40)
HSL: hsl(225, 25%, 13%)
Luminanz: 0,012

Blue-Black #23313D

RGB: rgb(35, 49, 61)
HSL: hsl(208, 27%, 19%)
Luminanz: 0,029

Velvet Evening #33505D

RGB: rgb(51, 80, 93)
HSL: hsl(199, 29%, 28%)
Luminanz: 0,072

Nickel Ore Green #4E7F7D

RGB: rgb(78, 127, 125)
HSL: hsl(178, 24%, 40%)
Luminanz: 0,183

Laurel Wreath #53A788

RGB: rgb(83, 167, 136)
HSL: hsl(158, 34%, 49%)
Luminanz: 0,313

Jube Green #70D38B

RGB: rgb(112, 211, 139)
HSL: hsl(136, 53%, 63%)
Luminanz: 0,519

Mint Zest #CBFFD8

RGB: rgb(203, 255, 216)
HSL: hsl(135, 100%, 90%)
Luminanz: 0,892

Kontrast & Barrierefreiheit

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

Aa #0C0D14 auf #CBFFD8 17,39:1 AAA

Aa #181C28 auf #CBFFD8 15,24:1 AAA

Aa #23313D auf #CBFFD8 11,93:1 AAA

Aa #0C0D14 auf #70D38B 10,50:1 AAA

Aa #181C28 auf #70D38B 9,21:1 AAA

Aa #33505D auf #CBFFD8 7,70:1 AAA

Aa #23313D auf #70D38B 7,21:1 AAA

Aa #0C0D14 auf #53A788 6,69:1 AA

Aa #181C28 auf #53A788 5,87:1 AA

Aa #33505D auf #70D38B 4,65:1 AA

Aa #23313D auf #53A788 4,59:1 AA

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

Aa #4E7F7D auf #CBFFD8 4,05:1 AA (großer Text)

Aa #181C28 auf #4E7F7D 3,77:1 AA (großer Text)

Aa #33505D auf #53A788 2,96:1 Nicht bestanden

Aa #23313D auf #4E7F7D 2,95:1 Nicht bestanden

Aa #53A788 auf #CBFFD8 2,60:1 Nicht bestanden

Aa #4E7F7D auf #70D38B 2,44:1 Nicht bestanden

Aa #0C0D14 auf #33505D 2,26:1 Nicht bestanden

Aa #181C28 auf #33505D 1,98:1 Nicht bestanden

Aa #33505D auf #4E7F7D 1,90:1 Nicht bestanden

Aa #70D38B auf #CBFFD8 1,66:1 Nicht bestanden

Aa #53A788 auf #70D38B 1,57:1 Nicht bestanden

Aa #4E7F7D auf #53A788 1,56:1 Nicht bestanden

Aa #23313D auf #33505D 1,55:1 Nicht bestanden

Aa #0C0D14 auf #23313D 1,46:1 Nicht bestanden

Aa #181C28 auf #23313D 1,28:1 Nicht bestanden

Aa #0C0D14 auf #181C28 1,14:1 Nicht bestanden

Waverator

Waverator

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen