Registrieren Registrieren
SKYLINE 12

SKYLINE 12

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

Zurück zur Bibliothek

SKYLINE 12

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

Bearbeiten
Lebendig 12 Farben Kühl Hell Triadisch blue sky fresh ment
Likes 29
Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #EEF3F7;
  --c-vibrant-2: #B2D6F7;
  --c-vibrant-3: #B2BEF7;
  --c-vibrant-4: #DEB2F7;
  --c-vibrant-5: #00FFD8;
  --c-vibrant-6: #00C9FF;
  --c-vibrant-7: #00A4FF;
  --c-vibrant-8: #0072FF;
  --c-vibrant-9: #8CB28C;
  --c-vibrant-10: #7B9490;
  --c-vibrant-11: #71828B;
  --c-vibrant-12: #71718A;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Airport (#EEF3F7) bis zum dunkelsten Ton Stormy Mauve (#71718A). Sie vereint Airport, Blue Rice, Purple Illusion, Mauve, Ice Ice Baby, Vivid Sky Blue, Protoss Pylon, Brandeis Blue, Shaded Willow, Tile Green, Oyster Bay und Stormy Mauve in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Keines der 66 Farbpaare der Palette erreicht die WCAG-AA-Kontrastschwelle (4,5:1) – kombiniere diese Farben für Fließtext daher mit Schwarz oder Weiß.

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

Farben im Detail

Airport #EEF3F7
RGB
rgb(238, 243, 247)
HSL
hsl(207, 36%, 95%)
Luminanz
0,890
Blue Rice #B2D6F7
RGB
rgb(178, 214, 247)
HSL
hsl(209, 81%, 83%)
Luminanz
0,643
Purple Illusion #B2BEF7
RGB
rgb(178, 190, 247)
HSL
hsl(230, 81%, 83%)
Luminanz
0,530
Mauve #DEB2F7
RGB
rgb(222, 178, 247)
HSL
hsl(278, 81%, 83%)
Luminanz
0,541
Ice Ice Baby #00FFD8
RGB
rgb(0, 255, 216)
HSL
hsl(171, 100%, 50%)
Luminanz
0,765
Vivid Sky Blue #00C9FF
RGB
rgb(0, 201, 255)
HSL
hsl(193, 100%, 50%)
Luminanz
0,490
Protoss Pylon #00A4FF
RGB
rgb(0, 164, 255)
HSL
hsl(201, 100%, 50%)
Luminanz
0,338
Brandeis Blue #0072FF
RGB
rgb(0, 114, 255)
HSL
hsl(213, 100%, 50%)
Luminanz
0,193
Shaded Willow #8CB28C
RGB
rgb(140, 178, 140)
HSL
hsl(120, 20%, 62%)
Luminanz
0,393
Tile Green #7B9490
RGB
rgb(123, 148, 144)
HSL
hsl(170, 10%, 53%)
Luminanz
0,274
Oyster Bay #71828B
RGB
rgb(113, 130, 139)
HSL
hsl(201, 10%, 49%)
Luminanz
0,213
Stormy Mauve #71718A
RGB
rgb(113, 113, 138)
HSL
hsl(240, 10%, 49%)
Luminanz
0,172

Kontrast & Barrierefreiheit

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

Aa #EEF3F7 auf #71718A 4,24:1 AA (großer Text)
Aa #EEF3F7 auf #0072FF 3,88:1 AA (großer Text)
Aa #00FFD8 auf #71718A 3,68:1 AA (großer Text)
Aa #EEF3F7 auf #71828B 3,57:1 AA (großer Text)
Aa #00FFD8 auf #0072FF 3,36:1 AA (großer Text)
Aa #B2D6F7 auf #71718A 3,13:1 AA (großer Text)
Aa #00FFD8 auf #71828B 3,09:1 AA (großer Text)
Aa #EEF3F7 auf #7B9490 2,90:1 Nicht bestanden
Aa #B2D6F7 auf #0072FF 2,86:1 Nicht bestanden
Aa #DEB2F7 auf #71718A 2,67:1 Nicht bestanden
Aa #B2D6F7 auf #71828B 2,63:1 Nicht bestanden
Aa #B2BEF7 auf #71718A 2,62:1 Nicht bestanden
Aa #00FFD8 auf #7B9490 2,51:1 Nicht bestanden
Aa #DEB2F7 auf #0072FF 2,44:1 Nicht bestanden
Aa #00C9FF auf #71718A 2,44:1 Nicht bestanden
Aa #EEF3F7 auf #00A4FF 2,42:1 Nicht bestanden
Aa #B2BEF7 auf #0072FF 2,39:1 Nicht bestanden
Aa #DEB2F7 auf #71828B 2,24:1 Nicht bestanden
Aa #00C9FF auf #0072FF 2,23:1 Nicht bestanden
Aa #B2BEF7 auf #71828B 2,20:1 Nicht bestanden
Aa #B2D6F7 auf #7B9490 2,14:1 Nicht bestanden
Aa #EEF3F7 auf #8CB28C 2,12:1 Nicht bestanden
Aa #00FFD8 auf #00A4FF 2,10:1 Nicht bestanden
Aa #00C9FF auf #71828B 2,05:1 Nicht bestanden
Aa #8CB28C auf #71718A 2,00:1 Nicht bestanden
Aa #00FFD8 auf #8CB28C 1,84:1 Nicht bestanden
Aa #0072FF auf #8CB28C 1,83:1 Nicht bestanden
Aa #DEB2F7 auf #7B9490 1,82:1 Nicht bestanden
Aa #B2D6F7 auf #00A4FF 1,79:1 Nicht bestanden
Aa #B2BEF7 auf #7B9490 1,79:1 Nicht bestanden
Aa #00A4FF auf #71718A 1,75:1 Nicht bestanden
Aa #EEF3F7 auf #00C9FF 1,74:1 Nicht bestanden
Aa #8CB28C auf #71828B 1,68:1 Nicht bestanden
Aa #00C9FF auf #7B9490 1,67:1 Nicht bestanden
Aa #EEF3F7 auf #B2BEF7 1,62:1 Nicht bestanden
Aa #00A4FF auf #0072FF 1,60:1 Nicht bestanden
Aa #EEF3F7 auf #DEB2F7 1,59:1 Nicht bestanden
Aa #B2D6F7 auf #8CB28C 1,56:1 Nicht bestanden
Aa #DEB2F7 auf #00A4FF 1,52:1 Nicht bestanden
Aa #00FFD8 auf #00C9FF 1,51:1 Nicht bestanden
Aa #B2BEF7 auf #00A4FF 1,50:1 Nicht bestanden
Aa #00A4FF auf #71828B 1,47:1 Nicht bestanden
Aa #7B9490 auf #71718A 1,46:1 Nicht bestanden
Aa #B2BEF7 auf #00FFD8 1,40:1 Nicht bestanden
Aa #00C9FF auf #00A4FF 1,39:1 Nicht bestanden
Aa #DEB2F7 auf #00FFD8 1,38:1 Nicht bestanden
Aa #8CB28C auf #7B9490 1,37:1 Nicht bestanden
Aa #EEF3F7 auf #B2D6F7 1,36:1 Nicht bestanden
Aa #0072FF auf #7B9490 1,34:1 Nicht bestanden
Aa #DEB2F7 auf #8CB28C 1,33:1 Nicht bestanden
Aa #B2BEF7 auf #8CB28C 1,31:1 Nicht bestanden
Aa #B2D6F7 auf #00C9FF 1,28:1 Nicht bestanden
Aa #7B9490 auf #71828B 1,23:1 Nicht bestanden
Aa #00C9FF auf #8CB28C 1,22:1 Nicht bestanden
Aa #00A4FF auf #7B9490 1,20:1 Nicht bestanden
Aa #B2D6F7 auf #B2BEF7 1,19:1 Nicht bestanden
Aa #71828B auf #71718A 1,19:1 Nicht bestanden
Aa #B2D6F7 auf #00FFD8 1,18:1 Nicht bestanden
Aa #B2D6F7 auf #DEB2F7 1,17:1 Nicht bestanden
Aa #EEF3F7 auf #00FFD8 1,15:1 Nicht bestanden
Aa #00A4FF auf #8CB28C 1,14:1 Nicht bestanden
Aa #DEB2F7 auf #00C9FF 1,09:1 Nicht bestanden
Aa #0072FF auf #71828B 1,09:1 Nicht bestanden
Aa #0072FF auf #71718A 1,09:1 Nicht bestanden
Aa #B2BEF7 auf #00C9FF 1,07:1 Nicht bestanden
Aa #B2BEF7 auf #DEB2F7 1,02:1 Nicht bestanden

Ähnliche Paletten

#E3FDFD #CBF1F5 #A6E3E9 #71C9CE
4 Farben
#F4EEFF #DCD6F7 #A6B1E1 #424874
4 Farben
#B1B2FF #AAC4FF #D2DAFF #EEF1FF
4 Farben
#6096B4 #93BFCF #BDCDD6 #EEE9DA
4 Farben
#A8D8EA #AA96DA #FCBAD3 #FFFFD2
4 Farben
#DEFCF9 #CADEFC #C3BEF0 #CCA8E9
4 Farben
#F7FBFC #D6E6F2 #B9D7EA #769FCD
4 Farben
#C4DFDF #D2E9E9 #E3F4F4 #F8F6F4
4 Farben