Fluffy

Palette mit 12 Farben · Kühl · Dunkel · Harmonie: Triadisch

Zurück zur Bibliothek

Fluffy

Palette mit 12 Farben · Temperatur: Kühl · Ton: Dunkel · Harmonie: Triadisch

Bearbeiten

Gedeckt 12 Farben Kühl Dunkel Triadisch saturated 12

Likes 7

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #16171A;
  --c-muted-2: #36354D;
  --c-muted-3: #566C86;
  --c-muted-4: #430067;
  --c-muted-5: #5D275D;
  --c-muted-6: #3F48C2;
  --c-muted-7: #448DE7;
  --c-muted-8: #10D275;
  --c-muted-9: #A7F547;
  --c-muted-10: #D62411;
  --c-muted-11: #FF8426;
  --c-muted-12: #FFEB33;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Yellow-Bellied (#FFEB33) bis zum dunkelsten Ton Piano Black (#16171A). Sie vereint Piano Black, Tiě Hēi Metal, Aurora Borealis, Royal Purple, Charisma, Kikorangi Blue, Oregon Blue, Seaweed, Kiwi Pulp, Run Lola Run, Fluorescent Red Orange und Yellow-Bellied in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 18 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #16171A auf #FFEB33 mit 14,67:1.

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

Farben im Detail

Piano Black #16171A

RGB: rgb(22, 23, 26)
HSL: hsl(225, 8%, 9%)
Luminanz: 0,009

Tiě Hēi Metal #36354D

RGB: rgb(54, 53, 77)
HSL: hsl(243, 18%, 25%)
Luminanz: 0,039

Aurora Borealis #566C86

RGB: rgb(86, 108, 134)
HSL: hsl(213, 22%, 43%)
Luminanz: 0,144

Royal Purple #430067

RGB: rgb(67, 0, 103)
HSL: hsl(279, 100%, 20%)
Luminanz: 0,022

Charisma #5D275D

RGB: rgb(93, 39, 93)
HSL: hsl(300, 41%, 26%)
Luminanz: 0,046

Kikorangi Blue #3F48C2

RGB: rgb(63, 72, 194)
HSL: hsl(236, 52%, 50%)
Luminanz: 0,096

Oregon Blue #448DE7

RGB: rgb(68, 141, 231)
HSL: hsl(213, 77%, 59%)
Luminanz: 0,261

Seaweed #10D275

RGB: rgb(16, 210, 117)
HSL: hsl(151, 86%, 44%)
Luminanz: 0,475

Kiwi Pulp #A7F547

RGB: rgb(167, 245, 71)
HSL: hsl(87, 90%, 62%)
Luminanz: 0,740

Run Lola Run #D62411

RGB: rgb(214, 36, 17)
HSL: hsl(6, 85%, 45%)
Luminanz: 0,156

Fluorescent Red Orange #FF8426

RGB: rgb(255, 132, 38)
HSL: hsl(26, 100%, 57%)
Luminanz: 0,379

Yellow-Bellied #FFEB33

RGB: rgb(255, 235, 51)
HSL: hsl(54, 100%, 60%)
Luminanz: 0,809

Kontrast & Barrierefreiheit

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

Aa #16171A auf #FFEB33 14,67:1 AAA

Aa #16171A auf #A7F547 13,48:1 AAA

Aa #430067 auf #FFEB33 11,98:1 AAA

Aa #430067 auf #A7F547 11,01:1 AAA

Aa #36354D auf #FFEB33 9,69:1 AAA

Aa #5D275D auf #FFEB33 8,98:1 AAA

Aa #16171A auf #10D275 8,96:1 AAA

Aa #36354D auf #A7F547 8,91:1 AAA

Aa #5D275D auf #A7F547 8,25:1 AAA

Aa #16171A auf #FF8426 7,32:1 AAA

Aa #430067 auf #10D275 7,32:1 AAA

Aa #430067 auf #FF8426 5,98:1 AA

Aa #36354D auf #10D275 5,92:1 AA

Aa #3F48C2 auf #FFEB33 5,89:1 AA

Aa #5D275D auf #10D275 5,49:1 AA

Aa #3F48C2 auf #A7F547 5,41:1 AA

Aa #16171A auf #448DE7 5,30:1 AA

Aa #36354D auf #FF8426 4,84:1 AA

Aa #5D275D auf #FF8426 4,48:1 AA (großer Text)

Aa #566C86 auf #FFEB33 4,42:1 AA (großer Text)

Aa #430067 auf #448DE7 4,33:1 AA (großer Text)

Aa #D62411 auf #FFEB33 4,17:1 AA (großer Text)

Aa #566C86 auf #A7F547 4,07:1 AA (großer Text)

Aa #A7F547 auf #D62411 3,83:1 AA (großer Text)

Aa #3F48C2 auf #10D275 3,60:1 AA (großer Text)

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

Aa #36354D auf #448DE7 3,50:1 AA (großer Text)

Aa #16171A auf #566C86 3,32:1 AA (großer Text)

Aa #5D275D auf #448DE7 3,24:1 AA (großer Text)

Aa #3F48C2 auf #FF8426 2,94:1 Nicht bestanden

Aa #430067 auf #D62411 2,87:1 Nicht bestanden

Aa #448DE7 auf #FFEB33 2,77:1 Nicht bestanden

Aa #566C86 auf #430067 2,71:1 Nicht bestanden

Aa #566C86 auf #10D275 2,70:1 Nicht bestanden

Aa #10D275 auf #D62411 2,55:1 Nicht bestanden

Aa #448DE7 auf #A7F547 2,54:1 Nicht bestanden

Aa #16171A auf #3F48C2 2,49:1 Nicht bestanden

Aa #36354D auf #D62411 2,32:1 Nicht bestanden

Aa #566C86 auf #FF8426 2,21:1 Nicht bestanden

Aa #36354D auf #566C86 2,19:1 Nicht bestanden

Aa #5D275D auf #D62411 2,15:1 Nicht bestanden

Aa #3F48C2 auf #448DE7 2,13:1 Nicht bestanden

Aa #D62411 auf #FF8426 2,08:1 Nicht bestanden

Aa #566C86 auf #5D275D 2,03:1 Nicht bestanden

Aa #430067 auf #3F48C2 2,03:1 Nicht bestanden

Aa #FF8426 auf #FFEB33 2,00:1 Nicht bestanden

Aa #A7F547 auf #FF8426 1,84:1 Nicht bestanden

Aa #448DE7 auf #10D275 1,69:1 Nicht bestanden

Aa #36354D auf #3F48C2 1,65:1 Nicht bestanden

Aa #10D275 auf #FFEB33 1,64:1 Nicht bestanden

Aa #16171A auf #5D275D 1,63:1 Nicht bestanden

Aa #566C86 auf #448DE7 1,60:1 Nicht bestanden

Aa #5D275D auf #3F48C2 1,52:1 Nicht bestanden

Aa #16171A auf #36354D 1,51:1 Nicht bestanden

Aa #448DE7 auf #D62411 1,51:1 Nicht bestanden

Aa #10D275 auf #A7F547 1,50:1 Nicht bestanden

Aa #3F48C2 auf #D62411 1,41:1 Nicht bestanden

Aa #448DE7 auf #FF8426 1,38:1 Nicht bestanden

Aa #566C86 auf #3F48C2 1,33:1 Nicht bestanden

Aa #430067 auf #5D275D 1,33:1 Nicht bestanden

Aa #36354D auf #430067 1,24:1 Nicht bestanden

Aa #16171A auf #430067 1,22:1 Nicht bestanden

Aa #10D275 auf #FF8426 1,22:1 Nicht bestanden

Aa #A7F547 auf #FFEB33 1,09:1 Nicht bestanden

Aa #36354D auf #5D275D 1,08:1 Nicht bestanden

Aa #566C86 auf #D62411 1,06:1 Nicht bestanden

Fluffy

Fluffy

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen