3x4 Rgb

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

Zurück zur Bibliothek

3x4 Rgb

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär green red blue contrast

Likes 18

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #004D23;
  --c-vibrant-2: #807100;
  --c-vibrant-3: #8EC724;
  --c-vibrant-4: #D5EDD8;
  --c-vibrant-5: #4D002A;
  --c-vibrant-6: #BD2F3E;
  --c-vibrant-7: #FA7DAD;
  --c-vibrant-8: #FAD0EB;
  --c-vibrant-9: #000C4D;
  --c-vibrant-10: #2D1AD9;
  --c-vibrant-11: #0090C9;
  --c-vibrant-12: #47D2D9;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Silky Mint (#D5EDD8) bis zum dunkelsten Ton Kantor Blue (#000C4D). Sie vereint Lemon Balm Green, Sunlit Kelp Green, Thick Green, Silky Mint, Fig Balsamic, Crimson Cloud, Erythrosine, Little Smile, Kantor Blue, Lapis on Neptune, Dynamic Blue und Medium Turquoise in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 20 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #D5EDD8 auf #000C4D mit 14,6:1.

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

Farben im Detail

Lemon Balm Green #004D23

RGB: rgb(0, 77, 35)
HSL: hsl(147, 100%, 15%)
Luminanz: 0,054

Sunlit Kelp Green #807100

RGB: rgb(128, 113, 0)
HSL: hsl(53, 100%, 25%)
Luminanz: 0,164

Thick Green #8EC724

RGB: rgb(142, 199, 36)
HSL: hsl(81, 69%, 46%)
Luminanz: 0,467

Silky Mint #D5EDD8

RGB: rgb(213, 237, 216)
HSL: hsl(128, 40%, 88%)
Luminanz: 0,797

Fig Balsamic #4D002A

RGB: rgb(77, 0, 42)
HSL: hsl(327, 100%, 15%)
Luminanz: 0,017

Crimson Cloud #BD2F3E

RGB: rgb(189, 47, 62)
HSL: hsl(354, 60%, 46%)
Luminanz: 0,132

Erythrosine #FA7DAD

RGB: rgb(250, 125, 173)
HSL: hsl(337, 93%, 74%)
Luminanz: 0,380

Little Smile #FAD0EB

RGB: rgb(250, 208, 235)
HSL: hsl(321, 81%, 90%)
Luminanz: 0,714

Kantor Blue #000C4D

RGB: rgb(0, 12, 77)
HSL: hsl(231, 100%, 15%)
Luminanz: 0,008

Lapis on Neptune #2D1AD9

RGB: rgb(45, 26, 217)
HSL: hsl(246, 79%, 48%)
Luminanz: 0,063

Dynamic Blue #0090C9

RGB: rgb(0, 144, 201)
HSL: hsl(197, 100%, 39%)
Luminanz: 0,242

Medium Turquoise #47D2D9

RGB: rgb(71, 210, 217)
HSL: hsl(183, 66%, 56%)
Luminanz: 0,524

Kontrast & Barrierefreiheit

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

Aa #D5EDD8 auf #000C4D 14,60:1 AAA

Aa #FAD0EB auf #000C4D 13,18:1 AAA

Aa #D5EDD8 auf #4D002A 12,55:1 AAA

Aa #4D002A auf #FAD0EB 11,33:1 AAA

Aa #000C4D auf #47D2D9 9,91:1 AAA

Aa #8EC724 auf #000C4D 8,92:1 AAA

Aa #4D002A auf #47D2D9 8,52:1 AAA

Aa #004D23 auf #D5EDD8 8,12:1 AAA

Aa #8EC724 auf #4D002A 7,67:1 AAA

Aa #D5EDD8 auf #2D1AD9 7,49:1 AAA

Aa #FA7DAD auf #000C4D 7,42:1 AAA

Aa #004D23 auf #FAD0EB 7,33:1 AAA

Aa #FAD0EB auf #2D1AD9 6,76:1 AA

Aa #4D002A auf #FA7DAD 6,38:1 AA

Aa #004D23 auf #47D2D9 5,51:1 AA

Aa #2D1AD9 auf #47D2D9 5,08:1 AA

Aa #000C4D auf #0090C9 5,03:1 AA

Aa #004D23 auf #8EC724 4,96:1 AA

Aa #D5EDD8 auf #BD2F3E 4,65:1 AA

Aa #8EC724 auf #2D1AD9 4,57:1 AA

Aa #4D002A auf #0090C9 4,32:1 AA (großer Text)

Aa #BD2F3E auf #FAD0EB 4,20:1 AA (großer Text)

Aa #004D23 auf #FA7DAD 4,12:1 AA (großer Text)

Aa #807100 auf #D5EDD8 3,96:1 AA (großer Text)

Aa #FA7DAD auf #2D1AD9 3,80:1 AA (großer Text)

Aa #807100 auf #000C4D 3,69:1 AA (großer Text)

Aa #807100 auf #FAD0EB 3,57:1 AA (großer Text)

Aa #807100 auf #4D002A 3,17:1 AA (großer Text)

Aa #BD2F3E auf #47D2D9 3,16:1 AA (großer Text)

Aa #BD2F3E auf #000C4D 3,14:1 AA (großer Text)

Aa #D5EDD8 auf #0090C9 2,90:1 Nicht bestanden

Aa #8EC724 auf #BD2F3E 2,84:1 Nicht bestanden

Aa #004D23 auf #0090C9 2,80:1 Nicht bestanden

Aa #4D002A auf #BD2F3E 2,70:1 Nicht bestanden

Aa #807100 auf #47D2D9 2,68:1 Nicht bestanden

Aa #FAD0EB auf #0090C9 2,62:1 Nicht bestanden

Aa #2D1AD9 auf #0090C9 2,58:1 Nicht bestanden

Aa #807100 auf #8EC724 2,42:1 Nicht bestanden

Aa #BD2F3E auf #FA7DAD 2,36:1 Nicht bestanden

Aa #004D23 auf #807100 2,05:1 Nicht bestanden

Aa #807100 auf #FA7DAD 2,01:1 Nicht bestanden

Aa #D5EDD8 auf #FA7DAD 1,97:1 Nicht bestanden

Aa #0090C9 auf #47D2D9 1,97:1 Nicht bestanden

Aa #000C4D auf #2D1AD9 1,95:1 Nicht bestanden

Aa #807100 auf #2D1AD9 1,89:1 Nicht bestanden

Aa #004D23 auf #000C4D 1,80:1 Nicht bestanden

Aa #FA7DAD auf #FAD0EB 1,78:1 Nicht bestanden

Aa #8EC724 auf #0090C9 1,77:1 Nicht bestanden

Aa #004D23 auf #BD2F3E 1,75:1 Nicht bestanden

Aa #4D002A auf #2D1AD9 1,68:1 Nicht bestanden

Aa #8EC724 auf #D5EDD8 1,64:1 Nicht bestanden

Aa #BD2F3E auf #2D1AD9 1,61:1 Nicht bestanden

Aa #BD2F3E auf #0090C9 1,60:1 Nicht bestanden

Aa #004D23 auf #4D002A 1,55:1 Nicht bestanden

Aa #8EC724 auf #FAD0EB 1,48:1 Nicht bestanden

Aa #D5EDD8 auf #47D2D9 1,47:1 Nicht bestanden

Aa #FA7DAD auf #0090C9 1,47:1 Nicht bestanden

Aa #807100 auf #0090C9 1,36:1 Nicht bestanden

Aa #FA7DAD auf #47D2D9 1,34:1 Nicht bestanden

Aa #FAD0EB auf #47D2D9 1,33:1 Nicht bestanden

Aa #8EC724 auf #FA7DAD 1,20:1 Nicht bestanden

Aa #807100 auf #BD2F3E 1,18:1 Nicht bestanden

Aa #4D002A auf #000C4D 1,16:1 Nicht bestanden

Aa #8EC724 auf #47D2D9 1,11:1 Nicht bestanden

Aa #D5EDD8 auf #FAD0EB 1,11:1 Nicht bestanden

Aa #004D23 auf #2D1AD9 1,08:1 Nicht bestanden

3x4 Rgb

3x4 Rgb

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen