Registrieren Registrieren
Orange You Sad

Orange You Sad

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

Zurück zur Bibliothek

Orange You Sad

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

Bearbeiten
Lebendig 12 Farben Warm Gemischt Triadisch red yellow
Likes 46
Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #3F2F46;
  --c-vibrant-2: #71354F;
  --c-vibrant-3: #A93D37;
  --c-vibrant-4: #D2677E;
  --c-vibrant-5: #F6C4C2;
  --c-vibrant-6: #FFFDC0;
  --c-vibrant-7: #FBFE81;
  --c-vibrant-8: #BAC45C;
  --c-vibrant-9: #6F7F46;
  --c-vibrant-10: #535C3A;
  --c-vibrant-11: #343F2B;
  --c-vibrant-12: #21212C;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Yellow Mana (#FFFDC0) bis zum dunkelsten Ton To Hell and Black (#21212C). Sie vereint Jagger, Venusian, Indiscreet, Pinkish, My Fair Lady, Yellow Mana, Yellowish Tan, Asparagus Fern, Quartz Green, Shallot Leaf, Deep Seaweed und To Hell and Black in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 22 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFDC0 auf #21212C mit 15,22:1.

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

Farben im Detail

Jagger #3F2F46
RGB
rgb(63, 47, 70)
HSL
hsl(282, 20%, 23%)
Luminanz
0,035
Venusian #71354F
RGB
rgb(113, 53, 79)
HSL
hsl(334, 36%, 33%)
Luminanz
0,066
Indiscreet #A93D37
RGB
rgb(169, 61, 55)
HSL
hsl(3, 51%, 44%)
Luminanz
0,121
Pinkish #D2677E
RGB
rgb(210, 103, 126)
HSL
hsl(347, 54%, 61%)
Luminanz
0,249
My Fair Lady #F6C4C2
RGB
rgb(246, 196, 194)
HSL
hsl(2, 74%, 86%)
Luminanz
0,630
Yellow Mana #FFFDC0
RGB
rgb(255, 253, 192)
HSL
hsl(58, 100%, 88%)
Luminanz
0,953
Yellowish Tan #FBFE81
RGB
rgb(251, 254, 129)
HSL
hsl(61, 98%, 75%)
Luminanz
0,930
Asparagus Fern #BAC45C
RGB
rgb(186, 196, 92)
HSL
hsl(66, 47%, 56%)
Luminanz
0,507
Quartz Green #6F7F46
RGB
rgb(111, 127, 70)
HSL
hsl(77, 29%, 39%)
Luminanz
0,190
Shallot Leaf #535C3A
RGB
rgb(83, 92, 58)
HSL
hsl(76, 23%, 29%)
Luminanz
0,098
Deep Seaweed #343F2B
RGB
rgb(52, 63, 43)
HSL
hsl(93, 19%, 21%)
Luminanz
0,045
To Hell and Black #21212C
RGB
rgb(33, 33, 44)
HSL
hsl(240, 14%, 15%)
Luminanz
0,016

Kontrast & Barrierefreiheit

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

Aa #FFFDC0 auf #21212C 15,22:1 AAA
Aa #FBFE81 auf #21212C 14,86:1 AAA
Aa #3F2F46 auf #FFFDC0 11,76:1 AAA
Aa #3F2F46 auf #FBFE81 11,48:1 AAA
Aa #FFFDC0 auf #343F2B 10,60:1 AAA
Aa #FBFE81 auf #343F2B 10,36:1 AAA
Aa #F6C4C2 auf #21212C 10,31:1 AAA
Aa #71354F auf #FFFDC0 8,63:1 AAA
Aa #BAC45C auf #21212C 8,45:1 AAA
Aa #71354F auf #FBFE81 8,43:1 AAA
Aa #3F2F46 auf #F6C4C2 7,97:1 AAA
Aa #F6C4C2 auf #343F2B 7,19:1 AAA
Aa #FFFDC0 auf #535C3A 6,78:1 AA
Aa #FBFE81 auf #535C3A 6,62:1 AA
Aa #3F2F46 auf #BAC45C 6,53:1 AA
Aa #BAC45C auf #343F2B 5,89:1 AA
Aa #A93D37 auf #FFFDC0 5,88:1 AA
Aa #71354F auf #F6C4C2 5,85:1 AA
Aa #A93D37 auf #FBFE81 5,75:1 AA
Aa #71354F auf #BAC45C 4,79:1 AA
Aa #F6C4C2 auf #535C3A 4,59:1 AA
Aa #D2677E auf #21212C 4,54:1 AA
Aa #FFFDC0 auf #6F7F46 4,18:1 AA (großer Text)
Aa #FBFE81 auf #6F7F46 4,08:1 AA (großer Text)
Aa #A93D37 auf #F6C4C2 3,99:1 AA (großer Text)
Aa #BAC45C auf #535C3A 3,76:1 AA (großer Text)
Aa #6F7F46 auf #21212C 3,64:1 AA (großer Text)
Aa #3F2F46 auf #D2677E 3,51:1 AA (großer Text)
Aa #D2677E auf #FFFDC0 3,35:1 AA (großer Text)
Aa #D2677E auf #FBFE81 3,28:1 AA (großer Text)
Aa #A93D37 auf #BAC45C 3,27:1 AA (großer Text)
Aa #D2677E auf #343F2B 3,16:1 AA (großer Text)
Aa #F6C4C2 auf #6F7F46 2,83:1 Nicht bestanden
Aa #3F2F46 auf #6F7F46 2,81:1 Nicht bestanden
Aa #A93D37 auf #21212C 2,59:1 Nicht bestanden
Aa #71354F auf #D2677E 2,57:1 Nicht bestanden
Aa #6F7F46 auf #343F2B 2,54:1 Nicht bestanden
Aa #BAC45C auf #6F7F46 2,32:1 Nicht bestanden
Aa #D2677E auf #F6C4C2 2,27:1 Nicht bestanden
Aa #535C3A auf #21212C 2,24:1 Nicht bestanden
Aa #71354F auf #6F7F46 2,07:1 Nicht bestanden
Aa #D2677E auf #535C3A 2,02:1 Nicht bestanden
Aa #3F2F46 auf #A93D37 2,00:1 Nicht bestanden
Aa #D2677E auf #BAC45C 1,86:1 Nicht bestanden
Aa #A93D37 auf #343F2B 1,80:1 Nicht bestanden
Aa #FFFDC0 auf #BAC45C 1,80:1 Nicht bestanden
Aa #71354F auf #21212C 1,76:1 Nicht bestanden
Aa #FBFE81 auf #BAC45C 1,76:1 Nicht bestanden
Aa #A93D37 auf #D2677E 1,75:1 Nicht bestanden
Aa #3F2F46 auf #535C3A 1,73:1 Nicht bestanden
Aa #6F7F46 auf #535C3A 1,62:1 Nicht bestanden
Aa #535C3A auf #343F2B 1,56:1 Nicht bestanden
Aa #F6C4C2 auf #FFFDC0 1,48:1 Nicht bestanden
Aa #71354F auf #A93D37 1,47:1 Nicht bestanden
Aa #F6C4C2 auf #FBFE81 1,44:1 Nicht bestanden
Aa #343F2B auf #21212C 1,43:1 Nicht bestanden
Aa #A93D37 auf #6F7F46 1,41:1 Nicht bestanden
Aa #3F2F46 auf #71354F 1,36:1 Nicht bestanden
Aa #3F2F46 auf #21212C 1,29:1 Nicht bestanden
Aa #71354F auf #535C3A 1,27:1 Nicht bestanden
Aa #D2677E auf #6F7F46 1,25:1 Nicht bestanden
Aa #71354F auf #343F2B 1,23:1 Nicht bestanden
Aa #F6C4C2 auf #BAC45C 1,22:1 Nicht bestanden
Aa #A93D37 auf #535C3A 1,15:1 Nicht bestanden
Aa #3F2F46 auf #343F2B 1,11:1 Nicht bestanden
Aa #FFFDC0 auf #FBFE81 1,02:1 Nicht bestanden

Ähnliche Paletten

#F9ED69 #F08A5D #B83B5E #6A2C70
4 Farben
#7D5A50 #B4846C #E5B299 #FCDEC0
4 Farben
#FFF8EA #9E7676 #815B5B #594545
4 Farben
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 Farben
#F67280 #C06C84 #6C5B7B #355C7D
4 Farben
#2B2E4A #E84545 #903749 #53354A
4 Farben
#E5D9B6 #A4BE7B #5F8D4E #285430
4 Farben
#A9907E #F3DEBA #ABC4AA #675D50
4 Farben