Pico Micro

Palette mit 8 Farben · Warm · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Pico Micro

Palette mit 8 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär pico8

Likes 46

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #000000;
  --c-vibrant-2: #544E5E;
  --c-vibrant-3: #4D8ED9;
  --c-vibrant-4: #00D43B;
  --c-vibrant-5: #FFE4D2;
  --c-vibrant-6: #FFBB0D;
  --c-vibrant-7: #FF3B7A;
  --c-vibrant-8: #913F33;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Powdered Peach (#FFE4D2) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, Salvation, Blue Dart, Vivid Malachite, Powdered Peach, Bitcoin, Diva Pink und Carmen Miranda in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #000000 auf #FFE4D2 mit 17,28:1.

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

Farben im Detail

Black #000000

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

Salvation #544E5E

RGB: rgb(84, 78, 94)
HSL: hsl(263, 9%, 34%)
Luminanz: 0,081

Blue Dart #4D8ED9

RGB: rgb(77, 142, 217)
HSL: hsl(212, 65%, 58%)
Luminanz: 0,259

Vivid Malachite #00D43B

RGB: rgb(0, 212, 59)
HSL: hsl(137, 100%, 42%)
Luminanz: 0,474

Powdered Peach #FFE4D2

RGB: rgb(255, 228, 210)
HSL: hsl(24, 100%, 91%)
Luminanz: 0,814

Bitcoin #FFBB0D

RGB: rgb(255, 187, 13)
HSL: hsl(43, 100%, 53%)
Luminanz: 0,568

Diva Pink #FF3B7A

RGB: rgb(255, 59, 122)
HSL: hsl(341, 100%, 62%)
Luminanz: 0,258

Carmen Miranda #913F33

RGB: rgb(145, 63, 51)
HSL: hsl(8, 48%, 38%)
Luminanz: 0,098

Kontrast & Barrierefreiheit

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

Aa #000000 auf #FFE4D2 17,28:1 AAA

Aa #000000 auf #FFBB0D 12,37:1 AAA

Aa #000000 auf #00D43B 10,48:1 AAA

Aa #544E5E auf #FFE4D2 6,57:1 AA

Aa #000000 auf #4D8ED9 6,19:1 AA

Aa #000000 auf #FF3B7A 6,16:1 AA

Aa #FFE4D2 auf #913F33 5,83:1 AA

Aa #544E5E auf #FFBB0D 4,70:1 AA

Aa #FFBB0D auf #913F33 4,17:1 AA (großer Text)

Aa #544E5E auf #00D43B 3,99:1 AA (großer Text)

Aa #00D43B auf #913F33 3,54:1 AA (großer Text)

Aa #000000 auf #913F33 2,96:1 Nicht bestanden

Aa #FFE4D2 auf #FF3B7A 2,81:1 Nicht bestanden

Aa #4D8ED9 auf #FFE4D2 2,79:1 Nicht bestanden

Aa #000000 auf #544E5E 2,63:1 Nicht bestanden

Aa #544E5E auf #4D8ED9 2,35:1 Nicht bestanden

Aa #544E5E auf #FF3B7A 2,34:1 Nicht bestanden

Aa #4D8ED9 auf #913F33 2,09:1 Nicht bestanden

Aa #FF3B7A auf #913F33 2,08:1 Nicht bestanden

Aa #FFBB0D auf #FF3B7A 2,01:1 Nicht bestanden

Aa #4D8ED9 auf #FFBB0D 2,00:1 Nicht bestanden

Aa #00D43B auf #FF3B7A 1,70:1 Nicht bestanden

Aa #4D8ED9 auf #00D43B 1,69:1 Nicht bestanden

Aa #00D43B auf #FFE4D2 1,65:1 Nicht bestanden

Aa #FFE4D2 auf #FFBB0D 1,40:1 Nicht bestanden

Aa #00D43B auf #FFBB0D 1,18:1 Nicht bestanden

Aa #544E5E auf #913F33 1,13:1 Nicht bestanden

Aa #4D8ED9 auf #FF3B7A 1,00:1 Nicht bestanden

Pico Micro

Pico Micro

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen