Registrieren Registrieren
Pencil Sketch

Pencil Sketch

Palette mit 12 Farben · Warm · Hell · Harmonie: Komplementär

Zurück zur Bibliothek

Pencil Sketch

Palette mit 12 Farben · Temperatur: Warm · Ton: Hell · Harmonie: Komplementär

Bearbeiten
Lebendig 12 Farben Warm Hell Komplementär pencilsketch
Likes 11
Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #FFFFE0;
  --c-vibrant-2: #FCEF8D;
  --c-vibrant-3: #F6CE98;
  --c-vibrant-4: #F2A561;
  --c-vibrant-5: #D37B86;
  --c-vibrant-6: #FF2D55;
  --c-vibrant-7: #2DFF69;
  --c-vibrant-8: #AEFFD5;
  --c-vibrant-9: #5998FF;
  --c-vibrant-10: #202020;
  --c-vibrant-11: #606060;
  --c-vibrant-12: #808080;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Winter Duvet (#FFFFE0) bis zum dunkelsten Ton Lead (#202020). Sie vereint Winter Duvet, The First Daffodil, Yellow Lotus, Shrimp Cocktail, Victorian Rouge, Reddish Pink, Synthetic Spearmint, Mintastic, Blue Chaos, Lead, Kettleman und Grey in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFE0 auf #202020 mit 16,01:1.

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

Farben im Detail

Winter Duvet #FFFFE0
RGB
rgb(255, 255, 224)
HSL
hsl(60, 100%, 94%)
Luminanz
0,982
The First Daffodil #FCEF8D
RGB
rgb(252, 239, 141)
HSL
hsl(53, 95%, 77%)
Luminanz
0,844
Yellow Lotus #F6CE98
RGB
rgb(246, 206, 152)
HSL
hsl(34, 84%, 78%)
Luminanz
0,660
Shrimp Cocktail #F2A561
RGB
rgb(242, 165, 97)
HSL
hsl(28, 85%, 66%)
Luminanz
0,467
Victorian Rouge #D37B86
RGB
rgb(211, 123, 134)
HSL
hsl(353, 50%, 65%)
Luminanz
0,297
Reddish Pink #FF2D55
RGB
rgb(255, 45, 85)
HSL
hsl(349, 100%, 59%)
Luminanz
0,238
Synthetic Spearmint #2DFF69
RGB
rgb(45, 255, 105)
HSL
hsl(137, 100%, 59%)
Luminanz
0,731
Mintastic #AEFFD5
RGB
rgb(174, 255, 213)
HSL
hsl(149, 100%, 84%)
Luminanz
0,853
Blue Chaos #5998FF
RGB
rgb(89, 152, 255)
HSL
hsl(217, 100%, 67%)
Luminanz
0,318
Lead #202020
RGB
rgb(32, 32, 32)
HSL
hsl(0, 0%, 13%)
Luminanz
0,014
Kettleman #606060
RGB
rgb(96, 96, 96)
HSL
hsl(0, 0%, 38%)
Luminanz
0,117
Grey #808080
RGB
rgb(128, 128, 128)
HSL
hsl(0, 0%, 50%)
Luminanz
0,216

Kontrast & Barrierefreiheit

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

Aa #FFFFE0 auf #202020 16,01:1 AAA
Aa #AEFFD5 auf #202020 14,02:1 AAA
Aa #FCEF8D auf #202020 13,87:1 AAA
Aa #2DFF69 auf #202020 12,12:1 AAA
Aa #F6CE98 auf #202020 11,02:1 AAA
Aa #F2A561 auf #202020 8,01:1 AAA
Aa #FFFFE0 auf #606060 6,18:1 AA
Aa #5998FF auf #202020 5,71:1 AA
Aa #AEFFD5 auf #606060 5,41:1 AA
Aa #D37B86 auf #202020 5,39:1 AA
Aa #FCEF8D auf #606060 5,35:1 AA
Aa #2DFF69 auf #606060 4,68:1 AA
Aa #FF2D55 auf #202020 4,47:1 AA (großer Text)
Aa #F6CE98 auf #606060 4,25:1 AA (großer Text)
Aa #202020 auf #808080 4,13:1 AA (großer Text)
Aa #FFFFE0 auf #808080 3,88:1 AA (großer Text)
Aa #FFFFE0 auf #FF2D55 3,58:1 AA (großer Text)
Aa #AEFFD5 auf #808080 3,40:1 AA (großer Text)
Aa #FCEF8D auf #808080 3,36:1 AA (großer Text)
Aa #FF2D55 auf #AEFFD5 3,14:1 AA (großer Text)
Aa #FCEF8D auf #FF2D55 3,10:1 AA (großer Text)
Aa #F2A561 auf #606060 3,09:1 AA (großer Text)
Aa #FFFFE0 auf #D37B86 2,97:1 Nicht bestanden
Aa #2DFF69 auf #808080 2,94:1 Nicht bestanden
Aa #FFFFE0 auf #5998FF 2,80:1 Nicht bestanden
Aa #FF2D55 auf #2DFF69 2,71:1 Nicht bestanden
Aa #F6CE98 auf #808080 2,67:1 Nicht bestanden
Aa #D37B86 auf #AEFFD5 2,60:1 Nicht bestanden
Aa #202020 auf #606060 2,59:1 Nicht bestanden
Aa #FCEF8D auf #D37B86 2,57:1 Nicht bestanden
Aa #F6CE98 auf #FF2D55 2,47:1 Nicht bestanden
Aa #AEFFD5 auf #5998FF 2,45:1 Nicht bestanden
Aa #FCEF8D auf #5998FF 2,43:1 Nicht bestanden
Aa #D37B86 auf #2DFF69 2,25:1 Nicht bestanden
Aa #5998FF auf #606060 2,20:1 Nicht bestanden
Aa #2DFF69 auf #5998FF 2,12:1 Nicht bestanden
Aa #D37B86 auf #606060 2,08:1 Nicht bestanden
Aa #F6CE98 auf #D37B86 2,04:1 Nicht bestanden
Aa #FFFFE0 auf #F2A561 2,00:1 Nicht bestanden
Aa #F2A561 auf #808080 1,94:1 Nicht bestanden
Aa #F6CE98 auf #5998FF 1,93:1 Nicht bestanden
Aa #F2A561 auf #FF2D55 1,79:1 Nicht bestanden
Aa #F2A561 auf #AEFFD5 1,75:1 Nicht bestanden
Aa #FCEF8D auf #F2A561 1,73:1 Nicht bestanden
Aa #FF2D55 auf #606060 1,72:1 Nicht bestanden
Aa #606060 auf #808080 1,59:1 Nicht bestanden
Aa #F2A561 auf #2DFF69 1,51:1 Nicht bestanden
Aa #F2A561 auf #D37B86 1,49:1 Nicht bestanden
Aa #FFFFE0 auf #F6CE98 1,45:1 Nicht bestanden
Aa #F2A561 auf #5998FF 1,40:1 Nicht bestanden
Aa #5998FF auf #808080 1,38:1 Nicht bestanden
Aa #F6CE98 auf #F2A561 1,37:1 Nicht bestanden
Aa #FFFFE0 auf #2DFF69 1,32:1 Nicht bestanden
Aa #D37B86 auf #808080 1,31:1 Nicht bestanden
Aa #FF2D55 auf #5998FF 1,28:1 Nicht bestanden
Aa #F6CE98 auf #AEFFD5 1,27:1 Nicht bestanden
Aa #FCEF8D auf #F6CE98 1,26:1 Nicht bestanden
Aa #D37B86 auf #FF2D55 1,21:1 Nicht bestanden
Aa #2DFF69 auf #AEFFD5 1,16:1 Nicht bestanden
Aa #FFFFE0 auf #FCEF8D 1,15:1 Nicht bestanden
Aa #FFFFE0 auf #AEFFD5 1,14:1 Nicht bestanden
Aa #FCEF8D auf #2DFF69 1,14:1 Nicht bestanden
Aa #F6CE98 auf #2DFF69 1,10:1 Nicht bestanden
Aa #FF2D55 auf #808080 1,08:1 Nicht bestanden
Aa #D37B86 auf #5998FF 1,06:1 Nicht bestanden
Aa #FCEF8D auf #AEFFD5 1,01:1 Nicht bestanden

Ähnliche Paletten

#FFF5E4 #FFE3E1 #FFD1D1 #FF9494
4 Farben
#F9F5F6 #F8E8EE #FDCEDF #F2BED1
4 Farben
#FFC7C7 #FFE2E2 #F6F6F6 #8785A2
4 Farben
#AD8B73 #CEAB93 #E3CAA5 #FFFBE9
4 Farben
#F38181 #FCE38A #EAFFD0 #95E1D3
4 Farben
#B7C4CF #EEE3CB #D7C0AE #967E76
4 Farben
#FFEDDB #EDCDBB #E3B7A0 #BF9270
4 Farben
#8D7B68 #A4907C #C8B6A6 #F1DEC9
4 Farben