Scenery12

Palette mit 12 Farben · Warm · Gemischt · Harmonie: Analog

Zurück zur Bibliothek

Scenery12

Palette mit 12 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Analog

Bearbeiten

Lebendig 12 Farben Warm Gemischt Analog versatile

Likes 42

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #462321;
  --c-vibrant-2: #6B291D;
  --c-vibrant-3: #B8471A;
  --c-vibrant-4: #EA7D2A;
  --c-vibrant-5: #FFB732;
  --c-vibrant-6: #FFDA45;
  --c-vibrant-7: #FCF760;
  --c-vibrant-8: #8BD155;
  --c-vibrant-9: #3E9F49;
  --c-vibrant-10: #237350;
  --c-vibrant-11: #245756;
  --c-vibrant-12: #1B2E3D;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Icterine (#FCF760) bis zum dunkelsten Ton Tangaroa (#1B2E3D). Sie vereint Polished Mahogany, Hereford Cow Brown, Spice Market, Chaat Masala, Soft Boiled, Golden Boy, Icterine, Fairy Tale Green, Fervent Green, Sparkling Emerald, Forbidden Forest und Tangaroa in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 19 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FCF760 auf #1B2E3D mit 12,37:1.

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

Farben im Detail

Polished Mahogany #462321

RGB: rgb(70, 35, 33)
HSL: hsl(3, 36%, 20%)
Luminanz: 0,026

Hereford Cow Brown #6B291D

RGB: rgb(107, 41, 29)
HSL: hsl(9, 57%, 27%)
Luminanz: 0,048

Spice Market #B8471A

RGB: rgb(184, 71, 26)
HSL: hsl(17, 75%, 41%)
Luminanz: 0,148

Chaat Masala #EA7D2A

RGB: rgb(234, 125, 42)
HSL: hsl(26, 82%, 54%)
Luminanz: 0,323

Soft Boiled #FFB732

RGB: rgb(255, 183, 50)
HSL: hsl(39, 100%, 60%)
Luminanz: 0,554

Golden Boy #FFDA45

RGB: rgb(255, 218, 69)
HSL: hsl(48, 100%, 64%)
Luminanz: 0,718

Icterine #FCF760

RGB: rgb(252, 247, 96)
HSL: hsl(58, 96%, 68%)
Luminanz: 0,881

Fairy Tale Green #8BD155

RGB: rgb(139, 209, 85)
HSL: hsl(94, 57%, 58%)
Luminanz: 0,518

Fervent Green #3E9F49

RGB: rgb(62, 159, 73)
HSL: hsl(127, 44%, 43%)
Luminanz: 0,263

Sparkling Emerald #237350

RGB: rgb(35, 115, 80)
HSL: hsl(154, 53%, 29%)
Luminanz: 0,132

Forbidden Forest #245756

RGB: rgb(36, 87, 86)
HSL: hsl(179, 41%, 24%)
Luminanz: 0,079

Tangaroa #1B2E3D

RGB: rgb(27, 46, 61)
HSL: hsl(206, 39%, 17%)
Luminanz: 0,025

Kontrast & Barrierefreiheit

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

Aa #FCF760 auf #1B2E3D 12,37:1 AAA

Aa #462321 auf #FCF760 12,22:1 AAA

Aa #FFDA45 auf #1B2E3D 10,21:1 AAA

Aa #462321 auf #FFDA45 10,09:1 AAA

Aa #6B291D auf #FCF760 9,50:1 AAA

Aa #FFB732 auf #1B2E3D 8,02:1 AAA

Aa #462321 auf #FFB732 7,93:1 AAA

Aa #6B291D auf #FFDA45 7,84:1 AAA

Aa #8BD155 auf #1B2E3D 7,54:1 AAA

Aa #462321 auf #8BD155 7,45:1 AAA

Aa #FCF760 auf #245756 7,23:1 AAA

Aa #6B291D auf #FFB732 6,16:1 AA

Aa #FFDA45 auf #245756 5,97:1 AA

Aa #6B291D auf #8BD155 5,79:1 AA

Aa #FCF760 auf #237350 5,11:1 AA

Aa #EA7D2A auf #1B2E3D 4,96:1 AA

Aa #462321 auf #EA7D2A 4,90:1 AA

Aa #B8471A auf #FCF760 4,71:1 AA

Aa #FFB732 auf #245756 4,69:1 AA

Aa #8BD155 auf #245756 4,41:1 AA (großer Text)

Aa #FFDA45 auf #237350 4,22:1 AA (großer Text)

Aa #3E9F49 auf #1B2E3D 4,16:1 AA (großer Text)

Aa #462321 auf #3E9F49 4,11:1 AA (großer Text)

Aa #B8471A auf #FFDA45 3,89:1 AA (großer Text)

Aa #6B291D auf #EA7D2A 3,81:1 AA (großer Text)

Aa #FFB732 auf #237350 3,32:1 AA (großer Text)

Aa #6B291D auf #3E9F49 3,19:1 AA (großer Text)

Aa #8BD155 auf #237350 3,12:1 AA (großer Text)

Aa #B8471A auf #FFB732 3,05:1 AA (großer Text)

Aa #FCF760 auf #3E9F49 2,97:1 Nicht bestanden

Aa #EA7D2A auf #245756 2,90:1 Nicht bestanden

Aa #B8471A auf #8BD155 2,87:1 Nicht bestanden

Aa #B8471A auf #1B2E3D 2,63:1 Nicht bestanden

Aa #462321 auf #B8471A 2,60:1 Nicht bestanden

Aa #EA7D2A auf #FCF760 2,49:1 Nicht bestanden

Aa #FFDA45 auf #3E9F49 2,45:1 Nicht bestanden

Aa #3E9F49 auf #245756 2,43:1 Nicht bestanden

Aa #237350 auf #1B2E3D 2,42:1 Nicht bestanden

Aa #462321 auf #237350 2,39:1 Nicht bestanden

Aa #EA7D2A auf #FFDA45 2,06:1 Nicht bestanden

Aa #EA7D2A auf #237350 2,05:1 Nicht bestanden

Aa #6B291D auf #B8471A 2,02:1 Nicht bestanden

Aa #FFB732 auf #3E9F49 1,93:1 Nicht bestanden

Aa #B8471A auf #EA7D2A 1,89:1 Nicht bestanden

Aa #6B291D auf #237350 1,86:1 Nicht bestanden

Aa #8BD155 auf #3E9F49 1,81:1 Nicht bestanden

Aa #3E9F49 auf #237350 1,72:1 Nicht bestanden

Aa #245756 auf #1B2E3D 1,71:1 Nicht bestanden

Aa #462321 auf #245756 1,69:1 Nicht bestanden

Aa #FCF760 auf #8BD155 1,64:1 Nicht bestanden

Aa #EA7D2A auf #FFB732 1,62:1 Nicht bestanden

Aa #B8471A auf #3E9F49 1,58:1 Nicht bestanden

Aa #B8471A auf #245756 1,54:1 Nicht bestanden

Aa #FFB732 auf #FCF760 1,54:1 Nicht bestanden

Aa #EA7D2A auf #8BD155 1,52:1 Nicht bestanden

Aa #237350 auf #245756 1,41:1 Nicht bestanden

Aa #FFDA45 auf #8BD155 1,35:1 Nicht bestanden

Aa #6B291D auf #245756 1,31:1 Nicht bestanden

Aa #6B291D auf #1B2E3D 1,30:1 Nicht bestanden

Aa #462321 auf #6B291D 1,29:1 Nicht bestanden

Aa #FFB732 auf #FFDA45 1,27:1 Nicht bestanden

Aa #FFDA45 auf #FCF760 1,21:1 Nicht bestanden

Aa #EA7D2A auf #3E9F49 1,19:1 Nicht bestanden

Aa #B8471A auf #237350 1,09:1 Nicht bestanden

Aa #FFB732 auf #8BD155 1,06:1 Nicht bestanden

Aa #462321 auf #1B2E3D 1,01:1 Nicht bestanden

Scenery12

Scenery12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen